:: Alfresco. Añadir check para mostrar la clave en el login

Es habitual -en muchos formularios de control de acceso (login)- que exista la posibilidad de que el usuario marque un check para mostrar la clave que ha insertado.
De esta manera, describiremos a continuación cómo podemos implementar esta característica.

1.- Localizamos el fichero: "login.get.html.ftl" ubicado en: "tomcat\webapps\share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\guest"


2.- Copiamos el fichero anterior en la siguiente ubicación: "\tomcat\shared\classes\alfresco\web-extension\site-webscripts\org\alfresco\components\guest"
En caso de que no exista alguna de las carpetas, será necesario crearlas.


3.- En el fichero que hemos copiado, llevamos a cabo las siguientes modificaciones:
Añadimos el check que nos permitirá mostrar la clave insertada.

<@markup id="form">
         <form id="${el}-form" accept-charset="UTF-8" method="post" action="${loginUrl}" class="form-fields login ${edition}">
            <@markup id="fields">
            <input type="hidden" id="${el}-success" name="success" value="${successUrl?replace("@","%40")?html}"/>
            <input type="hidden" name="failure" value="${failureUrl?replace("@","%40")?html}"/>
            <div class="form-field">
               <label for="${el}-username">${msg("label.username")}</label><br/>
               <input type="text" id="${el}-username" name="username" maxlength="255" value="<#if lastUsername??>${lastUsername?html}</#if>" />
            </div>
            <div class="form-field">
               <label for="${el}-password">${msg("label.password")}</label><br/>
               <input type="password" id="${el}-password" name="password" maxlength="255" />
            </div>
   <div class="form-field">
    <input type="checkbox" id="showpassword" onclick="showPassword('${el}-password')"/>
    <label for="showpassword"> Mostrar clave</label><br/>
   </div>
            </@markup>
            <@markup id="buttons">
            <div class="form-field">
               <input type="submit" id="${el}-submit" class="login-button" value="${msg("button.login")}"/>
            </div>
            </@markup>
         </form>
      </@markup>

Añadiremos el checkbo y mensaje correspondiente.

4.- En este mismo fichero, insertamos la función javascript encargada de mostrar o no la clave insertada por el usuario.

function showPassword(id)
   {
    var elemento = document.getElementById(id);
    if (elemento.type === "password") {
     elemento.type = "text";
    } else {
     elemento.type = "password";
    }
   }

Tras reiniciar el servicio de Alfresco, nos aparecerá el formulario de login modificado, con la posibilidad de mostrar o no la clave.