[TUTORIAL] Login com controle de contas

Criação da página HTML

Código:

<!--
DESENVOLVIDO POR ANGE TUTEUR
DISTRIBUIÇÃO PROIBIDA SEM O CONSENTIMENTO DO AUTOR
 --> <style type="text/css">/* CONTÊINERES E CONFIGURAÇÃO GERAL */
body { overflow:hidden; }
#fa_form_container { color:#666; font-size:12px; font-family:Arial, sans-serif; background:#FFF; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; overflow:auto; }
#fa_form_container a { color:#69C !important; }
#fa_form_container a:hover { color:#369 !important; }
.fa_login_maintitle { font-size:24px; font-weight:bold; text-align:center; text-transform:uppercase; margin:20px 0; }
.fa_login_maintitle img { vertical-align:-5px; height:30px; margin-right:6px; }
.fa_login_title { text-align:center; margin:30px 0; color:#666; font-size:28px; font-weight:bold; font-family:Arial, sans-serif; }
.fa_login_desc { font-size:16px; text-align:center; margin:10px 0; }
.fa_form_wrap { text-align:center; background:#EEE; border:1px solid #DDD; box-shadow:0 6px 12px rgba(0, 0, 0, 0.1); border-radius:3px; padding:30px 6px; width:300px; margin:30px auto; overflow:hidden; position:relative; transition:250ms; }
.fa_login_row { margin:10px 0; }
.fa_form_links { text-align:center; }
.fa_login_origin { font-size:12px; position:fixed; bottom:10px; right:10px; z-index:-1; }
.fa_login_origin a { font-weight:bold; }

/* NOME DE USUÁRIO E AVATAR */
.fa_login_avatar { background:#FFF; border:1px solid #DDD; border-radius:100px; padding:2px; display:inline-block; width:100px; height:100px; overflow:hidden; position:relative; }
.fa_login_avatar img { height:100px; width:100px; border-radius:100px; }
#fa_avatar_real { background:#FFF; position:absolute; top:50px; left:50px; right:2px; bottom:2px; height:0; width:0; transition:linear 150ms; }
#fa_avatar_real.avatar_visible { top:2px; left:2px; height:100px; width:100px; }
.fa_login_username { font-size:16px; font-weight:bold; }

/* BOTÕES E CAIXAS DE TEXTO */
.fa_login_button { color:#69C; background:none; border:1px solid #69C; border-radius:3px; font-size:16px; font-weight:bold; font-family:Arial, sans-serif; display:block; height:30px; line-height:30px; width:240px; margin:10px auto; transition:250ms; outline:none; cursor:pointer; }
.fa_login_button:hover { color:#FFF; background:#69C; }
.fa_login_input { color:#666; background:#FFF; border:1px solid #CCC; border-radius:3px; padding: 0 3px; height:30px; width: 232px; outline:none; }
.fa_login_input:focus { border-color:#69C; }

/* SLIDES DE FORMULÁRIO E BOTÃO VOLTAR */
.fa_form_slide { position:absolute; width:100%; transition:300ms; }
#fa_login_back { position:absolute; top:30px; left:40px; opacity:0; visibility:hidden; transition:250ms; }
#fa_login_back.fa_login_visible { opacity:1; visibility:visible; }


/* LISTA DE CONTAS */
#account_list { background:#EEE; position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; }
.account_list_row { font-size:16px; text-align:left; width:80%; margin:10px auto; position:relative; }
.account_list_inner { background:#FFF; border:1px solid #DDD; border-radius:3px; padding:3px; width:80%; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account_list_inner:hover { background:#FFD }
.account_list_avatar { height:40px; width:40px; vertical-align:middle; margin-right:3px; }
#fa_form_container a.account_list_delete { font-size:30px; color:#F33 !important; background:#FFF; border:1px solid #F33; border-radius:100px; width:20px; height:20px; line-height:22px; text-align:center; position:absolute; margin-top:-10px; top:50%; right:0; display:block; overflow:hidden; }
#fa_form_container a.account_list_delete:hover { color:#333 !important; border-color:#333; }

/* CAMPOS OCULTOS */
.logged_out #fa_form_logout, .logged_in #fa_form_login, .noscript #fa_form_login, .noscript #fa_form_logout, #account_list.accounts_hidden { display:none }</style>
<div class="logged_out noscript" id="fa_form_container">
   
  <h1 class="fa_login_maintitle">
      <a target="_blank" href="http://www.forumeiros.com"><img src="http://im0.all-up.com/static/images/sigle.png" /><span style="color:#39C;">Forum</span><span style="color:#333;">eiros.com</span></a>
  </h1>
   
  <!--  START_NOSCRIPT_LOGIN_FORM  -->  <noscript>    <form action="/login" method="post">      <h2 class="fa_login_title">Log in</h2>      <p class="fa_login_desc">Por favor, faça conecte-se para acessar o fórum</p>      <div class="fa_form_wrap">        <div class="fa_login_row">          <input id="fa_login_username" class="fa_login_input" type="text" name="username" placeholder="Seu nome de usuário"/>        </div>                  <div class="fa_login_row">          <input id="fa_login_password" class="fa_login_input" type="password" name="password" placeholder="Senha"/>        </div>                  <div class="fa_login_row">          <input class="fa_login_button" type="submit" name="login" value="Entrar"/>                        <div style="width:240px;margin:auto;">            <div style="float:left;">              <label for="fa_autologin"><input id="fa_autologin" type="checkbox" name="autologin"/> Permanecer conectado</label>            </div>                            <div style="float:right;">              <a href="/profile?mode=sendpassword">Esqueci minha senha</a>            </div>                            <div class="clear"></div>          </div>        </div>      </div>              <div class="fa_form_links">        <div class="fa_login_row">          <a href="/register">Criar uma conta</a>        </div>        <div class="fa_login_row">          <a href="/login#login_classic">Log-in clássico</a> | <a href="/login?logout=true#login_classic">Sair</a>        </div>      </div>    </form>  </noscript> 
  <!--  END_NOSCRIPT_LOGIN_FORM  --> 
  <!--  START_LOGIN_FORM  --> 
  <form method="post" action="/login" id="fa_form_login">
         
      <h2 class="fa_login_title">
        Log in
      </h2>
         
      <p class="fa_login_desc">
        Por favor, conecte-se para ter acesso a <script type="text/javascript">document.write('<a href="http://' + window.location.host + '">' + window.location.host + '</a>');</script>
      </p>
           
      <div style="height:210px;" class="fa_form_wrap" id="fa_form_wrap">
               
        <div class="fa_login_row">
                      <a href="#" id="fa_login_back">Voltar</a>          <span class="fa_login_avatar">            <img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" />            <img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" id="fa_avatar_real" />          </span>       
        </div>
                       
        <!--  START_STEP_1  -->       
        <div style="left:0px;" class="fa_form_slide" id="login_step_1">
                     
            <div class="fa_login_row">
                          <input placeholder="Insira seu nome de usuário" name="username" type="text" class="fa_login_input" id="fa_login_username" />           
              <p style="color:#F00;display:none;" class="fa_login_row" id="fa_error_username">
                  Por favor, insira seu nome de usuário.
              </p>
                       
            </div>
                             
            <div class="fa_login_row">
                          <input value="Próximo" type="button" class="fa_login_button" id="fa_button_next" />         
            </div>
                   
        </div>
               
        <!--  END_STEP_1  -->               
        <!--  START_STEP_2  -->       
        <div style="left:400px;" class="fa_form_slide" id="login_step_2">
                     
            <div class="fa_login_row">
                          <span class="fa_login_username"></span>         
            </div>
                             
            <div class="fa_login_row">
                          <input placeholder="Senha" name="password" type="password" class="fa_login_input" id="fa_login_password" />           
              <p style="color:#F00;width:240px;margin:10px auto;display:none;" class="fa_login_row" id="fa_error_password">
                  Nome de usuário ou senha inválida.
              </p>
                       
            </div>
                             
            <div class="fa_login_row">
                          <input value="Entrar" name="login" type="submit" class="fa_login_button" />                       
              <div style="width:240px;margin:auto;">
                               
                  <div style="float:left;">
                                    <label for="fa_autologin"><input name="autologin" type="checkbox" id="fa_autologin" /> Permanecer conectado</label>             
                  </div>
                                             
                  <div style="float:right;">
                                    <a href="/profile?mode=sendpassword">Esqueci minha senha</a>             
                  </div>
                                             
                  <div class="clear">
                  </div>
                             
              </div>
                       
            </div>
                   
        </div>
               
        <!--  END_STEP_2  -->     
      </div>
                 
      <div class="fa_form_links">
               
        <div class="fa_login_row" id="account_list_holder">
        </div>
               
        <div class="fa_login_row">
                      <a href="/register">Criar um conta</a>       
        </div>
               
        <div class="fa_login_row">
                      <a href="/login#login_classic">Login clássico</a>       
        </div>
             
      </div>
       
  </form>
   
  <!--  END_LOGIN_FORM  --> 
  <!--  START_LOGOUT_FORM  --> 
  <form method="post" action="/login?logout=true" id="fa_form_logout">
         
      <h2 class="fa_login_title">
        Sair
      </h2>
         
      <p class="fa_login_desc">
        Você está prestes a sair de <script type="text/javascript">document.write('<a href="http://' + window.location.host + '">' + window.location.host + '</a>');</script>
      </p>
           
      <div class="fa_form_wrap">
               
        <div class="fa_login_row">
                      <span class="fa_login_avatar"><script type="text/javascript">document.write(_userdata.avatar);</script></span>       
        </div>
                       
        <div class="fa_login_row">
                      <span class="fa_login_username"><script type="text/javascript">document.write('<a href="/u' + _userdata.user_id + '" target="_blank">' + _userdata.username + '</a>');</script></span>       
        </div>
                       
        <div class="fa_login_row">
            Tem certeza que deseja sair?
        </div>
               
        <div class="fa_login_row">
                      <input value="Sim" name="confirm" type="submit" class="fa_login_button" />          <input value="Não" name="cancel" type="submit" class="fa_login_button" />          <script type="text/javascript">//<![CDATA[
          _userdata.session_logged_in && (function() {
            var logout = document.getElementById('logout'),
                container = document.getElementById('fa_form_container'),
                form_logout = document.getElementById('fa_form_logout');
                 
            document.title = 'Log out';
            container.className = 'logged_in';
           
            /* if the default login link is present we can get the data from the href attribute. ( FASTER )
            ** otherwise we'll need to send an AJAX request to the login page for the data ( SLOWER ) */
            if (logout) {
              var tid = logout.href.replace(/.*?tid=(.*?)&.*/, '$1'),
                  key = logout.href.replace(/.*?key=(.*?)$/, '$1');
                   
              form_logout.action += '&tid=' + tid;
              document.write('<input type="hidden" name="tid" value="' + tid + '"><input type="hidden" name="key" value="' + key + '">');
            } else {
              $.get('/login?logout=true&change_version=prosilver', function(d) {
                var info = $('.submit-buttons', d)[0];
                if (info) {
                  info.style.display = 'none';
                  form_logout.appendChild(info);
                  form_logout.action += '&tid=' + form_logout.tid.value;
                }
              });
            }
          }());
          //]]></script>       
        </div>
             
      </div>
         
  </form>
     
  <!--  END_LOGOUT_FORM  -->         
</div>
 <script type="text/javascript">//<![CDATA[
!_userdata.session_logged_in && (function() {
  document.title = 'Entrar';

  window.fa_form_login = {
    redirect : my_getcookie('fa_login_form_redirect') || '/forum', /* change redirection page after login */
    submitting : false, /* true if posting login info */
   
    accountList : document.createElement('DIV'), /* stores logged accounts */
 
    /* move onto the password step
      pass along the user id to get the user avatar faster */
    next : function(id) {
      var username = document.getElementById('fa_login_username');
     
      if (username.value) {
        var avatar = document.getElementById('fa_avatar_real'),
            row, accounts, i;
       
       
        fa_form_login.clearError('username');
        username.value = username.value.replace(/^\s+|\s+$/g, ''); // trim extra white space
       
        // check if the username is already stored
        if (!id && storage && storage.fa_accounts && window.JSON) {
          accounts = JSON.parse(storage.fa_accounts);
          for (i in accounts) {
            if (username.value.toLowerCase() == accounts[i].username.toLowerCase()) {
              id = i;
              break;
            }
          }
        }
       
        row = id ? null : document.getElementById('account_user_' + id);
       
        // check if account row is created to get an avatar that's already loaded
        if (row) avatar.src = row.getElementsByTagName('IMG')[0].src;
        else {
          $.get(id ? '/ajax/index.php?f=m&user_id=' + id : '/profile?mode=viewprofile&u=' + username.value, function(d) {
            var ava = id ? $('.tooltip-content img', d)[0] : $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', d)[0];
            avatar.src = ava ? ava.src : 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
            avatar.className = 'avatar_visible';
          });
        }
     
        $('.fa_login_username').html('<a href="/profile?mode=viewprofile&u=' + username.value + '" target="_blank">' + username.value + '</a>');
       
        document.getElementById('fa_form_wrap').style.height = '260px';
        document.getElementById('login_step_1').style.left = '-400px';
        document.getElementById('login_step_2').style.left = '0px';
        document.getElementById('fa_login_back').className = 'fa_login_visible';
       
        window.setTimeout(function() {
          document.getElementById('fa_login_password').focus();
        }, 300);
      } else {
        fa_form_login.error('username');
      }
    },
   
    /* move back to the username step */
    back : function() {
      fa_form_login.clearError('password');
     
      document.getElementById('fa_login_username').focus();
      document.getElementById('fa_avatar_real').className = '';
     
      document.getElementById('fa_form_wrap').style.height = '210px';
      document.getElementById('login_step_1').style.left = '0px';
      document.getElementById('login_step_2').style.left = '400px';
      document.getElementById('fa_login_back').className = '';
      return false;
    },
   
    /* submit the login form */
    submit : function() {
      if (!fa_form_login.submitting) {
        fa_form_login.submitting = true;
       
        document.getElementById('fa_form_wrap').style.height = '260px';
        fa_form_login.clearError('password');
       
        $.post('/login', $('#fa_form_login').serialize() + '&login=true', function(d) {
          fa_form_login.submitting = false;
          if (/_userdata\["session_logged_in"\] = 1/.test(d)) {
            var storage = window.localStorage,
                id = d.match(/_userdata\["user_id"\] = (\d+)/)[1];
           
            /* store the user_id and username for next login */
            if (storage && window.JSON) {
              var accounts = storage.fa_accounts ? JSON.parse(storage.fa_accounts) : {}, i;
             
              for (i in accounts) accounts[i].last_active = 0;
             
              accounts[id] = {
                last_active : 1, /* last active account will be marked with a 1 */
                username : document.getElementById('fa_login_username').value
              };
             
              storage.fa_accounts = JSON.stringify(accounts);
            }
           
            my_setcookie('fa_login_form_redirect', '');
            window.location.href = fa_form_login.redirect;
          } else {
            fa_form_login.error('password');
          }
        });
      }
      return false;
    },
   
    /* throw a form error and display the error text */
    error : function(type) {
      var error = document.getElementById('fa_error_' + type),
          wrap = document.getElementById('fa_form_wrap');
     
      if (/none/.test(error.style.display)) {
        document.getElementById('fa_login_' + type).style.borderColor = '#F00';
     
        error.style.display = 'block';
        wrap.style.height = +wrap.style.height.replace(/px/, '') + error.getBoundingClientRect().height + 'px';
      }
    },
   
    /* clear the specified error */
    clearError : function(type) {
      document.getElementById('fa_error_' + type).style.display = 'none';
      document.getElementById('fa_login_' + type).style.borderColor = '';
    },
   
    /* delete a profile from the account list */
    deleteProfile : function(id) {
      var storage = window.localStorage, accounts = JSON.parse(storage.fa_accounts),
          row = document.getElementById('account_user_' + id),
          i;

      delete accounts[id];
      for (i in accounts) {
        accounts[i].last_active = 1;
        break;
      }
      storage.fa_accounts = JSON.stringify(accounts);
     
      row.parentNode.removeChild(row);
      if (!fa_form_login.accountList.firstChild) fa_form_login.accountList.innerHTML = '<div class="fa_login_row">Não existem contas armazenadas.</div><div class="fa_login_row"><a href="javascript:fa_form_login.toggleAccounts();">Retornar ao login</a></div>';
    },
   
    /* create the profile rows based onto the accounts you logged into */
    createProfile : function(id, o) {
      var row = document.createElement('DIV');
      row.id = 'account_user_' + id;
      row.className = 'account_list_row';
      row.innerHTML = '<div class="account_list_inner"><img class="account_list_avatar" src="http://2img.net/i/fa/invision/pp-blank-thumb.png"/> <span class="account_list_username">' + o.username + '</span></div><a class="account_list_delete" title="Remove account" href="javascript:fa_form_login.deleteProfile(\'' + id + '\');">X</a>';
      row.firstChild.onclick = function() {
        fa_form_login.toggleAccounts();
        document.getElementById('fa_login_username').value = $('.account_list_username', this).text();
        fa_form_login.next(this.parentNode.id.slice(13));
      };
     
      $.get('/ajax/index.php?f=m&user_id=' + id, function(d) {
        var ava = $('.tooltip-content img', d)[0];
        if (ava) row.getElementsByTagName('IMG')[0].src = ava.src;
      });
     
      fa_form_login.accountList.appendChild(row);
    },
   
    /* basic setup of the account list */
    initAccountList : function() {
      var a = document.createElement('A'),
          holder = document.getElementById('account_list_holder');
     
      a.href = '#';
      a.innerHTML = 'Entre com outra conta';
      a.onclick = fa_form_login.toggleAccounts;
     
      fa_form_login.accountList.id = 'account_list';
      fa_form_login.accountList.className = 'accounts_hidden';
     
      document.getElementById('fa_form_wrap').appendChild(fa_form_login.accountList);
      holder.appendChild(a);
    },
   
    /* toggle display of the account list */
    toggleAccounts : function() {
      if (/accounts_hidden/.test(fa_form_login.accountList.className)) {
        fa_form_login.accountList.className = '';
        document.getElementById('account_list_holder').firstChild.innerHTML = 'Retornar ao login';
      } else {
        fa_form_login.accountList.className = 'accounts_hidden';
        document.getElementById('account_list_holder').firstChild.innerHTML = 'Escolher outra conta';
      }
     
      if (!fa_form_login.accountList.firstChild) fa_form_login.accountList.innerHTML = '<div class="fa_login_row">Você não possui contas armazenadas.</div><div class="fa_login_row"><a href="javascript:fa_form_login.toggleAccounts();">Retornar ao login</a></div>';
      return false;
    }
  };
 
  var container = document.getElementById('fa_form_container'),
      username = document.getElementById('fa_login_username'),
      storage = window.localStorage;
 
  container.className = 'logged_out';
 
  /* move forward in the form when ENTER is pressed */
  username.onkeydown = function(e) {
    if (e.keyCode && e.keyCode == 13) {
      fa_form_login.next();
      return false;
    }
  };
   
  /* if the specified data is useable we'll go through the stored accounts in localStorage and form a list for switching */
  if (storage && storage.fa_accounts && window.JSON) {
    var accounts = JSON.parse(storage.fa_accounts),
        i, last_active = false;
   
    for (i in accounts) {
      if (accounts[i].last_active) {
        last_active = true;
        username.value = accounts[i].username;
        fa_form_login.next(i);
      }
       
      fa_form_login.createProfile(i, accounts[i]);
    }
   
    fa_form_login.initAccountList();
    !last_active && username.focus();
  } else username.focus();
 
  document.getElementById('fa_button_next').onclick = function() {
    fa_form_login.next();
  };
  document.getElementById('fa_login_back').onclick = fa_form_login.back;
  document.getElementById('fa_form_login').onsubmit = fa_form_login.submit;
}());
//]]></script>

Painel de Controle Módulos HTML e Javascript Gestão das páginas HTML

(Clique na imagem para aumentar)

Título - Pode colocar o título que quiser para a página, não irá afetar em nada.

Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente sim. Caso marque-a, o código não irá funcionar adequadamente.

Usar esta página como página inicial? - Esta também deverá estar marcada como não, apesar de que não influencia em nada o código.

Código HTML - Coloque aqui o código que trabalhamos no item anterior.

(Clique na imagem para aumentar)

(Clique na imagem para aumentar)

Instalação do javascript

Painel de Controle Módulos HTML e Javascript Gestão das páginas Javascript Criar um novo javascript

(clique na imagem para aumentar)

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

Código:

(function() {
  var html_page = '{LINK_DA_PAGINA_HTML}',
      link_change = true,
      redirect = true;
 
  $(function() {
    var regex = new RegExp(html_page);
 
    // link change
    if (link_change && !regex.test(window.location.href)) {
      $('a[href^="/login"], a[href^="http://' + window.location.host + '/login"]').attr('href', html_page);
    }
 
    // redirect to classic if login page isn't available
    if (!document.getElementById('fa_form_container') && regex.test(window.location.href)) {
      window.location.href = '/login#login_classic';
    }
  });
 
  // login redirection
  // saves redirect location so you're taken to the correct page upon login
  if (/\/login\?redirect/.test(window.location.href)) {
    my_setcookie('fa_login_form_redirect', window.location.search.replace(/.*?redirect=(.*?)(?:&|$)/, '$1'));
  }
 
  // redirect
  if (redirect && /\/login/.test(window.location.href)) {
    if (/login_classic/.test(window.location.hash) || /admin=1/.test(window.location.href)) return;
    window.location.href = html_page;
  }
}());

• Resultado do tutorial;