Added validations for passwords

src/apim.runtime.module.ts

@@ -13,6 +13,7 @@ import { RoleBasedSecurityRuntimeModule } from "@paperbits/core/security/roleBas
 import { staticDataEnvironment } from "./../environmentConstants";
 import { AccessTokenRefrsher } from "./authentication/accessTokenRefresher";
 import "./bindingHandlers/acceptChange";
+import "./bindingHandlers/passwordValidator";
 import "./bindingHandlers/barChart";
 import "./bindingHandlers/copyToClipboard";
 import "./bindingHandlers/fastForeach";

src/bindingHandlers/passwordValidator.ts

@@ -0,0 +1,25 @@
+import * as ko from "knockout";
+import { ValidationMessages } from "../components/users/validationMessages";
+ko.extenders.passwordValidator = (target) => {
+    target.extend({ 
+        validation: {
+            validator: (value) => {
+                var minLength = 8;
+                var requiredCategories = 2;
+                var uppercaseRegex = /[A-Z]/;
+                var lowercaseRegex = /[a-z]/;
+                var numbersRegex = /[0-9]/;
+                var symbolsRegex = new RegExp("[!@#$%^&*()_+{}\\[\\]:;<>,.?~\\-]");
+                var categories = 0;
+                if (uppercaseRegex.test(value)) categories++;
+                if (lowercaseRegex.test(value)) categories++;
+                if (numbersRegex.test(value)) categories++;
+                if (symbolsRegex.test(value)) categories++;
+                var isValid = value.length >= minLength && categories >= requiredCategories;
+                return isValid;
+            },
+            message: ValidationMessages.passwordCriteria
+        }
+    });
+    return target;
+};

src/components/users/change-password/ko/runtime/change-password.html

@@ -5,21 +5,23 @@
 <!-- ko if: !isChangeConfirmed() -->
 <form data-bind="submit: changePassword">
     <fieldset data-bind="attr: { disabled: working}">
-        <div class="form-group">
+        <div class="form-group has-validation">
             <label for="password">Password *</label>
-            <input aria-required="true" class="form-control" id="password" name="password"
-                autocomplete="password" type="password" data-bind="textInput: password">
+            <input aria-required="true" class="form-control" id="password" name="password" autocomplete="password"
+                type="password" data-bind="textInput: password">
+            <span class="invalid-feedback" data-bind="validationMessage: password"></span>
         </div>
-        <div class="form-group">
+        <div class="form-group has-validation">
             <label for="new-password">New password *</label>
             <input aria-required="true" class="form-control" id="new-password" name="new-password"
                 autocomplete="new-password" type="password" data-bind="textInput: newPassword">
+            <span class="invalid-feedback" data-bind="validationMessage: newPassword"></span>
         </div>
-        <div class="form-group">
+        <div class="form-group has-validation">
             <label for="confirmPassword">Confirm password *</label>
             <input aria-required="true" class="form-control" id="confirmPassword" name="confirm"
-                autocomplete="new-password" type="password"
-                data-bind="textInput: passwordConfirmation">
+                autocomplete="new-password" type="password" data-bind="textInput: passwordConfirmation">
+            <span class="invalid-feedback" data-bind="validationMessage: passwordConfirmation"></span>
         </div>
         <!-- ko if: requireHipCaptcha -->
         <hip-captcha params="{ captchaData: captchaData, onInitComplete: onCaptchaCreated }"></hip-captcha>

src/components/users/change-password/ko/runtime/change-password.ts

@@ -53,8 +53,8 @@ export class ChangePassword {
             decorateInputElement: true
         });
 
-        this.password.extend(<any>{ required: { message: ValidationMessages.passwordRequired } }); // TODO: password requirements should come from Management API.
-        this.newPassword.extend(<any>{ required: { message: ValidationMessages.newPasswordRequired }, minLength: 8 }); // TODO: password requirements should come from Management API.
+        this.password.extend(<any>{ required: { message: ValidationMessages.passwordRequired } });
+        this.newPassword.extend(<any>{ required: { message: ValidationMessages.newPasswordRequired }, passwordValidator: {} });
         this.passwordConfirmation.extend(<any>{ equal: { message: ValidationMessages.passwordConfirmationMustMatch, params: this.newPassword } });
         this.captcha.extend(<any>{ required: { message: ValidationMessages.captchaRequired } });
     }

src/components/users/confirm-password/ko/runtime/confirm-password.html

@@ -7,20 +7,22 @@
 <form data-bind="submit: resetPswd">
 
     <fieldset>
-        <div class="form-group">
+        <div class="form-group has-validation">
             <label for="password">Password</label>
-            <input aria-required="true" class="form-control" id="password" name="password"
-                autocomplete="new-password" type="password" data-bind="textInput: password">
+            <input aria-required="true" class="form-control" id="password" name="password" autocomplete="new-password"
+                type="password" data-bind="textInput: password">
+            <span class="invalid-feedback" data-bind="validationMessage: password"></span>
         </div>
-        <div class="form-group">
+        <div class="form-group has-validation">
             <label for="confirmPassword">Confirm password</label>
             <input aria-required="true" class="form-control" id="confirmPassword" name="confirm"
-                autocomplete="new-password" type="password"
-                data-bind="textInput: passwordConfirmation">
+                autocomplete="new-password" type="password" data-bind="textInput: passwordConfirmation">
+            <span class="invalid-feedback" data-bind="validationMessage: passwordConfirmation"></span>
         </div>
-       
+
         <div class="form-group">
-            <button type="submit" id="signup" class="button button-primary">
+            <button type="submit" id="signup" class="button button-primary"
+                data-bind="attr: { disabled: isResetPasswordDisabled() }">
                 Reset
             </button>
         </div>

src/components/users/confirm-password/ko/runtime/confirm-password.ts

@@ -37,7 +37,7 @@ export class ConfirmPassword {
             decorateInputElement: true
         });
 
-        this.password.extend(<any>{ required: { message: ValidationMessages.passwordRequired }, minLength: 8 }); // TODO: password requirements should come from Management API.
+        this.password.extend(<any>{ required: { message: ValidationMessages.passwordRequired }, passwordValidator: {} });
         this.passwordConfirmation.extend(<any>{ equal: { message: ValidationMessages.passwordConfirmationMustMatch, params: this.password } });
     }
 

src/components/users/signup/ko/runtime/signup.html

@@ -5,43 +5,49 @@
 <!-- ko ifnot: isUserRequested -->
 <form data-bind="submit: signup">
     <fieldset data-bind="attr: { disabled: working}">
-        <div class="form-group">
+        <div class="form-group has-validation">
             <label for="email">Email *</label>
-            <input aria-required="true" autofocus="autofocus" spellcheck="false" class="form-control" id="email" name="email"
-                autocomplete="email" placeholder="e.g. [email protected]" type="email" data-bind="textInput: email">
+            <input aria-required="true" autofocus="autofocus" spellcheck="false" class="form-control" id="email"
+                name="email" autocomplete="email" placeholder="e.g. [email protected]" type="email"
+                data-bind="textInput: email">
+            <span class="invalid-feedback" data-bind="validationMessage: email"></span>
         </div>
-        <div class="form-group">
+        <div class="form-group has-validation">
             <label for="password">Password *</label>
-            <input aria-required="true" class="form-control" id="password" name="password"
-                autocomplete="new-password" type="password" data-bind="textInput: password">
+            <input aria-required="true" class="form-control" id="password" name="password" autocomplete="new-password"
+                type="password" data-bind="textInput: password">
+            <span class="invalid-feedback" data-bind="validationMessage: password"></span>
         </div>
-        <div class="form-group">
+        <div class="form-group has-validation">
             <label for="confirmPassword">Confirm password *</label>
             <input aria-required="true" class="form-control" id="confirmPassword" name="confirm"
