From bae473139cacf77ed16a097f3e68359612ea585a Mon Sep 17 00:00:00 2001
From: Govind Mehta <govindmehta.gov@gmail.com>
Date: Mon, 20 Oct 2025 14:07:19 +0530
Subject: [PATCH 1/3] Add loading state for Login and Signup pages

---
 frontend/src/pages/LoginPage.jsx    | 88 ++++++++++++++++++++------
 frontend/src/pages/RegisterPage.jsx | 97 ++++++++++++++++++++---------
 2 files changed, 138 insertions(+), 47 deletions(-)

diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index e211bee..0e1638a 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -1,28 +1,31 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
-import useAuth from '../hooks/useAuth';
-import PasswordInput from '../components/PasswordInput';
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import useAuth from "../hooks/useAuth";
+import PasswordInput from "../components/PasswordInput";
 
 /* // Demo user credentials
 const DEMO_EMAIL = 'test@example.com';
 const DEMO_PASSWORD = 'password123'; */
 
 export default function LoginPage() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [serverError, setServerError] = useState('');
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [serverError, setServerError] = useState("");
   const { login } = useAuth();
+  const [loading, setLoading] = useState(false);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    setServerError(''); // Clear previous server errors
+    setServerError(""); // Clear previous server errors
     try {
+      setLoading(true);
       await login(email, password);
       // Toast handled globally in AuthContext
     } catch (error) {
       setServerError(error.message);
       // Toast handled globally in AuthContext
     }
+    setLoading(false);
   };
 
   /* const handleFillDemoCredentials = () => {
@@ -32,26 +35,67 @@ export default function LoginPage() {
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 px-4">
-
-      <Link to="/" className="text-4xl font-bold text-blue-600 dark:text-blue-400 font-montserrat mb-8 transition-all duration-500 hover:scale-105 hover:drop-shadow-lg hover:text-blue-500 dark:hover:text-blue-300 cursor-pointer" title="Go to home">
+      <Link
+        to="/"
+        className="text-4xl font-bold text-blue-600 dark:text-blue-400 font-montserrat mb-8 transition-all duration-500 hover:scale-105 hover:drop-shadow-lg hover:text-blue-500 dark:hover:text-blue-300 cursor-pointer"
+        title="Go to home"
+      >
         Paisable
       </Link>
 
       <div className="px-8 py-6 text-left bg-white dark:bg-gray-800 shadow-lg rounded-lg w-full max-w-md">
-        <h3 className="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">Login to your account</h3>
-        {serverError && <p className="text-center text-red-500 bg-red-100 dark:bg-red-900/50 p-2 rounded-md my-4">{serverError}</p>}
+        <h3 className="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">
+          Login to your account
+        </h3>
+        {serverError && (
+          <p className="text-center text-red-500 bg-red-100 dark:bg-red-900/50 p-2 rounded-md my-4">
+            {serverError}
+          </p>
+        )}
         <form onSubmit={handleSubmit}>
           <div className="mt-4">
             <div>
-              <label className="block text-gray-700 dark:text-gray-300" htmlFor="email">Email</label>
-              <input type="email" placeholder="Email" className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600 dark:border-gray-600" id="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+              <label
+                className="block text-gray-700 dark:text-gray-300"
+                htmlFor="email"
+              >
+                Email
+              </label>
+              <input
+                type="email"
+                placeholder="Email"
+                className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600 dark:border-gray-600"
+                id="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
             </div>
             <div className="mt-4">
-              <label className="block text-gray-700 dark:text-gray-300" htmlFor="password">Password</label>
-              <PasswordInput value={password} onChange={(e) => setPassword(e.target.value)} />
+              <label
+                className="block text-gray-700 dark:text-gray-300"
+                htmlFor="password"
+              >
+                Password
+              </label>
+              <PasswordInput
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
             </div>
             <div className="flex flex-col gap-4 mt-4">
-              <button type="submit" className="w-full px-6 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700">Login</button>
+              <button
+                type="submit"
+                className={`w-full px-6 py-2 text-white bg-blue-600 rounded-lg 
+    ${
+      loading
+        ? "bg-blue-400 cursor-not-allowed" // Added utility classes for disabled state
+        : "hover:bg-blue-700"
+    }`}
+                disabled={loading}
+              >
+                {loading ? "Loading..." : "Login"}
+              </button>
               {/*<button 
                 type="button" 
                 onClick={handleFillDemoCredentials} 
@@ -61,11 +105,17 @@ export default function LoginPage() {
               </button>*/}
             </div>
             <div className="mt-6 text-gray-600 dark:text-gray-400">
