Merge pull request #137 from CtrI-Alt-Del/revelpassword

reveal password feat
CtrI-Alt-Del · Jun 26, 2024 · b40e935 · b40e935
2 parents cdf964e + 72c069f
commit b40e935
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 14 deletions.
diff --git a/src/ui/static/scripts/reveal_password.js b/src/ui/static/scripts/reveal_password.js
@@ -0,0 +1,17 @@
+window.RevealPassword = function(passwordID,iconID){
+
+      let eyeicon = document.getElementById(iconID);
+      let password = document.getElementById(passwordID);
+
+      eyeicon.onclick = function () {
+        if (password.type === "password") {
+          password.type = "text";
+          eyeicon.classList.remove("ph-eye-closed"); // Remove the 'ph-eye' class
+          eyeicon.classList.add("ph-eye"); // Add the 'ph-eye-closed' class
+        } else {
+          password.type = "password";
+          eyeicon.classList.remove("ph-eye"); // Remove the 'ph-eye-closed' class
+          eyeicon.classList.add("ph-eye-closed"); // Add the 'ph-eye' class
+        }
+      };
+}
diff --git a/src/ui/templates/pages/login/index.html b/src/ui/templates/pages/login/index.html
@@ -1,7 +1,6 @@
 {% extends "layouts/root.html" %}
 
 {% from "components/logo.html" import logo %}
-
 {% block body %}
 <body
   class="flex items-center justify-center min-h-screen"
@@ -22,7 +21,7 @@
       hx-swap="innerHTML">
       <div id="login-form-fields">
         {% include "pages/login/login_form.html" %}
-      </div>
+     </div>
     </form>
 
   </div>

diff --git a/src/ui/templates/pages/login/login_form.html b/src/ui/templates/pages/login/login_form.html
@@ -13,7 +13,8 @@
 {% endif %}
 
 {% set input_container_class =
-"flex items-center justify-center w-full gap-1 p-3 mt-1 border rounded-lg focus-within:ring-2 focus-within:ring-green-500"
+"flex items-center justify-center w-full gap-1 p-3 mt-1 border rounded-lg focus-within:ring-2
+focus-within:ring-green-500"
 %}
 
 {% set input_class =
@@ -32,8 +33,7 @@
   class="block text-gray-700",
   )
   }}
-  <div
-    class="{{ input_container_class }}">
+  <div class="{{ input_container_class }}">
     <i class="ph-bold ph-user"></i>
     {{
     login_form.email(
@@ -51,10 +51,11 @@
   class="block text-gray-700",
   )
   }}
-  <div
-    class="{{ input_container_class }}">
+  <div class="{{ input_container_class }}">
     <i class="ph-bold ph-lock"></i>
-    {{ login_form.password(class=input_class, placeholder="****") }}
+    {{ login_form.password(class=input_class, placeholder="****",id ="password") }}
+
+    <i class="ph-bold ph-eye-closed" id="eyeicon"></i>
   </div>
   {{ error_messages(login_form.password.errors[0]) }}
 </div>
@@ -65,15 +66,13 @@
 </div>
 
 <div class="flex justify-between mb-6">
-  <a
-    href="{{ url_for('authentication_views.request_password_reset_page_view') }}"
+  <a href="{{ url_for('authentication_views.request_password_reset_page_view') }}"
     class="text-sm text-green-500 hover:underline">
     Esqueceu a senha?
   </a>
 </div>
 
-<button
-  type="submit"
+<button type="submit"
   class="grid place-content-center w-full p-3 text-white bg-green-500 rounded-lg hover:bg-green-600">
   <span data-loading-class="hidden">
     Login
@@ -82,3 +81,17 @@
     {{ loading("size-6 fill-green-600") }}
   </div>
 </button>
+<script src="{{ url_for('static', filename='scripts/reveal_password.js') }}"></script>
+<script>
+    window.onload = function () {
+    RevealPassword("password", "eyeicon");
+  }
+
+
+        document.querySelectorAll('[hx-trigger]').forEach(function(element) {
+            element.addEventListener('htmx:afterSwap', function(event) {
+               RevealPassword("password","eyeicon") 
+            });
+        });
+
+</script>
diff --git a/src/ui/templates/pages/reset_password/fields.html b/src/ui/templates/pages/reset_password/fields.html
@@ -20,20 +20,40 @@
     <i class="ph-bold ph-lock"></i>
 
     {{ form.password(class=input_class, placeholder="****") }}
+        <i class="ph-bold ph-eye-closed" id="eyeicon"></i>
+
   </div>
 
   {{ error_messages(form.password.errors[0]) }}
 </div>
 
 <div class="mb-6">
-  {{ form.confirm_password.label(class=label_class, placeholder="****") }}
+  {{ form.confirm_password.label(class=label_class, placeholder="****",id = "password") }}
 
   <div
     class="{{ input_container_class }}">
     <i class="ph-bold ph-lock"></i>
 
-    {{ form.confirm_password(class=input_class, placeholder="****") }}
+    {{ form.confirm_password(class=input_class, placeholder="****",id = "confirmPassword") }}
+        <i class="ph-bold ph-eye-closed" id="confirmEyeicon"></i>
   </div>
 
   {{ error_messages(form.confirm_password.errors[0]) }}
 </div>
+<script src="{{ url_for('static', filename='scripts/reveal_password.js') }}"></script>
+<script>
+    window.onload = function () {
+    console.log(document.getElementById("password"))
+    RevealPassword("password", "eyeicon");
+    RevealPassword("confirmPassword", "confirmEyeicon");
+  }
+
+        document.querySelectorAll('[hx-trigger]').forEach(function(element) {
+            element.addEventListener('htmx:afterSwap', function(event) {
+               RevealPassword("password","eyeicon") 
+               RevealPassword("confirmPassword", "confirmEyeicon");
+            });
+        });
+
+</script>
+