Merge pull request #395 from ovh-ux/develop

Develop

Author: AxelPeter

packages/oui-field/src/field.controller.js

@@ -38,7 +38,7 @@ export default class FieldController {
         this.ids = [];
         this.validationParameters = {};
         this.invalid = false;
-        this.invalidOnBlur = false;
+        this.blurred = false;
         this.hasFocus = false;
         this.size = this.size || "auto";
     }
@@ -130,35 +130,28 @@ export default class FieldController {
 
         angular.element(controlElement).on("focus", () => {
             this.$timeout(() => {
-                this.hideErrors(controlElement, name);
+                this.form[name].$touched = false;
                 this.hasFocus = true;
             });
         });
     }
 
     checkControlErrors (controlElement, name) {
+        this.blurred = true;
         if (this.form[name] && this.form[name].$invalid) {
-            this.invalidOnBlur = true;
             this.currentErrorField = name;
         } else {
-            this.invalidOnBlur = false;
             this.currentErrorField = null;
         }
     }
 
-    hideErrors (controlElement, name) {
-        this.form[name].$touched = false;
-        this.invalidOnBlur = false;
-    }
-
     isErrorVisible () {
         if (!this.form) {
             return false;
         }
 
         this.checkAllErrors();
-        return this.invalidOnBlur || // true if invalid after blur event
-            (this.form.$submitted && this.invalid && !this.hasFocus); // true if invalid after submit event
+        return this.invalid && !this.hasFocus && (this.blurred || this.form.$submitted);
     }
 
     checkAllErrors () {

packages/oui-password/README.md

@@ -62,6 +62,32 @@
 </form>
 ```
 
+#### Confirm Validation
+
+Useful when you have a password field and a confirm password field. The confirm property takes the expression, the value of which should match with it's model value.
+
+```html:preview
+<form name="form3" novalidate>
+    <oui-field label="Password" size="xl">
+        <oui-password model="$ctrl.modelTriggerValidation">
+            <oui-password-rule validator="$ctrl.checkPasswordLength(modelValue)">
+                Must contain between 8 and 30 characters
+            </oui-password-rule>
+            <oui-password-rule pattern="[0-9]+">
+                Have at least one number
+            </oui-password-rule>
+            <oui-password-rule pattern="[A-Z]+">
+                Have at least capital letter
+            </oui-password-rule>
+        </oui-password>
+    </oui-field>
+    <oui-field label="Confirm Password" size="xl">
+        <oui-password model="$ctrl.modelTriggerValidationConfirmPassword" confirm="$ctrl.modelTriggerValidation">
+        </oui-password>
+    </oui-field>
+</form>
+```
+
 #### Custom strength feedback
 
 The feedback of password strength can be overridden by adding your custom feedback in `oui-password-strength`.
@@ -105,6 +131,7 @@ It can also be globally changed with `ouiPasswordProvider` (see **Configuration*
 | `pattern`     | string&lt;regexp&gt;  | @?        | yes               | n/a                   | n/a       | pattern of the model value
 | `required`    | boolean               | <?        | no                | `true`, `false`       | `false`   | required flag
 | `on-change`   | function              | &         | no                | n/a                   | n/a       | handler triggered when value has changed
+| `confirm`     | string                | <?        | no                | n/a                   | n/a       | an expression, used for confirm password, which should match with the model value 
 
 ### oui-rule
 

packages/oui-password/src/index.spec.js

@@ -141,6 +141,73 @@ describe("ouiPassword", () => {
             });
         });
 
+        describe("ConfirmValidation", () => {
+            let form;
+            let passwords;
+            let password;
+            let confirmPassword;
+            let confirmPasswordController;
+            let passwordInput;
+            let confirmPasswordInput;
+
+            beforeEach(() => {
+                form = TestUtils.compileTemplate(`
+                <form name="form">
+                    <oui-password id="password1" name="password1"
+                        model="$ctrl.model1"
+                        minlength="4"
+                        maxlength="16"
+                        pattern="^[a-zA-Z0-9]+$"
+                        required>
+                    </oui-password>
+                    <oui-password id="confirmpassword1" name="confirmpassword1"
+                        model="$ctrl.model2"
+                        confirm="$ctrl.model1">
+                    </oui-password>
+                </form>`);
+
+                $timeout.flush();
+                passwords = form.find("oui-password");
+                password = angular.element(passwords[0]);
+                confirmPassword = angular.element(passwords[1]);
+                password.controller("ouiPassword");
+                confirmPasswordController = confirmPassword.controller("ouiPassword");
+                passwordInput = getInput(password);
+                confirmPasswordInput = getInput(confirmPassword);
+            });
+
+            it("should get an error 'confirm'", () => {
+                passwordInput.val("foobar");
+                passwordInput.triggerHandler("input");
+                confirmPasswordInput.val("foo");
+                confirmPasswordInput.triggerHandler("input");
+
+                expect(confirmPasswordController.form.$error).toBeTruthy();
+                expect(confirmPasswordController.form.$error.password).toBeTruthy();
+            });
+
+            it("should not get an error if passwords match", () => {
+                passwordInput.val("foobar");
+                passwordInput.triggerHandler("input");
+                confirmPasswordInput.val("foobar");
+                confirmPasswordInput.triggerHandler("input");
+
+                expect(confirmPasswordController.form.$error.password).toBeFalsy();
+            });
+
+            it("should detect a change in the confirm property value and trigger validation", () => {
+                passwordInput.val("foobar");
+                passwordInput.triggerHandler("input");
+                confirmPasswordInput.val("foobar");
+                confirmPasswordInput.triggerHandler("input");
+                passwordInput.val("foobar123");
+                passwordInput.triggerHandler("input");
+
+                expect(confirmPasswordController.form.$error).toBeTruthy();
+                expect(confirmPasswordController.form.$error.password).toBeTruthy();
+            });
+        });
+
         describe("Strength", () => {
             const compileStrength = (score) => TestUtils.compileTemplate(`
             <oui-password id="foo" name="bar" model="$ctrl.model">

packages/oui-password/src/password.component.js

@@ -15,7 +15,8 @@ export default {
         minlength: "<?",
         pattern: "@?",
         required: "<?",
-        onChange: "&"
+        onChange: "&",
+        confirm: "<?"
     },
     controller,
     template,

packages/oui-password/src/password.controller.js

@@ -6,7 +6,7 @@ export default class {
 
         this.$attrs = $attrs;
         this.$element = $element;
-        this.$id = $scope.$id;
+        this.$scope = $scope;
         this.$timeout = $timeout;
         this.translations = ouiPasswordConfiguration.translations;
     }
@@ -30,19 +30,26 @@ export default class {
         addBooleanParameter(this, "disabled");
         addBooleanParameter(this, "required");
 
-        addDefaultParameter(this, "id", `ouiPassword${this.$id}`);
-        addDefaultParameter(this, "name", `ouiPassword${this.$id}`);
+        addDefaultParameter(this, "id", `ouiPassword${this.$scope.$id}`);
+        addDefaultParameter(this, "name", `ouiPassword${this.$scope.$id}`);
 
         this.errors = {};
         this.isVisible = false;
     }
 
     $postLink () {
-        this.$timeout(() =>
+        this.$timeout(() => {
             this.$element
                 .removeAttr("id")
                 .removeAttr("name")
-                .addClass("oui-password")
-        );
+                .addClass("oui-password");
+
+            if ("confirm" in this.$attrs) {
+                this.$scope.$watch(
+                    () => this.confirm === this.model,
+                    (value) => this.updateValidity("confirm", value)
+                );
+            }
+        });
     }
 }