Tela de login - Personalização completa

Para personalizar a tela de login por completo, é necessário seguir as seguintes instruções:

1) Montando o código html

  • É necessário ter um form onde estarão todos os campos citados abaixo. O ID desse form precisa ser “formLogin”;
    <form id="formLogin">
  • O input onde será informado o login do usuário precisa:
    1. Ser um input do tipo text;
    2. Ter o id=“j_username” e o name=“j_username”;
    3. Estar dentro de uma div com id=“inp_usuario”. Essa div não pode ter nada além do id;
    <div id="inp_usuario">
        <input id="j_username" name="j_username" type="text"/>
    </div>
  • O input onde será informado a senha do usuário precisa:
    1. Ser um input do tipo password;
    2. Ter o id=“senha” e o name=“senha”;
    3. Estar dentro de uma div com id=“inp_senha”. Essa div não pode ter nada além do id;
    <div id="inp_senha">
        <input id="senha" name="senha" type="password"/>
    </div>
  • O botão para realizar o login precisa:
    1. Ter um evento onclick=“realizarLogin();”;
    2. Ter o id=“btnLogin” e o name =“btnLogin”;
    3. Ser do tipo “button”;
    <input type="button" onclick="realizarLogin(); "
     id="btnLogin" name="btnLogin" value="Conectar"/>
  • Para utilizar os outros logins via Cas,Google,Facebook e Twitter precisa:
    1. Ter os ids id=“loginCAS”, id=“loginGOOGLE”,id=“loginFACEBOOK”,id=“loginTWITTER”, onde estes podem ser qualquer tipo de tag html exemplo: div,spam,label,input,button,etc…
    2. Estar dentro de um div que tenha o id=“outrosTiposLogin
    3. Sugerimos inserir antes do código de recuperação de senha
    <div id="outrosTiposLogin" class="TexAlCenter">
   	<div class="Fs12">
	<label class="ui-outputlabel ui-widget">Ou entrar com</label>
	</div>
        <label id="loginCAS" title="Realizar login com o CAS" class="ui-outputlabel ui-widget" style="font-size: 25px;font-weight: bold!important;">CAS</label>
		<i id="loginGOOGLE" title="Realizar login com o Google" class="icon-gplus-squared" style="font-size: 25px; color: #72828B"></i> 					
	 <i id="loginFACEBOOK" title="Realizar login com o Facebook" class="icon-facebook-1" style="font-size: 25px; color: #72828B"></i>
	 <i id="loginTWITTER" title="Realizar login com o Twitter" class="icon-twitter-1" style="font-size: 25px; color: #72828B"></i>
   </div>
  • O link para “Não tem ou esqueceu a sua senha?” precisa:
    1. Ter um evento onclick=“redefinirSenha();”;
    <a href="#" onClick="redefinirSenha();">
        Não tem ou esqueceu a sua senha?
    </a>
  • O campo opcional para Manter Conectado precisa:
    1. Ser um input do tipo “checkbox”;
    2. Ter um id=“mantemConectado”;
    • Obs: se não informado, o padrão é não manter conectado.
    <input type="checkbox" id="mantemConectado" name="mantemConectado" />
  • O conteúdo HTML gerado deve ser informado na mensagem de chave telaLogin.personalizada.paginaJsp, do banco de mensagem.
    • Ex.:
    UPDATE TB_MESSAGE
        SET ME_MESSAGE_CLIENT = 'Código HTML',
        USUARIO_ULT_ALTERACAO = 'SCRIPT_PERSONALIZAO_TELA'
    WHERE ME_KEY = 'telaLogin.personalizada.paginaJsp'

