Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Realização de tela de login

2 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

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

Tópico resolvido Realização de tela de login

Mensagem por davy9526 10.06.20 15:27

Detalhes da questão


Endereço do fórum: https://sistemadco.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Olá, eu gostaria de que meu fórum só pudesse ser acessado por quem tem conta nele. Seria possível fazer uma tela de login?

Vi nesse fórum e gostaria de que o meu tivesse uma tela de login parecida.

Link do fórum que vi:

https://pdcp.forumeiros.com/

Muito obrigado e aguardo resposta!
davy9526

davy9526
Novo Membro

Membro desde : 10/06/2020
Mensagens : 10
Pontos : 14

https://sistemadco.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Realização de tela de login

Mensagem por Chanp 10.06.20 15:50

Bem-vindo ao Fórum dos Fóruns!


Seja bem-vindo ao Fórum dos Fóruns! Como acabou de se inscrever, veja aqui alguns links importantes a saber:

Uso de formatação de texto


Informamos que a formatação excessiva não é permitida no Fórum dos Fóruns. Isto é, o uso do riscado, o uso de alinhamentos, a alteração do texto, cor ou tamanho da fonte.

Estes privilégios são reservados à Staff do Fórum dos Fóruns.

Olá @davy9526,

Para fazer isso, aceda a:
Painel de Controle Flecha ajudeiros Módulos Flecha ajudeiros HTML & JAVASCRIPT Flecha ajudeiros Gestão das páginas HTML.

Crie uma nova página HTML no modo avançado com as seguintes opções:

Título: A seu critério.
Você deseja utilizar o início e o final da página do seu fórum?: Não.
Usar esta página como página inicial?: Sim.

No conteúdo da página, cole este código:

Código:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>DCO - Login</title>
    <link type="image/png" href="https://i.servimg.com/u/f59/20/20/82/11/sem_tz11.png" rel="icon" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/font-awesome/css/font-awesome.min.css" />
    <script src="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.js"></script>
    <script src="https://forumeiros.github.io/resources/bootstrap/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 
<body class="bg-dark" style="
  background: url('https://i.servimg.com/u/f87/20/14/64/73/capa10.png')
no-repeat black; background-size: cover; background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;">
    <script type="text/javascript">
        (function($) {
            'use strict';
     
            $(function() {
                $.get('/forum?change_version=prosilver')
                    .done(function(context) {
     
                        if ($('a[id="logout"]', context).length != 0) {
                              $('.alert-success').fadeIn();
                              $('.register').html('Sessão iniciada, redirecionando...').prop('onclick', null);
                              $('input').attr('disabled', true);
                            setTimeout(
                                function() {
                                    window.location.replace('/forum');
                                }, 3000);
      h2-index
                        }
     
                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                        location.pathname = '/forum';
                    });
       
                $('form').submit(function() {
                    var username = $('input[name="username"]').val(),
                        pass = $('input[name="password"]').val(),
                        autologin = 0;
     
                        if($('input[name="autologin"]').is(':checked'))
                          autologin = 1;
 
                  $.post( '/login', { username: username, password: pass, login: '', autologin: autologin })
                      .done(function( data ) {
     
                          if(data.search('Você especificou um nome de Usuário ou Senha inválida, incorreta ou inativa') > 0) {
                              $('.form-control-feedback').fadeIn();
                        } else {
                                $('.form-control-feedback').hide();
                                $('.register').html('Bem-vindo ' + username + ' redirecionando...').prop('onclick', null);
                                $('input').attr('disabled', true);
                            setTimeout(
                                function() {
                                    window.location.replace('/forum');
                                }, 3000);
     
                        }
     
     
                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                        location.pathname = '/login';
                    });
          return false;
      });
 
   
            });
        }(jQuery));
    </script>
    <!-- Start Container -->
    <div class="container">
        <!-- Start Logo Img -->
        <div class="pt-5 text-center">
           
        </div>
   
        <!-- ./End Logo Img -->
