Thêm một mẫu đăng nhập nhanh chóng vào thanh công cụ

Plugin này sẽ cho phép bạn thêm một hình thức đăng nhập nhanh chóng vào thanh công cụ, vì vậy bạn có thể nhanh chóng đăng nhập từ bất kỳ trang nào trên diễn đàn Forumotion của bạn.
[You must be registered and logged in to see this link.]
Lưu ý: Các thanh công cụ phải được kích hoạt để sử dụng plugin này. Để kích hoạt thanh công cụ, vào Admin Panel> Modules> Toolbar> Config và kích hoạt thanh công cụ.
1. Installing the JavaScript
Để cài đặt plugin này đi tới Admin Panel> Modules> Quản lý JavaScript mã và tạo ra một kịch bản mới với các thiết lập sau đây.
Title : Quick Login (Toolbar)
Placement : In all the pages

Code:

(function() {
  var lang = {
    title : 'Please enter your username and password to log in.',
    username : 'Username : ',
    password : 'Password : ',
    automatic : 'Log in automatically : ',
    login : 'Log in',
    register : 'Register',
    forgot : 'I forgot my password',
 
    redirect : window.location.href // page the user is redirected to upon login
  };
 
  // quick login theme
  document.write('<style type="text/css">#fa_quick_login{color:#333;font-size:13px;font-family:Arial,Verdana,Sans-serif;background:#FFF;border:1px solid #CCC;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.175);margin-top:20px;position:fixed;z-index:40000;width:400px}#fa_quick_login:before{content:url(http://i21.servimg.com/u/f21/18/21/41/30/arr10.gif);position:absolute;right:15px;top:-10px}#fa_right a.rightHeaderLink[href$="/login"]{padding:0 6px}#fa_right a.rightHeaderLink.fa_login_actif{color:#333!important;background-color:#FFF!important}#fa_quick_login a.gensmall{color:#069}#fa_quick_login a.gensmall:hover{color:#333}#fa_quick_login input{color:#333;background:#FFF;border:1px solid #CCC;border-radius:3px;padding:3px;margin:2px;cursor:text}#fa_quick_login input:hover{border-color:#39C}#fa_quick_login input:focus{border-color:#333;outline:0}#fa_quick_login input.mainoption{color:#39C;border:1px solid #39C;background:0 0;font-weight:700;display:block;width:100%;padding:6px 3px;margin-top:10px;cursor:pointer;transition:300ms}#fa_quick_login input.mainoption:hover{color:#FFF;background:#39C}#fa_quick_login input.mainoption:focus{color:#FFF;background:#8B5;border-color:#8B5}#fa_quick_login table.forumline,#fa_quick_login td,#fa_quick_login th,#fa_quick_login tr{border:none!important;background:0 0!important;border-radius:0!important;white-space:normal}#fa_quick_login .thHead{color:#333;font-size:13px;font-family:"Trebuchet MS",Arial,Verdana,Sans-serif}#fa_quick_login td{font-size:13px;padding:3px}</style>');
 
  $(function() {
    if (!_userdata.session_logged_in && _userdata.activate_toolbar) {
      var container = document.createElement('DIV');
      container.id = 'fa_quick_login';
      container.style.display = 'none';
      container.innerHTML = '<form action="/login" method="post" name="form_login"><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="4" align="center"><tbody><tr><th colspan="3" class="thHead" nowrap="nowrap" height="25">' + lang.title + '</th></tr><tr><td width="100%" align="center" class="row1"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="row1 align_gauche"><table width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="align_droite" width="50%"><span class="gen">' + lang.username + '</span></td><td width="50%"><input type="text" name="username" value="" size="25" maxlength="40"></td></tr><tr><td class="align_droite"><span class="gen">' + lang.password + '</span></td><td><input type="password" name="password" size="25" maxlength="32"></td></tr><tr align="center"><td colspan="2"><span class="gen">' + lang.automatic + '<input type="checkbox" name="autologin" checked="checked"></span></td></tr><tr align="center"><td colspan="2"><input type="hidden" name="redirect" value="' + lang.redirect + '"><input type="hidden" name="query" value=""><input type="hidden" name="tt" value="1"><input class="mainoption" type="submit" name="login" value="' + lang.login + '"></td></tr><tr align="center"><td colspan="2"><br><span class="gensmall"><a class="gensmall" href="/register">' + lang.register + '</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="gensmall" href="/profile?mode=sendpassword">' + lang.forgot + '</a></span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></form>';
      document.body.appendChild(container);
 
      $(function() {
        var right = document.getElementById('fa_right');
 
        if (right) {
          right.firstChild.onclick = function() {
            var login = document.getElementById('fa_quick_login'), offset = this.getBoundingClientRect(), loffset;
 
            if (login) {
              if (/none/.test(login.style.display)) {
                login.style.display = '';
             
                loffset = login.getBoundingClientRect();
                login.style.top = offset.top + 30 + 'px';
                login.style.left = offset.left - ((loffset.right - loffset.left) - (offset.right - offset.left)) + 'px';
             
                login.getElementsByTagName('FORM')[0].username.focus();
                this.className += ' fa_login_actif';
              } else {
                login.style.display = 'none';
                this.className = this.className.replace(/fa_login_actif/, '');
              }
            }
         
            return false;
          };
        }
      });
    }
  });
}());

