Criar uma página de login

2 participantes

Ir para baixo

Tópico resolvido Criar uma página de login

Mensagem por CesarWatsom2 16.09.17 0:00

Detalhes da questão


Endereço do fórum: http://portaldsh.forumeiros.com/
Versão do fórum: phpBB2

Descrição


https://i.servimg.com/u/f11/19/74/83/96/proca110.png

Queria fazer esse "Login" só que além disso, para ter acesso ao fórum, terá que logar primeiro, ou seja, o redirecionamento do site tem de ser direto para o LOGIN
CesarWatsom2
CesarWatsom2
**

Membro desde : 01/08/2017
Mensagens : 94
Pontos : 156

http://febhabbo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por Luiz 16.09.17 0:17

Você deseja uma página de login ou um submenu?
Veja se é isso: crie um novo JavaScript investido em todas as páginas, contendo o código abaixo.
Código:
/*globals jQuery, _userdata*/

/**
 *! Login popover that works with AJAX.
 *
 *  @author Luiz
 *  @licence MIT
 *
 *  Copyright (c) Luiz Felipe | All rights reserved.
 */
(function ($) {
  'use strict';

  var $loginPopover;
  var config = {
    // Troque o boolean abaixo para "true" caso você queira exibir uma alerta ao usuário fazer o login:
    alertOnLogin: false
  };

  $(function () {

    if (_userdata.session_logged_in) {
      return;
    }

    $('a[href$="/login"]').on('click', function (event) {

      event.preventDefault();
      event.stopPropagation();

      if ($('.fa-popover-login').length > 0) {
        $loginPopover.remove();
        return;
      }

      var $this = $(this);

      /**
      * Variáveis de posição:
      */
      var pos = $this.offset();
      var posY = pos.top;
      var posX = pos.left;
      var mgnL = $this.innerWidth() / 2;
      var mgnT = $this.innerHeight();

      $loginPopover = $([
        '<div class="fa-popover-login">',
        '  <div class="fa-popover-intro">',
        '    <span class="h3">Login</span>',
        '  </div>',
        '  <form action="/login" method="post" name="form_login">',
        '    <div class="input-group">',
        '      <label for="username">Usuário:</label>',
        '      <input type="text" name="username" id="username" maxlength="40" />',
        '      <label for="password">Senha:</label>',
        '      <input type="password" id="password" name="password" maxlength="25" />',
        '    </div>',
        '    <input type="checkbox" name="autologin" id="autologin" checked="checked" />',
        '    <label for="autologin">Conexão automática.</label>',
        '    <footer>',
        '      <input type="submit" name="login" value="Conectar-se" class="submit-btn" />',
        '      <a href="/profile?mode=sendpassword">Esqueci a senha</a>',
        '    </footer>',
        '  </form>',
        '</div>',
      ].join('\n'))
        .appendTo('body')
          .css({
            top: posY + 'px',
            left: posX + 'px',
            marginLeft: mgnL + 'px',
            marginTop: mgnT + 'px',
            position: 'absolute',
            transform: 'translateX(-50%)'
          })
            .on('click', function (event) {
              event.stopPropagation();
            })
      ;

      $loginPopover
        .find('label')
          .on('click', function (event) {
            event.stopPropagation();
            event.preventDefault();
          })
      ;

      $loginPopover
        .find('form')
          .on('submit', function (event) {

            event.preventDefault();
            var $form = $(this);
           
            $form
              .find('[type="submit"]')
                .val('Logando...')
                  .css('cursor', 'not-allowed')
            ;

            var username = $form.find('#username').val();
            var password = $form.find('#password').val();
            var autoLogin = $form.find('#autologin').prop('checked');
            var autoLoginStatus = '';

            if (autoLogin) {
              autoLoginStatus = 'on';
            }

            $.post('/login', {
              username: username,
              password: password,
              autologin: autoLoginStatus,
              login: ''
            })
              .done(function (context) {
           
                var bodyContext = context.split('<body>').pop().split('</body>').shift();
                var body = document.createElement('body');
                body.innerHTML = bodyContext;
                var $body = $(body);
               
                if ($body.find('[href="/register"]').length > 0) {
                  alert([
                    'Você especificou um usuário e/ou senha incorreto(s)!',
                    'Tente novamente!',
                  ].join('\n'));
           
                  location.pathname = '/login';
                 
                  return;
                }

                if (config.alertOnLogin) {
                  alert('Seja bem-vindo, ' + username + '...');
                }

                location.reload();
               
              })
              .fail(function () {
                alert([
                  'Ocorreu um erro... Tente novamente!',
                  'Caso o erro persista, contate o suporte técnico.'
                ].join('\n'));

                location.pathname = '/login';
              })
            ; 
          })
      ;
    });

    $(document).on('click', function (event) {
      if ($('.fa-popover-login').length > 0) {
        $loginPopover.remove();
      }
    });

    var styles = [
      '.fa-popover-login {',
      '  background-color: #fff;',
      '  -webkit-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  -moz-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  -ms-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  -o-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);',
      '  width: 265px;',
      '  border-radius: 2px;',
      '  padding: 15px;',
      '  border: solid 1px #ddd;',
      '  font-size: 16px;',
      '  z-index: 999999999999999999999999;',
      '  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
      '}',
      '',
      '.fa-popover-login,',
      '.fa-popover-login * {',
      '  box-sizing: border-box;',
      '}',
      '',
      '.fa-popover-intro .h3 {',
      '  font-family: "Trebuchet MS", "Segoe UI", Helvetica, "Helvetica Neue", Arial, "Open Sans", Lato, sans-serif;',
      '  font-size: 20px;',
      '  color: #818181;',
      '  border-bottom: solid 0px;',
      '  width: 100%;',
      '  display: block;',
      '  margin: 0px;',
      '}',
      '',
      '.fa-popover-login form {',
      '  margin: 10px -15px;',
      '  padding: 15px;',
      '  margin-bottom: 0px;',
      '  padding-bottom: 0px;',
      '  border-top: solid 1px #ddd;',
      '}',
      '',
      '.fa-popover-login form div.input-group label {',
      '  display: block;',
      '  margin-bottom: 5px;',
      '  color: #656565;',
      '  font-size: 14px;',
      '}',
      '',
      '.fa-popover-login form div.input-group label[for="password"] {',
      '  margin-top: 14px;',
      '}',
      '',
      '.fa-popover-login form div.input-group input {',
      '  display: block;',
      '  width: 100%;',
      '  padding: 5px 10px;',
      '  font-size: 1rem;',
      '  line-height: 1.25;',
      '  color: #464a4c;',
      '  background-color: #fff;',
      '  background-image: none;',
      '  -webkit-background-clip: padding-box;',
      '  background-clip: padding-box;',
      '  border: 1px solid rgba(0,0,0,.15);',
      '  border-radius: 2px;',
      '  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;',
      '  transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;',
      '  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;',
      '  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;',
      '  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;',
      '}',
      '',
      '.fa-popover-login form div.input-group input:focus {',
      '  color: #464a4c;',
      '  background-color: #fff;',
      '  border-color: #5cb3fd;',
      '  outline: 0;',
      '}',
      '',
      '.fa-popover-login label[for="autologin"] {',
      '  margin-top: 15px;',
      '  display: inline-block;',
      '}',
      '',
      '.fa-popover-login footer {',
      '  background-color: #ddd;',
      '  padding: 10px;',
      '  margin: -15px;',
      '  margin-top: 15px;',
      '  position: relative;',
      '}',
      '',
      '.fa-popover-login footer a {',
      '  border-bottom: solid 1px transparent;',
      '  color: #39c;',
      '  position: absolute;',
      '  right: 11px;',
      '  top: 47%;',
      '  -webkit-transform: translateY(-50%);',
      '  -moz-transform: translateY(-50%);',
      '  -ms-transform: translateY(-50%);',
      '  -o-transform: translateY(-50%);',
      '  transform: translateY(-50%);',
      '}',
      '',
      '.fa-popover-login footer a:hover {',
      '  border-color: #39c;',
      '}',
      '',
      '.fa-popover-login footer input {',
      '  border: none;',
      '  background-color: #3072ab;',
      '  color: #fff;',
      '  cursor: pointer;',
      '  padding: 4px 8px;',
      '}',
      '',
      '.fa-popover-login footer input:hover {',
      '  background-color: #275e8c;',
      '}',
      '',
      '.fa-popover-login::before {',
      '  content: "";',
      '  position: absolute;',
      '  height: 15px;',
      '  width: 15px;',
      '  background-color: #fff;',
      '  top: -2px;',
      '  left: 50%;',
      '  -webkit-transform: rotate(45deg) translateX(-50%);',
      '  -moz-transform: rotate(45deg) translateX(-50%);',
      '  -ms-transform: rotate(45deg) translateX(-50%);',
      '  -o-transform: rotate(45deg) translateX(-50%);',
      '  transform: rotate(45deg) translateX(-50%);',
      '  border: solid 1px transparent;',
      '  border-left: solid 1px #ddd;',
      '  border-top: solid 1px #ddd;',
      '}',
    ].join('\n');

    $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');
  });
}(jQuery));

