Update demo to include password validation

Author: ch5zzy

packages/auth/demo/public/index.html

@@ -367,6 +367,34 @@
                   Confirm Password Change
                 </button>
               </form>
+
+              <!-- 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" />
+                <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.
+                  </li>
+                  <li class="list-group-item" id="password-validation-meets-max-length">
+                    Password must be at most <span id="password-validation-max-length">4096</span> characters.
+                  </li>
+                  <li class="list-group-item" id="password-validation-contains-lowercase">
+                    Password must contain a lowercase letter.
+                  </li>
+                  <li class="list-group-item" id="password-validation-contains-uppercase">
+                    Password must contain an uppercase letter.
+                  </li>
+                  <li class="list-group-item" id="password-validation-contains-numeric">
+                    Password must contain a numeric character.
+                  </li>
+                  <li class="list-group-item" id="password-validation-contains-non-alphanumeric">
+                    Password must contain a non-alphanumeric character.
+                  </li>
+                </ul>
+              </form>
+
               <!-- Fetch Sign In Methods -->
               <div class="group">Fetch Sign In Methods</div>
               <form class="form form-bordered no-submit">

packages/auth/demo/public/style.css

@@ -76,6 +76,17 @@ body.user-info-displayed {
   border: none;
 }
 
+#password-validation-requirements {
+  margin-top: 20px;
+  margin-bottom: 0;
+  display: none;
+}
+
+#password-validation-requirements .list-group-item {
+  display: none;
+  list-style-type: none;
+}
+
 .logs {
   color: #555;
   font-family: 'Courier New', Courier;

packages/auth/demo/src/index.js

@@ -72,7 +72,8 @@ import {
   getRedirectResult,
   browserPopupRedirectResolver,
   connectAuthEmulator,
-  initializeRecaptchaConfig
+  initializeRecaptchaConfig,
+  validatePassword
 } from '@firebase/auth';
 
 import { config } from './config';
@@ -493,6 +494,87 @@ function onInitializeRecaptchaConfig() {
   initializeRecaptchaConfig(auth);
 }
 
+/**
+ * Updates the displayed validation status for the inputted password.
+ */
+function onValidatePassword() {
+  /**
+   * Updates the displayed status for a requirement.
+   * @param {string} id The ID of the DOM element displaying the requirement status.
+   * @param {boolean} status Whether the requirement is met.
+   */
+  function setRequirementStatus(id, status) {
+    if (status) {
+      $(id).removeClass('list-group-item-danger');
+      $(id).addClass('list-group-item-success');
+    } else {
+      $(id).removeClass('list-group-item-success');
+      $(id).addClass('list-group-item-danger');
+    }
+    $(id).show();
+  }
+
+  const password = $('#password-validation-password').val();
+  validatePassword(auth, password).then(
+    status => {
+      const customStrengthOptions = status.passwordPolicy.customStrengthOptions;
+
+      // Only show options required by the password policy.
+      if (customStrengthOptions.minPasswordLength) {
+        $('#password-validation-min-length').text(
+          customStrengthOptions.minPasswordLength
+        );
+        setRequirementStatus(
+          '#password-validation-meets-min-length',
+          status.meetsMinPasswordLength
+        );
+      }
+      if (customStrengthOptions.maxPasswordLength) {
+        $('#password-validation-max-length').text(
+          customStrengthOptions.maxPasswordLength
+        );
+        setRequirementStatus(
+          '#password-validation-meets-max-length',
+          status.meetsMaxPasswordLength
+        );
+      }
+      if (customStrengthOptions.containsLowercaseLetter) {
+        setRequirementStatus(
+          '#password-validation-contains-lowercase',
+          status.containsLowercaseLetter
+        );
+      }
+      if (customStrengthOptions.containsUppercaseLetter) {
+        setRequirementStatus(
+          '#password-validation-contains-uppercase',
+          status.containsUppercaseLetter
+        );
+      }
+      if (customStrengthOptions.containsNumericCharacter) {
+        setRequirementStatus(
+          '#password-validation-contains-numeric',
+          status.containsNumericCharacter
+        );
+      }
+      if (customStrengthOptions.containsNonAlphanumericCharacter) {
+        setRequirementStatus(
+          '#password-validation-contains-non-alphanumeric',
+          status.containsNonAlphanumericCharacter
+        );
+      }
+
+      $('#password-validation-password').prop('disabled', false);
+      $('#password-validation-requirements').show();
+    },
+    error => {
+      // Disable the password input and hide the requirements since validation cannot be performed.
+      $('#password-validation-password').prop('disabled', true);
+      $('#password-validation-requirements').hide();
+      onAuthError(error);
+    }
+  );
+}
+
 /**
  * Signs in with a generic IdP credential.
  */
@@ -2033,6 +2115,7 @@ function initApp() {
   $('#sign-in-anonymously').click(onSignInAnonymously);
   $('.set-tenant-id').click(onSetTenantID);
   $('#initialize-recaptcha-config').click(onInitializeRecaptchaConfig);
+  $('#password-validation-password').keyup(onValidatePassword);
   $('#sign-in-with-generic-idp-credential').click(
     onSignInWithGenericIdPCredential
   );