Lưu kịch bản và bây giờ bạn sẽ có một màn hình đăng nhập nhanh chóng khi bạn bấm vào nút "login" trên thanh công cụ của bạn! Nụ cười
Nếu bạn muốn thực hiện bất kỳ sửa đổi, xin vui lòng xem phần tiếp theo.
2. Modifications
Ngôn ngữ: Ở đầu của kịch bản là một số thiết lập chung cho việc thay đổi ngôn ngữ hoặc từ ngữ của văn bản. Đây là những lựa chọn liên quan đến văn bản mà bạn có thể thay đổi hoặc dịch cho bất cứ điều gì bạn muốn:

Code:

    title : 'Please enter your username and password to log in.',
    username : 'Username : ',
    password : 'Password : ',
    automatic : 'Log in automatically : ',
    login : 'Log in',
    register : 'Register',
    forgot : 'I forgot my password',

Lưu ý: Khi sử dụng dấu ngoặc đơn bên trong chuỗi, hãy chắc chắn để thoát khỏi chúng bằng các ký tự thoát. (\) Vì vậy, thay vì 'Đừng' bạn nên viết 'Don \' t '
Tuy nhiên, lựa chọn cuối cùng - chuyển hướng - cho phép bạn thay đổi các trang web mà bạn đang chuyển hướng đến khi đăng nhập. Theo mặc định, giá trị của tùy chọn này là window.location.href đó là trang hiện tại bạn đang ở trên. Bạn có thể thay thế này với một chuỗi nếu bạn muốn chuyển hướng con người đến một trang cụ thể; cổng thông tin ví dụ:

Code:

    redirect : '/portal' // page the user is redirected to upon login

Chủ đề: Các chủ đề để đăng nhập nhanh chóng được đưa vào kịch bản. Nếu bạn có một chủ đề tối cho diễn đàn của bạn và muốn thay đổi chủ đề đăng nhập nhanh chóng, tìm thấy một phần kịch bản này:

