From 4c4dbe18c6b4a6ad86d03bea499e8a1dee8a5d39 Mon Sep 17 00:00:00 2001
From: Hafifie PKB <muhdhafifie97@gmail.com>
Date: Wed, 27 Aug 2025 12:46:27 +0800
Subject: [PATCH] added password-eyes to the login page

---
 .../includes/login/loginportal.blade.php      | 37 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/resources/views/includes/login/loginportal.blade.php b/resources/views/includes/login/loginportal.blade.php
index d4a6f6c..2b8e483 100644
--- a/resources/views/includes/login/loginportal.blade.php
+++ b/resources/views/includes/login/loginportal.blade.php
@@ -30,8 +30,41 @@
     </span>
     @endif
 
-    <div class="input-group input-group-outline mb-3">
-        <input placeholder="Kata Laluan" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" type="password" name="password" id="login-password">
+    <div class="input-group input-group-outline mb-3 position-relative">
+        <input 
+            placeholder="Kata Laluan" 
+            class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" 
+            type="password" 
+            name="password" 
+            id="login-password"
+            autocomplete="current-password"
+            style="padding-right: 2.5rem;"
+        >
+        <span 
+            class="input-group-text border-0 position-absolute end-0 top-0 h-100 d-flex align-items-center" 
+            style="cursor:pointer; z-index: 3; border-radius: 0 0.375rem 0.375rem 0; border-left: none; border: 1px solid #ced4da; background: transparent; padding: 0 12px; height: 100%; display: flex; align-items: center; box-shadow: none; top: 0; bottom: 0;"
+            onclick="togglePasswordVisibility()"
+            tabindex="0"
+            aria-label="Toggle password visibility"
+        >
+            <svg id="eyeIcon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#6c757d" viewBox="0 0 16 16" style="transition: fill 0.2s; pointer-events: none;">
+                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
+                <path id="eyeIconInner" d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>
+            </svg>
+        </span>
+        <script>
+            function togglePasswordVisibility() {
+                const passwordInput = document.getElementById('login-password');
+                const eyeIcon = document.getElementById('eyeIcon');
+                if (passwordInput.type === 'password') {
+                    passwordInput.type = 'text';
+                    eyeIcon.setAttribute('fill', '#12B652');
+                } else {
+                    passwordInput.type = 'password';
+                    eyeIcon.setAttribute('fill', '#6c757d');
+                }
+            }
+        </script>
     </div>
     @if ($errors->has('password'))
     <span class="invalid-feedback" style="display: block;margin-top:-10px !important;" role="alert">