Página de login customizada

por vcapelli 21.04.20 19:19

Detalhes da questão

Endereço do fórum: http://sistema-forum.forumeiros.com/login
Versão do fórum: ModernBB

Descrição

Eu tinha visto um algum canto desse fórum o seguinte código personalizado de uma página login (não me pergunte onde pois esqueci) e eu gostaria de saber como fazer para substituir essa página customizada em /login e por curiosidade vocês teriam uma parecida para registro?

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>Conecte-se no fórum</title> <link type="image/png" href="https://illiweb.com/fa/favicon/discussion.ico" 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-light"> <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, redirecionado...').prop('onclick', null); $('input').attr('disabled', true); setTimeout( function() { window.location.replace('/forum'); }, 3000); } }) .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 + ' redirecionado...').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>  <div class="container">  <div class="pt-5 text-center"> <img src="https://2img.net/r/frmste/images/sigle.png" /> </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">Entrar no fórum</h5>  <form method="post" action="/login">  <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>   <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>   <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>   <input value="" name="redirect" type="hidden" /> <input value="" name="query" type="hidden" />   <input class="btn btn-lg btn-primary btn-block text-uppercase rounded-0" value="Entrar" tabindex="6" name="login" type="submit" />  </form>  <hr class="my-4" /> <button class="btn btn-lg btn-block text-uppercase text-truncate register rounded-0" type="submit" onclick="location.href='/register?change_temp=3'"><i class="fa fa-user mr-2"></i> Criar Conta</button> </div> </div> </div> </div>  <footer class="text-muted text-center text-small">  <p class="mb-1">️ Feita com <i class="fa fa-heart text-danger"></i> <a class="text-muted" href="https://forumeiros.com">Forumeiros.com</a> com <b>Bootstrap</b>.</p>   <ul class="list-inline"> <li class="list-inline-item"><a href="/forum">Início</a></li> <li class="list-inline-item"><a href="/faq">FAQ</a></li> <li class="list-inline-item"><a href="/privacy">Política de Confidencialidade</a></li> <li class="list-inline-item"><a href="/profile?mode=sendpassword">Esqueceu a senha?</a></li> </ul>  </footer>  </div>  </body> </html>

por **tikky** 21.04.20 20:00

Olá @vcapelli,

gostaria de saber como fazer para substituir essa página customizada em /login

O senhor quer um redirecionador? Caso o membro entre no /login é redirecionado para a página customizada? Sobre a página registro, leia o seguinte tópico: Questão resolvida !

Aguardo uma resposta sua,
pedxz.

por vcapelli 21.04.20 20:55

Pedxz escreveu:Olá @vcapelli,

gostaria de saber como fazer para substituir essa página customizada em /login
O senhor quer um redirecionador? Caso o membro entre no /login é redirecionado para a página customizada? Sobre a página registro, leia o seguinte tópico: Questão resolvida !

Aguardo uma resposta sua,
pedxz.

Eu gostaria que a página /login ficasse igual naquele código mas se não for possível sem problemas amigo Feliz

por **tikky** 22.04.20 0:32

Não, não dá, lamento, a página é feita com bootstrap caso adicione ao seu Fórum vai "estragar" a aparência dele Aff

por vcapelli 22.04.20 1:06

Tudo bem, sem problemas e qual o segundo método de ser redirecionado para a página?

por **tikky** 22.04.20 10:47

Crie uma nova página JavaScript com investimento em todas as páginas, com o seguinte código:

Código:: (function($) { 'use strict'; var url = '/h1-'; $(function() { if (_userdata.session_logged_in) return; if (!/login/i.test(location.pathname)) return; window.location.replace(url); }); }(jQuery));

encontre o /h1- e mude para a página pretendida!

Atenciosamente,
pedxz.

por vcapelli 22.04.20 23:05

Código não funcionou aqui amigo Triste

E no caso do /register eu utilizo qual?

por **tikky** 23.04.20 14:36

vcapelli escreveu:Código não funcionou aqui amigo

O seu Fórum tem um conflito entre scripts, e o causador é o script de alterar o ícone com ajax, se pudesse passar para ver qual o problema!

