From 3ee4018450c77d95205554fbe0e4299f58447524 Mon Sep 17 00:00:00 2001
From: Jirapong Pansak <55589246+MaoMaoCake@users.noreply.github.com>
Date: Fri, 21 Feb 2025 16:28:24 +0700
Subject: [PATCH 1/2] Add Initial password field edits

---
 allauth_ui/templates/components/form.html     |  9 ++++--
 .../templates/components/form_field.html      | 31 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/allauth_ui/templates/components/form.html b/allauth_ui/templates/components/form.html
index 3997aab..8b1fb4b 100644
--- a/allauth_ui/templates/components/form.html
+++ b/allauth_ui/templates/components/form.html
@@ -10,8 +10,13 @@
     {% if render_fields == "true" %}
         {% for field in form.visible_fields %}
             {% if field.name != "remember" %}
-                {% #form_field field=field %}
-                {% /form_field %}
+                {% if field.name == "password" %}
+                    {% #form_field field=field is_password='true' %}
+                    {% /form_field %}
+                {% else %}
+                    {% #form_field field=field %}
+                    {% /form_field %}
+                {% endif %}
             {% endif %}
         {% endfor %}
     {% endif %}
diff --git a/allauth_ui/templates/components/form_field.html b/allauth_ui/templates/components/form_field.html
index bedd6a7..aff76bc 100644
--- a/allauth_ui/templates/components/form_field.html
+++ b/allauth_ui/templates/components/form_field.html
@@ -1,11 +1,40 @@
+{% load slippers %}
 {% load widget_tweaks %}
+{% var is_password=is_password|default:"false" %}
+
+<script>
+function togglePassword() {
+    const passwordField = document.querySelector('.password-field');
+    const toggleButton = document.querySelector('button');
+
+    if (passwordField.type === "password") {
+        passwordField.type = "text";
+        toggleButton.textContent = "Hide";
+    } else {
+        passwordField.type = "password";
+        toggleButton.textContent = "Show";
+    }
+}
+</script>
+
+
 <label class="label" for="{{ field.id_for_label }}">
     <span class="label-text">{{ field.label }}</span>
 </label>
 {% if field.errors %}
     {% render_field field placeholder="" class="w-full input input-bordered text-primary input-error" %}
 {% else %}
-    {% render_field field placeholder="" class="w-full input input-bordered text-primary" %}
+    {% if is_password == 'true' %}
+        <div class="relative flex w-full">
+            {% render_field field placeholder="" class="w-full input input-bordered text-primary password-field"%}
+            <button type="button" onclick="togglePassword()" 
+                class="absolute top-1/2 right-3 transform -translate-y-1/2 bg-transparent text-gray-500 hover:text-gray-700 text-sm">
+                Show
+            </button>
+        </div>
+    {% else %}
+        {% render_field field placeholder="" class="w-full input input-bordered text-primary" %}
+    {% endif %}
 {% endif %}
 {% for error in field.errors %}
     <span class="flex items-center max-w-xs mt-1 ml-1 text-xs font-medium tracking-wide text-error">{{ error }}</span>

From d245cd433196c87a1dad6829470de0f2f7c8a115 Mon Sep 17 00:00:00 2001
From: Jirapong Pansak <55589246+MaoMaoCake@users.noreply.github.com>
Date: Fri, 21 Feb 2025 16:39:16 +0700
Subject: [PATCH 2/2] update button

---
 allauth_ui/templates/components/form_field.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/allauth_ui/templates/components/form_field.html b/allauth_ui/templates/components/form_field.html
index aff76bc..797c042 100644
--- a/allauth_ui/templates/components/form_field.html
+++ b/allauth_ui/templates/components/form_field.html
@@ -28,9 +28,10 @@
         <div class="relative flex w-full">
             {% render_field field placeholder="" class="w-full input input-bordered text-primary password-field"%}
             <button type="button" onclick="togglePassword()" 
-                class="absolute top-1/2 right-3 transform -translate-y-1/2 bg-transparent text-gray-500 hover:text-gray-700 text-sm">
+                class="btn btn-neutral text-gray-500 hover:text-gray-700 text-sm">
                 Show
             </button>
+            
         </div>
     {% else %}
         {% render_field field placeholder="" class="w-full input input-bordered text-primary" %}