[TUTs] Đăng nhập nhanh

Giới thiệu
Ứng dụng giúp kiểm tra và đăng nhập nhanh tài khoản người dùng, không chuyển trang.

Bản mẫu


Cài đặt
Admin -> Modules -> HTML & Javascript -> Javascript codes management -> Create a new javascript.
Title: popup-login (tùy ý)
Placement: bỏ chọn tất cả
Javascript code:

Code:

var _lh = typeof _lh == 'object' ? _lh : {};
_lh.requestlogin = function(url, data, start, callback) { // hàm dùng để gửi yêu cầu kiểm tra tài khoản
    var url = typeof url == 'string' ? url : null,
        data = typeof data == 'object' ? data : null;
        start = typeof start == 'function' ? start : function() {},
       callback = typeof callback == 'function' ? callback : function() {};
    if ((typeof data.username != 'string' && typeof data.username != 'number') || (typeof data.password != 'string' && typeof data.password != 'number')) {
        callback(false, null, null);
        return false;
    } else if (!(/^([a-zA-Z0-9\_\.]{4,40})$/.test(data.username)) || !(/^([\S\s]{4,25})$/.test(data.password))) {
        callback(false, null, null);
        return false;
    }
    data.remember = typeof data.remember == 'number' && (/^(0|1)$/).test(data.remember) ? data.remember : 0;
    var input = {
        'username': data.username,
        'password': data.password,
        'autologin': data.remember,
        'login': ''
    };
    var data = new FormData();
    for (var label in input) {
        var value = input[label];
        data.append(label, value);
    }
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200 && xhr.responseText != null && new RegExp(!/<[a-z][\s\S]*>/i).test(xhr.responseText)) {
                var objMatch = ((xhr.responseText).replace(/((\s+)|(\n+))/g, '')).match(/(((if\(typeof\(_userdata\)\=\="undefined"\)var\_userdata\=newObject\(\)\;\_userdata\["session_logged_in"\]\=)(0|1)(\;))(\_userdata\["username"\]\=")([a-zA-Z0-9]+)("\;)(\_userdata\["user\_id"\]\=)([0-9\-]+)(\;))/i);
                var isLogin = typeof objMatch == 'object' && typeof objMatch[4] == 'string' ? Number(objMatch[4]) : null;
                var userName = typeof objMatch == 'object' && typeof objMatch[7] == 'string' ? objMatch[7] : null;
                var userId = typeof objMatch == 'object' && typeof objMatch[10] == 'string' ? Number(objMatch[10]) : null;
                callback(true, {
                    'login': isLogin,
                    'username': userName,
                    'userid': userId
                }, xhr);
            }
        }
    };
    xhr.open("POST", url + '/login', true);
    xhr.send(data);
    start(xhr);
};
window.onload = function () { // hàm được gọi sau khi nội dung trang được tải
    if (typeof _userdata == "object" && typeof _userdata['session_logged_in'] == "number" && _userdata['session_logged_in'] == 1) {
        return false; // kết thúc tiến trình nếu người dùng đã được đăng nhập
    }
    document.getElementsByTagName("head")[0].innerHTML += "<style type='text/css'>#popup-login * {font:400 12px/1em 'Helvetica Neue',HelveticaNeue,Helvetica,Arial,sans-serif!important;text-decoration:none;outline:0}#popup-login .text:link{color:#888;transition:color .5s ease}#popup-login .textarea>.input{margin:auto;padding:7px 8px;border:1px solid #e2e2e2;border-radius:2px;font-size:12px;color:#666;line-height:1em;outline:0}#popup-login .button{cursor:pointer;padding:6px 10px 8px;background:#F8F8F8;border:1px solid #E0E0E0;border-radius:2px;color:#888;font-size:12px;outline:0;transition:all .5s ease}#popup-login .button:hover{border:1px solid #D8D8D8;box-shadow:0 2px 6px #D5D5D5}#popup-login .button:active{background:#E9E9E9;border:1px solid #D8D8D8;box-shadow:inset 0 0 2px #D5D5D5}#popup-login{z-index:99;position:fixed;top:50px;right:50px;padding:0;width:240px;background:#fff;border:1px solid #DDD;border-top:3px solid #aaa;border-radius:4px}#popup-login>.header{padding:10px 10px 9px;width:calc(100% - 20px);border-bottom:1px solid #e5e5e5;font-size:0}#popup-login>.header>.context{display:inline-block;vertical-align:top;width:calc(100% - 30px)}#popup-login>.header>.context>.text{cursor:pointer;color:#999;font-size:16px;font-weight:700;text-transform:uppercase}#popup-login>.header>.options{display:inline-block;vertical-align:top;width:30px;text-align:right}#popup-login>.header>.options>.close>.icon{margin:-2px 0 0;cursor:pointer;color:#999;font-weight:700;font-size:16px}#popup-login>.body{margin:2px 0 0;background:#fff;border-top:1px solid #e5e5e5}#popup-login>.body>.notify{padding:6px 4px 8px;margin:0 0 2px;text-align:center;border-bottom:1px solid #e5e5e5}#popup-login>.body>.notify>.text{color:#aaa}#popup-login>.body>.form{margin:6px 0 10px}#popup-login>.body>.form>.row{margin:4px auto;width:94%}#popup-login>.body>.form>.row.textarea>.input{width:calc(100% - 18px)}#popup-login>.body>.form>.row.options{font-size:0}#popup-login>.body>.form>.row.options>.remember{display:inline-block;vertical-align:top;width:49%}#popup-login>.body>.form>.row.options>.remember>.checkbox{margin: 3px 0 0;}#popup-login>.body>.form>.row.options>.remember>.text{display:inline-block;vertical-align:top;margin:3px 0 0;color:#888;font-size:12px}#popup-login>.body>.form>.row.options>.forgot{display:inline-block;vertical-align:top;width:50%;text-align:right}#popup-login>.body>.form>.row.options>.forgot>.text{margin:3px 0 0;color:#888;font-size:12px}#popup-login>.body>.form>.row.submit{text-align:center}</style>"; // định hình giao diện cho bảng đăng nhập (css)
    document.getElementsByTagName("body")[0].innerHTML += "<div id='popup-login'><div class='header'><div class='context'><span class='text'>đăng nhập</span></div><div class='options'><div class='close'><div class='icon'>x</div></div></div></div><div class='body'><div class='notify'> <span class='text'>đăng nhập tài khoản thành viên</span> </div><div class='form'><div class='row username textarea'><input class='input'placeholder='tên truy cập' type='text' size='25' maxlength='40'></div><div class='row password textarea'><input class='input' placeholder='mật khẩu' type='password' size='25' maxlength='25'></div><div class='row options'><div class='remember'><input class='checkbox' type='checkbox' checked='checked'><div class='text'>ghi nhớ</div></div><div class='forgot'><div class='text'><a class='text' href='/profile?mode=sendpassword'>quên mật khẩu</a></div></div></div><div class='row submit'><button class='button'>đăng nhập</button></div></div></div><div class='footer'></div></div>"; // mã xây dựng bảng đăng nhập (html)
    // sau khi thêm bảng đăng nhập, bắt đầu thêm các sự kiện.
    var forumUrl = location.origin,
        loginPopup = document.querySelector("#popup-login"),
        loginClose = loginPopup.querySelector(".header > .options > .close > .icon"),
        loginButton = loginPopup.querySelector(".body > .form > .row.submit > .button"),
        loginAction = function () {
        var textNotify = loginPopup.querySelector(".body > .notify > .text"),
            inputUsername = loginPopup.querySelector(".body > .form > .row.username > .input"),
            inputPassword = loginPopup.querySelector(".body > .form > .row.password > .input"),
            checkboxRemember = loginPopup.querySelector(".body > .form > .row.options > .remember > .checkbox");
        // gọi hàm chạy nền để kiểm tra tài khoản
        _lh.requestlogin(forumUrl, {
            'username': (inputUsername.value ? inputUsername.value : null),
            'password': (inputPassword.value ? inputPassword.value : null),
            'remember': (checkboxRemember.checked == true ? 1 : 0)
        }, function () {
            textNotify.textContent = "vui lòng đợi kiểm tra"; // bắt đầu gửi yêu cầu nếu tên đăng nhập và mật khẩu hợp lệ
        }, function(returnValue, data, xhr) {
            // nhận giá trị gửi về
            if (returnValue == true) {
                if (data.login == true) {
                    textNotify.textContent = "* - đăng nhập thành công"; // đăng nhập thành công, chuyển đến trang chủ
                    window.location.href = forumUrl;
                }else {
                    textNotify.textContent = "! - đăng nhập không thành công"; // đăng nhập không thành công, tài khoản hoặc mật khẩu sai
                }
            }else {
                textNotify.textContent = "! - thông tin không hợp lệ";  // tên đăng nhập hoặc tài khoản không hợp lệ
            }
        });
    };
    loginClose.addEventListener('click', function () {
        loginPopup.remove(); // xóa bảng đăng nhập.
    });
    loginButton.addEventListener('click', loginAction);
    document.addEventListener('keypress', function (e) {
        if ((e.keyCode ? e.keyCode : e.which) == 13) {
            loginAction();
        }
    });
};

Sau đó nhấn Submit, ở phần URL của cái cột mình vừa tạo với tên popup-login bạn chép toàn đường dẫn lại (ví dụ: https://devs.forumvi.com/10334.js).

Admin -> Display -> Templates -> General -> overall_header
Thay đường dẫn bằng đường dẫn lúc nảy vừa sao chép và chèn vào trong thẻ <head>.

Code:

<!-- BEGIN switch_user_logged_out --><script src="đường dẫn" type="text/javascript"></script><!-- END switch_user_logged_out -->

Save và Apply.

Chúc bạn thành công!

---

Tags: #html #css ##xhr #login #quicklogin #tuts #js #simple

Bạn ghép bài và viết lại cho hoàn chỉnh, hướng dẫn chi tiết, tạo các đề mục bằng bbcode h2, h3, h4.

đã cập nhật!

Demo : http://8new.forumvi.com
Tài khoảng : 8new
Passs : 8new231

em muốn chèn code đăng nhập của bài viết này thì làm sao đây ? https://devs.forumvi.com/t1589-tuts-ang-nhap-nhanh

Em đã áp dụng thì thấy hok dc rùi

Thêm Css vào cho đẹp đi chủ thớt