Índice
Página de login personalizada
Todos os componentes da página de login podem ser personalizados, basta que sejam alterados os arquivos indicados nesta documentação. As personalizações exigem que o responsável tenha os conhecimentos básicos em HTML, JavaScript e CSS.
Criação da página de login personalizada
Para personalizar a página de login siga os passos a seguir:
- Acesse o diretório [Instalação fluig]/repository/wcmdir/. Dentro dele, crie uma nova pasta chamada customlogin.
Dentro dessa pasta recém criada, crie um arquivo chamado loginsnowflake.html. Nesse arquivo crie o fragmento de conteúdo HTML que será inserido na página de login. O conteúdo do arquivo loginsnowflake.html será literalmente inserido dentro do HTML final da página de login, dentro de uma tag <DIV>. Portanto, não poderá conter as tags <HTML>, <BODY> ou <HEAD>.
Opcionalmente, crie na mesma pasta um arquivo chamado loginhead.html. Nesse arquivo crie o conteúdo HTML que importa os CSS que serão utilizados pela personalização. O conteúdo do arquivo loginhead.html será literalmente inserido dentro do HTML final da página de login, dentro da tag <HEAD>, portanto deverá conter apenas tags que importam recursos como CSS.
- Opcionalmente, crie na mesma pasta um arquivo chamado loginscript.html. Nesse arquivo crie o conteúdo HTML que importa os JS que serão utilizados pela personalização. O conteúdo do arquivo loginscript.html será literalmente inserido dentro do HTML final da página de login, ao final da tag <BODY>, portanto deverá conter apenas tags que importam recursos como JS.
Caso utilize recursos estáticos, copie-os dentro desta mesma pasta, como arquivos JS, CSS e imagens. Esses recursos estáticos estarão acessíveis abaixo da URL /portal/resources/customlogin/.
- Caso utilize o aplicativo Mobile, a personalização do login via Mobile pode ser feita da mesma forma. Basta criar os arquivos mlogin.html, mloginscript.html e mloginhead.html.
- Reinicie os serviços do fluig.
Exemplo de personalização
Primeiramente foram criados os arquivos descritos acima em "[diretório_instalação]/repository/wcmdir/customlogin/". Em seguida foram executados os seguintes procedimentos:
1. Importe o arquivo JavaScript customizado loginsnowflake.js e o arquivo de estilo loginsnowflake.css.
<link rel="stylesheet" type="text/css" href="/portal/resources/customlogin/loginsnowflake.css">
<script type="text/javascript" src="/portal/resources/customlogin/loginsnowflake.js"></script>
2. Insira aqui o código HTML de customização da sua página.
<h1 id="login_datetime"></h1>
3. O arquivo js, ao terminar de carregar a página, insere a data atual no elemento "login_datetime"
$(document).ready(function(){
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
today = dd + '/' + mm + '/' + yyyy;
$("#login_datetime").html("Data: " + today);
})
4. O arquivo css deve conter as classes de personalização do seu HTML.
#login_datetime {
position: absolute;
text-align: center;
width: 100%;
left: 0px;
bottom: 10%;
}
Resultado:
Exibição de data na parte inferior da tela.