</div>
    <div class="container">
    <div class="pt-5 text-center text-light">
      <h2>SIGNIFICADO DA SIGLA</h2>
      </div>
     
        <div class="row">
            <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
                <div class="card border-0 shadow-lg my-5">
                    <div class="card-body">
                        <h5 class="card-title text-center">Login</h5>
                        <!-- Start Form Login -->
                        <form method="post" action="/login">
                            <!-- Start Input Username -->
                            <div class="form-label-group mb-3">
                                <input class="form-control" placeholder="Seu usuário" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required autofocus />
                            </div>
                            <!-- ./End Input Username -->
                            <!-- Start Input Password -->
                            <div class="form-label-group mb-3">
                                <input class="form-control" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" placeholder="Sua Senha" required />
                                <div class="form-control-feedback" style="display: none">Usuário ou senha incorretos, tente novamente!</div>
                            </div>
                            <!-- ./End Input Password -->
                          <a href="/profile?mode=sendpassword"><i class="fa fa-key"></i> Esqueceu a senha?</a>
                            <!-- Start Check AutoLogin -->
                            <div class="custom-control custom-checkbox mb-3 float-right">
                                <input type="checkbox" class="custom-control-input" name="autologin" id="autologin" />
                                <label class="custom-control-label" for="autologin">Lembrar dados</label>
                            </div>
                            <!-- ./End Check AutoLogin -->
                            <!-- Don't delete this -->
                            <input value="" name="redirect" type="hidden" />
                            <input value="" name="query" type="hidden" />
                            <!-- ./End Don't delete this -->
                            <!-- Start Login Button -->
                            <input class="btn btn-lg btn-primary btn-block text-uppercase rounded-0" value="Entrar" tabindex="6" name="login" type="submit" />
                            <!-- ./End Login Button -->
                        </form>
                        <!-- ./End Form Login -->
                        <hr class="my-4" />
                        <button class="btn btn-lg btn-block text-uppercase text-truncate register rounded-0" type="submit" onclick="location.href='/register'"><i class="fa fa-user mr-2"></i> Criar Conta</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Start Footer -->
        <footer class="text-muted text-center text-small">
            <!-- Start Copyright -->
          <p class="mb-1">️ Feito com <i class="fa fa-heart text-danger"></i> <a class="text-muted" href="https://ajuda.forumeiros.com">Forumeiros.com</a>.</p>
            <!-- ./End Copyright -->
          <div align="center">
                


<script>$(document).ready(function() {
        setInterval(function() {
            truePlayer.checkAutoPlay();
        }, truePlayer.intervalTime);
    });
</script>
            <!--a href="https://www.forumeiros.com" target="_blank">forumeiros.com-->
        </footer>
        <!-- ./End Footer --> 
    <!-- ./End Container -->
</body>
 
</html>

Você pode editar a frase SIGNIFICADO DA SIGLA pelo significado de DCO. Como não sei o que significa, não pude substituir.

Por fim, salve.
Chanp Feliz
Chanp

Chanp
Super Membro

Membro desde : 04/01/2018
Mensagens : 1072
Pontos : 1191

https://2forum2.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Realização de tela de login

Mensagem por davy9526 10.06.20 16:18

@Chanp

Seria possível mudar algumas coisas dos botões para não ficar totalmente igual? E muito obrigado por sua ajuda. Quando eu editei o nome fica assim, caso precise:

Código:
<br />
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>DCO - Login</title>
    <link type="image/png" href="https://i.servimg.com/u/f59/20/20/82/11/sem_tz11.png" rel="icon" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/font-awesome/css/font-awesome.min.css" />
    <script src="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.js"></script>
    <script src="https://forumeiros.github.io/resources/bootstrap/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 
<body class="bg-dark" style="
  background: url('https://i.servimg.com/u/f87/20/14/64/73/capa10.png')