2) Montando o código JavaScript e CSS
É possível criar código JavaScript e CSS para complementar o HTML criado acima. Para fazer isso, siga as instruções abaixo.

  • O conteúdo JavaScript deve ser informado na mensagem de chave telaLogin.personalizada.javaScript, no banco de mensagem.
    • Ex.:
    UPDATE TB_MESSAGE
        SET ME_MESSAGE_CLIENT = 'Código JavaScript',
        USUARIO_ULT_ALTERACAO = 'SCRIPT_PERSONALIZAO_TELA'
    WHERE ME_KEY = 'telaLogin.personalizada.javaScript'
  • O conteúdo CSS deve ser informado na mensagem de chave telaLogin.personalizada.css, no banco de mensagem.
    • Ex.:
    UPDATE TB_MESSAGE
        SET ME_MESSAGE_CLIENT = 'Código CSS',
        USUARIO_ULT_ALTERACAO = 'SCRIPT_PERSONALIZAO_TELA'
    WHERE ME_KEY = 'telaLogin.personalizada.css'

Se preferir, abaixo há exemplos das três personalizações.

Exemplo do arquivo HTML da página de login

UPDATE TB_MESSAGE
SET ME_MESSAGE_CLIENT = '<div id="tl_login">
	<form id="formLogin" name="formLogin">
        <div id="logo">
            <img src="/imagens/logo.jpg"/>
        </div>
 
        <div id="linha">
            <img src="/imagens/linha.jpg"/>
        </div>
 
        <div id="lb_usuario">
            Login
        </div>
 
        <div id="inp_usuario">
            <input id="j_username" name="j_username" type="text"/>
        </div>
 
        <div id="qLinha"></div>
 
        <div id="lb_senha">
            Senha
        </div>
 
        <div id="inp_senha">
            <input id="senha" name="senha" type="password"/>
        </div>
 
        <div id="qLinha"></div>
 
        <div id="btn_conectar">
            <input type="button" onclick="realizarLogin(); "
 id="btnLogin" name="btnLogin" background:"transparent url(''/imagens/btn_conectar.jpg'') no-repeat;" value=""/>
 <div id="outrosTiposLogin" class="TexAlCenter">
	<div class="Fs12">
		<label class="ui-outputlabel ui-widget">Ou entrar com</label>
	</div>
	<label id="loginCAS" title="#{messageMB.msg(''security.login.ajuda.CAS'')}" class="ui-outputlabel ui-widget" style="font-size: 25px;font-weight: bold!important;">#{messageMB.msg(''security.login.CAS'')}</label>
	<i id="loginGOOGLE" title="#{messageMB.msg(''security.login.ajuda.GOOGLE'')}" class="icon-gplus-squared" style="font-size: 25px; color: #72828B"></i>						
	<i id="loginFACEBOOK" title="#{messageMB.msg(''security.login.ajuda.FACEBOOK'')}" class="icon-facebook-1" style="font-size: 25px; color: #72828B"></i>
	<i id="loginTWITTER" title="#{messageMB.msg(''security.login.ajuda.TWITTER'')}" class="icon-twitter-1" style="font-size: 25px; color: #72828B"></i>
        <i id="loginAZURE" title="#{messageMB.msg(''security.login.ajuda.AZURE'')}" class="icon-azure"></i>
	 </div>
            <div id="txt">
                <a href="#" onClick="redefinirSenha();">
                	Não tem ou esqueceu a sua senha?
                </a>
            </div>
        </div>
 
        <div id="linha">
            <img src="/imagens/linha.jpg"/>
        </div>
 
        <div id="txt">
            Configurações recomendadas: Firefox; Internet explorer 7 ou superior <br/>
			Resolução de 1024 x 768 pixels <br/>
			Bloqueador de Pop-ups desabilitado
        </div>
    </form>
</div>
 
<div id="powered">
	<img src="/imagens/powered.jpg" />
</div>',
    DATA_ULT_ALTERACAO = GETDATE(),
    USUARIO_ULT_ALTERACAO = 'TELA_LOGIN'
WHERE ME_KEY = 'telaLogin.personalizada.paginaJsp'

Exemplo do arquivo CSS da página de login

