Added eye password reveal

JezerM · Sep 12, 2021 · 02a2f81 · 02a2f81
1 parent 1a1f1c5
commit 02a2f81
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 21 deletions.
diff --git a/themes/dracula/css/style.css b/themes/dracula/css/style.css
@@ -186,6 +186,10 @@ input:focus-visible {
   border: 0;
   outline: auto var(--fg0);
 }
+input::-ms-reveal,
+input::-ms-clear {
+  display: none;
+}
 :focus {
   outline: auto var(--fg0) !important;
 }
@@ -202,6 +206,23 @@ input:focus-visible {
   box-sizing: border-box;
   margin: 0;
 }
+#input {
+  position: relative;
+}
+#input #pass-eye {
+  position: absolute;
+  right: 15px;
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  height: fit-content;
+  background-color: var(--bg2);
+}
+#input #pass-eye:hover,
+#input #pass-eye:focus {
+  background-color: var(--bg3);
+}
 
 #input-username {
   box-sizing: border-box;

diff --git a/themes/dracula/index.html b/themes/dracula/index.html
@@ -65,14 +65,19 @@ <h2 id="date-label">20-05-2021</h2>
               </div>
 
               <div id="pass-wrapper">
-                <input
-                  id="input-password"
-                  name="password"
-                  type="password"
-                  autocomplete="off"
-                  autofocus="true"
-                  placeholder="Enter your password"
-                />
+                <div id="input">
+                  <input
+                    id="input-password"
+                    name="password"
+                    type="password"
+                    autocomplete="off"
+                    autofocus="true"
+                    placeholder="Enter your password"
+                  />
+                  <button id="pass-eye" type="button" class="button">
+                    <i class="mdi mdi-eye"></i>
+                  </button>
+                </div>
                 <button id="submit-button" class="button" type="submit">
                   <span class="mdi mdi-chevron-right mdi-24px"></span>
                 </button>

diff --git a/themes/dracula/js/authenticate.js b/themes/dracula/js/authenticate.js
@@ -1,6 +1,9 @@
 class Authenticate {
   constructor() {
     this._form = document.querySelector("#login-form");
+    this._inputUser = document.querySelector("#input-username");
+    this._inputPass = document.querySelector("#input-password");
+    this._input_eye = document.querySelector("#pass-eye");
     this._username = "";
     this._password = "";
     this._init();
@@ -17,14 +20,21 @@ class Authenticate {
       this._respond();
     });
   }
+  _setPasswordEye() {
+    this._input_eye.addEventListener("click", () => {
+      if (this._inputPass.type === "password") {
+        this._inputPass.type = "text";
+      } else {
+        this._inputPass.type = "password";
+      }
+    });
+  }
 
   async _respond() {
-    let inputUser = document.querySelector("#input-username");
-    let inputPass = document.querySelector("#input-password");
-    inputUser.blur();
-    inputUser.disabled = true;
-    inputPass.blur();
-    inputPass.disabled = true;
+    this._inputUser.blur();
+    this._inputUser.disabled = true;
+    this._inputPass.blur();
+    this._inputPass.disabled = true;
 
     lightdm.cancel_authentication();
     lightdm.authenticate(String(this._username));
@@ -89,13 +99,11 @@ class Authenticate {
     topbar.classList.remove("hide");
     bottombar.classList.remove("hide");
 
-    let inputUser = document.querySelector("#input-username");
-    let inputPass = document.querySelector("#input-password");
-    inputUser.blur();
-    inputUser.disabled = false;
-    inputPass.blur();
-    inputPass.disabled = false;
-    inputPass.value = "";
+    this._inputUser.blur();
+    this._inputUser.disabled = false;
+    this._inputPass.blur();
+    this._inputPass.disabled = false;
+    this._inputPass.value = "";
 
     body.classList.remove("failed");
   }
@@ -113,5 +121,6 @@ class Authenticate {
   _init() {
     this._setForm();
     this._setAuthentication_done();
+    this._setPasswordEye();
   }
 }
diff --git a/themes/gruvbox/css/style.css b/themes/gruvbox/css/style.css
@@ -195,6 +195,27 @@ input:focus-visible {
   border: 0;
   outline: auto var(--fg);
 }
+#input {
+  position: relative;
+}
+#input #pass-eye {
+  position: absolute;
+  right: 15px;
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  height: fit-content;
+  background-color: var(--bg1);
+}
+#input #pass-eye:hover,
+#input #pass-eye:focus {
+  background-color: var(--bg2);
+}
+input::-ms-reveal,
+input::-ms-clear {
+  display: none;
+}
 
 :focus {
   outline: auto var(--fg) !important;

diff --git a/themes/gruvbox/index.html b/themes/gruvbox/index.html
@@ -48,6 +48,9 @@
                   autofocus="true"
                   placeholder="Enter your password"
                 />
+                <button id="pass-eye" type="button" class="button">
+                  <i class="mdi mdi-eye"></i>
+                </button>
               </div>
               <div>
                 <button id="submit-button" type="submit" class="button">

diff --git a/themes/gruvbox/js/authenticate.js b/themes/gruvbox/js/authenticate.js
@@ -2,6 +2,7 @@ class Authenticate {
   constructor() {
     this._input = document.querySelector("#input-password");
     this._form = document.querySelector("#pass-form > form");
+    this._input_eye = document.querySelector("#pass-eye");
     this._password = "";
     this._init();
   }
@@ -25,6 +26,15 @@ class Authenticate {
       }
     };
   }
+  _setPasswordEye() {
+    this._input_eye.addEventListener("click", () => {
+      if (this._input.type === "password") {
+        this._input.type = "text";
+      } else {
+        this._input.type = "password";
+      }
+    });
+  }
 
   _respond() {
     var input = document.querySelector("#input-password");
@@ -74,6 +84,7 @@ class Authenticate {
   _init() {
     this._setForm();
     this._setAuthentication_done();
+    this._setPasswordEye();
     console.log("Start authentication");
     this.startAuthentication();
   }