added validation in change password and redsign CEI component

sultan-q3
enadhilal 4 years ago
parent 6648091b82
commit e306628867

@ -1,64 +1,92 @@
<app-generic-header
showBack="true"
[headerText]="'changePassword,changePassword' | translate">
<app-generic-header showBack="true" [headerText]="'changePassword,changePassword' | translate">
</app-generic-header>
<ion-content padding>
<ion-grid>
<ion-row >
<ion-col [size]="4">
<img [src]="logo" class="logoHeader" />
</ion-col>
</ion-row>
<br/>
<br/>
<p class="headerTxt" color="light" > {{'changePassword,changePassword' | translate}}</p>
<ion-grid>
<ion-row>
<ion-col [size]="4">
<img [src]="logo" class="logoHeader" />
</ion-col>
</ion-row>
<ion-item class="item-input-login" >
<p class="headerTxt" color="light"> {{'changePassword,changePassword' | translate}}</p>
<img class="item-icon" src="assets/imgs/password.png" item-start />
<!-- <ion-label>{{'changePassword,currentPassword' | translate}}</ion-label> -->
<ion-input class="login-input" required type="password"
placeholder="{{ts.trPK('changePassword','currentPassword')}}"
[(ngModel)]="P_OLD_PASSWORD"
minLength="8" min="8"
(ionChange)="onChangeOP()"
></ion-input>
</ion-item>
<p class="headerTxt" color="light" > {{'changePassword,newPassword' | translate}}</p>
<ion-item class="item-input-login">
<img class="item-icon" src="assets/imgs/password.png" item-start />
<!-- <ion-label>{{'changePassword,currentPassword' | translate}}</ion-label> -->
<ion-input class="login-input" required type="password"
placeholder="{{ts.trPK('changePassword','currentPassword')}}" [(ngModel)]="P_OLD_PASSWORD" minLength="8"
min="8" (ionChange)="onChangeOP()"></ion-input>
</ion-item>
<ion-item class="item-input-login" >
<img class="item-icon" src="assets/imgs/password.png" item-start />
<!-- <ion-label>{{'changePassword,newPassword' | translate}}</ion-label> -->
<ion-input (ionChange)="onChangeNP()" class="login-input" required type="password" placeholder="{{ts.trPK('changePassword','newPassword')}}"
[(ngModel)]="P_NEW_PASSWORD" minLength="8" min="8" >
</ion-input>
</ion-item>
<ion-item class="item-input-login" >
<img class="item-icon" src="assets/imgs/password.png" item-start />
<!-- <ion-label>{{'changePassword,confirmPassword' | translate}}</ion-label> -->
<ion-input (ionChange)="onChangeCNP()" class="login-input" required type="password" placeholder="{{ts.trPK('changePassword','confirmPassword')}}"
[(ngModel)]="P_Confirm_NEW_PASSWORD" minLength="8" min="8">
</ion-input>
</ion-item>
<p class="headerTxt" color="light"> {{'changePassword,newPassword' | translate}}</p>
<ion-item class="item-input-login">
<img class="item-icon" src="assets/imgs/password.png" item-start />
<!-- <ion-label>{{'changePassword,newPassword' | translate}}</ion-label> -->
<ion-input (ionChange)="onChangeNP()" class="login-input" required type="password"
placeholder="{{ts.trPK('changePassword','newPassword')}}" [(ngModel)]="P_NEW_PASSWORD" minLength="8"
min="8">
</ion-input>
</ion-item>
</ion-grid>
<page-trailer [small]="true"></page-trailer>
<!-- [disabled]="NEW_PASSWORD && Confirm_NEW_PASSWORD" [disabled]="true"-->
<ion-item class="item-input-login">
<img class="item-icon" src="assets/imgs/password.png" item-start />
<!-- <ion-label>{{'changePassword,confirmPassword' | translate}}</ion-label> -->
<ion-input (ionChange)="onChangeCNP()" class="login-input" required type="password"
placeholder="{{ts.trPK('changePassword','confirmPassword')}}" [(ngModel)]="P_Confirm_NEW_PASSWORD"
minLength="8" min="8">
</ion-input>
</ion-item>
<ion-item lines='none'>
<img class="item-icon" src="../assets/icon/yellow.svg" item-start />
<ion-label><p>{{recentPasswordNote.text}}</p></ion-label>
</ion-item>
<ion-item lines='none'>
<img class="item-icon" [src]="checkerFuncation(1)" item-start />
<ion-label><p>{{isLowerCase.text}}</p></ion-label>
</ion-item>
<ion-item lines='none'>
<img class="item-icon" [src]="checkerFuncation(2)" item-start />
<ion-label><p>{{isUpperCase.text}}</p></ion-label>
</ion-item>
<ion-item lines='none'>
<img class="item-icon" [src]="checkerFuncation(3)" item-start />
<ion-label><p>{{isHasDigit.text}}</p></ion-label>
</ion-item>
<ion-item lines='none'>
<img class="item-icon" [src]="checkerFuncation(4)" item-start />
<ion-label><p>{{isMinLength.text}}</p></ion-label>
</ion-item>
<ion-item lines='none'>
<img class="item-icon" [src]="checkerFuncation(5)" item-start />
<ion-label><p>{{isRepeatedLetter.text}}</p></ion-label>
</ion-item>
<ion-item lines='none'>
<img class="item-icon" [src]="checkerFuncation(6)" item-start />
<ion-label><p>{{isContainSpecialChar.text}}</p></ion-label>
</ion-item>
<ion-item lines='none'>
<img class="item-icon" [src]="checkerFuncation(7)" item-start />
<ion-label><p>{{confirmMatchNew.text}}</p></ion-label>
</ion-item>
</ion-grid>
<page-trailer [small]="true"></page-trailer>
<!-- [disabled]="NEW_PASSWORD && Confirm_NEW_PASSWORD" [disabled]="true"-->
</ion-content>
<ion-footer>
<div class="centerDiv">
<button [disabled]="!(NEW_PASSWORD && Confirm_NEW_PASSWORD && OLD_PASSWORD)" [ngClass]=" !(NEW_PASSWORD && Confirm_NEW_PASSWORD && OLD_PASSWORD) ? 'disabledButton' : '' " class="button-login" ion-button (click)="submit()">{{ts.trPK('login','changepassword')}}</button>
<button [disabled]="disabledSubmitBtn()"
[ngClass]=" disabledSubmitBtn() ? 'disabledButton' : '' "
class="button-login" ion-button (click)="submit()">{{ts.trPK('login','changepassword')}}</button>
</div>
</ion-footer>

