password-modification.component.html

<div class="admin-container" [class.admin-is-mobile]="appService.getViewMode()" style="margin-top: -63px;">
    <mat-toolbar color="primary" class="admin-toolbar">
        <button mat-button (click)="snav.toggle()">
            <mat-icon class="maarchLogo" [svgIcon]="appService.getViewMode() ? 'maarchLogoOnly' : 'maarchLogo'"></mat-icon>
        </button>
        <h1 class="admin-toolbar-title">{{lang.passwordModification}}
        </h1>
        <span style="flex: 1 1 auto;"></span>
        <button mat-button>
            <mat-icon mat-list-icon class="fa fa-user fa-2x" style="color:white; margin:0px 12px 8px 0px;"></mat-icon>{{user.firstname.charAt(0) | uppercase}}. {{user.lastname | uppercase}}</button>
    </mat-toolbar>
    <mat-sidenav-container autosize class="admin-sidenav-container" >
        <mat-sidenav #snav [mode]="appService.getViewMode() ? 'over' : 'side'" [fixedInViewport]="appService.getViewMode()" fixedTopGap="56"
            [opened]="appService.getViewMode() ? false : true">
        </mat-sidenav>
        <mat-sidenav-content>
            <div *ngIf="loading" style="display:flex;height:100%;">
                <mat-spinner style="margin:auto;"></mat-spinner>
            </div>
            <mat-card *ngIf="!loading" class="card-app-content" style="display: flex;justify-content: center;align-items: center;">
                <form [formGroup]="firstFormGroup" (ngSubmit)="onSubmit()" style="max-width: 700px;">
                    <ng-template>{{lang.passwordModification}}</ng-template>
                    <mat-form-field style="padding:10px;">
                        <input matInput placeholder="{{lang.typeCurrentPassword}}" formControlName="currentPasswordCtrl" required [type]="hidePassword ? 'password' : 'text'">
                        <mat-icon matSuffix (click)="hidePassword = !hidePassword" class="fa fa-2x" [ngClass]="[hidePassword ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
                        <mat-error *ngIf="firstFormGroup.controls['currentPasswordCtrl'].hasError('required')">{{lang.requiredField}}</mat-error>
                    </mat-form-field>
                    <div style="text-align:center;color: rgba(0,0,0,0.54);font-size: 75%;">{{this.ruleText}}</div>
                    <mat-form-field style="padding:10px;">
                        <input matInput #inputPasswd placeholder="{{lang.typeNewPassword}}" formControlName="newPasswordCtrl" required
                            [type]="hidePassword ? 'password' : 'text'">
                        <mat-icon matSuffix (click)="hidePassword = !hidePassword" class="fa fa-2x" [ngClass]="[hidePassword ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
                        <mat-hint *ngIf="validPassword">
                            <i color="accent" class="fa fa-check"></i>
                            <span color="accent">{{lang.passwordValid}}</span>
                        </mat-hint>
                        <mat-error>{{getErrorMessage()}}</mat-error>
                    </mat-form-field>
                    <mat-form-field style="padding:10px;">
                        <input matInput #inputPasswd2 placeholder="{{lang.retypeNewPassword}}" required [type]="hidePassword ? 'password' : 'text'"
                            formControlName="retypePasswordCtrl">
                        <mat-icon matSuffix (click)="hidePassword = !hidePassword" class="fa fa-2x" [ngClass]="[hidePassword ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
                        <mat-hint *ngIf="!firstFormGroup.controls['retypePasswordCtrl'].hasError('mismatch') && firstFormGroup.controls['retypePasswordCtrl'].value != ''">
                            <i color="accent" class="fa fa-check"></i>
                            <span color="accent">{{lang.passwordMatch}}</span>
                        </mat-hint>
                        <mat-error>{{lang.passwordNotMatch}} !</mat-error>
                    </mat-form-field>
                    <div class="col-md-12 text-center" style="padding:10px;">
                        <button mat-raised-button type="submit" color="primary" [disabled]="!firstFormGroup.valid">{{lang.validate}}</button>
                        <button mat-raised-button type="button"color="default" (click)="logout()">{{lang.logout}}</button>
                    </div>
                </form>
                <div *ngIf="passwordRules.renewal.enabled || passwordRules.historyLastUse.enabled" class="alert alert-warning" role="alert" [innerHTML]="otherRuleText" style="text-align:center;left:0px;bottom: 0px;position: absolute;width: 100%;margin: 0;"></div>
            </mat-card>
        </mat-sidenav-content>
        <mat-sidenav #snav2 [mode]="appService.getViewMode() ? 'over' : 'side'" [fixedInViewport]="appService.getViewMode()" fixedTopGap="56"
            position='end' [opened]="appService.getViewMode() ? false : false">
        </mat-sidenav>
    </mat-sidenav-container>
</div>