Add tooltip for allowed non-alphanumeric characters

Author: ch5zzy

packages/auth/demo/public/index.html

@@ -397,7 +397,7 @@
                     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.
+                    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>
               </form>

packages/auth/demo/public/style.css

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

packages/auth/demo/src/index.js

@@ -523,7 +523,8 @@ function onValidatePassword() {
   const password = $('#password-validation-password').val();
   validatePassword(auth, password).then(
     status => {
-      const customStrengthOptions = status.passwordPolicy.customStrengthOptions;
+      const passwordPolicy = status.passwordPolicy;
+      const customStrengthOptions = passwordPolicy.customStrengthOptions;
 
       // Only show options required by the password policy.
       if (customStrengthOptions.minPasswordLength) {
@@ -536,6 +537,12 @@ function onValidatePassword() {
           customStrengthOptions.maxPasswordLength
         );
       }
+      if (customStrengthOptions.containsNonAlphanumericCharacter) {
+        $('#password-validation-allowed-non-alphanumeric-characters').attr(
+          'data-original-title',
+          passwordPolicy.allowedNonAlphanumericCharacters
+        );
+      }
       setRequirementStatus(
         '#password-validation-meets-min-length',
         status.meetsMinPasswordLength