🧱template: add reveal password to login template

CtrI-Alt-Del · Jun 26, 2024 · 41b0631 · 41b0631
1 parent 8e8945d
commit 41b0631
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
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>