E no caso do /register eu utilizo qual?

Altere o script em cima para:

Código:: (function($) { 'use strict'; var url = { login: '/h1-', register: '/h2-' }; $(function() { if (_userdata.session_logged_in) return; if (/login/i.test(location.pathname)) { window.location.replace(url.login); } else if (/register/i.test(location.pathname)) { window.location.replace(url.register); } }); }(jQuery));

as configurações são as mesmas!

por vcapelli 23.04.20 22:27

Pedxz escreveu:O seu Fórum tem um conflito entre scripts, e o causador é o script de alterar o ícone com ajax, se pudesse passar para ver qual o problema!

Código:: /*globals jQuery, FA, _userdata*/ /** * Alterar o ícone do tópico com AJAX. * * @author Luiz * * Modificação por RafaelS. restringir botões aos fóruns * https://ajuda.forumeiros.com/ * * @version 1.2 * @licence MIT */ (function($) { 'use strict'; var config = [{ name: 'Aprovado', id: 1, background: '#88bb55', onlyForMod: true, forum: all }, { name: 'Reprovado', id: 2, background: '#e6594c', onlyForMod: true, forum: 1 }, { name: 'Em curso', id: 3, background: '#ecb942', onlyForMod: true, forum: 1 }, { name: 'Importante', id: 4, background: '#e6594c', onlyForMod: true, forum: 1 }, { name: 'Anúncio', id: 5, background: '#2d3134', onlyForMod: true, forum: 1 }, { name: 'Arquivado', id: 6, background: '#88bb55', onlyForMod: true, forum: 1 }, { name: 'Sem contéudo', id: 7, background: '#e6594c', onlyForMod: true, forum: 1 }, { name: 'Sancionado', id: 8, background: '#88bb55', onlyForMod: true, forum: 1 }, { name: 'Vetado', id: 9, background: '#e6594c', onlyForMod: true, forum: 1 } ]; window.FA = window.FA || {}; FA.Topic = FA.Topic || {}; var MarkIcon; FA.Topic.MarkIcon = MarkIcon = function(config) { var self = this; self.userConfig = config; self.defaults = { name: undefined, id: undefined, background: undefined, onlyForMod: false, onlyForAdmin: false, forum: undefined, }; self.config = $.extend({}, self.defaults, self.userConfig); $.each(self.config, function(key, value) { if (key === undefined) { throw new Error('[Topic Icons] The ' + key + ' key was not specified in the script config.'); } if (value === undefined) { throw new Error('[Topic Icons] The ' + value + ' value was not specified in the settings.'); } }); }; MarkIcon.prototype.init = function() { var self = this; var $post = $('.post[id*="p"]:first, [id*="post-"].post-wrap:first'); var $link = $post.find('a[href$="mode=editpost"]'); if (!$link.length) { return false; } if (this.config.onlyForMod && (_userdata.user_level !== 1 && _userdata.user_level !== 2)) { return false; } if (this.config.onlyForAdmin && _userdata.user_level !== 1) { return false; } var atual = $('.sub-header-path a:last').attr("href"); console.log("Forum detection by RafaelS."); if (atual.indexOf("f" + this.config.forum + "-") < 0) { console.log("O ícone " + this - config.name + " não está disponível no fórum: " + atual); return false; } self.messageLink = $link.attr('href'); self.$button = $('<button>', { 'class': 'fa-mark-icon-button', 'data-id': self.config.id, 'text': self.config.name }); self.$button .css('background-color', self.config.background) .on('click', function(event) { event.preventDefault(); self.runAjax(); }) .insertBefore($post); self.appendStyles(); }; MarkIcon.prototype.runAjax = function() { var self = this; self.changeText('<i class="fa fa-refresh fa-spin"></i> Marking...'); $.get(self.messageLink) .done(function(context) { var $form = $('form[action="/post"]', context); var encode = document.charset.toLowerCase() === 'utf-8' ? window.encodeURIComponent : window.escape; var formData = $form.serializeArray(); var data = {}; $.each(formData, function() { var obj = this; data[obj.name] = obj.value; }); data.post_icon = self.config.id; data.post = 1; var encoded = $.map(data, function(value, key) { return key + '=' + encode(value); }).join('&'); $.post(self.messageLink, encoded) .done(self.changeText('<i class="fa fa-check"></i> Marked!')) .fail(self.error); }) .fail(self.error); }; MarkIcon.prototype.changeText = function(text) { var self = this; self.runAjax = function() { return false; }; self.$button .html(text) .prop('disabled', true); }; MarkIcon.prototype.error = function() { alert([ '[Topic Icons] AJAX Error.', 'Refresh the page and try again.' ].join('\n')); }; MarkIcon.prototype.appendStyles = function() { $('<style>', { 'text': [ '.fa-mark-icon-button {', ' padding: 8px 8px 8px 8px;', ' border: none;', ' color: #fff;', ' margin: 10px 0 10px 6px;', ' box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.08);', ' border-radius: 3px;', '}' ].join('\n') }).appendTo('head'); }; $(function() { $.each(config, function() { var self = this; (new FA.Topic.MarkIcon(self)).init(); }); }); }(jQuery));

