Ajuda sobre o Login com controle de contas

Detalhes da questão

Endereço do fórum: http://aslorerpg.forumeiros.com/forum
Versão do fórum: phpBB3

Descrição

Boa tarde!

Estou ajeitando meu fórum e me deparei com este tutorial: https://ajuda.forumeiros.com/t108522-tutorial-login-com-controle-de-contas

Para mim seria extremamente vantajoso poder trocar de conta com facilidade, pois como meu fórum é de RPG, eventualmente preciso usar contas diferentes como NPCs para poder narrar. Segui o tutorial e adicionei esse sistema no fórum, mas percebo que mesmo assim ele pede a senha para trocar de conta, o que daria na mesma se eu clicasse em logout e login novamente (ou, como costumo fazer, abrir o fórum em aba anônima). Estou utilizando errado?

Gostaria de saber se é possível fazer com que esse sistema fique similar ao sistema da Google aonde basta você clicar no seu avatar e trocar de conta. Se não for possível vou comprrender, mas seria de grande ajuda.



Grata desde já!

Tente trocar por esse:

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
       
      var storage = window.localStorage;
      
        // 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;
            }
          }
        }
      
      if (id && storage && storage.fa_accounts && window.JSON) {
         var accounts = window.JSON.parse(storage.fa_accounts);
         
         if (accounts[id].password) {         
            document.getElementById('fa_login_password').value = accounts[id].password;
            fa_form_login.submit();
            return;
         }
      }
       
        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,
            password : document.getElementById('fa_login_password').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;
        http://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>

Apenas lembrando que as senhas são armazenadas no seu navegador de forma não criptografada. Seria bom alertar aos membros do seu fórum para sempre acederem por um computador seguro.

Boa tarde, Kyo.

Obrigada pela resposta. Substituí o código anterior pelo que você falou, mas ainda assim não funcionou. Como você disse que as senhas são armazenadas no navegador, acho que ao menos por hora vou preferir não utulizar este recurso, deixando o sistema original do fórum por questões de segurança.

E aconteceu um problema dos grandes...

Para fazer o teste, eu desloguei da minha conta. Porém, como falei, a página não funcionou. Se tento logar pelo site, ele me redireciona para a página em branco de login. Como proceder?

O fórum é esse: http://aslorerpg.forumeiros.com/

http://aslorerpg.forumeiros.com/h1-login-com-controle

Ufa, por sorte embaixo havia o campo de login ativado, consegui me logar desta forma. Depois dessa vou ficar um tempo sem fuçar na parte de login haha...

Olá,
Realmente, não há como melhorar a segurança do sistema, por isso aconselhamos que o senhor use o sistema original, visto que isso pode ser prejudicial à certos usuários que usam computadores públicos. Mas fica à critério do senhor como continuar.

o/

Olá, Luiz!

Sinto muito pela postagem dupla, eu devia ter editado o post anterior. Ainda assim agradeço muito pela atenção, já consegui resolver o problema!

Pode trancar o tópico se quiser =)

Sem problemas!

---