Show/Hide Password on Registration

[pixlapps]

I wanted a show/hide password field on my registration form to use up a little less space and improve user experience. We basically just change the input type from password to text when clicking on an icon.

A quickie on how to show/hide password field using a variable and show/hide and dynamic onclick functions:

steps:

Add a variable to your page using the App Structure Insert Menu

Here is mine after also setting the default value of my input field type to password:

<dmx-value id="var_passwordtoggle" dmx-bind:value="'password'"></dmx-value>

Then add your input field to your form and use a dynamic bindding for the field type and set the value to the default value of your variable:

    <div class="form-group">
         <div class="input-group mb-4">
                <input dmx-bind:type="var_passwordtoggle.value" name="Password" id="Password" class="form-control" placeholder="Password">
          </div>
     </div>

Then as per bootstrap docs add an appended icon to your input field with the font awesome eye icon and duplicate this with the font-awesome eye-slash icon. One will show when password field type is set and one when text field type is set based on the dynamic binding on the filed type:

    <div class="form-group">
         <div class="input-group mb-4">
               <input dmx-bind:type="var_passwordtoggle.value" name="Password" id="Password" class="form-control" placeholder="Password">
          <div class="input-group-append">
           <span class="input-group-text"  dmx-show="var_passwordtoggle.value == 'password'">
                  <i class="fa fa-eye"></i>
           </span>
            <span class="input-group-text"  dmx-show="var_passwordtoggle.value == 'text'">
                     <i class="fa fa-eye-slash"></i>
           </span>
         </div>
       </div>
    </div>

Lastly add the onclick dynamic events to change the variable value which will in turn change the field type value to user’s preference:

    <div class="form-group">
          <div class="input-group mb-4">
                   <input dmx-bind:type="var_passwordtoggle.value" name="Password" id="Password" class="form-control" placeholder="Password">
                   <div class="input-group-append">
                   <span class="input-group-text"  dmx-on:click="var_passwordtoggle.setValue('text')" dmx-show="var_passwordtoggle.value == 'password'">
                           <i class="fa fa-eye"></i>
                   </span>
                   <span class="input-group-text" dmx-on:click="var_passwordtoggle.setValue('password')" dmx-show="var_passwordtoggle.value == 'text'">
                            <i class="fa fa-eye-slash"></i>
                      </span>
                 </div>
           </div>
     </div>

Default:

Toggled:

And that’s it!

I tried some jquery plug-ins for doing this but none seemed to work with my single page site.

Admins, please feel free to edit and improve since this is my first tutorial on the forum.

[TomD]

Thanks @pixlapps. A very simple - and clever - solution. Perhaps the ‘type’ attribute should be added as in input option in the UI, now that you’ve demonstrated a case for it.

A variation on your method would be to use Mouse Up and Mouse Down - this is common with options to reveal passwords.

[JonL]

I implemented this in a slightly different way. Using a variable, a ternary operation and two class toggles. Absolutely nothing wrong with the first method present here. Just an alternative.

For the variable:

<dmx-value id="passVis" dmx-bind:value="'password'"></dmx-value>

For the ternary operation and the class swap inside the password input:

<span class="input-group-text" dmx-on:click="passVis.setValue((passVis.value == 'password' ? 'text' : 'password'))">
<i class="fas" dmx-class:fa-eye="(passVis.value == 'password')" dmx-class:fa-eye-slash="(passVis.value == 'text')"></i>
</span>

Remember to bind the type attribute in the input to the variable:

dmx-bind:type="passVis.value"

[brad]

Very interesting! I need to do this.

On a side note, how did you add the eye icon to your text field?

[Teodor]

Check the HTML code provided.

[JonL]

So I thought I would build an ‘out-of-the-box’ solution using App Connect framework and Bootstrap 5.

Note: it only works with BS5.

Anyway here you have an App Connect custom extension to toggle the password visibility.

Add the following code to a js file and then import it in the page you want to use it in.

<script src="/js/custom/dmx-jonl-passvis.js" defer=""></script>

Custom code:

dmx.Attribute('jonl-passvis', 'mounted', function (node, attr) {

    let span = document.createElement('span')
    span.setAttribute('class', 'input-group-text')

    switch (attr.argument) {
        case 'icon':
            span.innerHTML = '<span id="togglePassword" class="' + attr.value.split('::')[0] + '" id="togglePassword" style="cursor: pointer"></span>';
            span.addEventListener('click', function () {
                node.setAttribute('type', node.type == 'password' ? 'text' : 'password')
                document.getElementById('togglePassword').setAttribute('class', node.type == 'password' ? attr.value.split('::')[0] : attr.value.split('::')[1])
            })
            break;
        case 'text':
            span.innerHTML = '<span id="togglePassword" style="cursor: pointer">' + attr.value.split('::')[0] + '</span>';
            span.addEventListener('click', function () {
                node.setAttribute('type', node.type == 'password' ? 'text' : 'password')
                document.getElementById('togglePassword').innerText = node.type == 'password' ? attr.value.split('::')[0] : attr.value.split('::')[1]
            })

            break;
        default:
        // do nothing
    }
    node.insertAdjacentElement('afterend', span)
});

How do you use it?

Just add a new attribute to your password input called dmx-jonl-passvis.

The attribute takes an argument that can be icon or text and as value it will take two values separated by ::.

If you choose to display an icon the first value will be the icon for the show action and the second will be for the hide action.
If you choose to display text the first value will be the string to show and the second one the string to hide.

When you click on the icon or the text it will toggle the visibility.

Icon example

<input class="form-control" type="password" name="new-password" id="new-password" autocomplete="new-password" dmx-jonl-passvis:icon="far fa-eye::far fa-eye-slash">

Text example

<input class="form-control" type="password" name="new-password" id="new-password" autocomplete="new-password" dmx-jonl-passvis:text="Show::Hide">

[JonL]

In a new chapter of “A thousand ways to show and hide a password input”…

Here I come with yet another solution if you want to have additional flexibility in how you layout the functionality and you want it to be independent of the Bootstrap version you are using.

Create a js file with the following content:

dmx.Component('jonl_input', {
    extends: 'form-element',
    tag: 'input',
    methods: {
        togglePasswordVisibility: function () {
            this.$node.setAttribute('type', this.$node.type == 'password' ? 'text' : 'password')
            dmx.requestUpdate();
        },
        getType: function () {
            return this.$node.type
        }
    }
});

Add to your html head:

<script src="/js/custom/dmx-jonl-input.js" defer="true"></script>

Add to your input the attribute is="dmx-jonl_input"

<input class="form-control form-control-ifta" is="dmx-jonl_input" type="password" name="password" id="password">

And now you can call the toggleVisibility() and getType() functions for your input.

<a href="#" id="form_password_show" dmx-on:click.prevent="password.togglePasswordVisibility()">{{password.getType() == 'password' ? 'show-password'.t() : 'hide-password'.t()}}</a>

[Fred_K]

Does this work whether it be PHP or Node?

Also did you build that dynamic password strength / complexity barometer?
What if I want that barometer to dynamically check if the user’s input matches the required minimum characters (like min 1 uppercase, min one lowercase, min one number,…)?