83 lines
2.7 KiB
HTML
83 lines
2.7 KiB
HTML
<div class="full">
|
|
<div class="color-background-vignette container-global unselectable">
|
|
<div class="containerCenter">
|
|
<label><b>Change Password</b></label>
|
|
</div>
|
|
<div class="imgContainer">
|
|
<img src="assets/images/avatar_generic.svg" alt="Avatar" class="avatar" />
|
|
</div>
|
|
@if(updateState==='filling') {
|
|
<div class="container">
|
|
<!-- Previous password section -->
|
|
<label for="passwordOld"><b>Previous password</b></label>
|
|
<app-password-entry
|
|
[value]="passwordOld"
|
|
placeholder="Enter current password"
|
|
[hasError]="passwordOldState !== true"
|
|
(changeValue)="checkPasswordOld($event)"></app-password-entry>
|
|
<app-error-message-state [value]="passwordOldState"></app-error-message-state>
|
|
|
|
<!-- New password section -->
|
|
<label for="password1"><b>New password</b></label>
|
|
<app-password-entry
|
|
[value]="password1"
|
|
placeholder="Enter new password"
|
|
[hasError]="password1State !== true"
|
|
(changeValue)="checkPassword($event)"></app-password-entry>
|
|
<app-error-message-state [value]="password1State"></app-error-message-state>
|
|
|
|
<!-- New password section (verify) -->
|
|
<label for="password2"><b>New password (2<sup>nd</sup> time)</b></label>
|
|
<app-password-entry
|
|
[value]="password2"
|
|
placeholder="Enter new password (verify)"
|
|
[hasError]="password2State !== true"
|
|
(changeValue)="checkPassword2($event)"></app-password-entry>
|
|
<app-error-message-state [value]="password2State"></app-error-message-state>
|
|
</div>
|
|
<div class="container">
|
|
<button class="button cancel color-button-cancel color-shadow-black" (click)="onCancel()">Cancel</button>
|
|
<button
|
|
class="button login color-button-validate color-shadow-black"
|
|
id="login-button"
|
|
[disabled]="validateButtonDisabled"
|
|
(click)="onChangePassword()"
|
|
type="submit">
|
|
Change Password
|
|
</button>
|
|
</div>
|
|
}
|
|
@else if(updateState==='sending') {
|
|
<div class="container-fix-height">
|
|
<label><br/><br/><b>Updating ...</b></label><br/><br/>
|
|
<spiner></spiner>
|
|
</div>
|
|
}
|
|
@else if (updateState==='done') {
|
|
<div class="container-fix-height">
|
|
<label><br/><br/><br/><b>Update is done.</b></label>
|
|
</div>
|
|
<div class="container">
|
|
<button
|
|
class="button retry color-button-validate color-shadow-black"
|
|
(click)="onRetry()">
|
|
Change again ...
|
|
</button>
|
|
</div>
|
|
}
|
|
@else if (updateState==='error') {
|
|
<div class="container-fix-height">
|
|
<label><b>Update FAIL with error:</b></label>
|
|
<label>{{error}}</label>
|
|
</div>
|
|
<div class="container">
|
|
<button
|
|
class="button retry color-button-validate color-shadow-black"
|
|
(click)="onRetry()">
|
|
Retry
|
|
</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|