Skip to content
This repository was archived by the owner on Aug 7, 2020. It is now read-only.

feat(oui-password): validation trigger #390

Merged
Parent: Develop
merged 1 commit into from
Apr 23, 2019
Merged

feat(oui-password): validation trigger #390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 4 additions & 11 deletions packages/oui-field/src/field.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}
Expand Down Expand Up @@ -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 () {
Expand Down
27 changes: 27 additions & 0 deletions packages/oui-password/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down Expand Up @@ -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

Expand Down
67 changes: 67 additions & 0 deletions packages/oui-password/src/index.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
3 changes: 2 additions & 1 deletion packages/oui-password/src/password.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ export default {
minlength: "<?",
pattern: "@?",
required: "<?",
onChange: "&"
onChange: "&",
confirm: "<?"
},
controller,
template,
Expand Down
19 changes: 13 additions & 6 deletions packages/oui-password/src/password.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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)
);
}
});
}
}