Show Password Checkbox | Axero Documentation

Add a Show password checkbox to the login page that toggles password visibility.

1. Click the gear icon > Manage People > User Profiles 
2. For the Login page, click the gear icon > Edit Page.
3. Click Widgets.
4. On the Login to your account Section widget, click the gear icon > Expand.
5. On the Password field, click the gear icon > Edit properties.
6. In the upper right corner, copy the Field ID and save it somewhere for later.
7. Click the X in the upper right corner.
8. In the Widgets pane, click Built in Widgets.
9. Drag a Raw HTML widget onto the page, below the Password field.
10. On the Raw HTML widget, click the gear icon > Edit properties.
11. Update the title to Show password.
12. In the editor, paste the following code.

    <div class="ax-form-field axero-profile-section-row">
        <label class="ax-field-checkbox"><input type="checkbox" onclick="togglePasswordVisibility()"><span>Show password</span></label>
    </div>
    <script>
    function togglePasswordVisibility() {
      var x = document.getElementById("Field108-D0");
      if (x.type === "password") {
        x.type = "text";
      } else {
        x.type = "password";
      }
    }
    </script>

13. In line 6, replace 108 with the field ID you copied.
14. Click Save Widget.
15. Click Publish changes.

To view the login page, log out of the site or open the site in an incognito tab or a different browser.