[Tutorial] Pagina de Login - Switch Account

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

avatar
Admin
Administrador
Tempo Online : 156d 5h 47m 56s
Mensagens : 693
Reputação : 3
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Ter Out 04, 2016 9:54 pm

Informações:
Autor:
Ange Tuteur - Tradução por Zump
Funcionalidade: Todas as versões




Acesse:
Painel de Controle Modulos Html e Javascript Gestão das paginas html
E Crie uma nova pagina html com o titulo : Login, usando o inicio e fim do fórum, com esse código:
Código:
<!--   
DESENVOLVIDO POR ANGE TUTEUR
NÃO DISTRIBUIR SEM CONSENTIMENTO DO AUTOR
ORIGEM http://fmdesign.forumotion.com/t420-multi-step-login-form#3371
    --> <style type="text/css">/* EMBALAGENS 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; }

/* AVATAR E NOME DA CONTA */
.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 INPUT */
.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; }

/* FORMULÁRIO DE SLIDES E VOLTAR BOTÃO */
.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; }

/* ocultar campos */
.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 id="fa_form_container" class="logged_out noscript">
             
  <h1 class="fa_login_maintitle">
              <a href="http://www.forumotion.com" target="_blank"><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">            <p class="fa_login_desc">Por favor, faça o login para obter acesso total a este 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="entre com 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="Log in"/>                        <div style="width:240px;margin:auto;">            <div style="float:left;">              <label for="fa_autologin"><input id="fa_autologin" type="checkbox" name="autologin"/> Login automatico</label>            </div>                            <div style="float:right;">              <a href="/profile?mode=sendpassword">Esqueceu senha?</a>            </div>                            <div class="clear"></div>          </div>        </div>      </div>              <div class="fa_form_links">        <div class="fa_login_row">          <a href="/register">Criar conta</a>        </div>        <div class="fa_login_row">          <a href="/login#login_classic">Login clássico</a> | <a href="/login?logout=true#login_classic">Deslogar clássico</a>        </div>      </div>    </form>  </noscript>     
  <!--    END_NOSCRIPT_LOGIN_FORM    -->     
  <!--    START_LOGIN_FORM    -->     
  <form id="fa_form_login" action="/login" method="post">
                                     
      <p class="fa_login_desc">
                  Por favor, faça o login para obter acesso completo do <script type="text/javascript">document.write('<a href="http://' + window.location.host + '">' + window.location.host + '</a>');</script>       
      </p>
                           
      <div id="fa_form_wrap" class="fa_form_wrap" style="height:210px;">
                                     
        <div class="fa_login_row">
                                    <a id="fa_login_back" href="#">Voltar</a>          <span class="fa_login_avatar">            <img src="http://illiweb.com/fa/invision/pp-blank-thumb.png" />            <img id="fa_avatar_real" src="http://illiweb.com/fa/invision/pp-blank-thumb.png" />          </span>                 
        </div>
                                             
        <!--    START_STEP_1    -->                 
        <div id="login_step_1" class="fa_form_slide" style="left:0px;">
                                                 
            <div class="fa_login_row">
                                          <input id="fa_login_username" class="fa_login_input" type="text" name="username" placeholder="entre com seu nome de usuário" />                           
              <p id="fa_error_username" class="fa_login_row" style="color:#F00;display:none;">
                                    Por favor insira seu nome de usuário.                 
              </p>
                                                       
            </div>
                                                         
            <div class="fa_login_row">
                                          <input id="fa_button_next" class="fa_login_button" type="button" value="Prosseguir" />                       
            </div>
                                             
        </div>
                                     
        <!--    END_STEP_1    -->                         
        <!--    START_STEP_2    -->                 
        <div id="login_step_2" class="fa_form_slide" style="left:400px;">
                                                 
            <div class="fa_login_row">
                                          <span class="fa_login_username"></span>                       
            </div>
                                                         
            <div class="fa_login_row">
                                          <input id="fa_login_password" class="fa_login_input" type="password" name="password" placeholder="Coloque sua senha" />                           
              <p id="fa_error_password" class="fa_login_row" style="color:#F00;width:240px;margin:10px auto;display:none;">
                                    Você especificou um nome de usuário ou senha inválida .                 
              </p>
                                                       
            </div>
                                                         
            <div class="fa_login_row">
                                          <input class="fa_login_button" type="submit" name="login" value="Logar" />                                       
              <div style="width:240px;margin:auto;">
                                                                       
                  <div style="float:left;">
                                                          <label for="fa_autologin"><input id="fa_autologin" type="checkbox" name="autologin" /> Login automático</label>                                 
                  </div>
                                                                                     
                  <div style="float:right;">
                                                          <a href="/profile?mode=sendpassword">Esqueceu senha?</a>                                 
                  </div>
                                                                                     
                  <div class="clear">
                                         
                  </div>
                                                                   
              </div>
                                                       
            </div>
                                             
        </div>
                                     
        <!--    END_STEP_2    -->             
      </div>
                                 
      <div class="fa_form_links">
                                     
        <div id="account_list_holder" class="fa_login_row">
                       
        </div>
                                     
        <div class="fa_login_row">
                                    <a href="/register">Criar 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 id="fa_form_logout" action="/login?logout=true" method="post">
                                     
      <p class="fa_login_desc">
                  Você está prestes a sair do <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 class="fa_login_button" type="submit" name="confirm" value="Yes" />          <input class="fa_login_button" type="submit" name="cancel" value="No" />          <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 = 'Deslogar';
            container.className = 'logged_in';
           
            /* se o link de login padrão está presente , podemos obter os dados a partir do atributo href . ( MAIS RÁPIDO )
            ** caso contrário, terá de enviar um pedido de AJAX para a página de login para os dados (mais lento) */
            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 = 'Logar-se';

  window.fa_form_login = {
    redirect : my_getcookie('fa_login_form_redirect') || '/forum', /* altere a página de redirecionamento após o login */
    submitting : false, /* informações da postagem de login */
   
    accountList : document.createElement('DIV'), /* contas registradas */
 
    /* passar para a etapa de senha
      passar ao longo da ID de usuário para obter o avatar do usuário mais rápido */
    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, ''); // aparar espaço em branco extra
       
        // verificar se o nome de usuário já está armazenado
        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);
       
        // verificar se fileira conta é criada para obter um avatar que já está carregado
        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://illiweb.com/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');
      }
    },
   
    /* voltar para a etapa de nome de usuário */
    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;
    },
   
    /* enviar o formulário de login */
    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];
           
            /* armazenar o user_id e nome de usuário para o próximo 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, /* última conta ativa será marcado com um 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;
    },
   
    /* lançar um erro forma e exibir o texto de erro */
    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';
      }
    },
   
    /* limpar o erro especificado */
    clearError : function(type) {
      document.getElementById('fa_error_' + type).style.display = 'none';
      document.getElementById('fa_login_' + type).style.borderColor = '';
    },
   
    /* excluir um perfil na lista de contas */
    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 há contas salvas.</div><div class="fa_login_row"><a href="javascript:fa_form_login.toggleAccounts();">Retornar ao login</a></div>';
    },
   
    /* criar as linhas de perfil com base em contas "você está conectado como" */
    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://illiweb.com/fa/invision/pp-blank-thumb.png"/> <span class="account_list_username">' + o.username + '</span></div><a class="account_list_delete" title="Remover conta" 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);
    },
   
    /* configuração básica da lista de contas */
    initAccountList : function() {
      var a = document.createElement('A'),
          holder = document.getElementById('account_list_holder');
     
      a.href = '#';
      a.innerHTML = 'Escolha 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);
    },
   
    /* exibição de alternância da lista de contas */
    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 = 'Escolha outra conta';
      }
     
      if (!fa_form_login.accountList.firstChild) fa_form_login.accountList.innerHTML = '<div class="fa_login_row">Não há contas salvas.</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';
 
  /* avançar na forma ao pressionar ENTER */
  username.onkeydown = function(e) {
    if (e.keyCode && e.keyCode == 13) {
      fa_form_login.next();
      return false;
    }
  };
   
  /*se os dados especificado é utilizável vamos percorrer as contas armazenadas em localStorage e formar uma lista para alternar*/
  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>

Depois de criar observe o link da pagina criada , e copie o que está em /hX-
pois será util no proximo passo.

Feito isto, acesse:
Painel de Controle Modulos Html e Javascript Gestão dos codigos Javascript
E Crie um novo Javascript com investimento em todas as paginas com esse código:
Código:
(function() {
  var html_page = '{HTML_PAGE_LINK}',
      link_change = true,
      redirect = true;
 
  $(function() {
    var regex = new RegExp(html_page);
 
    // link mudança
    if (link_change && !regex.test(window.location.href)) {
      $('a[href^="/login"], a[href^="http://' + window.location.host + '/login"]').attr('href', html_page);
    }
 
    // redirecionar para o clássico se a página de login não está disponível
    if (!document.getElementById('fa_form_container') && regex.test(window.location.href)) {
      window.location.href = '/login#login_classic';
    }
  });
 
  // redirecionamento de login
  // salva redirecionar localização para que você é levado para a página correta após o login
  if (/\/login\?redirect/.test(window.location.href)) {
    my_setcookie('fa_login_form_redirect', window.location.search.replace(/.*?redirect=(.*?)(?:&|$)/, '$1'));
  }
 
  // redirecionar
  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;
  }
}());

Só deve alterar o texto: {HTML_PAGE_LINK} pela url que é seu html.

ou seja está assim:
  var html_page = '{HTML_PAGE_LINK}',
Terá que ficar assim:
  var html_page = '/h1-login',

por exemplo... o 1 você altera pelo numero da pagina html criada.

Resultado:

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum