Differential D238 Diff 852 src/app/_shared/password/password.component.html

Changeset View

Standalone View

src/app/_shared/password/password.component.html

This file was added.

				<!-- Password Component -->
				<div id="password">
				<div fxLayout="column" class="password-container">
				<div fxLayout="row" fxFlexOffset="2rem" style="width: 100%;margin-left: -1rem;" (click)="switchView('profile')">
				<i class="material-icons" style="font-size: 40px;">keyboard_arrow_left</i>
				</div>
				<div fxLayout="row" fxFlexOffset="2rem">
				<h1 class="password-title">Change Password</h1>
				</div>
				<div fxLayout="column" fxFlexOffset="2rem" class="alert alert-danger">
				<p>Passwords must contain at least 8 characters and be alphanumeric (At least 1 letter and 1 number)</p>
				</div>
				<div fxLayout="column" fxLayoutAlign="start center" *ngIf="passwordForm" [formGroup]="passwordForm">
				<div *ngIf="errors && errors.non_field_errors" fxLayout="row" fxFlexOffset="2rem" class="alert alert-danger">
				<div *ngFor="let err of errors.non_field_errors">
				<p>{{err}}</p>
				</div>
				</div>
				<div *ngIf="!loading" fxLayout="row" fxFlexOffset="2rem" class="password-input">
				<input matInput placeholder="Old password" class="password-input password-title" style="font-size: 4rem;" type="password" autocomplete="current-password" formControlName="oldPassword" required />
				</div>
				<div *ngIf="submitted && !passwordForm.controls.oldPassword.valid">
				<p>Password is required</p>
				</div>
				<div *ngIf="errors && errors.token" fxLayout="column" fxFlexOffset="2rem" class="alert alert-danger">
				<div *ngFor="let err of errors.token">
				<p>{{err}}</p>
				</div>
				</div>

				<div *ngIf="!loading" fxLayout="row" fxFlexOffset="2rem" class="password-input">
				<input matInput placeholder="Password" class="password-input password-title" style="font-size: 4rem;" type="password" autocomplete="current-password" formControlName="password" required />
				</div>
				<div *ngIf="submitted && !passwordForm.controls.password.valid">
				<p>Password is required</p>
				</div>
				<div *ngIf="errors && errors.newPassword1" fxLayout="column" fxFlexOffset="2rem" class="alert alert-danger">
				<div *ngFor="let err of errors.newPassword1">
				<p>{{err}}</p>
				</div>
				</div>

				<div *ngIf="!loading" fxLayout="row" fxFlexOffset="2rem" class="password-input">
				<input matInput placeholder="Password again" class="password-input password-title" style="font-size: 4rem;" type="password" autocomplete="current-password" formControlName="password2" required />
				</div>
				<div *ngIf="submitted && !passwordForm.controls.password2.valid">
				<p>Password is required</p>
				</div>
				<div *ngIf="errors && errors.newPassword2" fxLayout="column" fxFlexOffset="2rem" class="alert alert-danger">
				<div *ngFor="let err of errors.newPassword2">
				<p>{{err}}</p>
				</div>
				</div>

				<div fxLayout="row" class="password-button" fxFlexOffset="2rem">
				<button mat-flat-button class="password-button" style="background: #EA6C40;" (click)="changePassword()">Change Password</button>
				</div>
				<div *ngIf="loading" fxLayoutAlign="center center" fxFlexOffset="2rem">
				<mat-progress-spinner></mat-progress-spinner>
				</div>
				</div>
				</div>
				</div>