Changeset 3353046

Timestamp:

08/30/2025 09:49:53 AM (6 months ago)

Author:

authorkit

Message:

Add Password Visibility Option

Location:

author-kit

Files:

• tags/1.0.16/admin/assets/js/author-kit-user.js (modified) (2 diffs)
• tags/1.0.16/admin/views/author-kit-user.php (modified) (1 diff)
• trunk/admin/assets/js/author-kit-user.js (modified) (2 diffs)
• trunk/admin/views/author-kit-user.php (modified) (1 diff)

author-kit/tags/1.0.16/admin/assets/js/author-kit-user.js

@@ -14 +14 @@
     author_kit_add_or_edit_user();
     display_name_on_fields_change();
+    togglePassword();
 
 
@@ -74 +75 @@
             }
         });
+    }
+
+    // Function to toggle password visibility
+    function togglePassword() {
+        // Get the password input field
+        const passwordField = document.getElementById("password");
+        // Get the eye icon element
+        const toggleIcon = document.querySelector(".toggle-password");
+
+        toggleIcon.addEventListener("click", function () {
+
+            // If input is currently of type "password", change it to "text"
+            if (passwordField.type === "password") {
+                passwordField.type = "text";    // Show the password
+                toggleIcon.innerHTML = '<i class="fa-solid fa-eye-slash"></i>';  // Change icon to "hide" state
+            } else {
+                passwordField.type = "password"; // Hide the password
+                toggleIcon.innerHTML = '<i class="fa-solid fa-eye"></i>';  // Change icon back to "show" state
+            }
+        });
+
     }
 

author-kit/tags/1.0.16/admin/views/author-kit-user.php

@@ -204 +204 @@
                 <span style="color: red;"><?php echo 'add-new' === $action_selected ? '*' : ''; ?></span>
             </label>
-            <input type="password" id="password" <?php echo 'add-new' === $action_selected ? 'required' : ''; ?> minlength="8" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$">
+            <!-- Wrapper around the input so we can position the toggle icon inside it -->
+            <div class="password-wrapper" style="position: relative;">
+                <!-- Password input field -->
+                <input 
+                    type="password" 
+                    id="password"
+                    <?php echo 'add-new' === $action_selected ? 'required' : ''; ?> 
+                    minlength="8" 
+                    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
+                    style="padding-right: 35px;" 
+                >
+                
+                <!-- Toggle icon (eye). It's placed absolutely inside the input wrapper -->
+                <span 
+                    class="toggle-password" 
+                    style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; user-select: none;">
+                    <i class="fa-solid fa-eye"></i>
+                </span>
+            </div>
             <div class="feedback error" id="password-error" style="display: none;">
             </div>

author-kit/trunk/admin/assets/js/author-kit-user.js

@@ -14 +14 @@
     author_kit_add_or_edit_user();
     display_name_on_fields_change();
+    togglePassword();
 
 
@@ -74 +75 @@
             }
         });
+    }
+
+    // Function to toggle password visibility
+    function togglePassword() {
+        // Get the password input field
+        const passwordField = document.getElementById("password");
+        // Get the eye icon element
+        const toggleIcon = document.querySelector(".toggle-password");
+
+        toggleIcon.addEventListener("click", function () {
+
+            // If input is currently of type "password", change it to "text"
+            if (passwordField.type === "password") {
+                passwordField.type = "text";    // Show the password
+                toggleIcon.innerHTML = '<i class="fa-solid fa-eye-slash"></i>';  // Change icon to "hide" state
+            } else {
+                passwordField.type = "password"; // Hide the password
+                toggleIcon.innerHTML = '<i class="fa-solid fa-eye"></i>';  // Change icon back to "show" state
+            }
+        });
+
     }
 

author-kit/trunk/admin/views/author-kit-user.php

@@ -204 +204 @@
                 <span style="color: red;"><?php echo 'add-new' === $action_selected ? '*' : ''; ?></span>
             </label>
-            <input type="password" id="password" <?php echo 'add-new' === $action_selected ? 'required' : ''; ?> minlength="8" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$">
+            <!-- Wrapper around the input so we can position the toggle icon inside it -->
+            <div class="password-wrapper" style="position: relative;">
+                <!-- Password input field -->
+                <input 
+                    type="password" 
+                    id="password"
+                    <?php echo 'add-new' === $action_selected ? 'required' : ''; ?> 
+                    minlength="8" 
+                    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
+                    style="padding-right: 35px;" 
+                >
+                
+                <!-- Toggle icon (eye). It's placed absolutely inside the input wrapper -->
+                <span 
+                    class="toggle-password" 
+                    style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; user-select: none;">
+                    <i class="fa-solid fa-eye"></i>
+                </span>
+            </div>
             <div class="feedback error" id="password-error" style="display: none;">
             </div>