mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-04 15:41:37 +00:00
112 lines
4.3 KiB
HTML
112 lines
4.3 KiB
HTML
<div class="w-full max-w-3xl">
|
|
|
|
<!-- Title -->
|
|
<div class="text-3xl font-bold tracking-tight leading-none">Security</div>
|
|
|
|
<!-- Form -->
|
|
<form
|
|
class="mt-8"
|
|
[formGroup]="securityForm">
|
|
<!-- Section -->
|
|
<div class="w-full">
|
|
<div class="text-xl">Change your password</div>
|
|
<div class="text-secondary">You can only change your password twice within 24 hours!</div>
|
|
</div>
|
|
<div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
|
|
<!-- Current password -->
|
|
<div class="sm:col-span-4">
|
|
<mat-form-field class="fuse-mat-no-subscript w-full">
|
|
<mat-label>Current password</mat-label>
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:key'"
|
|
matPrefix></mat-icon>
|
|
<input
|
|
[formControlName]="'currentPassword'"
|
|
type="password"
|
|
matInput>
|
|
</mat-form-field>
|
|
</div>
|
|
<!-- New password -->
|
|
<div class="sm:col-span-4">
|
|
<mat-form-field class="fuse-mat-no-subscript w-full">
|
|
<mat-label>New password</mat-label>
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:key'"
|
|
matPrefix></mat-icon>
|
|
<input
|
|
[formControlName]="'newPassword'"
|
|
type="password"
|
|
matInput>
|
|
</mat-form-field>
|
|
<div class="mt-1 text-md text-hint">Minimum 8 characters. Must include numbers, letters and special characters.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="mt-12 mb-10 border-t"></div>
|
|
|
|
<!-- Section -->
|
|
<div class="w-full">
|
|
<div class="text-xl">Security preferences</div>
|
|
<div class="text-secondary">Keep your account more secure with following preferences.</div>
|
|
</div>
|
|
<div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
|
|
<!-- 2-step auth -->
|
|
<div class="sm:col-span-4 flex items-center justify-between">
|
|
<div
|
|
class="flex-auto cursor-pointer"
|
|
(click)="twoStepToggle.toggle()">
|
|
<div class="leading-6 font-medium">Enable 2-step authentication</div>
|
|
<div class="text-md text-secondary">
|
|
Protects you against password theft by requesting an authentication code via SMS on every login.
|
|
</div>
|
|
</div>
|
|
<mat-slide-toggle
|
|
class="ml-4"
|
|
[color]="'primary'"
|
|
[formControlName]="'twoStep'"
|
|
#twoStepToggle>
|
|
</mat-slide-toggle>
|
|
</div>
|
|
<!-- Ask to change password -->
|
|
<div class="sm:col-span-4 flex items-center justify-between">
|
|
<div
|
|
class="flex-auto cursor-pointer"
|
|
(click)="askPasswordChangeToggle.toggle()">
|
|
<div class="leading-6 font-medium">Ask to change password on every 6 months</div>
|
|
<div class="text-md text-secondary">
|
|
A simple but an effective way to be protected against data leaks and password theft.
|
|
</div>
|
|
</div>
|
|
<mat-slide-toggle
|
|
class="ml-4"
|
|
[color]="'primary'"
|
|
[formControlName]="'askPasswordChange'"
|
|
#askPasswordChangeToggle>
|
|
</mat-slide-toggle>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="mt-12 mb-10 border-t"></div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex items-center justify-end">
|
|
<button
|
|
mat-stroked-button
|
|
type="button">
|
|
Cancel
|
|
</button>
|
|
<button
|
|
class="ml-4"
|
|
mat-flat-button
|
|
type="button"
|
|
[color]="'primary'">Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|