Changes in Reset Password Page and adding field in Dialog box is " Change Password"

src/components/Layout/Header.jsx

@@ -56,6 +56,9 @@ const Header = () => {
   const handleProfilePage = () => {
     navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
   };
+  const ChangePasswordPage = () => {
+    navigate(`/auth/changepassword`);
+  };
   return (
     <nav
       className="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
@@ -620,6 +623,15 @@ const Header = () => {
                     </span>
                   </span>
                 </a>
+              </li>
+               <li onClick={ChangePasswordPage}>
+                <a
+                  aria-label="go to profile"
+                  className="dropdown-item cusor-pointer"
+                >
+                  <i className="bx bx-user me-2"></i>
+                  <span className="align-middle">Change Password</span>
+                </a>
               </li>
               <li>
                 <div className="dropdown-divider"></div>

src/pages/authentication/ResetPasswordPage.jsx

@@ -35,9 +35,10 @@ const resetPasswordSchema = z
 
 const ResetPasswordPage = () => {
   const [searchParams] = useSearchParams();
-  const [ loading, setLoading ] = useState( false );
+  const [loading, setLoading] = useState(false);
   const [hidepass, setHidepass] = useState(true);
   const [hidepass1, setHidepass1] = useState(true);
+  const [tokenExpired, setTokenExpired] = useState(false);
 
   const token = searchParams.get("token");
   const navigate = useNavigate();
@@ -63,13 +64,28 @@ const ResetPasswordPage = () => {
       let response = await AuthRepository.resetPassword(reqObject);
       showToast("Password Reseted", "success");
       clearAllCache();
-      setLoading(false);
       navigate("/auth/login", { replace: true });
+      // setLoading(false);
     } catch (error) {
-      setLoading(false);
       showToast("Token is expries or Invalid ", "error");
+      setTokenExpired(true);
+      setLoading(false);
     }
   };
+
+  if (tokenExpired) {
+    return (
+      <AuthWrapper>
+        <h4 className="mb-2 text-secondary">Session Expired 🔒</h4>
+        <p className="mb-4">Your session has expired or token is invalid.</p>
+        <div className="text-center mb-4">
+          <Link to="/auth/forgot-password" className="btn btn-outline-primary">
+            Go to Forgot Password
+          </Link>
+        </div>
+      </AuthWrapper>
+    );
+  }
   return (
     <AuthWrapper>
       <h4 className="mb-2">Reset Password? 🔒</h4>
@@ -126,7 +142,7 @@ const ResetPasswordPage = () => {
                 borderTopLeftRadius: 0,
                 borderBottomLeftRadius: 0,
                 borderLeft: 0,
-                
+
               }}
             >
               {hidepass ? (
@@ -161,7 +177,7 @@ const ResetPasswordPage = () => {
               placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
               aria-describedby="password"
             />
-             <button
+            <button
               type="button"
               className="btn border-top border-end border-bottom "
               onClick={() => setHidepass1(!hidepass1)}
@@ -169,7 +185,7 @@ const ResetPasswordPage = () => {
                 borderTopLeftRadius: 0,
                 borderBottomLeftRadius: 0,
                 borderLeft: 0,
-                
+
               }}
             >
               {hidepass1 ? (