Add password view toggle

Author: ch5zzy

packages/auth/demo/public/index.html

@@ -371,8 +371,15 @@
               <!-- Password Validation -->
               <div class="group">Password Validation</div>
               <form class="form form-bordered no-submit">
-                <input type="password" name="password" id="password-validation-password"
-                       class="form-control" placeholder="Password" />
+                <div class="input-group">
+                  <input type="password" name="password" id="password-validation-password"
+                        class="form-control" placeholder="Password" />
+                  <div class="input-group-btn">
+                    <button class="btn btn-default" type="button" id="password-validation-view-password" aria-label="View password">
+                      <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
+                    </button>
+                  </div>
+                </div>
                 <ul class="list-group" id="password-validation-requirements">
                   <li class="list-group-item" id="password-validation-meets-min-length">
                     Password must be at least <span id="password-validation-min-length">6</span> characters.

packages/auth/demo/src/index.js

@@ -577,6 +577,18 @@ function onValidatePassword() {
   );
 }
 
+/**
+ * Toggles text visibility for the password validation input field.
+ */
+function onToggleViewPasswordForValidation() {
+  const id = '#password-validation-password';
+  if ($(id).prop('type') === 'password') {
+    $(id).prop('type', 'text');
+  } else {
+    $(id).prop('type', 'password');
+  }
+}
+
 /**
  * Signs in with a generic IdP credential.
  */
@@ -2118,6 +2130,9 @@ function initApp() {
   $('.set-tenant-id').click(onSetTenantID);
   $('#initialize-recaptcha-config').click(onInitializeRecaptchaConfig);
   $('#password-validation-password').keyup(onValidatePassword);
+  $('#password-validation-view-password').click(
+    onToggleViewPasswordForValidation
+  );
   $('#sign-in-with-generic-idp-credential').click(
     onSignInWithGenericIdPCredential
   );