You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
RTL/src/app/shared/components/settings/auth-settings/auth-settings.component.html

41 lines
2.5 KiB
HTML

<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="padding-gap-x-large">
<form *ngIf="appConfig?.allowPasswordUpdate" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="page-sub-title-container mt-1" #authForm="ngForm">
<div fxLayout="row" fxLayoutAlign="start start" class="mb-2">
<fa-icon [icon]="faLock" class="page-title-img mr-1"></fa-icon>
<span class="page-title">Password</span>
</div>
<mat-form-field>
<input autoFocus matInput placeholder="Current Password" type="password" id="currpassword" name="currpassword" [(ngModel)]="currPassword" tabindex="1" required>
<mat-error *ngIf="!currPassword">Current password is required.</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="New Password" type="password" id="newpassword" name="newpassword" [(ngModel)]="newPassword" tabindex="2" required>
<mat-error *ngIf="matchOldAndNewPasswords()">{{errorMsg}}</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Confirm New Password" type="password" id="confirmpassword" name="confirmpassword" [(ngModel)]="confirmPassword" tabindex="3" required>
<mat-error *ngIf="matchNewPasswords()">{{errorConfirmMsg}}</mat-error>
</mat-form-field>
<div fxLayout="row" fxLayoutAlign="start start" class="mt-1">
<button class="mr-1" mat-stroked-button color="primary" type="reset" (click)="onResetPassword()" tabindex="4">Reset</button>
<button mat-flat-button color="primary" tabindex="5" type="submit" (click)="onChangePassword()">Change Password</button>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end stretch" class="my-2">
<mat-divider [inset]="true"></mat-divider>
</div>
</form>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<div class="mb-1 settings-container page-sub-title-container mt-1">
<fa-icon [icon]="faUserClock" class="page-title-img mr-1"></fa-icon>
<span class="page-title">Two Factor Authentication</span>
</div>
<div class="alert alert-info">
<fa-icon [icon]="faInfoCircle" class="mt-1 mr-1 alert-icon"></fa-icon>
<span>Protect your account from unauthorized access by requiring a second authentication method in addition to your password.</span>
</div>
<div class="mt-1">
<button mat-flat-button color="primary" tabindex="6" (click)="on2FAuth()" class="mb-2">{{appConfig.enable2FA ? 'Disable 2FA' : 'Enable 2FA'}}</button>
</div>
</div>
</div>