From 3d6396e59c40b42a24bed4e4780de208b71389cf Mon Sep 17 00:00:00 2001 From: RadheTians Date: Tue, 22 Dec 2020 21:20:54 +0530 Subject: [PATCH 1/2] Added rules for strong password --- .../user/user-form/user-form.component.html | 8 +-- .../user/user-form/user-form.component.scss | 7 ++ .../user/user-form/user-form.component.ts | 65 ++++++++++++++++++- 3 files changed, 73 insertions(+), 7 deletions(-) diff --git a/src/app/main/user/user-form/user-form.component.html b/src/app/main/user/user-form/user-form.component.html index 10e7102..a07fc93 100644 --- a/src/app/main/user/user-form/user-form.component.html +++ b/src/app/main/user/user-form/user-form.component.html @@ -17,12 +17,12 @@
+ autocomplete="user-password" (ngModelChange)="onCustomerPasswordStrength($event)">
Required
-
Must have at - least - {{password.getError('minlength')['requiredLength']}} characters.
+
+ {{item.label}} +
diff --git a/src/app/main/user/user-form/user-form.component.scss b/src/app/main/user/user-form/user-form.component.scss index e187705..8425a34 100644 --- a/src/app/main/user/user-form/user-form.component.scss +++ b/src/app/main/user/user-form/user-form.component.scss @@ -7,3 +7,10 @@ .selector { width: fit-content; } +.strength-bars { + background: rgb(225, 242, 246); + width: 30%; + padding-top: 10px; + padding-left: 15px; + color: rgb(0, 124, 173); +} diff --git a/src/app/main/user/user-form/user-form.component.ts b/src/app/main/user/user-form/user-form.component.ts index 1b725f4..1834c79 100644 --- a/src/app/main/user/user-form/user-form.component.ts +++ b/src/app/main/user/user-form/user-form.component.ts @@ -1,5 +1,5 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms'; +import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms'; import { ActivatedRoute } from '@angular/router'; import { Observable } from 'rxjs'; import { Role } from '../../../services/identity/domain/role.model'; @@ -28,6 +28,8 @@ export class UserFormComponent implements OnInit { } title: String; + + feedbackArr: Array = []; @Output() onSave = new EventEmitter(); @Output() onCancel = new EventEmitter(); @@ -43,12 +45,14 @@ export class UserFormComponent implements OnInit { } prepareForm(user: User): void { - const passwordValidators: ValidatorFn[] = [Validators.minLength(8)]; + const passwordValidators: ValidatorFn[] = [Validators.minLength(8), Validators.pattern(/[A-Z]/), + Validators.pattern(/[a-z]/), Validators.pattern(/[0-9]/), + Validators.pattern(/[!@#$%*]/)]; if (!this.editMode) { passwordValidators.push(Validators.required); } - + this.detailForm = this.formBuilder.group({ identifier: [user.identifier, [Validators.required, Validators.minLength(3), Validators.maxLength(32), FimsValidators.urlSafe]], password: ['', passwordValidators], @@ -79,4 +83,59 @@ export class UserFormComponent implements OnInit { fetchRoles(): void { this.store.dispatch({ type: SEARCH_ROLE }); } + + isLengthMet(password: string): boolean { + if(password.length >= 8) { + this.feedbackArr.push({'label': `Minimum 8 characters`, status: true}); + return true; + } else { + this.feedbackArr.push({'label': `Minimum 8 characters`, status: false}); + return false; + } + } + isSpecialCharMet(password: string): boolean { + if( (/[!@#$%*]/).test(password) ){ + this.feedbackArr.push({'label': `One special characters`, status: true}); + return true; + } else { + this.feedbackArr.push({'label': `One special characters`, status: false}); + return false; + } + } + isNumberMet(password: string): boolean { + if((/[0-9]/).test(password)) { + this.feedbackArr.push({'label': `One number`, status: true}); + return true; + } else { + this.feedbackArr.push({'label': `One number`, status: false}); + return false; + } + } + isSmallcaseMet(password: string): boolean { + if( (/[a-z]/).test(password) ) { + this.feedbackArr.push({'label': `One smallcase character`, status: true}); + return true; + } else { + this.feedbackArr.push({'label': `One smallcase character`, status: false}); + return false; + } + } + isUppercaseMet(password: string): boolean { + if( (/[A-Z]/).test(password) ) { + this.feedbackArr.push({'label': `One uppercase character`, status: true}); + return true; + } else { + this.feedbackArr.push({'label': `One uppercase character`, status: false}); + return false; + } + } + + onCustomerPasswordStrength(data: any): void { + this.feedbackArr = []; + this.isLengthMet(data); + this.isNumberMet(data); + this.isSmallcaseMet(data); + this.isUppercaseMet(data); + this.isSpecialCharMet(data); + } } From 826de8af8dc7ca5ba509839c8cdf55d80aaf4aa6 Mon Sep 17 00:00:00 2001 From: RadheTians Date: Tue, 22 Dec 2020 21:31:44 +0530 Subject: [PATCH 2/2] Added rules for strong password --- .../user/user-form/user-form.component.ts | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/app/main/user/user-form/user-form.component.ts b/src/app/main/user/user-form/user-form.component.ts index 1834c79..74dffd3 100644 --- a/src/app/main/user/user-form/user-form.component.ts +++ b/src/app/main/user/user-form/user-form.component.ts @@ -1,5 +1,5 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms'; +import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms'; import { ActivatedRoute } from '@angular/router'; import { Observable } from 'rxjs'; import { Role } from '../../../services/identity/domain/role.model'; @@ -28,7 +28,6 @@ export class UserFormComponent implements OnInit { } title: String; - feedbackArr: Array = []; @Output() onSave = new EventEmitter(); @@ -45,14 +44,12 @@ export class UserFormComponent implements OnInit { } prepareForm(user: User): void { - const passwordValidators: ValidatorFn[] = [Validators.minLength(8), Validators.pattern(/[A-Z]/), - Validators.pattern(/[a-z]/), Validators.pattern(/[0-9]/), - Validators.pattern(/[!@#$%*]/)]; + const passwordValidators: ValidatorFn[] = [Validators.minLength(8), Validators.pattern(/[A-Z]/), + Validators.pattern(/[a-z]/), Validators.pattern(/[0-9]/), Validators.pattern(/[!@#$%*]/)]; if (!this.editMode) { passwordValidators.push(Validators.required); } - this.detailForm = this.formBuilder.group({ identifier: [user.identifier, [Validators.required, Validators.minLength(3), Validators.maxLength(32), FimsValidators.urlSafe]], password: ['', passwordValidators], @@ -85,7 +82,7 @@ export class UserFormComponent implements OnInit { } isLengthMet(password: string): boolean { - if(password.length >= 8) { + if (password.length >= 8) { this.feedbackArr.push({'label': `Minimum 8 characters`, status: true}); return true; } else { @@ -94,7 +91,7 @@ export class UserFormComponent implements OnInit { } } isSpecialCharMet(password: string): boolean { - if( (/[!@#$%*]/).test(password) ){ + if ( (/[!@#$%*]/).test(password) ) { this.feedbackArr.push({'label': `One special characters`, status: true}); return true; } else { @@ -103,7 +100,7 @@ export class UserFormComponent implements OnInit { } } isNumberMet(password: string): boolean { - if((/[0-9]/).test(password)) { + if ( (/[0-9]/).test(password) ) { this.feedbackArr.push({'label': `One number`, status: true}); return true; } else { @@ -112,7 +109,7 @@ export class UserFormComponent implements OnInit { } } isSmallcaseMet(password: string): boolean { - if( (/[a-z]/).test(password) ) { + if ( (/[a-z]/).test(password) ) { this.feedbackArr.push({'label': `One smallcase character`, status: true}); return true; } else { @@ -121,7 +118,7 @@ export class UserFormComponent implements OnInit { } } isUppercaseMet(password: string): boolean { - if( (/[A-Z]/).test(password) ) { + if ( (/[A-Z]/).test(password) ) { this.feedbackArr.push({'label': `One uppercase character`, status: true}); return true; } else {