added validation in change password and redsign CEI component
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>
|
||||
@ -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>
|
||||
@ -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 |
Loading…
Reference in New Issue