no-repeat black; background-size: cover; background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;">
    <script type="text/javascript">
        (function($) {
            'use strict';
    
            $(function() {
                $.get('/forum?change_version=prosilver')
                    .done(function(context) {
    
                        if ($('a[id="logout"]', context).length != 0) {
                              $('.alert-success').fadeIn();
                              $('.register').html('Sessão iniciada, redirecionando...').prop('onclick', null);
                              $('input').attr('disabled', true);
                            setTimeout(
                                function() {
                                    window.location.replace('/forum');
                                }, 3000);
      h2-index
                        }
    
                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                        location.pathname = '/forum';
                    });
      
                $('form').submit(function() {
                    var username = $('input[name="username"]').val(),
                        pass = $('input[name="password"]').val(),
                        autologin = 0;
    
                        if($('input[name="autologin"]').is(':checked'))
                          autologin = 1;
 
                  $.post( '/login', { username: username, password: pass, login: '', autologin: autologin })
                      .done(function( data ) {
    
                          if(data.search('Você especificou um nome de Usuário ou Senha inválida, incorreta ou inativa') > 0) {
                              $('.form-control-feedback').fadeIn();
                        } else {
                                $('.form-control-feedback').hide();
                                $('.register').html('Bem-vindo ' + username + ' redirecionando...').prop('onclick', null);
                                $('input').attr('disabled', true);
                            setTimeout(
                                function() {
                                    window.location.replace('/forum');
                                }, 3000);
    
                        }
    
    
                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                        location.pathname = '/login';
                    });
          return false;
      });
 
  
            });
        }(jQuery));
    </script>
    <!-- Start Container -->
    <div class="container">
        <!-- Start Logo Img -->
        <div class="pt-5 text-center">
          
        </div>
  
        <!-- ./End Logo Img -->
</div>
    <div class="container">
    <div class="pt-5 text-center text-light">
      <h2>DEPARTAMENTO DE COMANDOS OPERACIONAIS :registered:</h2>
      </div>
    
        <div class="row">
            <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
                <div class="card border-0 shadow-lg my-5">
                    <div class="card-body">
                        <h5 class="card-title text-center">Login</h5>
                        <!-- Start Form Login -->
                        <form method="post" action="/login">
                            <!-- Start Input Username -->
                            <div class="form-label-group mb-3">
                                <input class="form-control" placeholder="Seu usuário" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required autofocus />
                            </div>
                            <!-- ./End Input Username -->
                            <!-- Start Input Password -->
                            <div class="form-label-group mb-3">
                                <input class="form-control" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" placeholder="Sua Senha" required />
                                <div class="form-control-feedback" style="display: none">Usuário ou senha incorretos, tente novamente!</div>
                            </div>
                            <!-- ./End Input Password -->
                          <a href="/profile?mode=sendpassword"><i class="fa fa-key"></i> Esqueceu a senha?</a>
                            <!-- Start Check AutoLogin -->
                            <div class="custom-control custom-checkbox mb-3 float-right">
                                <input type="checkbox" class="custom-control-input" name="autologin" id="autologin" />
                                <label class="custom-control-label" for="autologin">Lembrar dados</label>
                            </div>
                            <!-- ./End Check AutoLogin -->
                            <!-- Don't delete this -->
                            <input value="" name="redirect" type="hidden" />
                            <input value="" name="query" type="hidden" />
                            <!-- ./End Don't delete this -->
                            <!-- Start Login Button -->
                            <input class="btn btn-lg btn-primary btn-block text-uppercase rounded-0" value="Entrar" tabindex="6" name="login" type="submit" />
                            <!-- ./End Login Button -->
                        </form>
                        <!-- ./End Form Login -->
                        <hr class="my-4" />
                        <button class="btn btn-lg btn-block text-uppercase text-truncate register rounded-0" type="submit" onclick="location.href='/register'"><i class="fa fa-user mr-2"></i> Criar Conta</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Start Footer -->
        <footer class="text-muted text-center text-small">
            <!-- Start Copyright -->
          <p class="mb-1">️ Feito com <i class="fa fa-heart text-danger"></i> <a class="text-muted" href="https://ajuda.forumeiros.com">Forumeiros.com</a>.</p>
            <!-- ./End Copyright -->
          <div align="center">
                
 
 
<script>$(document).ready(function() {
        setInterval(function() {
            truePlayer.checkAutoPlay();
        }, truePlayer.intervalTime);
    });