-                autocomplete="new-password" type="password"
-                data-bind="textInput: passwordConfirmation">
+                autocomplete="new-password" type="password" data-bind="textInput: passwordConfirmation">
+            <span class="invalid-feedback" data-bind="validationMessage: passwordConfirmation"></span>
         </div>
-        <div class="form-group">
+        <div class="form-group has-validation">
             <label for="firstName">First name *</label>
-            <input aria-required="true" class="form-control" id="firstName" name="firstName"
-                placeholder="e.g. John" type="text" data-bind="textInput: firstName">
+            <input aria-required="true" class="form-control" id="firstName" name="firstName" placeholder="e.g. John"
+                type="text" data-bind="textInput: firstName">
+            <span class="invalid-feedback" data-bind="validationMessage: firstName"></span>
         </div>
-        <div class="form-group">
+        <div class="form-group has-validation">
             <label for="lastName">Last name *</label>
-            <input aria-required="true" class="form-control" id="lastName" name="lastName"
-                placeholder="e.g. Doe" type="text" data-bind="textInput: lastName">
+            <input aria-required="true" class="form-control" id="lastName" name="lastName" placeholder="e.g. Doe"
+                type="text" data-bind="textInput: lastName">
+            <span class="invalid-feedback" data-bind="validationMessage: lastName"></span>
         </div>
 
         <!-- ko if: requireHipCaptcha -->
         <hip-captcha params="{ captchaData: captchaData, onInitComplete: onCaptchaCreated }"></hip-captcha>
-        <!-- /ko -->       
-        
+        <!-- /ko -->
+
         <!-- ko if: termsEnabled && termsOfUse -->
-        <terms-of-use params="{ isConsentRequired: isConsentRequired, consented: consented, termsOfUse: termsOfUse }"></terms-of-use>
+        <terms-of-use
+            params="{ isConsentRequired: isConsentRequired, consented: consented, termsOfUse: termsOfUse }"></terms-of-use>
         <!-- /ko -->
 
         <div class="form-group">
-            
+
             <!-- ko ifnot: working -->
             <button type="button" id="signup" class="button button-primary" data-bind="click: signup">
                 Sign up

src/components/users/signup/ko/runtime/signup.ts

@@ -66,7 +66,7 @@ export class Signup {
         });
 
         this.email.extend(<any>{ required: { message: ValidationMessages.emailRequired }, email: true });
-        this.password.extend(<any>{ required: { message: ValidationMessages.passwordRequired }, minLength: 8 }); // TODO: password requirements should come from Management API.
+       // this.password.extend(<any>{ required: { message: ValidationMessages.passwordRequired }, passwordValidator: {} });
         this.passwordConfirmation.extend(<any>{ equal: { message: ValidationMessages.passwordConfirmationMustMatch, params: this.password } });
         this.firstName.extend(<any>{ required: { message: ValidationMessages.firstNameRequired } });
         this.lastName.extend(<any>{ required: { message: ValidationMessages.lastNameRequired } });
@@ -155,7 +155,7 @@ export class Signup {
         if (captchaIsRequired) {
             if (!this.setCaptchaValidation) {
                 this.logger.trackEvent("CaptchaValidation", { message: "Captcha failed to initialize." });
-                dispatchErrors(this.eventManager, ErrorSources.resetpassword, [ValidationMessages.captchaNotInitialized]);
+                dispatchErrors(this.eventManager, ErrorSources.signup, [ValidationMessages.captchaNotInitialized]);
                 return;
             }
 

src/components/users/validationMessages.ts

@@ -5,6 +5,7 @@ export class ValidationMessages {
     static firstNameRequired = `First name is required.`;
     static lastNameRequired = `Last name is required.`;
     static passwordRequired = `Password is required.`;
+    static passwordCriteria = `Passwords must have at least 8 characters and contain at least two of the following: uppercase letters, lowercase letters, numbers, and symbols`;
     static passwordConfirmationMustMatch = `Password confirmation field must be equal to password.`;
     static newPasswordRequired = `New password is required.`;
     static consentRequired = `You must agree to the terms of use.`;