Purpose

Depending on the brightness of the room we're writing in, we might get the password wrong. With this tutorial you will learn how to add a field that will allow you to show your password and thus verify any errors.

Application result

Installation

The installation is unique, and can only be done by creating a new javascript. CSS can be modified, and is embedded in Javascript. Please follow the steps below to install the effect on your community.

Please, acess following area on your Admin Control Panel:
Control Panel >> Modules >> HTML and Javascript >> Management of Javascript codes >> Create a new javascript

Placement: On all pages

Code:

/****
 * Application: Show password on login
 * Description: This application adds a checkbox to the login form, to see the password.
 * Version: 1.0
 * Made and Optimizations by RafaelS. - 2019/10/05
 * View more in: https://ajuda.forumeiros.com
 * Copyright (c) 2019 RafaelS.<rafael_s at outlook dot pt>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 **/

$(function() {
    $('label[for="autologin"], .block-login label.label, .gen input[name="autologin"]').after('<br><input type="checkbox" id="mostrasenha">&nbsp;Mostrar senha</input><br>');
    $("#mostrasenha").bind("click", function() {
        var txtPassword = $('input[type="password"]');
        if ($(this).is(":checked")) {
            txtPassword.after('<input onchange = "PasswordChanged(this);" id = "txt_' + txtPassword.attr("id") + '" type = "text" value = "' + txtPassword.val() + '" />');
            txtPassword.hide();
        } else {
            txtPassword.val(txtPassword.next().val());
            txtPassword.next().remove();
            txtPassword.show();
        }
    });
});
 
function PasswordChanged(txt) {
    $(txt).prev().val($(txt).val());
}