updatePassword.component.html

<div class="login-content">
    <mat-icon svgIcon="maarchLogoWhiteFull" class="maarchLogo"></mat-icon>
    <mat-card class="login-form">
        <form (ngSubmit)="updatePassword()">
            <div class="alert-message alert-message-info" role="alert">
                {{lang.logInOncePasswordChanged}}
            </div>
            <mat-form-field class="input-row">
                <input name="newPassword" matInput [(ngModel)]="password.newPassword"
                    placeholder="{{lang.typeNewPassword}}" [type]="hideNewPassword ? 'password' : 'text'"
                    (keyup)="checkPasswordValidity(password.newPassword)">
                <mat-icon matSuffix (click)="hideNewPassword = !hideNewPassword" class="fa fa-2x"
                    [ngClass]="[hideNewPassword ? 'fa-eye-slash' : 'fa-eye']">
                </mat-icon>
                <mat-hint style="color:red;">{{handlePassword.errorMsg}}</mat-hint>
            </mat-form-field>
            <mat-form-field class="input-row">
                <input name="passwordConfirmation" matInput [(ngModel)]="password.passwordConfirmation"
                    placeholder="{{lang.retypeNewPassword}}"
                    [type]="hideNewPasswordConfirm ? 'password' : 'text'">
                <mat-icon matSuffix (click)="hideNewPasswordConfirm = !hideNewPasswordConfirm" class="fa fa-2x"
                    [ngClass]="[hideNewPasswordConfirm ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
                <mat-hint style="color:red;" *ngIf="password.passwordConfirmation !== password.newPassword">
                    {{lang.passwordNotMatch}}</mat-hint>
                <mat-hint style="color:green;"
                    *ngIf="password.passwordConfirmation === password.newPassword && password.newPassword.length > 0 && password.passwordConfirmation.length> 0">
                    {{lang.passwordMatch}}</mat-hint>
            </mat-form-field>
            <button type="submit" mat-button [disabled]="allowValidate() || loading">{{labelButton}}</button>
            <button type="button" mat-button (click)="cancel();">{{lang.cancel}}</button>
        </form>
    </mat-card>
</div>