From b58746e4a35c3f355719c4c40ec347d4d751e604 Mon Sep 17 00:00:00 2001
From: Horilla <support@horilla.com>
Date: Tue, 11 Nov 2025 15:32:00 +0530
Subject: [PATCH] [FIX] HORILLA: Fixed load demo database password show hide
 button style and script

---
 horilla_theme/templates/login.html          | 41 +++++++++++++--------
 templates/demo_database/auth_load_data.html |  4 +-
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/horilla_theme/templates/login.html b/horilla_theme/templates/login.html
index aa8d9a245..d4bb507af 100644
--- a/horilla_theme/templates/login.html
+++ b/horilla_theme/templates/login.html
@@ -77,7 +77,7 @@
                     <label for="password" class="text-sm text-color-600"
                         >{% trans "Password" %}</label
                     >
-                    <div class="relative">
+                    <div class="oh-password-input-container relative">
                         <input
                             type="password"
                             id="password"
@@ -155,7 +155,6 @@
                     id="dataLoadAuthentication"
                     role="dialog"
                     aria-labelledby="dataLoadAuthenticationLabel"
-                    aria-hidden="true"
                     style="backdrop-filter: blur(8px)"
                 >
                     <div class="oh-modal__dialog">
@@ -165,23 +164,33 @@
                 {% endif %}
             </div>
         </div>
+
         <script type="module"  src="{% static 'images/ionicons/ui_icons/ionicons/ionicons.esm.js' %}"></script>
         <script>
-            document.querySelector('.oh-password-input--toggle').addEventListener('click', function (e) {
-                e.preventDefault();
-                const passwordInput = document.querySelector('.oh-input--password');
-                const showIcon = document.querySelector('.oh-password-input__show-icon');
-                const hideIcon = document.querySelector('.oh-password-input__hide-icon');
+            document.querySelectorAll('.oh-password-input--toggle').forEach(toggle => {
+                toggle.addEventListener('click', function (e) {
+                    console.log("ppppppppppppppp")
+                    e.preventDefault();
+                    const container = this.closest('.oh-password-input-container');
 
-                if (passwordInput.type === 'password') {
-                    passwordInput.type = 'text';
-                    showIcon.classList.add('hidden');
-                    hideIcon.classList.remove('hidden');
-                } else {
-                    passwordInput.type = 'password';
-                    showIcon.classList.remove('hidden');
-                    hideIcon.classList.add('hidden');
-                }
+                    if (!container) return;
+
+                    const passwordInput = container.querySelector('.oh-input--password');
+                    const showIcon = container.querySelector('.oh-password-input__show-icon, .oh-passowrd-input__show-icon');
+                    const hideIcon = container.querySelector('.oh-password-input__hide-icon, .oh-passowrd-input__hide-icon');
+
+                    if (!passwordInput || !showIcon || !hideIcon) return;
+
+                    if (passwordInput.type === 'password') {
+                        passwordInput.type = 'text';
+                        showIcon.classList.add('hidden', 'd-none');
+                        hideIcon.classList.remove('hidden', 'd-none');
+                    } else {
+                        passwordInput.type = 'password';
+                        showIcon.classList.remove('hidden', 'd-none');
+                        hideIcon.classList.add('hidden', 'd-none');
+                    }
+                });
             });
         </script>
     </body>
diff --git a/templates/demo_database/auth_load_data.html b/templates/demo_database/auth_load_data.html
index 4baf87690..2a0d83567 100644
--- a/templates/demo_database/auth_load_data.html
+++ b/templates/demo_database/auth_load_data.html
@@ -18,11 +18,11 @@
                 <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                     <div class="oh-input-group">
                         <label class="oh-label" for="password">{% trans "Password" %}</label>
-                        <div class="oh-password-input-container">
+                        <div class="oh-password-input-container relative">
                             <input type="password" id="load_data_password" name="load_data_password"
                                 class="oh-input oh-input--password w-100" placeholder="Database authentication password"
                                 required />
-                            <button type="button" class="oh-btn oh-btn--transparent oh-password-input--toggle">
+                            <button type="button" class="oh-btn oh-btn--transparent oh-password-input--toggle top-[-7px]">
                                 <ion-icon class="oh-passowrd-input__show-icon" title="Show Password"
                                     name="eye-outline"></ion-icon>
                                 <ion-icon class="oh-passowrd-input__hide-icon d-none" title="Hide Password"