Code:

  // quick login theme
  document.write('<style type="text/css">#fa_quick_login{color:#333;font-size:13px;font-family:Arial,Verdana,Sans-serif;background:#FFF;border:1px solid #CCC;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.175);margin-top:20px;position:fixed;z-index:40000;width:400px}#fa_quick_login:before{content:url(http://i21.servimg.com/u/f21/18/21/41/30/arr10.gif);position:absolute;right:15px;top:-10px}#fa_right a.rightHeaderLink[href$="/login"]{padding:0 6px}#fa_right a.rightHeaderLink.fa_login_actif{color:#333!important;background-color:#FFF!important}#fa_quick_login a.gensmall{color:#069}#fa_quick_login a.gensmall:hover{color:#333}#fa_quick_login input{color:#333;background:#FFF;border:1px solid #CCC;border-radius:3px;padding:3px;margin:2px;cursor:text}#fa_quick_login input:hover{border-color:#39C}#fa_quick_login input:focus{border-color:#333;outline:0}#fa_quick_login input.mainoption{color:#39C;border:1px solid #39C;background:0 0;font-weight:700;display:block;width:100%;padding:6px 3px;margin-top:10px;cursor:pointer;transition:300ms}#fa_quick_login input.mainoption:hover{color:#FFF;background:#39C}#fa_quick_login input.mainoption:focus{color:#FFF;background:#8B5;border-color:#8B5}#fa_quick_login table.forumline,#fa_quick_login td,#fa_quick_login th,#fa_quick_login tr{border:none!important;background:0 0!important;border-radius:0!important;white-space:normal}#fa_quick_login .thHead{color:#333;font-size:13px;font-family:"Trebuchet MS",Arial,Verdana,Sans-serif}#fa_quick_login td{font-size:13px;padding:3px}</style>');

và để làm cho nó tối, thay thế ở trên bằng những điều sau đây:

Code:

  // quick login theme
  document.write('<style type="text/css">#fa_quick_login{color:#FFF;font-size:13px;font-family:Arial,Verdana,Sans-serif;background:#333;border:1px solid #111;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.175);margin-top:20px;position:fixed;z-index:40000;width:400px}#fa_quick_login:before{content:url(http://i21.servimg.com/u/f21/18/21/41/30/arrd10.gif);position:absolute;right:15px;top:-10px}#fa_right a.rightHeaderLink[href$="/login"]{padding:0 6px}#fa_right a.rightHeaderLink.fa_login_actif{color:#333!important;background-color:#FFF!important}#fa_quick_login a.gensmall{color:#CCC}#fa_quick_login a.gensmall:hover{color:#FFF}#fa_quick_login input{color:#FFF;background:#111;border:1px solid #444;border-radius:3px;padding:3px;margin:2px;cursor:text}#fa_quick_login input:hover{border-color:#666}#fa_quick_login input:focus{border-color:#999;outline:0}#fa_quick_login input.mainoption{color:#999;border:1px solid #999;background:0 0;font-weight:700;display:block;width:100%;padding:6px 3px;margin-top:10px;cursor:pointer;transition:300ms}#fa_quick_login input.mainoption:hover{color:#333;background:#999}#fa_quick_login input.mainoption:focus{color:#333;background:#FFF;border-color:#FFF}#fa_quick_login table.forumline,#fa_quick_login td,#fa_quick_login th,#fa_quick_login tr{border:none!important;background:0 0!important;border-radius:0!important;white-space:normal}#fa_quick_login .thHead{color:#FFF;font-size:13px;font-family:"Trebuchet MS",Arial,Verdana,Sans-serif}#fa_quick_login td{font-size:13px;padding:3px}</style>');

Mà sẽ cung cấp cho bạn điều này:
[You must be registered and logged in to see this link.]
Các chủ đề trong kịch bản được minified, nhưng bạn có thể tìm thấy những CSS unminified cho chủ đề tại đây, ký hiệu là "login_theme_xxx.css" vì vậy nó dễ dàng hơn để chỉnh sửa. Nếu bạn muốn, bạn có thể loại bỏ các document.write () phần và thêm các chủ đề vào CSS của bạn. Tuy nhiên, nếu bạn muốn giữ lại các chủ đề trong kịch bản, bạn có thể rút gọn CSS với công cụ này: [You must be registered and logged in to see this link.]