0

Is there a way to not show the points while you are typing the password but show the letters/numbers of the password?

I would like to implement it in my "My account" page of woocommerce:

enter image description here

3 Answers 3

1

I would strongly disagree to show the password as the user typing it. You could instead implement a way to show the status of the field with a user action like a user click to show password or on hover. The reason is that the user makes the decision to show the password. Also, improve the security as maybe the users are not alone when they typing it

Some examples are: enter image description here Code from herdiansc

//Place this plugin snippet into another file in your applicationb
(function ($) {
    $.toggleShowPassword = function (options) {
        var settings = $.extend({
            field: "#password",
            control: "#toggle_show_password",
        }, options);

        var control = $(settings.control);
        var field = $(settings.field)

        control.bind('click', function () {
            if (control.is(':checked')) {
                field.attr('type', 'text');
            } else {
                field.attr('type', 'password');
            }
        })
    };
}(jQuery));

//Here how to call above plugin from everywhere in your application document body
$.toggleShowPassword({
    field: '#test1',
    control: '#test2'
});

jsfiddle

And user Baraka Mahili

$('#show_password').hover(function functionName() {
                        //Change the attribute to text
                        $('#password').attr('type', 'text');
                        $('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
                    }, function () {
                        //Change the attribute back to password
                        $('#password').attr('type', 'password');
                        $('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
                    }
                );
https://codepen.io/GBMahili/pen/pEvVZP
1

Best way to do this, without making too many changes to the code, is to use JavaScript (jQuery) that will add Hide/Show capability to the existing password field.

Excellent free jQuery plugin for that is: HideShowPassword. It has many ways to customize how the password will be visible.

-1

override by copying woocommerce/templates/myaccount/form-login.php. it to yourtheme/woocommerce/myaccount/form-login.php.

and change password field attribute type="password" to type="text"

hope it will solve your problem.

1
  • Never change the type of the field like this, because other parts of the code might depend on it. Also, it might cause security related problems. Sep 14, 2017 at 13:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.