-              Don't have an account? <Link to="/register" className="text-blue-600 hover:underline ml-2">Register</Link>
+              Don't have an account?{" "}
+              <Link
+                to="/register"
+                className="text-blue-600 hover:underline ml-2"
+              >
+                Register
+              </Link>
             </div>
           </div>
         </form>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/RegisterPage.jsx b/frontend/src/pages/RegisterPage.jsx
index fec46f5..6fc7024 100644
--- a/frontend/src/pages/RegisterPage.jsx
+++ b/frontend/src/pages/RegisterPage.jsx
@@ -1,95 +1,136 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
-import useAuth from '../hooks/useAuth';
-import PasswordInput from '../components/PasswordInput';
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import useAuth from "../hooks/useAuth";
+import PasswordInput from "../components/PasswordInput";
 
 export default function RegisterPage() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
   const [errors, setErrors] = useState({});
+  const [loading, setLoading] = useState(false);
   // State for server-side errors
-  const [serverError, setServerError] = useState('');
+  const [serverError, setServerError] = useState("");
   const { signup } = useAuth();
 
   const validate = () => {
     const newErrors = {};
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!emailRegex.test(email)) {
-      newErrors.email = 'Please enter a valid email address.';
+      newErrors.email = "Please enter a valid email address.";
     } else {
       // Frontend blacklist for instant feedback
-      const domain = email.split('@')[1];
-      const blockedDomains = ['example.com', 'test.com', 'invalid.com'];
+      const domain = email.split("@")[1];
+      const blockedDomains = ["example.com", "test.com", "invalid.com"];
       if (blockedDomains.includes(domain)) {
-        newErrors.email = 'This email domain is not allowed.';
+        newErrors.email = "This email domain is not allowed.";
       }
     }
 
     if (password.length < 8 || password.length > 16) {
-      newErrors.password = 'Password must be 8-16 characters long.';
+      newErrors.password = "Password must be 8-16 characters long.";
     } else {
       const passwordRegex = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_])/;
       if (!passwordRegex.test(password)) {
-        newErrors.password = 'Password must contain an alphabet, a digit, and a symbol.';
+        newErrors.password =
+          "Password must contain an alphabet, a digit, and a symbol.";
       }
     }
-    
+
     return newErrors;
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    setServerError(''); // Clear previous server errors
+    setServerError(""); // Clear previous server errors
     const validationErrors = validate();
     if (Object.keys(validationErrors).length > 0) {
       setErrors(validationErrors);
       return;
     }
     setErrors({});
-    
+
     // The signup function in AuthContext needs to be updated to handle errors
     try {
+      setLoading(true);
       await signup(email, password);
     } catch (error) {
       setServerError(error.message);
     }
+    setLoading(false);
   };
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 px-4">
-      <Link to="/" className="text-4xl font-bold text-blue-600 dark:text-blue-400 font-montserrat mb-8 transition-all duration-500 hover:scale-105 hover:drop-shadow-lg hover:text-blue-500 dark:hover:text-blue-300 cursor-pointer" title="Go to home">
+      <Link
+        to="/"
+        className="text-4xl font-bold text-blue-600 dark:text-blue-400 font-montserrat mb-8 transition-all duration-500 hover:scale-105 hover:drop-shadow-lg hover:text-blue-500 dark:hover:text-blue-300 cursor-pointer"
+        title="Go to home"
+      >
         Paisable
       </Link>
       <div className="px-8 py-6 text-left bg-white dark:bg-gray-800 shadow-lg rounded-lg w-full max-w-md">
-        <h3 className="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">Create an account</h3>
-        {serverError && <p className="text-center text-red-500 bg-red-100 dark:bg-red-900/50 p-2 rounded-md my-4">{serverError}</p>}
+        <h3 className="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">
+          Create an account
+        </h3>
+        {serverError && (
+          <p className="text-center text-red-500 bg-red-100 dark:bg-red-900/50 p-2 rounded-md my-4">
+            {serverError}
+          </p>
+        )}
         <form onSubmit={handleSubmit}>
           <div className="mt-4">
             <div>
-              <label className="block text-gray-700 dark:text-gray-300" htmlFor="email">Email</label>
+              <label
+                className="block text-gray-700 dark:text-gray-300"
+                htmlFor="email"
+              >
+                Email
+              </label>
               <input
                 type="email"
                 placeholder="Email"