</script>
            <!--a href="https://www.forumeiros.com" target="_blank">forumeiros.com-->
        </footer>
        <!-- ./End Footer -->
    <!-- ./End Container -->
</body>
 
</html>
davy9526

davy9526
Novo Membro

Membro desde : 10/06/2020
Mensagens : 10
Pontos : 14

https://sistemadco.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Realização de tela de login

Mensagem por Chanp 10.06.20 16:49

Olá,
Claro que posso. O que você gostaria de alterar?

Chanp
Chanp

Chanp
Super Membro

Membro desde : 04/01/2018
Mensagens : 1072
Pontos : 1191

https://2forum2.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Realização de tela de login

Mensagem por davy9526 10.06.20 16:58

Estou com problemas, @Chanp.

Quando eu vou para o site, não entra em tela de login. Porque eu gostaria que só pudesse entrar no fórum, quem fosse cadastrado. E quando vou em "Módulos, Gestão de páginas HTML" a página está em vermelho. Olhe:

https://i.servimg.com/u/f54/20/22/40/48/2020-010.png

Aqui está o HTML de como ela vai ficar, já fiz alterações de foto atrás e tudo mais.

Código:
<br />
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>DCO - Login</title>
    <link type="image/png" href="https://i.servimg.com/u/f59/20/20/82/11/sem_tz11.png" rel="icon" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/font-awesome/css/font-awesome.min.css" />
    <script src="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.js"></script>
    <script src="https://forumeiros.github.io/resources/bootstrap/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 
<body class="bg-dark" style="
  background: url('https://i.servimg.com/u/f54/20/22/40/48/capalo10.png')
no-repeat black; background-size: cover; background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;">
    <script type="text/javascript">
        (function($) {
            'use strict';
    
            $(function() {
                $.get('/forum?change_version=prosilver')
                    .done(function(context) {
    
                        if ($('a[id="logout"]', context).length != 0) {
                              $('.alert-success').fadeIn();
                              $('.register').html('Sessão iniciada, redirecionando...').prop('onclick', null);
                              $('input').attr('disabled', true);
                            setTimeout(
                                function() {
                                    window.location.replace('/forum');
                                }, 3000);
      h2-index
                        }
    
                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                        location.pathname = '/forum';
                    });
      
                $('form').submit(function() {
                    var username = $('input[name="username"]').val(),
                        pass = $('input[name="password"]').val(),
                        autologin = 0;
    
                        if($('input[name="autologin"]').is(':checked'))
                          autologin = 1;
 
                  $.post( '/login', { username: username, password: pass, login: '', autologin: autologin })
                      .done(function( data ) {
    
                          if(data.search('Você especificou um nome de Usuário ou Senha inválida, incorreta ou inativa') > 0) {
                              $('.form-control-feedback').fadeIn();
                        } else {
                                $('.form-control-feedback').hide();
                                $('.register').html('Bem-vindo ' + username + ' redirecionando...').prop('onclick', null);
                                $('input').attr('disabled', true);
                            setTimeout(
                                function() {
                                    window.location.replace('/forum');
                                }, 3000);
    
                        }
    
    
                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                        location.pathname = '/login';
                    });
          return false;
      });
 
  
            });
        }(jQuery));
    </script>
    <!-- Start Container -->
    <div class="container">
        <!-- Start Logo Img -->
        <div class="pt-5 text-center">
          
        </div>
  
        <!-- ./End Logo Img -->
