Very interesting! I need to do this.
On a side note, how did you add the eye icon to your text field?
Check the HTML code provided.
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">
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>
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,…)?
Yep. Even for classic ASP 
Yes, that’s another custom extension I built(unpublished at the moment).
It was fun to implement although I had to adapt the code by @pixlapps due to BS5 upgrades.
And we get a little display “bug” when using form-floating:
This in spite of the appended icons being inside the dmx-input-group.
The solution here is to add an absolute position to that span element from the Design panel:
I call my newly created style centerEye which must be added to the class of the span element.
<div class="form-floating row mb-4" is="dmx-input-group">
<input id="inp_password" name="password" class="form-control" placeholder="Password" required="" data-msg-required="Password is required." data-rule-pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,15}$" data-msg-pattern="For security purposes, password must have at least one lowercase, one uppercase letter, one number and one special character." dmx-bind:type="var_passwordtoggle.value">
<span class="form-floating-text text-end centerEye" dmx-on:click="var_passwordtoggle.setValue('text')" dmx-show="var_passwordtoggle.value == 'password'">
<i class="far fa-eye"></i>
</span>
<span class="form-floating-text text-end centerEye" dmx-on:click="var_passwordtoggle.setValue('password')" dmx-show="var_passwordtoggle.value == 'text'">
<i class="far fa-eye-slash"></i>
</span>
<label for="inp_password" class="col-form-label">Password*</label>
</div>Brownie points when you publish that extension! 
I’m more excited by the IFTA 
Everytime I look at the IFTAs:
You know you have done something right when Beagle likes your stuff:
I deserve my beers today. Tomorrow I won’t but I’ll drink them anyway.