-                className={`w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 ${errors.email ? 'border-red-500 focus:ring-red-500' : 'focus:ring-blue-600 dark:border-gray-600'}`}
+                className={`w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 ${
+                  errors.email
+                    ? "border-red-500 focus:ring-red-500"
+                    : "focus:ring-blue-600 dark:border-gray-600"
+                }`}
                 id="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
               />
-              {errors.email && <p className="text-xs text-red-500 mt-1">{errors.email}</p>}
+              {errors.email && (
+                <p className="text-xs text-red-500 mt-1">{errors.email}</p>
+              )}
             </div>
             <div className="mt-4">
-              <label className="block text-gray-700 dark:text-gray-300" htmlFor="password">Password</label>
-              <PasswordInput 
+              <label
+                className="block text-gray-700 dark:text-gray-300"
+                htmlFor="password"
+              >
+                Password
+              </label>
+              <PasswordInput
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 error={errors.password}
               />
-              {errors.password && <p className="text-xs text-red-500 mt-1">{errors.password}</p>}
+              {errors.password && (
+                <p className="text-xs text-red-500 mt-1">{errors.password}</p>
+              )}
             </div>
             <div className="flex">
-              <button type="submit" className="w-full px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900">
-                Create Account
+              <button
+                type="submit"
+                className={`w-full px-6 py-2 mt-4 text-white rounded-lg 
+    ${
+      loading
+        ? "bg-blue-400 cursor-not-allowed" // Disabled state
+        : "bg-blue-600 hover:bg-blue-900" // Active state
+    }`}
+                disabled={loading}
+              >
+                {loading ? "Loading..." : "Create Account"}
               </button>
             </div>
             <div className="mt-6 text-gray-600 dark:text-gray-400">
@@ -103,4 +144,4 @@ export default function RegisterPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}

From f300146a1633de2f3afa6c96670a4f30f4700163 Mon Sep 17 00:00:00 2001
From: Govind Mehta <govindmehta.gov@gmail.com>
Date: Mon, 20 Oct 2025 14:14:13 +0530
Subject: [PATCH 2/3] Refined loading state logic and fixed minor UI details

---
 frontend/src/pages/LoginPage.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index 0e1638a..94a95e8 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -86,11 +86,11 @@ export default function LoginPage() {
             <div className="flex flex-col gap-4 mt-4">
               <button
                 type="submit"
-                className={`w-full px-6 py-2 text-white bg-blue-600 rounded-lg 
+                className={`w-full px-6 py-2 text-white  rounded-lg 
     ${
       loading
         ? "bg-blue-400 cursor-not-allowed" // Added utility classes for disabled state
-        : "hover:bg-blue-700"
+        : "bg-blue-600 hover:bg-blue-700"
     }`}
                 disabled={loading}
               >

From b63802174d16c8bb5e956368b487a6909801c35b Mon Sep 17 00:00:00 2001
From: Govind Mehta <govindmehta.gov@gmail.com>
Date: Mon, 20 Oct 2025 15:15:30 +0530
Subject: [PATCH 3/3] Discard redundant quote changes in RegisterPage.jsx; keep
 imports and functional code

---
 frontend/src/pages/LoginPage.jsx    | 3 ---
 frontend/src/pages/RegisterPage.jsx | 2 --
 2 files changed, 5 deletions(-)

diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index 0991d88..eca3894 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -14,14 +14,12 @@ export default function LoginPage() {
   const [serverError, setServerError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const { login } = useAuth();
-  const [loading, setLoading] = useState(false);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     setServerError(''); // Clear previous server errors
     setIsLoading(true);
     try {
-      setLoading(true);
       await login(email, password);
       // Toast handled globally in AuthContext
     } catch (error) {
@@ -30,7 +28,6 @@ export default function LoginPage() {
     } finally {
       setIsLoading(false);
     }
-    setLoading(false);
   };
 
   /* const handleFillDemoCredentials = () => {
diff --git a/frontend/src/pages/RegisterPage.jsx b/frontend/src/pages/RegisterPage.jsx
index b17322f..ca04cc2 100644
--- a/frontend/src/pages/RegisterPage.jsx
+++ b/frontend/src/pages/RegisterPage.jsx
@@ -73,14 +73,12 @@ export default function RegisterPage() {
     setIsLoading(true);
     
     try {
-      setLoading(true);
       await signup(email, password);
     } catch (error) {
       setServerError(error.message);
     } finally {
       setIsLoading(false);
     }
-    setLoading(false);
   };
 
   const PasswordCriterion = ({ met, text }) => (