[TUTs] Đăng nhập nhanh

  Bài viết hay nhất1
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
[TUTs] Đăng nhập nhanh Untitl10

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ài viết hay nhất2
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.
  Bài viết hay nhất3
đã cập nhật!
The author of this message was banned from the forum - See the message
  Bài viết hay nhất5
Thêm Css vào cho đẹp đi chủ thớt
  Bài viết hay nhất6
You cannot reply to topics in this forum