Skip to content

show/hide implementation for password field #107

Description

@sean-dunwoody

Most websites nowadays seem to give users the ability to show/hide the text within password fields.

This can be really useful if you think you might have misspelt something (or if you have to repeat the password, but the repeated password doesn't match, thus failing form validation).

A basic example from another site I've encountered:

Image Image

This looks really easy to implement, e.g. (please note this is just a basic example, I'm not suggesting we actually do it this way)

<script>
function toggler(e) {
  if( e.innerHTML == 'Show' ) {
      e.innerHTML = 'Hide'
      document.getElementById('password').type="text";
  } else {
      e.innerHTML = 'Show'
      document.getElementById('password').type="password";
  }
}
</script>

<input type="password" id="password">
<button onclick="toggler(this)" type="button">Show</button>

From:

https://stackoverflow.com/questions/43390966/javascript-show-hide-toggle-button-for-password-field

It would be good to have a consistent way to do this in Amplify, keeping in mind good UI design, accessibility, etc.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request
    No fields configured for Feature.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions