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
skot · Sep 27, 2024 · 91e4e5f · 91e4e5f
1 parent e30bbca
commit 91e4e5f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/main/http_server/axe-os/src/app/components/edit/edit.component.html b/main/http_server/axe-os/src/app/components/edit/edit.component.html
@@ -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>
 

diff --git a/main/http_server/axe-os/src/app/components/edit/edit.component.scss b/main/http_server/axe-os/src/app/components/edit/edit.component.scss
@@ -0,0 +1,5 @@
+.pi {
+    right: 1rem;
+    font-size: 1.5rem;
+    top: 1rem;
+}
diff --git a/main/http_server/axe-os/src/app/components/edit/edit.component.ts b/main/http_server/axe-os/src/app/components/edit/edit.component.ts
@@ -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;
+  }
+
 }