Jump to content

Eye in user Password input


Recommended Posts

  • 10 months later...
  • 5 months later...

* Go to file form-fields.tpl

*  Search {block name='form_field_item_password'}

* Change this code and put following code

 {block name='form_field_item_password'}

          <div class="input-group js-parent-focus input-groupButton">

            <input id="field-{$field.name}" class="form-control js-child-focus js-visible-password" name="{$field.name}"

              title="{l s='At least 5 characters long' d='Shop.Forms.Help'}"

              aria-label="{l s='Password input of at least 5 characters' d='Shop.Forms.Help'}" type="password"

              {if $field.autocomplete}autocomplete="{$field.autocomplete}" {/if} value=""

              pattern=".{literal}{{/literal}5,{literal}}{/literal}" {if $field.required}required{/if}>

            <i class="bi bi-eye-slash" id="togglePassword"></i>

          </div>

        {/block}

* After Go to head.tpl to add  link of bootstrap icons

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />

* Go to your theme.js, to change the function

* Search key: togglePasswordVisibility and change this function by following code

 {
                        key: "togglePasswordVisibility",
                        value: function () {
                            l()('#togglePassword').on(
                                "click",
                                function () {
                                    var e = l()(this)
                                        .closest(".input-group")
                                        .children("input.js-visible-password");
                                    "password" === e.attr("type")
                                        ? (e.attr("type", "text"),
                                            this.classList.toggle("bi-eye"))
                                        : (e.attr("type", "password"),
                                            this.classList.toggle("bi-eye"));
                                }
                            );
                        },
                    },

 

After save and refresh your page

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...