Feito isso, clique em "login" e veja se está tudo bem.
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por CesarWatsom2 16.09.17 13:47

Luiz eu até gostei, porém eu queria uma página mesmo com o "Login" conforme mostrei na imagem do link... e que para acessar o fórum, tem que fazer login, ou seja, sempre que acessar o link do fórum, redirecionar sempre para o Login...  Muito feliz Muito feliz
CesarWatsom2
CesarWatsom2
**

Membro desde : 01/08/2017
Mensagens : 94
Pontos : 156

http://febhabbo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por Luiz 16.09.17 13:48

Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por CesarWatsom2 16.09.17 14:25

Obrigado Luiz... Fiz tudo certinho, porém acho que o código esteja um pouco bugado...
o quadrado não chega nem a aparecer o botão de baixo 

https://i.servimg.com/u/f11/19/74/83/96/tentat10.png

E OUTRA, queria utilizar o seu Modelo que é muito mais bonito e personalizado. 

https://i.servimg.com/u/f11/19/74/83/96/tentat11.png


Última edição por CesarWatsom2 em 16.09.17 14:29, editado 1 vez(es)
CesarWatsom2
CesarWatsom2
**

Membro desde : 01/08/2017
Mensagens : 94
Pontos : 156

http://febhabbo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por Luiz 16.09.17 14:29

