From e3066288671a7fe68ae6a8a48e9d097e1c854cd5 Mon Sep 17 00:00:00 2001 From: enadhilal Date: Sun, 6 Feb 2022 15:31:39 +0300 Subject: [PATCH] added validation in change password and redsign CEI component --- .../change-password.component.html | 120 ++++--- .../change-password.component.ts | 296 +++++++++++++----- .../cei-homepage/cei-homepage.component.html | 55 +++- .../cei-homepage/cei-homepage.component.ts | 9 +- Mohem/src/assets/icon/blank.svg | 6 + Mohem/src/assets/icon/green.svg | 3 + Mohem/src/assets/icon/yellow.svg | 3 + Mohem/src/assets/localization/i18n.json | 8 + Mohem/src/theme/styles.scss | 2 +- 9 files changed, 360 insertions(+), 142 deletions(-) create mode 100644 Mohem/src/assets/icon/blank.svg create mode 100644 Mohem/src/assets/icon/green.svg create mode 100644 Mohem/src/assets/icon/yellow.svg diff --git a/Mohem/src/app/authentication/change-password/change-password.component.html b/Mohem/src/app/authentication/change-password/change-password.component.html index b758a8ce..68932635 100644 --- a/Mohem/src/app/authentication/change-password/change-password.component.html +++ b/Mohem/src/app/authentication/change-password/change-password.component.html @@ -1,64 +1,92 @@ - + - - - - - - - - -
-
-

{{'changePassword,changePassword' | translate}}

+ + + + + + - -

{{'changePassword,newPassword' | translate}}

+ - - - +

{{'changePassword,newPassword' | translate}}

+ - -
- - - + + + +

{{recentPasswordNote.text}}

+
+ + +

{{isLowerCase.text}}

+
+ + +

{{isUpperCase.text}}

+
+ + +

{{isHasDigit.text}}

+
+ + +

{{isMinLength.text}}

+
+ + +

{{isRepeatedLetter.text}}

+
+ + +

{{isContainSpecialChar.text}}

+
+ + +

{{confirmMatchNew.text}}

