From 72c069fb69197c0c1c9aa6d3aa5f58711bb69009 Mon Sep 17 00:00:00 2001
From: joelberto <kauanfvale@gmail.com>
Date: Wed, 26 Jun 2024 19:35:54 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B1template:=20add=20reveal=20password?=
 =?UTF-8?q?=20to=20reset=20password=20template?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/reset_password/fields.html          | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/ui/templates/pages/reset_password/fields.html b/src/ui/templates/pages/reset_password/fields.html
index 06db79b..7c7564e 100644
--- 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>
+