Add 'show password' toggle to the default hosted login pages

[mooreds]

Add 'show password' toggle to the default hosted login pages

Problem

Our hosted login pages don't always have the best default login experience out of the box. One small way to improve it would be to add a 'show password' field.

Solution

Set this up to be the default using something like this: https://www.w3schools.com/howto/howto_js_toggle_password.asp so that we're helping customers build better UX by default.

Alternatives/workarounds

Document how to do this, either in docs or the forum.

Additional context

Came up in the june 2024 newsletter.

Community guidelines

All issues filed in this repository must abide by the FusionAuth community guidelines.

How to vote

Please give us a thumbs up or thumbs down as a reaction to help us prioritize this feature. Feel free to comment if you have a particular need or comment on how this feature should work.

[jfaMan]

@mooreds Would be nice to have it by default, but for now I've just simply added it like so:

oauth2Authorize.ftl

Inside the script tags:

  function togglePassword() {
    const passwordInput = document.getElementById("password");
    passwordInput.type = passwordInput.type === "password" ? "text" : "password";
  }

  document.getElementById("togglePassword").addEventListener("click", togglePassword);

Underneath the password field:

[@helpers.input id="togglePassword" type="checkbox" name="togglePassword" label=theme.message('password-toggle') arialabel=theme.message('password-toggle') value="false" uncheckedValue="false"/]

defaultMessages.txt

password-toggle=Show password