Use Object.keys for iterating over requirements

Author: ch5zzy

packages/auth/demo/public/index.html

@@ -381,22 +381,22 @@
                   </div>
                 </div>
                 <ul class="list-group" id="password-validation-requirements">
-                  <li class="list-group-item" id="password-validation-meets-min-length">
+                  <li class="list-group-item" id="password-validation-meets-min-password-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">
+                  <li class="list-group-item" id="password-validation-meets-max-password-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">
+                  <li class="list-group-item" id="password-validation-contains-lowercase-letter">
                     Password must contain a lowercase letter.
                   </li>
-                  <li class="list-group-item" id="password-validation-contains-uppercase">
+                  <li class="list-group-item" id="password-validation-contains-uppercase-letter">
                     Password must contain an uppercase letter.
                   </li>
-                  <li class="list-group-item" id="password-validation-contains-numeric">
+                  <li class="list-group-item" id="password-validation-contains-numeric-character">
                     Password must contain a numeric character.
                   </li>
-                  <li class="list-group-item" id="password-validation-contains-non-alphanumeric">
+                  <li class="list-group-item" id="password-validation-contains-non-alphanumeric-character">
                     Password must contain a non-alphanumeric character. <span class="glyphicon glyphicon-info-sign" id="password-validation-allowed-non-alphanumeric-characters" data-toggle="tooltip" data-placement="bottom" title="No allowed non-alphanumeric characters." aria-label="View non-alphanumeric characters"></span>
                   </li>
                 </ul>

packages/auth/demo/public/style.css

@@ -87,7 +87,7 @@ body.user-info-displayed {
   list-style-type: none;
 }
 
-#password-validation-contains-non-alphanumeric .tooltip {
+#password-validation-contains-non-alphanumeric-character .tooltip {
   font-family: 'Courier New', Courier;
   font-size: 1.1em;
   letter-spacing: 5px;

packages/auth/demo/src/index.js

@@ -543,30 +543,17 @@ function onValidatePassword() {
           passwordPolicy.allowedNonAlphanumericCharacters
         );
       }
-      setRequirementStatus(
-        '#password-validation-meets-min-length',
-        status.meetsMinPasswordLength
-      );
-      setRequirementStatus(
-        '#password-validation-meets-max-length',
-        status.meetsMaxPasswordLength
-      );
-      setRequirementStatus(
-        '#password-validation-contains-lowercase',
-        status.containsLowercaseLetter
-      );
-      setRequirementStatus(
-        '#password-validation-contains-uppercase',
-        status.containsUppercaseLetter
-      );
-      setRequirementStatus(
-        '#password-validation-contains-numeric',
-        status.containsNumericCharacter
-      );
-      setRequirementStatus(
-        '#password-validation-contains-non-alphanumeric',
-        status.containsNonAlphanumericCharacter
-      );
+      Object.keys(status).forEach(requirement => {
+        if (requirement !== 'passwordPolicy') {
+          // Get the requirement ID by converting to kebab case.
+          const requirementIdPrefix = '#password-validation-';
+          const requirementId =
+            requirementIdPrefix +
+            requirement.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
+
+          setRequirementStatus(requirementId, status[requirement]);
+        }
+      });
 
       $('#password-validation-password').prop('disabled', false);
       $('#password-validation-requirements').show();