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
