From 1c0e8655c4ba177083f515ab0fef0f905bf55e05 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Wed, 17 Sep 2025 17:09:56 +0530
Subject: [PATCH] Changes in Login-form hide/unhide button add secondary.

---
 src/pages/authentication/LoginPage.jsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/pages/authentication/LoginPage.jsx b/src/pages/authentication/LoginPage.jsx
index db99e6a1..3e331376 100644
--- a/src/pages/authentication/LoginPage.jsx
+++ b/src/pages/authentication/LoginPage.jsx
@@ -136,7 +136,7 @@ const LoginPage = () => {
                 )}
               </div> */}
 
-               <div className="mb-3 form-password-toggle text-start">
+              <div className="mb-3 form-password-toggle text-start">
                 <label htmlFor="password" className="form-label">
                   Password
                 </label>
@@ -146,7 +146,8 @@ const LoginPage = () => {
                     type={hidepass ? "password" : "text"}
                     autoComplete="new-password"
                     id="password"
-                    className="form-control form-control-xl shadow-none"
+                    className={`form-control form-control-xl shadow-none ${errors.password ? "is-invalid" : ""
+                      }`}
                     name="password"
                     {...register("password")}
                     placeholder="••••••••••••"
@@ -155,7 +156,7 @@ const LoginPage = () => {
                   <span className="input-group-text cursor-pointer border-start-0">
                     <button
                       type="button"
-                      className="btn btn-link p-0"
+                      className="btn btn-link-secondary p-0"
                       onClick={() => setHidepass(!hidepass)}
                     >
                       {hidepass ? (
@@ -166,8 +167,16 @@ const LoginPage = () => {
                     </button>
                   </span>
                 </div>
+
+                {/* ✅ Error message */}
+                {errors.password && (
+                  <div className="invalid-feedback text-start" style={{ fontSize: "12px" }}>
+                    {errors.password.message}
+                  </div>
+                )}
               </div>
 
+
               {/* Remember Me + Forgot Password */}
               <div className="mb-3 d-flex justify-content-between align-items-center">
                 <div className="form-check">