Hugging Face's logo

Spaces:
UcsTurkey
/
flare
Running

App Files Community
1
flare
File size: 3,409 Bytes 
9f79da5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
de3c389
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<div class="user-info-container">
  <h2>User Information</h2>

  <mat-card>
    <mat-card-header>
      <mat-card-title>Change Password</mat-card-title>
      <mat-card-subtitle>User: {{ username }}</mat-card-subtitle>
    </mat-card-header>

    <mat-card-content>
      <form (ngSubmit)="changePassword()" #passwordForm="ngForm">
        <mat-form-field appearance="outline" class="full-width">
          <mat-label>Current Password</mat-label>
          <input matInput 

                 [type]="showCurrentPassword ? 'text' : 'password'"

                 name="currentPassword"

                 [(ngModel)]="currentPassword"

                 required

                 [disabled]="saving">
          <button mat-icon-button matSuffix type="button" 

                  (click)="showCurrentPassword = !showCurrentPassword">
            <mat-icon>{{ showCurrentPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
          </button>
        </mat-form-field>

        <mat-form-field appearance="outline" class="full-width">
          <mat-label>New Password</mat-label>
          <input matInput 

                 [type]="showNewPassword ? 'text' : 'password'"

                 name="newPassword"

                 [(ngModel)]="newPassword"

                 required

                 [disabled]="saving">
          <button mat-icon-button matSuffix type="button" 

                  (click)="showNewPassword = !showNewPassword">
            <mat-icon>{{ showNewPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
          </button>
          <mat-hint>At least 8 characters with uppercase, lowercase and numbers</mat-hint>
        </mat-form-field>

        <div class="password-strength" *ngIf="newPassword">
          <div class="strength-label">
            Password Strength: 
            <span [class]="'strength-' + passwordStrength.color">
              {{ passwordStrength.text }}
            </span>
          </div>
          <mat-progress-bar 

            [value]="passwordStrength.level" 

            [color]="passwordStrength.color">
          </mat-progress-bar>
        </div>

        <mat-form-field appearance="outline" class="full-width">
          <mat-label>Confirm New Password</mat-label>
          <input matInput 

                 [type]="showConfirmPassword ? 'text' : 'password'"

                 name="confirmPassword"

                 [(ngModel)]="confirmPassword"

                 required

                 [disabled]="saving">
          <button mat-icon-button matSuffix type="button" 

                  (click)="showConfirmPassword = !showConfirmPassword">
            <mat-icon>{{ showConfirmPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
          </button>
          <mat-error *ngIf="confirmPassword && confirmPassword !== newPassword">
            Passwords do not match
          </mat-error>
        </mat-form-field>

        <div class="form-actions">
          <button mat-raised-button color="primary" 

                  type="submit"

                  [disabled]="!isFormValid || saving">
            <mat-icon *ngIf="!saving">save</mat-icon>
            <mat-spinner *ngIf="saving" diameter="20"></mat-spinner>
            {{ saving ? 'Saving...' : 'Change Password' }}
          </button>
        </div>
      </form>
    </mat-card-content>
  </mat-card>
</div>