@ -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; }
}
}

@ -1,26 +1,57 @@
<ion-content>
<ion-content style="--background: #f5f5f5;">
<div class="head-title">
<app-generic-header showImage="false" showBack="true" [headerText]="'eit,cei' | translate">
</app-generic-header>
</div>
<div padding>
<ion-list>
<ion-radio-group [(ngModel)]="SelectedServiceType">
<ion-item *ngFor="let user of familyMemberData">
<ion-label>{{user.CONTACT_NAME}}</ion-label>
<ion-radio mode="md" slot="start" [value]="user" (click)='selectedUser()'></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<ion-radio-group [(ngModel)]="SelectedServiceType">
<ion-item *ngFor="let user of familyMemberData" lines='none'
style="padding-bottom: 10px; border-radius: 10px 10px 25px 25px;">
<ion-grid>
<ion-row>
<ion-col>
<h2 style="font-weight: bold; font-size: 15px;margin:0">{{user.CONTACT_NAME}}</h2>
</ion-col>
<ion-col [size]='direction === "ltr" ? 5 : 8 ' [offset]='direction === "ltr" ? 3 : 0 '>
<div class='family-member-button' style="height: 32px !important; margin-left: -50px;">
<ion-label>
<p>{{ts.trPK('eit','relationship-start-date')}}</p>
</ion-label>
<ion-label>
<p style="color: black;">12/31/2022</p>
</ion-label>
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-label>
<p style="font-weight: bold; font-size: 14px; white-space:pre-wrap">{{user.RELATIONSHIP}}</p>
</ion-label>
</ion-col>
<ion-col [size]='direction === "ltr" ? 5 : 8 ' [offset]='direction === "ltr" ? 3 : 0 '>
<div class='family-member-button' style="height: 32px !important; margin-left: -50px;">
<ion-label>
<p>{{ts.trPK('eit','relationship-end-date')}}</p>
</ion-label>
<ion-label>
<p style="color: black;">12/31/2022</p>
</ion-label>
</div>
</ion-col>
</ion-row>
</ion-grid>
<ion-radio mode="md" slot="start" [value]="user" [color]="myColor" (click)='selectedUser(user)'></ion-radio>
</ion-item>
</ion-radio-group>
</div>
</ion-content>
<ion-footer>
<ion-footer style="background: #f5f5f5 !important;">
<div class="centerDiv">
<ion-button class="addEitOkButton" color="customnavy" ion-button>
<ion-button ion-button style="background: #269db8 !important; --background: #269db8">
{{'vacation-rule, next-label' | translate}}</ion-button>
</div>
</ion-footer>

@ -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;
}
}

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g id="Ellipse_219" data-name="Ellipse 219" fill="#fff" stroke="#c3c3c3" stroke-width="2">
<circle cx="16" cy="16" r="16" stroke="none"/>
<circle cx="16" cy="16" r="15" fill="none"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 291 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path id="Path_4727" data-name="Path 4727" d="M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0ZM13.52,23.383,6.158,16.02l2.828-2.828,4.533,4.535L23.136,8.11l2.828,2.828Z" fill="#2bb7a7"/>
</svg>

After

Width:  |  Height:  |  Size: 273 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path id="Path_4728" data-name="Path 4728" d="M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0ZM13.52,23.383,6.158,16.02l2.828-2.828,4.533,4.535L23.136,8.11l2.828,2.828Z" fill="#eac321"/>
</svg>

After

Width:  |  Height:  |  Size: 273 B

@ -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": {

@ -1176,7 +1176,7 @@ border:0px
}
.logoHeader {
max-width: 90%;
max-width: 70%;
width: 130%;
border: 0px;
}

Loading…
Cancel
Save