+
+ +
+ + + + +
- +
\ No newline at end of file diff --git a/Mohem/src/app/authentication/change-password/change-password.component.ts b/Mohem/src/app/authentication/change-password/change-password.component.ts index 6ad7b9be..5d9402d4 100644 --- a/Mohem/src/app/authentication/change-password/change-password.component.ts +++ b/Mohem/src/app/authentication/change-password/change-password.component.ts @@ -9,7 +9,7 @@ import { SmsReaderService } from 'src/app/hmg-common/services/sms/sms-reader.ser import { ForgetPassword } from '../models/forget.password'; import { LoginModel } from '../models/LoginModel'; import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service'; -import {LoginComponent} from "src/app/authentication/login/login.component"; +import { LoginComponent } from "src/app/authentication/login/login.component"; import { Password } from '../models/password'; import { AuthenticatedUser } from "src/app/hmg-common/services/authentication/models/authenticated-user"; //import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @@ -22,17 +22,64 @@ import { AuthenticatedUser } from "src/app/hmg-common/services/authentication/mo export class ChangePasswordComponent implements OnInit { private loginData = new LoginModel(); public P_NEW_PASSWORD: string = ""; - public P_Confirm_NEW_PASSWORD : string = ""; - public P_OLD_PASSWORD : string = ""; - public P_USER_NAME : string; + public P_Confirm_NEW_PASSWORD: string = ""; + public P_OLD_PASSWORD: string = ""; + public P_USER_NAME: string; public logo = "assets/icon/login/lock.png"; + public testy = 'a123'; userData: any = {}; public isExpiredPwd: boolean = false; public NEW_PASSWORD: boolean = false; public Confirm_NEW_PASSWORD: boolean = false; public OLD_PASSWORD: boolean = false; - //public profile_form: FormGroup; + + public recentPasswordNote = { + yellowImg: '../assets/icon/yellow.svg', + text: 'Do not user recent password' + }; + public isLowerCase = { + blankImg: '../assets/icon/blank.svg', + greenImg: '../assets/icon/green.svg', + text: 'At least one lowercase', + isMatch: false + }; + public isUpperCase = { + blankImg: '../assets/icon/blank.svg', + greenImg: '../assets/icon/green.svg', + text: 'At least one uppdercase', + isMatch: false + }; + public isHasDigit = { + blankImg: '../assets/icon/blank.svg', + greenImg: '../assets/icon/green.svg', + text: 'At least one nomeric', + isMatch: false + }; + public isMinLength = { + blankImg: '../assets/icon/blank.svg', + greenImg: '../assets/icon/green.svg', + text: 'Minimum 8 characters', + isMatch: false + }; + public isRepeatedLetter = { + blankImg: '../assets/icon/blank.svg', + greenImg: '../assets/icon/green.svg', + text: 'Do not add repeating letters', + isMatch: false + }; + public isContainSpecialChar = { + blankImg: '../assets/icon/blank.svg', + greenImg: '../assets/icon/green.svg', + text: 'It should contain special character', + isMatch: false + }; + public confirmMatchNew = { + blankImg: '../assets/icon/blank.svg', + greenImg: '../assets/icon/green.svg', + text: 'Confirm Password does not match.', + isMatch: false + }; constructor( public cs: CommonService, @@ -43,24 +90,24 @@ export class ChangePasswordComponent implements OnInit { public smsService: SmsReaderService, public changeDetector: ChangeDetectorRef, public sharedData: SharedDataService, - // public formBuilder: FormBuilder, - ) { - console.log("change password constructor"); - } + // public formBuilder: FormBuilder, + ) { + console.log("change password constructor"); + } ngOnInit() { console.log("change password oninit"); this.isExpiredPwd = - this.sharedData.getSharedData(Password.IS_EXPIRED_PSW) || false; + this.sharedData.getSharedData(Password.IS_EXPIRED_PSW) || false; const data = this.sharedData.getSharedData(AuthenticationService.LOGIN_DATA, false); - this.P_USER_NAME =data.P_USER_NAME; + this.P_USER_NAME = data.P_USER_NAME; console.log(this.isExpiredPwd); console.log(this.P_USER_NAME); - // this.profile_form = this.formBuilder.group({ - // password: ['', Validators.compose([Validators.minLength(8)])] - // }); + // this.profile_form = this.formBuilder.group({ + // password: ['', Validators.compose([Validators.minLength(8)])] + // }); // this.authService // .loadAuthenticatedUser() // .subscribe((user: AuthenticatedUser) => { @@ -78,97 +125,186 @@ export class ChangePasswordComponent implements OnInit { private checkUserResult: CheckUserAuthenticationResponse; - submit(){ + submit() { console.log(this.isExpiredPwd); - if(this.isExpiredPwd){ + if (this.isExpiredPwd) { this.expiredPassword(); - }else{ + } else { this.changePassword(); } } - public expiredPassword(){ + public expiredPassword() { const data = this.sharedData.getSharedData(AuthenticationService.LOGIN_DATA, false); //this.loginData.P_USER_NAME = this.P_USER_NAME; - let request:Password = new Password(); - request.P_OLD_PASSWORD=this.P_OLD_PASSWORD; - request.P_Confirm_NEW_PASSWORD=this.P_NEW_PASSWORD; - request.P_NEW_PASSWORD=this.P_Confirm_NEW_PASSWORD; + let request: Password = new Password(); + request.P_OLD_PASSWORD = this.P_OLD_PASSWORD; + request.P_Confirm_NEW_PASSWORD = this.P_NEW_PASSWORD; + request.P_NEW_PASSWORD = this.P_Confirm_NEW_PASSWORD; request.P_USER_NAME = this.P_USER_NAME; this.authService.submitExpiredPassword( - request, - () => { - //this.sendSMSForForgotPassword(); - }, this.ts.trPK('general', 'ok')).subscribe((result: CheckUserAuthenticationResponse) => { - if (this.cs.validResponse(result)) { - this.checkUserResult = result; - console.log(result); - this.cs.toastPK("changePassword","successChange"); - this.sharedData.setSharedData(false,Password.IS_EXPIRED_PSW); - this.cs.openLogin(); - } - }); + request, + () => { + //this.sendSMSForForgotPassword(); + }, this.ts.trPK('general', 'ok')).subscribe((result: CheckUserAuthenticationResponse) => { + if (this.cs.validResponse(result)) { + this.checkUserResult = result; + console.log(result); + this.cs.toastPK("changePassword", "successChange"); + this.sharedData.setSharedData(false, Password.IS_EXPIRED_PSW); + this.cs.openLogin(); + } + }); } - public changePassword(){ + public changePassword() { const data = this.sharedData.getSharedData(AuthenticationService.LOGIN_DATA, false); //this.loginData.P_USER_NAME = this.P_USER_NAME; - let request:Password = new Password(); - request.P_OLD_PASSWORD=this.P_OLD_PASSWORD; - request.P_Confirm_NEW_PASSWORD=this.P_NEW_PASSWORD; - request.P_NEW_PASSWORD=this.P_Confirm_NEW_PASSWORD; + let request: Password = new Password(); + request.P_OLD_PASSWORD = this.P_OLD_PASSWORD; + request.P_Confirm_NEW_PASSWORD = this.P_NEW_PASSWORD; + request.P_NEW_PASSWORD = this.P_Confirm_NEW_PASSWORD; request.P_USER_NAME = this.P_USER_NAME; this.authService.submitChangePassword( - request, - () => { - //this.sendSMSForForgotPassword(); - }, this.ts.trPK('general', 'ok')).subscribe((result: CheckUserAuthenticationResponse) => { - if (this.cs.validResponse(result)) { - this.checkUserResult = result; - console.log(result); - this.cs.toastPK("changePassword","successChange"); - this.cs.openHome(); - } - }); + request, + () => { + //this.sendSMSForForgotPassword(); + }, this.ts.trPK('general', 'ok')).subscribe((result: CheckUserAuthenticationResponse) => { + if (this.cs.validResponse(result)) { + this.checkUserResult = result; + console.log(result); + this.cs.toastPK("changePassword", "successChange"); + this.cs.openHome(); + } + }); } - onChangeCNP(){ -// in UAT Alow to the length of password less than 8 -// so if we ready to go life change it to >= 8 + onChangeCNP() { + // in UAT Alow to the length of password less than 8 + // so if we ready to go life change it to >= 8 if (this.P_Confirm_NEW_PASSWORD.length >= 3) { - this.Confirm_NEW_PASSWORD=true; + this.Confirm_NEW_PASSWORD = true; + + + } else { + this.Confirm_NEW_PASSWORD = false; + + } - - }else{ - this.Confirm_NEW_PASSWORD=false; - } - -} -onChangeNP(){ -// in UAT Alow to the length of password less than 8 -// so if we ready to go life change it to >= 8 - if (this.P_NEW_PASSWORD.length >= 3) { - this.NEW_PASSWORD=true; - -}else{ - this.NEW_PASSWORD=false; + onChangeNP() { + // in UAT Alow to the length of password less than 8 + // so if we ready to go life change it to >= 8 + if (this.P_NEW_PASSWORD.length >= 3) { + this.NEW_PASSWORD = true; -} + } else { + this.NEW_PASSWORD = false; -} -onChangeOP(){ -// in UAT Alow to the length of password less than 8 -// so if we ready to go life change it to >= 8 - if (this.P_OLD_PASSWORD.length >= 3) { - this.OLD_PASSWORD=true; - -}else{ - this.OLD_PASSWORD=false; + } -} + } + onChangeOP() { + // in UAT Alow to the length of password less than 8 + // so if we ready to go life change it to >= 8 + if (this.P_OLD_PASSWORD.length >= 3) { + this.OLD_PASSWORD = true; -} + } else { + this.OLD_PASSWORD = false; + + } + + } + + checkerFuncation(val) { + if (this.P_NEW_PASSWORD === '') { + switch (val) { + case 1: + return this.isLowerCase.blankImg; + case 2: + return this.isUpperCase.blankImg; + case 3: + return this.isHasDigit.blankImg; + case 4: + return this.isMinLength.blankImg; + case 5: + return this.isRepeatedLetter.blankImg; + case 6: + return this.isContainSpecialChar.blankImg; + case 7: + return this.confirmMatchNew.blankImg; + } + } else { + switch (val) { + case 1: + if (/[a-z]/.test(this.P_NEW_PASSWORD)) { + this.isLowerCase.isMatch = true; + return this.isLowerCase.greenImg; + } else { + this.isLowerCase.isMatch = false; + return this.isLowerCase.blankImg; + } + case 2: + if (/[A-Z]/.test(this.P_NEW_PASSWORD)) { + this.isUpperCase.isMatch = true; + return this.isUpperCase.greenImg; + } else { + this.isUpperCase.isMatch = false; + return this.isUpperCase.blankImg; + } + case 3: + if (/[0-9]/.test(this.P_NEW_PASSWORD)) { + this.isHasDigit.isMatch = true; + return this.isHasDigit.greenImg; + } else { + this.isHasDigit.isMatch = false; + return this.isHasDigit.blankImg; + } + case 4: + if (this.P_NEW_PASSWORD.length >= 8) { + this.isMinLength.isMatch = true; + return this.isMinLength.greenImg; + } else { + this.isMinLength.isMatch = false; + return this.isMinLength.blankImg; + } + case 5: + if (/([a-z])\1/i.test(this.P_NEW_PASSWORD)) { + this.isRepeatedLetter.isMatch = false; + return this.isRepeatedLetter.blankImg; + } else { + this.isRepeatedLetter.isMatch = true; + return this.isRepeatedLetter.greenImg; + } + case 6: + if (/[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(this.P_NEW_PASSWORD)) { + this.isContainSpecialChar.isMatch = true; + return this.isContainSpecialChar.greenImg; + } else { + this.isContainSpecialChar.isMatch = false; + return this.isContainSpecialChar.blankImg; + } + case 7: + if (this.P_NEW_PASSWORD !== this.P_Confirm_NEW_PASSWORD) { + this.confirmMatchNew.isMatch = true; + return this.confirmMatchNew.blankImg; + } else { + this.confirmMatchNew.isMatch = false; + return this.confirmMatchNew.greenImg; + } + } + } + } + + + disabledSubmitBtn() { + if (this.isLowerCase.isMatch && this.isUpperCase.isMatch && this.isHasDigit.isMatch && this.isMinLength.isMatch + && this.isRepeatedLetter.isMatch && this.P_NEW_PASSWORD !== '' && this.NEW_PASSWORD + && this.Confirm_NEW_PASSWORD && this.OLD_PASSWORD && this.isContainSpecialChar) { + return false; + } else { return true; } + } } diff --git a/Mohem/src/app/eit/cei-homepage/cei-homepage.component.html b/Mohem/src/app/eit/cei-homepage/cei-homepage.component.html index a98b51e3..f5eb6475 100644 --- a/Mohem/src/app/eit/cei-homepage/cei-homepage.component.html +++ b/Mohem/src/app/eit/cei-homepage/cei-homepage.component.html @@ -1,26 +1,57 @@ - +
- - - - {{user.CONTACT_NAME}} - - - - + + + + + +