</div>
    <div class="container">
    <div class="pt-5 text-center text-light">
      <h2>DEPARTAMENTO DE COMANDOS OPERACIONAIS <img class="emojione" alt=":registered:️" title=":registered:" title=":registered:" src="https://cdn.jsdelivr.net/emojione/assets/png/00ae.png?v=2.2.7"/></h2>
      </div>
    
        <div class="row">
            <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
                <div class="card border-0 shadow-lg my-5">
                    <div class="card-body">
                        <h5 class="card-title text-center">Login</h5>
                        <!-- Start Form Login -->
                        <form method="post" action="/login">
                            <!-- Start Input Username -->
                            <div class="form-label-group mb-3">
                                <input class="form-control" placeholder="Seu usuário" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required autofocus />
                            </div>
                            <!-- ./End Input Username -->
                            <!-- Start Input Password -->
                            <div class="form-label-group mb-3">
                                <input class="form-control" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" placeholder="Sua Senha" required />
                                <div class="form-control-feedback" style="display: none">Usuário ou senha incorretos, tente novamente!</div>
                            </div>
                            <!-- ./End Input Password -->
                          <a href="/profile?mode=sendpassword"><i class="fa fa-key"></i> Esqueceu a senha?</a>
                            <!-- Start Check AutoLogin -->
                            <div class="custom-control custom-checkbox mb-3 float-right">
                                <input type="checkbox" class="custom-control-input" name="autologin" id="autologin" />
                                <label class="custom-control-label" for="autologin">Lembrar dados</label>
                            </div>
                            <!-- ./End Check AutoLogin -->
                            <!-- Don't delete this -->
                            <input value="" name="redirect" type="hidden" />
                            <input value="" name="query" type="hidden" />
                            <!-- ./End Don't delete this -->
                            <!-- Start Login Button -->
                            <input class="btn btn-lg btn-primary btn-block text-uppercase rounded-0" value="Entrar" tabindex="6" name="login" type="submit" />
                            <!-- ./End Login Button -->
                        </form>
                        <!-- ./End Form Login -->
                        <hr class="my-4" />
                        <button class="btn btn-lg btn-block text-uppercase text-truncate register rounded-0" type="submit" onclick="location.href='/register'"><i class="fa fa-user mr-2"></i> Criar Conta</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Start Footer -->
        <footer class="text-muted text-center text-small">
            <!-- Start Copyright -->
          <p class="mb-1">️ Feito com <i class="fa fa-heart text-danger"></i> <a class="text-muted" href="https://ajuda.forumeiros.com">Forumeiros.com</a>.</p>
            <!-- ./End Copyright -->
          <div align="center">
                
 
 
<script>$(document).ready(function() {
        setInterval(function() {
            truePlayer.checkAutoPlay();
        }, truePlayer.intervalTime);
    });
</script>
            <!--a href="https://www.forumeiros.com" target="_blank">forumeiros.com-->
        </footer>
        <!-- ./End Footer -->
    <!-- ./End Container -->
</body>
 
</html>
davy9526

davy9526
Novo Membro

Membro desde : 10/06/2020
Mensagens : 10
Pontos : 14

https://sistemadco.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Realização de tela de login

Mensagem por Chanp 10.06.20 17:19

Olá,

Vamos fazer o seguinte. Aceda a:
Painel de Controle Flecha ajudeiros Visualização Flecha ajudeiros Página Inicial Flecha ajudeiros Geral.

No campo "Página inicial do Fórum", selecione a opção Página HTML. Por fim, salve.

Em seguida, aceda a:
Painel de Controle Flecha ajudeiros Geral Flecha ajudeiros Fórum Flecha ajudeiros Categorias e Fóruns.

Modifique a autorização de todos os fóruns de modo que nenhum deles permita a visualização por parte dos Convidados, apenas de membros acima.

Com isso feito, apenas pessoas registradas verão o conteúdo do fórum. Além disso, ao acessarem o seu fórum, serão redirecionados para a página HTML criada.

A cor vermelha na página HTML significa que ela está definida como página inicial.

Mais algo?
Chanp Feliz
Chanp

Chanp
Super Membro

Membro desde : 04/01/2018
Mensagens : 1072
Pontos : 1191

https://2forum2.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Realização de tela de login

Mensagem por davy9526 10.06.20 17:25

Muito obrigado, @Chanp

Você é demais! Funcionou.
davy9526

davy9526
Novo Membro

Membro desde : 10/06/2020
Mensagens : 10
Pontos : 14

https://sistemadco.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Realização de tela de login

Mensagem por Chanp 10.06.20 17:33

Tópico resolvido


Movido para "Questões resolvidas".
Chanp

Chanp
Super Membro

Membro desde : 04/01/2018
Mensagens : 1072
Pontos : 1191

https://2forum2.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

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