diff --git a/packages/mosaic-dev/input/module.ts b/packages/mosaic-dev/input/module.ts index 71a042c71..a3034db10 100644 --- a/packages/mosaic-dev/input/module.ts +++ b/packages/mosaic-dev/input/module.ts @@ -1,10 +1,8 @@ /* tslint:disable:no-magic-numbers */ import { Component, NgModule, ViewEncapsulation } from '@angular/core'; import { - FormControl, FormsModule, - ReactiveFormsModule, - Validators + ReactiveFormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @@ -24,11 +22,12 @@ import { McInputModule } from '../../mosaic/input/'; }) export class InputDemoComponent { passwordRules = PasswordRules; - password = new FormControl('456', Validators.required); + password = '456'; value: string = ''; numberValue: number | null = null; min = -5; + customRegex = /\D/; } diff --git a/packages/mosaic-dev/input/template.html b/packages/mosaic-dev/input/template.html index bde2d428f..8325f8d54 100644 --- a/packages/mosaic-dev/input/template.html +++ b/packages/mosaic-dev/input/template.html @@ -5,7 +5,7 @@
- + От 8 до 15 символов @@ -16,7 +16,9 @@ Цифра - Только латинские буквы, цифры, пробелы и спецсимволы + Только латинские буквы, цифры, пробелы и спецсимволы + + User Rule

diff --git a/packages/mosaic-examples/mosaic/input/input-password-overview/input-password-overview-example.html b/packages/mosaic-examples/mosaic/input/input-password-overview/input-password-overview-example.html index 52c8077f5..9d3984003 100644 --- a/packages/mosaic-examples/mosaic/input/input-password-overview/input-password-overview-example.html +++ b/packages/mosaic-examples/mosaic/input/input-password-overview/input-password-overview-example.html @@ -11,5 +11,5 @@ Цифра - Только латинские буквы, цифры, пробелы и спецсимволы + Только латинские буквы, цифры, пробелы и спецсимволы diff --git a/packages/mosaic/form-field/password-hint.ts b/packages/mosaic/form-field/password-hint.ts index c833bc65a..c9e9ee511 100644 --- a/packages/mosaic/form-field/password-hint.ts +++ b/packages/mosaic/form-field/password-hint.ts @@ -18,14 +18,15 @@ export enum PasswordRules { UpperLatin, LowerLatin, Digit, - SpecialSymbols + LatinAndSpecialSymbols, + Custom } export const regExpPasswordValidator = { [PasswordRules.LowerLatin]: RegExp(/^(?=.*?[a-z])/), [PasswordRules.UpperLatin]: RegExp(/^(?=.*?[A-Z])/), [PasswordRules.Digit]: RegExp(/^(?=.*?[0-9])/), - [PasswordRules.SpecialSymbols]: RegExp(/^(?=.*?[" !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~"])/) + [PasswordRules.LatinAndSpecialSymbols]: RegExp(/[^ !`"'#№$%&()*+,-./:;<=>?@[\]^_{|}~A-Za-z0-9]/) }; @@ -77,17 +78,23 @@ export class McPasswordHint implements AfterContentInit { throw Error('You should set [rule] name'); } + if (this.rule === PasswordRules.Custom && this.regex === undefined) { + throw Error('You should set [regex] for PasswordRules.Custom'); + } + if (this.rule === PasswordRules.Length && (this.min || this.max) === null) { throw Error('For [rule] "Length" need set [min] and [max]'); } if (this.rule === PasswordRules.Length) { this.checkRule = this.checkLengthRule; - } else if ( - [PasswordRules.UpperLatin, PasswordRules.LowerLatin, PasswordRules.Digit, PasswordRules.SpecialSymbols] - .includes(this.rule) - ) { - this.regex = this.regex || regExpPasswordValidator[this.rule]; + } else if ([PasswordRules.UpperLatin, PasswordRules.LowerLatin, PasswordRules.Digit].includes(this.rule)) { + this.regex = regExpPasswordValidator[this.rule]; + this.checkRule = this.checkRegexRule; + } else if (this.rule === PasswordRules.LatinAndSpecialSymbols) { + this.regex = regExpPasswordValidator[this.rule]; + this.checkRule = this.checkSpecialSymbolsRegexRule; + } else if (this.rule === PasswordRules.Custom) { this.checkRule = this.checkRegexRule; } else { throw Error(`Unknown [rule]=${this.rule}`); @@ -106,6 +113,10 @@ export class McPasswordHint implements AfterContentInit { this.hasError = !this.checkRule(this.control.value); } + if (!this.control.required && !this.control.value) { + this.checked = this.hasError = false; + } + this.lastControlValue = this.control.value; this.changeDetectorRef.markForCheck(); } @@ -118,6 +129,10 @@ export class McPasswordHint implements AfterContentInit { return !!this.regex?.test(value); } + private checkSpecialSymbolsRegexRule(value: string): boolean { + return !!value && !this.regex?.test(value); + } + private isValueChanged(): boolean { return this.lastControlValue !== this.formField.control.value; } diff --git a/packages/mosaic/input/input-password.spec.ts b/packages/mosaic/input/input-password.spec.ts index 8c8c6e91b..eb6daa28d 100644 --- a/packages/mosaic/input/input-password.spec.ts +++ b/packages/mosaic/input/input-password.spec.ts @@ -43,7 +43,8 @@ function createComponent(component: Type, imports: any[] = [], providers: template: ` - + От 8 до 64 символов @@ -53,7 +54,9 @@ function createComponent(component: Type, imports: any[] = [], providers: Цифра - Только латинские буквы, цифры, пробелы и спецсимволы + Только латинские буквы, цифры, пробелы и + спецсимволы + ` }) diff --git a/tools/public_api_guard/mosaic/form-field.api.md b/tools/public_api_guard/mosaic/form-field.api.md index b8cf3cd61..11f3822c2 100644 --- a/tools/public_api_guard/mosaic/form-field.api.md +++ b/tools/public_api_guard/mosaic/form-field.api.md @@ -233,15 +233,17 @@ export class McSuffix { // @public (undocumented) export enum PasswordRules { + // (undocumented) + Custom = 5, // (undocumented) Digit = 3, // (undocumented) + LatinAndSpecialSymbols = 4, + // (undocumented) Length = 0, // (undocumented) LowerLatin = 2, // (undocumented) - SpecialSymbols = 4, - // (undocumented) UpperLatin = 1 }