Changeset View
Changeset View
Standalone 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> |