Esta página foi revisada para considerar as novas configurações de server do fluig para a atualização 1.6.

Caso possua uma atualização anterior do fluig acesse: ARQ 065 - Personalização da página de login.

Índice

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".

 

Caso as configurações do fluig tenham sido alteradas manualmente (por exemplo, para ambientes com alta disponibilidade), abra em um editor de texto o arquivo [Instalação fluig]/appserver/domain/configuration/domain.xml e localize nele a propriedade abaixo:

<simple name="java:global/wcm/globalDataDir">

Neste parâmetro estará informado o caminho alternativo do diretório [Instalação fluig]/repository/wcmdir/.


  • Dentro dessa pasta recém criada, crie um arquivo chamado login.html. Nesse arquivo crie o fragmento de conteúdo HTML que será inserido na página de login.

O conteúdo do arquivo login.html será literalmente inserido dentro do HTML final da página de login, dentro de uma tag <DIV>, substituindo a logomarca. Portanto, não poderá conter as tags <HTML>, <BODY> ou <HEAD>.

  • Opcionalmente, crie na mesma pasta um arquivo chamado loginhead.html. Nesse arquivo crie conteúdo HTML que importa os JS/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 JS ou CSS.

  • 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 arquivo mlogin.html e mloginhead.html.


 

Exemplo de personalização

Primeiramente foram criados os arquivos descritos acima em "/opt/fluig/repository/wcmdir/customlogin/". Em seguida foram executados os seguintes procedimentos:

1. Importe o arquivo JavaScript padrão do produto jquery.js e o JavaScript customizado login.js.

<script type="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/portal/resources/customlogin/login.js"></script>

2. Insira a imagem Sua-Empresa-Horizontal.png, juntamente com o texto "logotxt". Ex:  

<img src="/portal/resources/customlogin/Sua-Empresa-Horizontal.png" height="200">
<h1 id="logotxt"></h1>

Todo conteúdo HTML deve seguir as normas do Style Guide (definidas aqui: https://style.fluig.com/).

3. Ao terminar de carregar a página, substitua o texto "logotxt" pela data atual.

$(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;
   $("#logotxt").html("Hoje é: " + today);
})

4. Importe o arquivo JavaScript padrão do produto jquery.js e o JavaScript personalizado login.js.

<script type="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/portal/resources/customlogin/login.js"></script>
<img class="image-logo" src="/portal/resources/customlogin/Sua-Empresa-Horizontal.png" width="150" height="125">
<h1 id="logotxt"></h1>


Resultado:

Alteração de logomarca e exibição de data.

 

  • Todos os arquivos utilizados no exemplo também estão disponíveis em http://git.fluig.com/
  • A personalização da página de login pode ser feita apenas a partir da Atualização 1.5.5.