UPDATE TB_MESSAGE
SET ME_MESSAGE_CLIENT = 'body 
{
	background-image: url(/imagens/fundo.jpg);
	background-repeat: repeat-x;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #C0D8DA;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}
 
#tl_login
{
	//margin: 50% auto;
	//width: 500px;
 
	width: 500px;
	height: 400px;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -250px;
	position: absolute;
}
 
#logo
{
	padding-bottom: 20px;
}
 
#logo, #linha
{
	text-align: center;
}
 
#lb_usuario
{
	margin-left: 70px;
	font-weight: bold;
	color: #297DB9;
	padding-bottom: 20px;
	padding-top: 70px;
	float:left;
	width: 80px;
}
 
#inp_usuario
{
	font-weight: bold;
	color: #FFF;
	padding-top: 63px;
	padding-bottom: 12px;
	float:left;
}
 
#inp_usuario input
{
	border: 1px solid #297DB9;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	width: 300px;
	height: 25px;
}
 
#qLinha
{	
	clear: both;
}
 
#lb_senha
{
	margin-left: 90px;
	font-weight: bold;
	color: #297DB9;
	padding-top: 7px;
	padding-bottom: 20px;
	float:left;
	width: 60px;
}
 
#inp_senha
{
	font-weight: bold;
	color: #FFF;
	padding-bottom: 12px;
	float:left;
}
 
#inp_senha input
{
	border: 1px solid #297DB9;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	width: 300px;
	height: 25px;
}
 
#btn_conectar
{
	text-align: center;
	padding-top: 20px;
	padding-bottom: 50px;
	margin-left: 100px;
}
 
#txt
{
	padding-top: 20px;
	color: #297DB9;
	text-align: center;
	font-size: 10px;
}
 
#txt a:Link, #txt a:Visited
{
	color: #297DB9;
	text-decoration: none;
}
 
#txt a:Hover
{
	color: #39C;
	text-decoration: underline;
}
 
#powered
{
  position: absolute; 
  right: 20px; 
  bottom: 20px;
  z-index:10;
}
 
#btnLogin {
	border:none;
	width:132px;
	height:24px;
	color:#000;
	cursor: pointer;
}
 
.icon-azure {
	background-image: url(/Inserir a URL do Security G5/javax.faces.resource/imagens/microsoft-azure.png.xhtml?ln=edusoft) !important;
	width: 29px;
	height: 29px;
	display: inline-block;
}
',
    DATA_ULT_ALTERACAO = GETDATE(),
    USUARIO_ULT_ALTERACAO = 'TELA_LOGIN'
WHERE ME_KEY = 'telaLogin.personalizada.css'

Exemplo de arquivo JavaScript da página de login

UPDATE TB_MESSAGE
SET ME_MESSAGE_CLIENT = 'alert("Eu sou um JavaScript personalizado!");',
    DATA_ULT_ALTERACAO = GETDATE(),
    USUARIO_ULT_ALTERACAO = 'TELA_LOGIN'
WHERE ME_KEY = 'telaLogin.personalizada.javaScript'

Remoção de tela de login personalizada

Se você deseja remover a tela de login personalizada, execute os scipts abaixo: 

UPDATE TB_MESSAGE
SET ME_MESSAGE_CLIENT = NULL,
    DATA_ULT_ALTERACAO = GETDATE(),
    USUARIO_ULT_ALTERACAO = 'TELA_LOGIN'
WHERE ME_KEY = 'telaLogin.personalizada.paginaJsp'
GO
 
UPDATE TB_MESSAGE
SET ME_MESSAGE_CLIENT = NULL,
    DATA_ULT_ALTERACAO = GETDATE(),
    USUARIO_ULT_ALTERACAO = 'TELA_LOGIN'
WHERE ME_KEY = 'telaLogin.personalizada.javaScript'
GO
 
UPDATE TB_MESSAGE
SET ME_MESSAGE_CLIENT = NULL,
    DATA_ULT_ALTERACAO = GETDATE(),
    USUARIO_ULT_ALTERACAO = 'TELA_LOGIN'
WHERE ME_KEY = 'telaLogin.personalizada.css'
GO

* Atenção * Para utilizar a autentencação via google na tela de login personalizado

Com a recente atualização do google é necessário seguir os pasos da documentação abaixo para que funcione para novos apps cadastrados.

Documento auxiliar para configuração de autenticação google

Após a execução dos scripts é necessário reiniciar a aplicação.

  • (edição externa)