From 91e4e5f3aae14b71a5b3355e23530690a814dd69 Mon Sep 17 00:00:00 2001
From: mrv777 <mrv777@users.noreply.github.com>
Date: Fri, 27 Sep 2024 18:15:31 -0500
Subject: [PATCH] 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
---
 .../app/components/edit/edit.component.html    | 18 ++++++++++++++----
 .../app/components/edit/edit.component.scss    |  5 +++++
 .../src/app/components/edit/edit.component.ts  | 10 ++++++++++
 3 files changed, 29 insertions(+), 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
index 634f92fd3..b7ed6795c 100644
--- 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
index e69de29bb..bfff955e4 100644
--- 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
index 991a2769b..a2d58680e 100644
--- 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;
+  }
+
 }