Para personalizar a página de login siga os passos a seguir:


  • Procure pela pasta {INSTALAÇÃO_FLUIG}/repository/wcmdir/. Dentro dela, crie uma nova pasta chamada customlogin.

Atenção

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}/jboss/standalone/configuration/standalone.xml e procure nele pela propriedade <simple name="java:global/wcm/globalDataDir", neste parâmetro estará indicado o caminho alternativo ao caminho {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

Criado os seguintes arquivos, em "/opt/fluig/repository/wcmdir/customlogin/".

 

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>

Atenção

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.