Tente 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
       
        // 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>
<style>form#fa_form_login, form#fa_form_login * {
  box-sizing: border-box;
}

div#fa_form_wrap {
  min-height: 270px !important;
}
</style>
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por CesarWatsom2 16.09.17 14:33

Luiz, eu até gostei do modelo do carinha ai... mas o seu modelo é muito mais bonito e amplificado.

No caso tudo isso que esta aqui eu estou colocando no fórum da pmhh (portalpmhh.com)
Mas eu primeiro faço o teste no meu fórum, pois o fórum da PMHH é de um colega e ele não sabe mexer com isso...

Será que tu consegue me passar o seu modelo?

https://i.servimg.com/u/f11/19/74/83/96/tentat11.png
CesarWatsom2
CesarWatsom2
**

Membro desde : 01/08/2017
Mensagens : 94
Pontos : 156

http://febhabbo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por Luiz 16.09.17 14:47

Se o @AlexG autorizar, fica na mão.
No entanto, posso até criar um diferente para você, basta me dizer como quer. o/
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por CesarWatsom2 16.09.17 14:51

Desculpa Luiz...

Enfim...

Eu achei um modelo que gostei, consegue fazer mais ou menos assim?

https://w3layouts.com/wp-content/uploads/2015/12/Portal_Login_Form.jpg
CesarWatsom2
CesarWatsom2
**

Membro desde : 01/08/2017
Mensagens : 94
Pontos : 156

http://febhabbo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por Luiz 16.09.17 15:34

