add hide/show option to the password input

Coll147 · Coll147 · commit 0ccd712318b8 · 2025-12-16T10:38:41.000+01:00
diff --git a/web/dashboard/settings.html b/web/dashboard/settings.html
@@ -7,6 +7,9 @@
   <meta name="description" content="OpenFi Settings Page">
   <link rel="stylesheet" type="text/css" href="../styles/main-default.css">
   <link rel="stylesheet" type="text/css" href="../styles/pages/settings.css">
+
+  <!-- Google Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=mystery" />
 </head>
 
 <body>
@@ -52,7 +55,7 @@ <h2>Account</h2>
               <button onclick="window.top.location.href = '../login.html'" type="button" class="btn logout-btn">Log Out</button>
             </div>
             <div class="option">
-              <p>Change Password</p> <span id="show-password">👁️</span> <br>
+              <p>Change Password</p> <span class="material-symbols-outlined clickable" id="show-password">mystery</span> <br>
                 <input type="password" id="new-passwd" placeholder="new password">
                 <button onclick="changeValueSHA(0, 'new-passwd', 'password')" type="button" class="btn">Change</button>
             </div>
diff --git a/web/scripts/pages/settings.js b/web/scripts/pages/settings.js
@@ -12,6 +12,10 @@ async function populate(user_id) {
   console.log(account[user_id].email)
 }
 
+document.getElementById('show-password').addEventListener('click', () => {
+    const element = document.getElementById('new-passwd')
+    element.type = element.type === 'password' ? 'text' : 'password'
+})
 
 // Funcion usada para cambiar contraseña
 function changePasswordSHA(user_id, element, db_value) {
diff --git a/web/styles/main-default.css b/web/styles/main-default.css
@@ -196,6 +196,9 @@ tbody tr:hover {
 }
   /* more at devices.css and login.css */
 
+.clickable {
+  cursor: pointer;
+}
 
 /* CARDS */
 .cards {

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,10 @@ async function populate(user_id) {`
`12`	`12`	`console.log(account[user_id].email)`
`13`	`13`	`}`
`14`	`14`
	`15`	`+document.getElementById('show-password').addEventListener('click', () => {`
	`16`	`+ const element = document.getElementById('new-passwd')`
	`17`	`+ element.type = element.type === 'password' ? 'text' : 'password'`
	`18`	`+})`
`15`	`19`
`16`	`20`	`// Funcion usada para cambiar contraseña`
`17`	`21`	`function changePasswordSHA(user_id, element, db_value) {`
Original file line number	Diff line number	Diff line change
`@@ -196,6 +196,9 @@ tbody tr:hover {`
`196`	`196`	`}`
`197`	`197`	`/* more at devices.css and login.css */`
`198`	`198`
	`199`	`+.clickable {`
	`200`	`+ cursor: pointer;`
	`201`	`+}`
`199`	`202`
`200`	`203`	`/* CARDS */`
`201`	`204`	`.cards {`