{{user.CONTACT_NAME}}

+
+ +
+ +

{{ts.trPK('eit','relationship-start-date')}}

+
+ +

12/31/2022

+
+
+
+
+ + + +

{{user.RELATIONSHIP}}

+
+
+ +
+ +

{{ts.trPK('eit','relationship-end-date')}}

+
+ +

12/31/2022

+
+
+
+
+
+ +
+
-
- +
- + {{'vacation-rule, next-label' | translate}}
\ No newline at end of file diff --git a/Mohem/src/app/eit/cei-homepage/cei-homepage.component.ts b/Mohem/src/app/eit/cei-homepage/cei-homepage.component.ts index 04d8a965..05483679 100644 --- a/Mohem/src/app/eit/cei-homepage/cei-homepage.component.ts +++ b/Mohem/src/app/eit/cei-homepage/cei-homepage.component.ts @@ -11,7 +11,9 @@ import { EitService } from '../services/eit.service'; export class CeiHomepageComponent implements OnInit { public familyMemberData; - SelectedServiceType; + public SelectedServiceType; + public direction: string; + myColor: string = 'secondary'; constructor( private eitService: EitService, public ts: TranslatorService, @@ -31,10 +33,11 @@ export class CeiHomepageComponent implements OnInit { ngOnInit() { + this.direction = TranslatorService.getCurrentDirection(); } - selectedUser(){ - console.log(this.SelectedServiceType); + selectedUser(user){ + this.SelectedServiceType = user; } } diff --git a/Mohem/src/assets/icon/blank.svg b/Mohem/src/assets/icon/blank.svg new file mode 100644 index 00000000..458383af --- /dev/null +++ b/Mohem/src/assets/icon/blank.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Mohem/src/assets/icon/green.svg b/Mohem/src/assets/icon/green.svg new file mode 100644 index 00000000..635949a6 --- /dev/null +++ b/Mohem/src/assets/icon/green.svg @@ -0,0 +1,3 @@ + + + diff --git a/Mohem/src/assets/icon/yellow.svg b/Mohem/src/assets/icon/yellow.svg new file mode 100644 index 00000000..e146cb79 --- /dev/null +++ b/Mohem/src/assets/icon/yellow.svg @@ -0,0 +1,3 @@ + + + diff --git a/Mohem/src/assets/localization/i18n.json b/Mohem/src/assets/localization/i18n.json index 76791853..d87fd25f 100644 --- a/Mohem/src/assets/localization/i18n.json +++ b/Mohem/src/assets/localization/i18n.json @@ -2086,6 +2086,14 @@ "cei":{ "en":"child Education", "ar":"تعليم الطفل" + }, + "relationship-start-date":{ + "en":"Relationship Start Date", + "ar":"" + }, + "relationship-end-date":{ + "en":"Relationship End Date", + "ar":"" } }, "submitAbsence": { diff --git a/Mohem/src/theme/styles.scss b/Mohem/src/theme/styles.scss index b6e1b729..499f6f9b 100644 --- a/Mohem/src/theme/styles.scss +++ b/Mohem/src/theme/styles.scss @@ -1176,7 +1176,7 @@ border:0px } .logoHeader { - max-width: 90%; + max-width: 70%; width: 130%; border: 0px; }