Seria esse aqui, certo?

por **tikky** 27.04.20 13:54

Aparentemente sem erros, porém, eu no console vi um, e tinha a certeza que se tratava desse script, se não for muito, poderia desativar script a script até o conflito parar, deixando somente o que eu passei!? E passe-me depois o script que fez o conflito para analisar, agradecia

Veja que o script em cima devia ter o investimento somente nos tópicos, veja sempre se o investimento está correto. Remova também o primeiro script passado por mim!

por vcapelli 27.04.20 21:32

Receio que seja esse:

Código:: (function ($) { 'use strict'; var tags = [ { tag: 'PL', background: '#3eb000' }, { tag: 'PEC', background: '#0032b0' } ]; $(function () { var counter = 1; /** if (location.pathname === '/post' && $('form input[name="subject"]').length > 0) { // Criar a zona para colocar-se os inputs: var $textarea = $('#textarea_content'); var $title = $('form [name="subject"]'); var $zone = $([ '<div class="fa-icon-selector">', ' <div class="fa-icon-selector-inner">', ' </div>', '</div>', ].join('\n')) .prependTo($textarea) ; // Criar-se os inputs dentro da zona criada anteriormente: var $appendZone = $zone.find('.fa-icon-selector-inner'); $.each(tags, function (index, tag) { $([ '<div class="fa-tag-form-group">', ' <input type="radio" class="select-tag-input" name="select-tag-radio" id="tag-input-' + counter + '" data-tag="' + tag.tag + '" />', ' <label for="tag-input-' + counter + '" class="fa-tag-label">' + tag.tag + '</label>', '</div>', ].join('\n')) .appendTo($appendZone) ; counter++; }); // Função para dar focus num input X caso este seja a tag dum tópico X: if (/^\[.*\]/gi.test($title.val())) { $title.val().replace(/^\[(.*)\]/gi, function (find, match) { $('[data-tag="' + match + '"]').prop('checked', true); }); } // Trigger para a adição/edição do prefixo no input de título: $zone .find('input.select-tag-input') .on('focus', function () { setPrefix($(this).attr('data-tag')); }) ; // Função para setar/editar o prefixo: var setPrefix = function (prefix) { if (/^\[.*\]/gi.test($title.val())) { $title.val($title.val().replace(/^\[.*\]/gi, function () { return '[' + prefix + ']'; })); return; } $title.val('[' + prefix + '] ' + $title.val().trim()); }; } /** var $link = $('a[href^="/t"]'); $link.each(function () { var $this = $(this); $.each(tags, function (index, tag) { var regex = new RegExp ('\\[' + tag.tag + '\\]', 'gim'); var text = $this.text(); if (!regex.test(text)) { return; } $this.addClass('fa-tagged-link'); $this.text(text.trim().replace(regex, '')); $this.prepend('<span class="fa-topic-tag" style="background-color: ' + tag.background + ';">' + tag.tag + '</span>'); }); }); /** var styles = [ '.fa-icon-selector-inner strong {', ' display: block;', ' margin-bottom: 4px;', ' font-weight: bold;', '}', '', '.fa-icon-selector .fa-tag-form-group {', ' display: inline-block;', ' margin-right: 15px;', ' margin-top: 4px;', '}', '', '.fa-tagged-link {', ' text-decoration: none !important;', '}', '', '.fa-tagged-link:hover {', ' color: #f73 !important;', ' text-decoration: none !important;', '}', '', 'span.fa-topic-tag {', ' color: #fff;', ' background-color: #39c;', ' padding: 1px 5px;', ' border-radius: 3px;', ' margin-right: 4px;', ' display: inline;', ' text-decoration: none!important', '}' ].join('\n'); $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head'); }); }(jQuery));

por **tikky** 27.04.20 21:41

Realmente tem alguns erros, altere para:

Código:: (function ($) { 'use strict'; var tags = [ { tag: 'PL', background: '#3eb000' }, { tag: 'PEC', background: '#0032b0' } ]; $(function () { var counter = 1; if (location.pathname === '/post' && $('form input[name="subject"]').length > 0) { // Criar a zona para colocar-se os inputs: var $textarea = $('#textarea_content'); var $title = $('form [name="subject"]'); var $zone = $([ '<div class="fa-icon-selector">', ' <div class="fa-icon-selector-inner">', ' </div>', '</div>', ].join('\n')) .prependTo($textarea) ; // Criar-se os inputs dentro da zona criada anteriormente: var $appendZone = $zone.find('.fa-icon-selector-inner'); $.each(tags, function (index, tag) { $([ '<div class="fa-tag-form-group">', ' <input type="radio" class="select-tag-input" name="select-tag-radio" id="tag-input-' + counter + '" data-tag="' + tag.tag + '" />', ' <label for="tag-input-' + counter + '" class="fa-tag-label">' + tag.tag + '</label>', '</div>', ].join('\n')) .appendTo($appendZone) ; counter++; }); // Função para dar focus num input X caso este seja a tag dum tópico X: if (/^\[.*\]/gi.test($title.val())) { $title.val().replace(/^\[(.*)\]/gi, function (find, match) { $('[data-tag="' + match + '"]').prop('checked', true); }); } // Trigger para a adição/edição do prefixo no input de título: $zone .find('input.select-tag-input') .on('focus', function () { setPrefix($(this).attr('data-tag')); }) ; // Função para setar/editar o prefixo: var setPrefix = function (prefix) { if (/^\[.*\]/gi.test($title.val())) { $title.val($title.val().replace(/^\[.*\]/gi, function () { return '[' + prefix + ']'; })); return; } $title.val('[' + prefix + '] ' + $title.val().trim()); }; } var $link = $('a[href^="/t"]'); $link.each(function () { var $this = $(this); $.each(tags, function (index, tag) { var regex = new RegExp ('\\[' + tag.tag + '\\]', 'gim'); var text = $this.text(); if (!regex.test(text)) { return; } $this.addClass('fa-tagged-link'); $this.text(text.trim().replace(regex, '')); $this.prepend('<span class="fa-topic-tag" style="background-color: ' + tag.background + ';">' + tag.tag + '</span>'); }); }); var styles = [ '.fa-icon-selector-inner strong {', ' display: block;', ' margin-bottom: 4px;', ' font-weight: bold;', '}', '', '.fa-icon-selector .fa-tag-form-group {', ' display: inline-block;', ' margin-right: 15px;', ' margin-top: 4px;', '}', '', '.fa-tagged-link {', ' text-decoration: none !important;', '}', '', '.fa-tagged-link:hover {', ' color: #f73 !important;', ' text-decoration: none !important;', '}', '', 'span.fa-topic-tag {', ' color: #fff;', ' background-color: #39c;', ' padding: 1px 5px;', ' border-radius: 3px;', ' margin-right: 4px;', ' display: inline;', ' text-decoration: none!important', '}' ].join('\n'); $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head'); }); }(jQuery));

(Se o senhor não quiser usar o código em cima remova o investimento)

por vcapelli 27.04.20 22:27

Funcionou que é uma beleza! Obrigado Rosa

por **Sleep** 27.04.20 22:39

Tópico resolvido

Movido para "Questões resolvidas".

Página de login customizada