Aqui:
Código:
<!DOCTYPE html>
<!-- ->
<!- | Created by Luiz Felipe (https://lffg.github.io/);
<!- -->
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Faça o login</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,400i,500,500i,700,700i" rel="stylesheet" />
  <style>
    *{-webkit-box-sizing:border-box;box-sizing:border-box}body{background-image:linear-gradient(100deg, #1475a0 0%, #21a1ba 50%, #fff 100%);background-color:#21a1ba;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}a,a:focus,a:active,a:visited{color:#127da7;border-bottom:solid 1px #127da7;text-decoration:none}a:hover,a:focus:hover,a:active:hover,a:visited:hover{color:#444;border-bottom:solid 1px #444;text-decoration:none}form{padding-bottom:25px;background-color:#fff;width:40%;color:#555;position:relative;text-align:center;border-radius:3px}form>.form-icon{background-color:#127da7;position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);padding:26px 31px;font-size:34px;border-radius:100px;color:#fff}form>header>h1{font-size:35px;font-weight:300;margin-top:60px;margin-bottom:25px}form>.form-inner{width:50%;margin:0 auto}form>.form-inner>input{background-color:#d0d0d0;text-align:center;color:#555;display:block;border:solid 1px #d0d0d0;margin:0 auto;padding:10px;margin-bottom:20px;width:100%;border-radius:3px}form>.form-inner>input::-webkit-input-placeholder{color:#555}form>.form-inner>input:-ms-input-placeholder{color:#555}form>.form-inner>input::-webkit-input-placeholder{color:#555}form>.form-inner>input::placeholder{color:#555}form>.form-inner>input:focus{outline:0}form>.form-inner>input[type="submit"]{width:auto;background-color:#127da7;color:#fff;border-color:#127da7;cursor:pointer;-webkit-transition:all linear 100ms;transition:all linear 100ms}form>.form-inner>input[type="submit"]:hover{background-color:#444;border-color:#444}#about{position:absolute;bottom:25px;left:25px;display:inline-block}#about i.fa{color:#555;background-color:#fff;padding:15px 15px;border-radius:200px;font-size:17px;-webkit-transition:all linear 200ms;transition:all linear 200ms;height:48px;width:48px;display:inline-block;cursor:pointer}#about span{color:#555;background-color:#fff;padding:15px 15px;border-radius:200px;font-size:17px;-webkit-transition:all linear 230ms;transition:all linear 230ms;margin-left:5px;-webkit-transform:scale(0) rotateZ(-180deg) translateY(-8px);transform:scale(0) rotateZ(-180deg) translateY(-8px);display:inline-block}#about:hover span{-webkit-transform:scale(1) rotateY(0deg) translateY(0px);transform:scale(1) rotateY(0deg) translateY(0px)}
 
    body {
      font-family: "Ubuntu", "Trebuchet MS", Arial, sans-serif;
    }
  </style>
</head>
<body>
  <form action="/login" method="POST">
    <i class="fa fa-user form-icon"></i>
    <header class="form-header">
      <h1>Login</h1>
    </header>
    <div class="form-inner">
      <input type="text" placeholder="Usuário" name="username" required />
      <input type="password" placeholder="Senha" name="password" required />
      <input type="submit" name="login" value="Conectar-se" />
    </div>
    <footer class="form-footer">
      Esqueceu a senha? Clique <a href="/profile?mode=sendpassword">aqui</a>.
    </footer>
  </form>
  <div id="about">
    <i class="fa fa-code"></i>
    <span>Codificado por <a href="https://lffg.github.io/" target="_blank">luuuiiiz.</a></span>
  </div>
</body>
</html>

Favor não remover a atribuição de créditos no canto inferior esquerdo.
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por CesarWatsom2 16.09.17 15:47

CesarWatsom2
CesarWatsom2
**

Membro desde : 01/08/2017
Mensagens : 94
Pontos : 156

http://febhabbo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por Luiz 16.09.17 17:23

Você deve desativar a opção "Usar o início e fim do fórum", ou seja, marcar "Não".
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por CesarWatsom2 16.09.17 17:34

Luiz Ficou ótimo : https://i.servimg.com/u/f11/19/74/83/96/teste10.png

Poderia aumentar só um pouco o quadrado branco para o desenho do "user" não ficar em cima do "Login"?! rs Obrigado msm..

E outra coisa, por exemplo, se eu tiver um fórum com domínio próprio, eu consigo colocar esse "Login" como página inicial?
No caso ativar o botão... pois quando eu coloco normal no portaldsh.forumeiros.com ele diz "Enquanto for redirecionado para o Forumeiros.com, não será possível".
CesarWatsom2
CesarWatsom2
**

Membro desde : 01/08/2017
Mensagens : 94
Pontos : 156

http://febhabbo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por Luiz 16.09.17 22:49

Se você colocar este código:
Código:
<!DOCTYPE html>
<!-- ->
<!- | @author Luiz Felipe <https://lffg.github.io>
<!- -->
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Faça o login</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,400i,500,500i,700,700i" rel="stylesheet" />
  <style>
    * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    body {
      font-family: "Ubuntu", "Trebuchet MS", Arial, sans-serif;
      background-image: linear-gradient(100deg, #1475a0 0%, #21a1ba 50%, #fff 100%);
      background-color: #21a1ba;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      overflow-y: hidden;
      min-height: 100vh;
      height: 100vh;
      max-heght: 100vh;
    }

    a,
    a:focus,
    a:active,
    a:visited {
      color: #127da7;
      border-bottom: solid 1px #127da7;
      text-decoration: none;
    }

    a:hover,
    a:focus:hover,
    a:active:hover,
    a:visited:hover {
      color: #444;
      border-bottom: solid 1px #444;
      text-decoration: none;
    }

    form {
      padding-bottom: 25px;
      background-color: #fff;
      width: 40%;
      color: #555;
      position: relative;
      text-align: center;
      border-radius: 3px;
    }

    @media screen and (max-width: 950px) {
      form {
        width: 60%;
      }
    }

    @media screen and (max-width: 850px) {
      form {
        width: 65%;
      }
    }

    @media screen and (max-width: 700px) {
      form {
        width: 70%;
      }
    }

    @media screen and (max-width: 500px) {
      form {
        width: 80%;
      }
    }

    @media screen and (max-width: 450px) {
      form {
        width: 90%;
      }
    }

    form > .form-icon {
      background-color: #127da7;
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      padding: 26px 31px;
      font-size: 34px;
      border-radius: 100px;
      color: #fff;
    }

    form > header > h1 {
      font-size: 35px;
      font-weight: 300;
      margin-top: 60px;
      margin-bottom: 25px;
    }

    form > .form-inner {
      width: 50%;
      margin: 0 auto;
    }

    form > .form-inner > input {
      background-color: #d0d0d0;
      text-align: center;
      color: #555;
      display: block;
      border: solid 1px #d0d0d0;
      margin: 0 auto;
      padding: 10px;
      margin-bottom: 20px;
      width: 100%;
      border-radius: 3px;
    }

    form > .form-inner > input::-webkit-input-placeholder {
      color: #555;
    }

    form > .form-inner > input:-ms-input-placeholder {
      color: #555;
    }

    form > .form-inner > input::-webkit-input-placeholder {
      color: #555;
    }

    form > .form-inner > input::placeholder {
      color: #555;
    }

    form > .form-inner > input:focus {
      outline: 0;
    }

    form > .form-inner > input[type="submit"] {
      width: auto;
      background-color: #127da7;
      color: #fff;
      border-color: #127da7;
      cursor: pointer;
      -webkit-transition: all linear 100ms;
      transition: all linear 100ms;
    }

    form > .form-inner > input[type="submit"]:hover {
      background-color: #444;
      border-color: #444;
    }

    #about {
      position: absolute;
      bottom: 25px;
      left: 25px;
      display: inline-block;
    }

    #about i.fa {
      color: #555;
      background-color: #fff;
      padding: 15px 15px;
      border-radius: 200px;
      font-size: 17px;
      -webkit-transition: all linear 200ms;
      transition: all linear 200ms;
      height: 48px;
      width: 48px;
      display: inline-block;
      cursor: pointer;
    }

    #about span {
      color: #555;
      background-color: #fff;
      padding: 15px 15px;
      border-radius: 200px;
      font-size: 17px;
      -webkit-transition: all linear 230ms;
      transition: all linear 230ms;
      margin-left: 5px;
      -webkit-transform: scale(0) rotateZ(-180deg) translateY(-8px);
      transform: scale(0) rotateZ(-180deg) translateY(-8px);
      display: inline-block;
    }

    #about:hover span {
      -webkit-transform: scale(1) rotateY(0deg) translateY(0px);
      transform: scale(1) rotateY(0deg) translateY(0px);
    }
  </style>
</head>
<body>
  <form action="/login" method="POST">
    <i class="fa fa-user form-icon"></i>
    <header class="form-header">
      <h1>Login</h1>
    </header>
    <div class="form-inner">
      <input type="text" placeholder="Usuário" name="username" required />
      <input type="password" placeholder="Senha" name="password" required />
      <input type="submit" name="login" value="Conectar-se" />
    </div>
    <footer class="form-footer">
      Esqueceu a senha? Clique <a href="/profile?mode=sendpassword">aqui</a>.
    </footer>
  </form>
  <div id="about">
    <i class="fa fa-code"></i>
    <span>Codificado por <a href="lffg.github.io/" target="_blank">luuuiiiz.</span>
  </div>
</body>
</html>

O resultado será este:
-> https://1forum1.forumeiros.com/h3-login
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por CesarWatsom2 17.09.17 1:54

Muito Obrigado Luiz! Você é demais cara!
CesarWatsom2
CesarWatsom2
**

Membro desde : 01/08/2017
Mensagens : 94
Pontos : 156

http://febhabbo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar uma página de login

Mensagem por Luiz 17.09.17 2:16

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos