Add Password visibility toggle (#358)

* fix: Password visibility toggle

* fix: No need to use ***** for default password

* fix: Set back to old password check & use dirty to show toggle

* fix: Update placeholder text
This commit is contained in:
mrv777 2024-09-27 18:15:31 -05:00 committed by GitHub
parent e30bbcad50
commit 91e4e5f3aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 29 additions and 4 deletions

View File

@ -15,8 +15,13 @@
</div>
<div class="field grid p-fluid">
<label htmlFor="wifiPass" class="col-12 mb-2 md:col-2 md:mb-0">WiFi Password:</label>
<div class="col-12 md:col-10">
<input pInputText id="wifiPass" formControlName="wifiPass" type="password" />
<div class="col-12 md:col-10 p-input-icon-right">
<i *ngIf="form.get('wifiPass')?.dirty" class="pi"
[ngClass]="{'pi-eye': !showWifiPassword, 'pi-eye-slash': showWifiPassword}"
(click)="toggleWifiPasswordVisibility()" style="cursor: pointer;"></i>
<input pInputText id="wifiPass" formControlName="wifiPass"
[type]="showWifiPassword ? 'text' : 'password'"
placeholder="Enter WiFi password" />
</div>
</div>
<div class="field grid p-fluid">
@ -45,8 +50,13 @@
</div>
<div class="field grid p-fluid">
<label htmlFor="stratumPassword" class="col-12 mb-2 md:col-2 md:mb-0">Stratum Password:</label>
<div class="col-12 md:col-10">
<input pInputText id="stratumPassword" formControlName="stratumPassword" type="password" />
<div class="col-12 md:col-10 p-input-icon-right">
<i *ngIf="form.get('stratumPassword')?.dirty" class="pi"
[ngClass]="{'pi-eye': !showStratumPassword, 'pi-eye-slash': showStratumPassword}"
(click)="toggleStratumPasswordVisibility()" style="cursor: pointer;"></i>
<input pInputText id="stratumPassword" formControlName="stratumPassword"
[type]="showStratumPassword ? 'text' : 'password'"
placeholder="Enter stratum password" />
</div>
</div>

View File

@ -0,0 +1,5 @@
.pi {
right: 1rem;
font-size: 1.5rem;
top: 1rem;
}

View File

@ -211,4 +211,14 @@ export class EditComponent implements OnInit {
});
}
showStratumPassword: boolean = false;
toggleStratumPasswordVisibility() {
this.showStratumPassword = !this.showStratumPassword;
}
showWifiPassword: boolean = false;
toggleWifiPasswordVisibility() {
this.showWifiPassword = !this.showWifiPassword;
}
}