From 08fd3da48f4c14b121f80194fdb09e80ba356ac7 Mon Sep 17 00:00:00 2001
From: Saumya-249 <saumya.skdian@gmail.com>
Date: Thu, 15 Jan 2026 23:18:38 +0530
Subject: [PATCH 01/17] Update Register page with the modified frontend and
 backend

---
 savebook/app/(auth)/register/page.js    | 238 +++++++++++-------------
 savebook/app/api/auth/register/route.js |  65 ++++---
 savebook/context/auth/AuthState.js      |   2 +-
 savebook/package-lock.json              |  24 +--
 savebook/package.json                   |   2 +-
 5 files changed, 157 insertions(+), 174 deletions(-)

diff --git a/savebook/app/(auth)/register/page.js b/savebook/app/(auth)/register/page.js
index f793b78..30dff6f 100644
--- a/savebook/app/(auth)/register/page.js
+++ b/savebook/app/(auth)/register/page.js
@@ -1,36 +1,16 @@
-"use client"
-import { useAuth } from '@/context/auth/authContext';
-import { useRouter } from 'next/navigation';
-import React, { useState, useEffect } from 'react';
-import toast from 'react-hot-toast';
-import Link from 'next/link';
+"use client";
 
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import toast from "react-hot-toast";
+import { useAuth } from "@/context/auth/authContext";
 import { Eye, EyeOff } from 'lucide-react';
 
 // Signup Form Component
-const SignupForm = () => {
-    const { register, isAuthenticated } = useAuth();
-    const [credentials, setCredentials] = useState({
-        username: '',
-        password: '',
-        confirmPassword: ''
-    });
-    const [errors, setErrors] = useState({
-        username: '',
-        password: '',
-        confirmPassword: ''
-    });
-    const [isLoading, setIsLoading] = useState(false);
-    const [showPassword, setShowPassword] = useState(false);
-    const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-    const router = useRouter();
-
-    // Handle redirection based on authentication status
-    useEffect(() => {
-        if (isAuthenticated) {
-            router.push("/");
-        }
-    }, [isAuthenticated, router]);
+export default async function SignupPage() {
+  const { register, isAuthenticated } = useAuth();
+  const router = useRouter();
 
     const handleSubmit = async (e) => {
         e.preventDefault();
@@ -141,11 +121,48 @@ const SignupForm = () => {
         setErrors({ ...errors, [e.target.name]: '' });
     };
 
-    // Show loading state while checking authentication
-    if (isAuthenticated === undefined) {
-        return <SignupFormSkeleton />;
+    const newErrors = {};
+    if (!credentials.username.trim()) {
+      newErrors.username = "Username is required";
+    }
+    if (!credentials.password) {
+      newErrors.password = "Password is required";
+    } else if (credentials.password.length < 6) {
+      newErrors.password = "Password must be at least 6 characters";
+    }
+    if (!credentials.confirmPassword) {
+      newErrors.confirmPassword = "Confirm password is required";
+    } else if (credentials.password !== credentials.confirmPassword) {
+      newErrors.confirmPassword = "Passwords do not match";
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const result = await register(credentials.username, credentials.password, credentials.confirmPassword);
+
+      if (result?.success) {
+        setSuccessMessage("Account created successfully! 🎉 Redirecting...");
+        setErrorMessage(""); //clear any previous error
+        setTimeout(() => router.push("/login"), 1500);
+      } else {
+        setSuccessMessage(""); // clear success
+        setErrorMessage(result?.message || "Registration failed");
+      }
+    } catch (error) {
+      setSuccessMessage("");
+      setErrorMessage("Something went wrong");
+    } finally {
+      setIsLoading(false);
     }
+  };
 
+  // Skeleton loader
+  if (isAuthenticated === undefined) {
     return (
         <form className="space-y-6" onSubmit={handleSubmit}>
             {/* Username Field */}
@@ -243,11 +260,57 @@ const SignupForm = () => {
                 )}
             </div>
 
-            {/* Submit Button */}
+        <form className="space-y-6" onSubmit={handleSubmit} noValidate>
+          {/* Username */}
+          <div>
+            <label htmlFor="username" className="block text-sm font-medium text-gray-300 mb-2">
+              Username
+            </label>
+            <input
+              type="text"
+              name="username"
+              id="username"
+              value={credentials.username}
+              onChange={onChange}
+              disabled={isLoading || isAuthenticated}
+              className={`w-full px-4 py-3 border ${
+                errors.username ? "border-red-500" : "border-gray-600"
+              } bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500`}
+              placeholder="Choose a username"
+              required
+            />
+            {errors.username && (
+              <p className="text-red-500 text-sm mt-1">{errors.username}</p>
+            )}
+
+            {usernameMessage && !errors.username && (
+              <p className="text-blue-400 text-sm mt-1">{usernameMessage}</p>
+            )}
+          </div>
+
+          {/* Password */}
+          <div className="relative">
+            <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
+              Password
+            </label>
+            <input
+              type={showPassword ? "text" : "password"}
+              name="password"
+              id="password"
+              value={credentials.password}
+              onChange={onChange}
+              disabled={isLoading || isAuthenticated}
+              className={`w-full px-4 py-3 border ${
+                errors.password ? "border-red-500" : "border-gray-600"
+              } bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10`}
+              placeholder="Create a password"
+              required
+            />
             <button
-                type="submit"
-                disabled={isLoading || isAuthenticated}
-                className="w-full bg-gradient-to-r from-green-600 to-blue-700 text-white py-3 px-4 rounded-lg font-medium hover:from-green-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-green-500 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-3 top-9 text-gray-400 hover:text-gray-200"
+              aria-label={showPassword ? "Hide password" : "Show password"}
             >
                 {isLoading ? (
                     <>
@@ -260,7 +323,10 @@ const SignupForm = () => {
                 ) : (
                     isAuthenticated ? 'Redirecting...' : 'Create Account'
                 )}
+              {showPassword ? "🙈" : "👁️"}
             </button>
+            {errors.password && <p className="text-red-500 text-sm mt-1">{errors.password}</p>}
+          </div>
 
             {/* Login link */}
             <div className="text-center">
@@ -280,102 +346,6 @@ const SignupForm = () => {
                 </span>
             </div>
         </form>
-    );
-}
-
-// Signup Skeleton Component for loading state
-const SignupFormSkeleton = () => {
-    return (
-        <div className="space-y-6">
-            {/* Username Field Skeleton */}
-            <div>
-                <div className="h-5 w-20 bg-gray-700 rounded mb-2 animate-pulse"></div>
-                <div className="h-12 bg-gray-700 rounded-lg animate-pulse"></div>
-            </div>
-
-            {/* Password Field Skeleton */}
-            <div>
-                <div className="h-5 w-20 bg-gray-700 rounded mb-2 animate-pulse"></div>
-                <div className="h-12 bg-gray-700 rounded-lg animate-pulse"></div>
-            </div>
-
-            {/* Confirm Password Field Skeleton */}
-            <div>
-                <div className="h-5 w-32 bg-gray-700 rounded mb-2 animate-pulse"></div>
-                <div className="h-12 bg-gray-700 rounded-lg animate-pulse"></div>
-            </div>
-
-            {/* Button Skeleton */}
-            <div className="h-12 bg-gradient-to-r from-green-600/30 to-blue-700/30 rounded-lg animate-pulse"></div>
-
-            {/* Sign up link Skeleton */}
-            <div className="flex justify-center">
-                <div className="h-5 w-48 bg-gray-700 rounded animate-pulse"></div>
-            </div>
-        </div>
-    );
-};
-
-// Main component
-export default function Signup() {
-    const { isAuthenticated } = useAuth();
-
-    // Show loading while checking initial auth state
-    if (isAuthenticated === undefined) {
-        return (
-            <div className="min-h-screen bg-gradient-to-br from-gray-900 to-blue-900 flex items-center justify-center">
-                <div className="max-w-md w-full">
-                    {/* Header Skeleton */}
-                    <div className="text-center mb-8">
-                        <div className="mx-auto h-12 w-12 bg-gradient-to-r from-green-500 to-blue-600 rounded-full flex items-center justify-center mb-4 animate-pulse"></div>
-                        <div className="h-8 w-48 bg-gray-700 rounded mx-auto mb-2 animate-pulse"></div>
-                        <div className="h-4 w-32 bg-gray-700 rounded mx-auto animate-pulse"></div>
-                    </div>
-
-                    {/* Form Skeleton */}
-                    <div className="bg-gray-800 p-8 rounded-2xl shadow-xl border border-gray-700">
-                        <SignupFormSkeleton />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    // // Redirect if already authenticated
-    // if (isAuthenticated) {
-    //     return (
-    //         <div className="min-h-screen bg-gradient-to-br from-gray-900 to-blue-900 flex items-center justify-center p-4">
-    //             <div className="text-center">
-    //                 <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4"></div>
-    //                 <p className="text-white">Redirecting...</p>
-    //             </div>
-    //         </div>
-    //     );
-    // }
-
-    return (
-        <div className="min-h-screen bg-gradient-to-br from-gray-900 to-blue-900 flex items-center justify-center p-4">
-            <div className="max-w-md w-full">
-                {/* Header */}
-                <div className="text-center mb-8">
-                    <div className="mx-auto h-12 w-12 bg-gradient-to-r from-green-500 to-blue-600 rounded-full flex items-center justify-center mb-4">
-                        <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
-                        </svg>
-                    </div>
-                    <h2 className="text-3xl font-bold text-white">
-                        Create Account
-                    </h2>
-                    <p className="mt-2 text-gray-300">
-                        Join us and get started
-                    </p>
-                </div>
-
-                {/* Signup Form */}
-                <div className="bg-gray-800 p-8 rounded-2xl shadow-xl border border-gray-700">
-                    <SignupForm />
-                </div>
-            </div>
-        </div>
-    );
+      </form>
+  );
 }
\ No newline at end of file
diff --git a/savebook/app/api/auth/register/route.js b/savebook/app/api/auth/register/route.js
index 1dc57da..5c61a45 100644
--- a/savebook/app/api/auth/register/route.js
+++ b/savebook/app/api/auth/register/route.js
@@ -4,44 +4,57 @@ import dbConnect from "@/lib/db/mongodb";
 
 export async function POST(request) {
   try {
-    await dbConnect();
-
-    const { username, password } = await request.json();
+    const { username, password} = await request.json();
+    
+    //Validate required fields
+    if(!username || !password){
+      return NextResponse.json(
+        { success: false, message: "All fields are required" },
+        { status: 400}
+      );
+    }
 
-    // ✅ Input validation
-    if (
-      !username ||
-      !password ||
-      typeof username !== "string" ||
-      typeof password !== "string" ||
-      password.length < 6
-    ) {
+    // Password strength check
+    if (password.length < 6) {
       return NextResponse.json(
-        { success: false, message: "Invalid input" },
+        { success: false, message: "Password must be at least 6 characters" },
         { status: 400 }
       );
     }
 
-    // ✅ Prevent username enumeration
-    const existingUser = await User.findOne({ username });
-
-    if (existingUser) {
+    // Check if user exists
+    let user = await User.findOne({ username });
+    if (user) {
       return NextResponse.json(
-        { success: false, message: "Unable to create account" },
+        { success: false, message: "Invalid input" },
         { status: 400 }
       );
     }
+    
+    // Try creating user
+    try {
+      const newUser = await User.create({ username, password });
+      console.log("User created:", newUser._id);
 
-    // ✅ Create user
-    await User.create({
-      username,
-      password
-    });
+      return NextResponse.json(
+        { success: true, message: "Account created successfully" },
+        { status: 201 }
+      );
+    } catch (err) {
+      // Handle duplicate key error explicitly
+      if (err.code === 11000) {
+        return NextResponse.json(
+          { success: false, message: "Username already taken" },
+          { status: 400 }
+        );
+      }
 
-    return NextResponse.json(
-      { success: true, message: "Account created successfully" },
-      { status: 201 }
-    );
+      console.error("User creation error:", err.message);
+      return NextResponse.json(
+        { success: false, message: err.message || "Failed to create user" },
+        { status: 500 }
+      );
+    }
   } catch (error) {
     console.error("Register error:", error);
     return NextResponse.json(
diff --git a/savebook/context/auth/AuthState.js b/savebook/context/auth/AuthState.js
index dcdc85d..68aea5f 100644
--- a/savebook/context/auth/AuthState.js
+++ b/savebook/context/auth/AuthState.js
@@ -90,7 +90,7 @@ const AuthProvider = ({ children }) => {
                 headers: {
                     'Content-Type': 'application/json'
                 },
-                body: JSON.stringify({ username,password }),
+                body: JSON.stringify({ username,password}),
                 credentials: 'include'
             });
 
diff --git a/savebook/package-lock.json b/savebook/package-lock.json
index a4cf780..f6521ca 100644
--- a/savebook/package-lock.json
+++ b/savebook/package-lock.json
@@ -13,7 +13,7 @@
         "cloudinary": "^2.8.0",
         "framer-motion": "^12.24.7",
         "jose": "^6.1.3",
-        "jsonwebtoken": "^9.0.2",
+        "jsonwebtoken": "^9.0.3",
         "lucide-react": "^0.562.0",
         "mongoose": "^8.19.1",
         "next": "^15.5.7",
@@ -4483,12 +4483,12 @@
       }
     },
     "node_modules/jsonwebtoken": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
-      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
+      "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
       "license": "MIT",
       "dependencies": {
-        "jws": "^3.2.2",
+        "jws": "^4.0.1",
         "lodash.includes": "^4.3.0",
         "lodash.isboolean": "^3.0.3",
         "lodash.isinteger": "^4.0.4",
@@ -4521,9 +4521,9 @@
       }
     },
     "node_modules/jwa": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.2.tgz",
-      "integrity": "sha512-eeH5JO+21J78qMvTIDdBXidBd6nG2kZjg5Ohz/1fpa28Z4CcsWUzJ1ZZyFq/3z3N17aZy+ZuBoHljASbL1WfOw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
       "license": "MIT",
       "dependencies": {
         "buffer-equal-constant-time": "^1.0.1",
@@ -4532,12 +4532,12 @@
       }
     },
     "node_modules/jws": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.3.tgz",
-      "integrity": "sha512-byiJ0FLRdLdSVSReO/U4E7RoEyOCKnEnEPMjq3HxWtvzLsV08/i5RQKsFVNkCldrCaPr2vDNAOMsfs8T/Hze7g==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
+      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
       "license": "MIT",
       "dependencies": {
-        "jwa": "^1.4.2",
+        "jwa": "^2.0.1",
         "safe-buffer": "^5.0.1"
       }
     },
diff --git a/savebook/package.json b/savebook/package.json
index 66eab19..7114296 100644
--- a/savebook/package.json
+++ b/savebook/package.json
@@ -14,7 +14,7 @@
     "cloudinary": "^2.8.0",
     "framer-motion": "^12.24.7",
     "jose": "^6.1.3",
-    "jsonwebtoken": "^9.0.2",
+    "jsonwebtoken": "^9.0.3",
     "lucide-react": "^0.562.0",
     "mongoose": "^8.19.1",
     "next": "^15.5.7",

From 85e44c44c03e3e86f21d7fd68ad0c75c9b89911c Mon Sep 17 00:00:00 2001
From: Saumya-249 <saumya.skdian@gmail.com>
Date: Sat, 17 Jan 2026 00:58:00 +0530
Subject: [PATCH 02/17] Updated login page and update profile page, fix:
 removal of console logs, restored .env

---
 savebook/app/(auth)/login/page.js             | 380 +++++-------
 savebook/app/api/auth/login/route.js          |  50 +-
 savebook/app/api/auth/register/route.js       |  16 +-
 savebook/app/api/auth/update-profile/route.js |  93 ++-
 savebook/app/api/auth/user/route.js           |  36 ++
 savebook/app/profile/page.js                  | 559 ++++++++++--------
 savebook/context/auth/AuthState.js            |  62 +-
 savebook/lib/models/User.js                   |  15 +
 savebook/lib/utils/jwtAuth.js                 |   4 +
 savebook/middleware.js                        |  57 ++
 10 files changed, 733 insertions(+), 539 deletions(-)
 create mode 100644 savebook/middleware.js

diff --git a/savebook/app/(auth)/login/page.js b/savebook/app/(auth)/login/page.js
index d495c24..7388e8f 100644
--- a/savebook/app/(auth)/login/page.js
+++ b/savebook/app/(auth)/login/page.js
@@ -3,265 +3,193 @@
 import { useAuth } from "@/context/auth/authContext";
 import { useRouter } from "next/navigation";
 import React, { useState, useEffect } from "react";
-import toast from "react-hot-toast";
 import Link from "next/link";
 
-import { Eye, EyeOff } from "lucide-react";
-
-/* =========================
-   Login Form
-========================= */
 const LoginForm = () => {
   const { login, isAuthenticated, loading } = useAuth();
-  const router = useRouter();
-
-  const [credentials, setCredentials] = useState({
-    username: "",
-    password: "",
-  });
-
-  const [isLoading, setIsLoading] = useState(false);
-  const [hasRedirected, setHasRedirected] = useState(false);
+  const [credentials, setCredentials] = useState({ username: "", password: "" });
+  const [rememberMe, setRememberMe] = useState(false);
+  const [errors, setErrors] = useState({});
+  const [errorMessage, setErrorMessage] = useState("");
+  const [successMessage, setSuccessMessage] = useState("");
   const [showPassword, setShowPassword] = useState(false);
+  const [hasRedirected, setHasRedirected] = useState(false);
+  const router = useRouter();
 
-  //  Recovery Codes
-  const [recoveryCodes, setRecoveryCodes] = useState(null);
-  const [showRecoveryModal, setShowRecoveryModal] = useState(false);
-
-  /* -------------------------
-     Redirect after login
-  ------------------------- */
+  // Redirect if authenticated
   useEffect(() => {
-    if (
-      isAuthenticated &&
-      !loading &&
-      !hasRedirected &&
-      !showRecoveryModal
-    ) {
+    if (isAuthenticated && !loading && !hasRedirected) {
       setHasRedirected(true);
       router.push("/notes");
     }
-  }, [isAuthenticated, loading, hasRedirected, showRecoveryModal, router]);
+  }, [isAuthenticated, loading, hasRedirected, router]);
+
+  const onChange = (e) => {
+    setCredentials({ ...credentials, [e.target.name]: e.target.value });
+  };
 
-  /* -------------------------
-     Submit
-  ------------------------- */
   const handleSubmit = async (e) => {
     e.preventDefault();
-    if (isLoading || isAuthenticated) return;
+    setErrors({});
+    setErrorMessage("");
+    setSuccessMessage("");
 
-    setIsLoading(true);
+    const newErrors = {};
+    if (!credentials.username.trim()) {
+      newErrors.username = "Username is required";
+    }
+    if (!credentials.password) {
+      newErrors.password = "Password is required";
+    }
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
 
     try {
-      const result = await login(
-        credentials.username,
-        credentials.password
-      );
+      const result = await login(credentials.username, credentials.password, rememberMe);
 
       if (result.success) {
-        toast.success("Welcome back! 🎉");
-
-        // First login show recovery codes
-        if (result.recoveryCodes && result.recoveryCodes.length > 0) {
-          setRecoveryCodes(result.recoveryCodes);
-          setShowRecoveryModal(true);
-        }
+        setSuccessMessage("Logging in...");
+        setErrorMessage("");
+        // redirect handled by useEffect
       } else {
-        toast.error(result.message || "Invalid credentials");
+        setSuccessMessage("");
+        setErrorMessage(result.message);
       }
-    } catch (err) {
-      toast.error("Something went wrong");
-    } finally {
-      setIsLoading(false);
+    } catch (error) {
+      // Removed console.error
+      setSuccessMessage("");
+      setErrorMessage("Something went wrong. Please try again.");
     }
   };
 
-  /* -------------------------
-     Helpers
-  ------------------------- */
-  const onchange = (e) =>
-    setCredentials({ ...credentials, [e.target.name]: e.target.value });
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(recoveryCodes.join("\n"));
-    toast.success("Recovery codes copied");
-  };
-
-  const handleDownload = () => {
-    const blob = new Blob([recoveryCodes.join("\n")], {
-      type: "text/plain",
-    });
-    const url = URL.createObjectURL(blob);
-
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "savebook-recovery-codes.txt";
-    a.click();
-
-    URL.revokeObjectURL(url);
-  };
-
-  if (loading) return <LoginFormSkeleton />;
-
   return (
-    <>
-      {/* ========== LOGIN FORM ========== */}
-      <form className="space-y-6" onSubmit={handleSubmit}>
-        {/* Username */}
-        <div>
-          <label className="block text-sm font-medium text-gray-300 mb-2">
-            Username
+    <form className="space-y-6" onSubmit={handleSubmit} noValidate>
+      {/* Username */}
+      <div>
+        <label htmlFor="username" className="block text-sm font-medium text-gray-300 mb-2">
+          Username
+        </label>
+        <input
+          type="text"
+          name="username"
+          id="username"
+          value={credentials.username}
+          onChange={onChange}
+          className={`w-full px-4 py-3 border ${
+            errors.username ? "border-red-500" : "border-gray-600"
+          } bg-gray-700 text-white rounded-lg focus:ring-2 focus:ring-blue-500`}
+          placeholder="Enter your username"
+          required
+        />
+        {errors.username && <p className="text-red-500 text-sm mt-1">{errors.username}</p>}
+      </div>
+
+      {/* Password */}
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <label htmlFor="password" className="block text-sm font-medium text-gray-300">
+            Password
           </label>
+          <a href="#" className="text-sm text-blue-400 hover:text-blue-300 transition-colors duration-200">
+            Forgot password?
+          </a>
+        </div>
+        <div className="relative">
           <input
-            type="text"
-            name="username"
-            value={credentials.username}
-            onChange={onchange}
+            type={showPassword ? "text" : "password"}
+            name="password"
+            id="password"
+            value={credentials.password}
+            onChange={onChange}
+            className={`w-full px-4 py-3 border ${
+              errors.password ? "border-red-500" : "border-gray-600"
+            } bg-gray-700 text-white rounded-lg focus:ring-2 focus:ring-blue-500 pr-10`}
+            placeholder="Enter your password"
             required
-            disabled={isLoading}
-            className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white"
-            placeholder="Enter username"
           />
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="absolute right-3 top-3 text-gray-400 hover:text-gray-200"
+          >
+            {showPassword ? "🙈" : "👁️"}
+          </button>
         </div>
+        {errors.password && <p className="text-red-500 text-sm mt-1">{errors.password}</p>}
+      </div>
 
-        {/* Password */}
-        <div>
-          <div className="flex justify-between mb-2">
-            <label className="block text-sm font-medium text-gray-300">
-              Password
-            </label>
-            <Link
-              href="/forgot-password"
-              className="text-sm text-blue-400 hover:text-blue-300"
-            >
-              Forgot password?
-            </Link>
-          </div>
-          <div className="relative">
-            <input
-              type={showPassword ? "text" : "password"}
-              name="password"
-              value={credentials.password}
-              onChange={onchange}
-              required
-              disabled={isLoading}
-              className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white pr-10 focus:ring-2 focus:ring-blue-500 outline-none"
-              placeholder="Enter password"
-            />
-            <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200 focus:outline-none"
-              aria-label={showPassword ? "Hide password" : "Show password"}
-            >
-              {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-            </button>
-          </div>
-        </div>
+      {/* Remember Me */}
+      <div className="flex items-center">
+        <input
+          id="rememberMe"
+          name="rememberMe"
+          type="checkbox"
+          checked={rememberMe}
+          onChange={(e) => setRememberMe(e.target.checked)}
+          className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+        />
+        <label htmlFor="rememberMe" className="ml-2 block text-sm text-gray-300">
+          Remember me
+        </label>
+      </div>
 
-        {/* Submit */}
-        <button
-          type="submit"
-          disabled={isLoading}
-          className="w-full bg-gradient-to-r from-blue-600 to-purple-700 text-white py-3 rounded-lg"
-        >
-          {isLoading ? "Signing in..." : "Sign in"}
-        </button>
+      {/* Inline messages */}
+      {errorMessage && (
+        <p className="text-red-400 text-sm font-medium text-center mb-2">{errorMessage}</p>
+      )}
+      {successMessage && (
+        <p className="text-green-400 text-sm font-medium text-center mb-2">{successMessage}</p>
+      )}
 
-        <p className="text-center text-sm text-gray-300">
-          Don’t have an account?{" "}
-          <Link href="/register" className="text-blue-400">
+      {/* Submit */}
+      <button
+        type="submit"
+        disabled={isAuthenticated}
+        className="w-full bg-gradient-to-r from-blue-600 to-purple-700 text-white py-3 px-4 rounded-lg font-medium hover:from-blue-700 hover:to-purple-800 transition-all duration-200 flex items-center justify-center disabled:opacity-50"
+      >
+        {isAuthenticated ? (
+          <>
+            <svg
+              className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              ></circle>
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0..."
+              ></path>
+            </svg>
+            Logging in...
+          </>
+        ) : (
+          "Sign in"
+        )}
+      </button>
+
+      {/* Sign up link */}
+      <div className="text-center">
+        <span className="text-sm text-gray-300">
+          Don't have an account?{" "}
+          <Link
+            href="/register"
+            className="font-medium text-blue-400 hover:text-blue-300 transition-colors duration-200"
+          >
             Register
           </Link>
-        </p>
-      </form>
-
-      {/* ========== RECOVERY CODES MODAL ========== */}
-      {showRecoveryModal && recoveryCodes && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
-          <div className="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md">
-            <h3 className="text-xl font-semibold text-white mb-3">
-              Save your recovery codes
-            </h3>
-
-            <p className="text-sm text-gray-300 mb-4">
-              These codes will be shown only once.
-              Save them securely.
-            </p>
-
-            <div className="grid grid-cols-2 gap-2 mb-4">
-              {recoveryCodes.map((code, index) => (
-                <div
-                  key={index}
-                  className="bg-gray-800 border border-gray-600 rounded px-3 py-2 text-center text-white font-mono"
-                >
-                  {code}
-                </div>
-              ))}
-            </div>
-
-            {/* Copy + Download */}
-            <div className="flex gap-3 mb-4">
-              <button
-                type="button"
-                onClick={handleCopy}
-                className="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded"
-              >
-                Copy
-              </button>
-              <button
-                type="button"
-                onClick={handleDownload}
-                className="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded"
-              >
-                Download
-              </button>
-            </div>
-
-            <button
-              onClick={() => setShowRecoveryModal(false)}
-              className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg"
-            >
-              I have saved these codes
-            </button>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-/* =========================
-   Skeleton
-========================= */
-const LoginFormSkeleton = () => (
-  <div className="space-y-6 animate-pulse">
-    <div className="h-12 bg-gray-700 rounded"></div>
-    <div className="h-12 bg-gray-700 rounded"></div>
-    <div className="h-12 bg-gray-700 rounded"></div>
-  </div>
-);
-
-/* =========================
-   Page Wrapper
-========================= */
-export default function LoginPage() {
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-blue-900 flex items-center justify-center p-4">
-      <div className="max-w-md w-full space-y-8">
-        <div className="text-center">
-          <h2 className="text-3xl font-extrabold text-white">
-            Welcome back
-          </h2>
-          <p className="mt-2 text-sm text-gray-300">
-            Sign in to your account
-          </p>
-        </div>
-
-        <div className="bg-gray-800 p-8 rounded-2xl shadow-xl border border-gray-700">
-          <LoginForm />
-        </div>
+        </span>
       </div>
-    </div>
+    </form>
   );
-}
+};
\ No newline at end of file
diff --git a/savebook/app/api/auth/login/route.js b/savebook/app/api/auth/login/route.js
index 79f88dc..599760f 100644
--- a/savebook/app/api/auth/login/route.js
+++ b/savebook/app/api/auth/login/route.js
@@ -22,35 +22,27 @@ export async function POST(request) {
   );
 }
 
-    const user = await User.findOne({ username });
-
-const isPasswordValid = user
-  ? await user.comparePassword(password)
-  : false;
-
-if (!user || !isPasswordValid) {
-  return NextResponse.json(
-    { success: false, message: "Invalid username or password" },
-    { status: 401 }
-  );
-}
+    // Find user
+    const user = await User.findOne({ username }).select("+password");
+    if (!user) {
+      return NextResponse.json(
+        { success: false, message: "Invalid Username! Try Again!" },
+        { status: 401 }
+      );
+    }
 
+    // Verify password
+    const isPasswordValid = await user.comparePassword(password);
+    if (!isPasswordValid) {
+      return NextResponse.json(
+        { success: false, message: "Invalid Password! Try Again!" },
+        { status: 401 }
+      );
+    }
 
-    //  Generate auth token
+    // Generate token and set cookie
     const { authToken } = await generateAuthToken(user._id.toString());
 
-    //  FIRST LOGIN: generate recovery codes
-    let recoveryCodes = null;
-    if (!user.recoveryCodes || user.recoveryCodes.length === 0) {
-      const generated = generateRecoveryCodes(8);
-
-      user.recoveryCodes = generated.hashedCodes;
-      await user.save();
-
-      // Plain codes only sent once
-      recoveryCodes = generated.plainCodes;
-    }
-
     const response = NextResponse.json(
       {
         success: true,
@@ -66,12 +58,13 @@ if (!user || !isPasswordValid) {
           //  only present on first login
           recoveryCodes,
         },
-        message: "Login successful",
+        message: "Login successful"
       },
       { status: 200 }
     );
-
-    response.cookies.set("authToken", authToken, {
+    
+    // Set cookie only on success
+    response.cookies.set('authToken', authToken, {
       httpOnly: true,
       secure: process.env.NODE_ENV === "production",
       sameSite: "lax",
@@ -81,7 +74,6 @@ if (!user || !isPasswordValid) {
 
     return response;
   } catch (error) {
-    console.error("Login error:", error);
     return NextResponse.json(
       { success: false, message: "Internal server error" },
       { status: 500 }
diff --git a/savebook/app/api/auth/register/route.js b/savebook/app/api/auth/register/route.js
index 5c61a45..122de98 100644
--- a/savebook/app/api/auth/register/route.js
+++ b/savebook/app/api/auth/register/route.js
@@ -4,13 +4,13 @@ import dbConnect from "@/lib/db/mongodb";
 
 export async function POST(request) {
   try {
-    const { username, password} = await request.json();
+    const { username, password } = await request.json();
     
-    //Validate required fields
-    if(!username || !password){
+    // Validate required fields
+    if (!username || !password) {
       return NextResponse.json(
         { success: false, message: "All fields are required" },
-        { status: 400}
+        { status: 400 }
       );
     }
 
@@ -23,18 +23,17 @@ export async function POST(request) {
     }
 
     // Check if user exists
-    let user = await User.findOne({ username });
+    const user = await User.findOne({ username });
     if (user) {
       return NextResponse.json(
-        { success: false, message: "Invalid input" },
+        { success: false, message: "User with this username already exists" },
         { status: 400 }
       );
     }
     
     // Try creating user
     try {
-      const newUser = await User.create({ username, password });
-      console.log("User created:", newUser._id);
+      await User.create({ username, password });
 
       return NextResponse.json(
         { success: true, message: "Account created successfully" },
@@ -49,7 +48,6 @@ export async function POST(request) {
         );
       }
 
-      console.error("User creation error:", err.message);
       return NextResponse.json(
         { success: false, message: err.message || "Failed to create user" },
         { status: 500 }
diff --git a/savebook/app/api/auth/update-profile/route.js b/savebook/app/api/auth/update-profile/route.js
index c584cf5..97806e8 100644
--- a/savebook/app/api/auth/update-profile/route.js
+++ b/savebook/app/api/auth/update-profile/route.js
@@ -11,57 +11,98 @@ export async function PUT(request) {
 
     // Get token from cookies
     const authtoken = request.cookies.get("authToken");
-    
     if (!authtoken) {
-      return NextResponse.json({ success: false, message: "Unauthorized - No token provided" }, { status: 401 });
+      return NextResponse.json(
+        { success: false, message: "Unauthorized - No token provided" },
+        { status: 401 }
+      );
     }
 
     // Verify token
     const decoded = verifyJwtToken(authtoken.value);
-    
     if (!decoded || !decoded.success) {
-      return NextResponse.json({ success: false, message: "Unauthorized - Invalid token" }, { status: 401 });
+      return NextResponse.json(
+        { success: false, message: "Unauthorized - Invalid token" },
+        { status: 401 }
+      );
     }
 
-    
     // Get user ID from token
     const userId = new mongoose.Types.ObjectId(decoded.userId);
+
     // Get updated user data from request
-    const { profileImage, firstName, lastName, bio, location } = await request.json();
+    const {
+      profileImage,
+      firstName,
+      lastName,
+      bio,
+      location,
+      phone,
+      email,
+      gender,
+      dob
+    } = await request.json();
 
-    // Update user
+    // Update user with validation
     const updatedUser = await User.findByIdAndUpdate(
       userId,
-      { 
+      {
         ...(profileImage !== undefined && { profileImage }),
         ...(firstName !== undefined && { firstName }),
         ...(lastName !== undefined && { lastName }),
         ...(bio !== undefined && { bio }),
-        ...(location !== undefined && { location })
+        ...(location !== undefined && { location }),
+        ...(phone !== undefined && { phone }),
+        ...(email !== undefined && { email }),
+        ...(gender !== undefined && { gender }),
+        ...(dob !== undefined && { dob })
       },
-      { new: true, select: "-password" } // Return updated user without password
+      {
+        new: true,
+        select: "-password",
+        runValidators: true // enforce schema validation
+      }
     );
 
     if (!updatedUser) {
-      return NextResponse.json({ success: false, message: "User not found" }, { status: 404 });
+      return NextResponse.json(
+        { success: false, message: "User not found" },
+        { status: 404 }
+      );
     }
 
     // Return success response with updated user data
-    return NextResponse.json({ 
-      success: true, 
-      message: "Profile updated successfully",
-      user: {
-        username: updatedUser.username,
-        profileImage: updatedUser.profileImage,
-        firstName: updatedUser.firstName,
-        lastName: updatedUser.lastName,
-        bio: updatedUser.bio,
-        location: updatedUser.location
-      }
-    }, { status: 200 });
-
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Profile updated successfully",
+        user: {
+          username: updatedUser.username,
+          profileImage: updatedUser.profileImage,
+          firstName: updatedUser.firstName,
+          lastName: updatedUser.lastName,
+          bio: updatedUser.bio,
+          location: updatedUser.location,
+          phone: updatedUser.phone,
+          email: updatedUser.email,
+          gender: updatedUser.gender,
+          dob: updatedUser.dob
+        }
+      },
+      { status: 200 }
+    );
   } catch (error) {
-    console.error("Error updating profile:", error);
-    return NextResponse.json({ success: false, message: "Internal Server Error" }, { status: 500 });
+    // Handle validation errors explicitly
+    if (error.name === "ValidationError") {
+      return NextResponse.json(
+        { success: false, message: error.message },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json(
+      { success: false, message: "Internal Server Error" },
+      { status: 500 }
+    );
   }
 }
\ No newline at end of file
diff --git a/savebook/app/api/auth/user/route.js b/savebook/app/api/auth/user/route.js
index 97eca38..dffd672 100644
--- a/savebook/app/api/auth/user/route.js
+++ b/savebook/app/api/auth/user/route.js
@@ -12,6 +12,7 @@ export async function GET(request) {
         const authToken = request.cookies.get('authToken');
         const tokenValue = authToken?.value;
 
+<<<<<<< HEAD
         if (!tokenValue) {
             return NextResponse.json(
                 { success: false, message: 'Unauthorized - No token provided' },
@@ -59,4 +60,39 @@ export async function GET(request) {
             { status: 500 }
         );
     }
+=======
+    await dbConnect();
+    
+    // Use tokenInfo.userId instead of tokenInfo.data._id
+    const user = await User.findById(tokenInfo.userId).select('-password');
+    
+    if (!user) {
+      return NextResponse.json(
+        { success: false, message: 'User not found' },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json({
+      success: true,
+      user: {
+        username: user.username,
+        profileImage: user.profileImage,
+        firstName: user.firstName,
+        lastName: user.lastName,
+        phone: user.phone,        // newly added field
+        email: user.email,        // newly added field
+        gender: user.gender,      // newly added field
+        dob: user.dob,            // newly added field
+        bio: user.bio,
+        location: user.location
+      }
+    });
+  } catch (error) {
+    return NextResponse.json(
+      { success: false, message: 'Server error' },
+      { status: 500 }
+    );
+  }
+>>>>>>> a61f6ef (Updated login page and update profile page, fix: removal of console logs, restored .env)
 }
\ No newline at end of file
diff --git a/savebook/app/profile/page.js b/savebook/app/profile/page.js
index d1f4beb..a62f672 100644
--- a/savebook/app/profile/page.js
+++ b/savebook/app/profile/page.js
@@ -1,160 +1,177 @@
 "use client";
-import { useState, useEffect } from 'react';
-import { useAuth } from '@/context/auth/authContext';
-import { useRouter } from 'next/navigation';
+
+import { useState, useEffect } from "react";
+import { useAuth } from "@/context/auth/authContext";
+import { useRouter } from "next/navigation";
 
 export default function ProfilePage() {
   const { user, loading, checkUserAuthentication } = useAuth();
   const router = useRouter();
+
   const [formData, setFormData] = useState({
-    profileImage: '',
-    firstName: '',
-    lastName: '',
-    bio: '',
-    location: ''
+    profileImage: "",
+    firstName: "",
+    lastName: "",
+    bio: "",
+    location: "",
+    phone: "",
+    email: "",
+    gender: "",
+    dob: ""
   });
-  const [imagePreview, setImagePreview] = useState('');
-  const [message, setMessage] = useState('');
-  const [error, setError] = useState('');
+
+  const [imagePreview, setImagePreview] = useState("");
+  const [message, setMessage] = useState("");
+  const [error, setError] = useState("");
   const [isDataLoaded, setIsDataLoaded] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
+  const [errors, setErrors] = useState({});
+
+  // Validators
+  const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  const validatePhone = (phone) => /^[6-9]\d{9}$/.test(phone); // Indian 10-digit
 
   useEffect(() => {
     if (user) {
       setFormData({
-        profileImage: user.profileImage || '',
-        firstName: user.firstName || '',
-        lastName: user.lastName || '',
-        bio: user.bio || '',
-        location: user.location || ''
+        profileImage: user.profileImage || "",
+        firstName: user.firstName || "",
+        lastName: user.lastName || "",
+        bio: user.bio || "",
+        location: user.location || "",
+        phone: user.phone || "",
+        email: user.email || "",
+        gender: user.gender || "",
+        dob: user.dob ? user.dob.substring(0, 10) : ""
       });
-      setImagePreview(user.profileImage || '');
+      setImagePreview(user.profileImage || "");
       setIsDataLoaded(true);
     }
   }, [user]);
 
   const handleInputChange = (e) => {
     const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value
-    }));
+    setFormData((prev) => ({ ...prev, [name]: value }));
+
+    // Live validation
+    if (name === "email") {
+      setErrors((prev) => ({
+        ...prev,
+        email: value ? (validateEmail(value) ? "" : "Invalid email address") : ""
+      }));
+    }
+    if (name === "phone") {
+      setErrors((prev) => ({
+        ...prev,
+        phone: value ? (validatePhone(value) ? "" : "Invalid phone number") : ""
+      }));
+    }
+  };
+
+  const handleBlur = (e) => {
+    const { name, value } = e.target;
+    if (name === "email") {
+      setErrors((prev) => ({
+        ...prev,
+        email: value ? (validateEmail(value) ? "" : "Invalid email address") : ""
+      }));
+    }
+    if (name === "phone") {
+      setErrors((prev) => ({
+        ...prev,
+        phone: value ? (validatePhone(value) ? "" : "Invalid phone number") : ""
+      }));
+    }
   };
 
   const handleImageChange = async (e) => {
     const file = e.target.files[0];
-    
     if (file) {
-      // Validate file type
-      if (!file.type.match('image.*')) {
-        setError('Please select an image file');
+      if (!file.type.match("image.*")) {
+        setError("Please select an image file");
         return;
       }
-      
-      // Validate file size (max 5MB)
       if (file.size > 5 * 1024 * 1024) {
-        setError('File size exceeds 5MB limit');
+        setError("File size exceeds 5MB limit");
         return;
       }
-      
-      // Show loading state
-      setMessage('Uploading image...');
-      
-      const formData = new FormData();
-      formData.append('image', file);
-      
+
+      setMessage("Uploading image...");
+      const fd = new FormData();
+      fd.append("image", file);
+
       try {
-        const response = await fetch('/api/upload', {
-          method: 'POST',
-          body: formData,
-          credentials: 'include'
+        const response = await fetch("/api/upload", {
+          method: "POST",
+          body: fd,
+          credentials: "include"
         });
-        
         const result = await response.json();
-        
         if (result.success) {
           setImagePreview(result.imageUrl);
-          setFormData(prev => ({
-            ...prev,
-            profileImage: result.imageUrl
-          }));
-          setMessage('Image uploaded successfully!');
-          setError(''); // Clear any previous error
-          
-          // Clear message after 2 seconds
-          setTimeout(() => setMessage(''), 2000);
+          setFormData((prev) => ({ ...prev, profileImage: result.imageUrl }));
+          setMessage("Image uploaded successfully!");
+          setError("");
+          setTimeout(() => setMessage(""), 2000);
         } else {
-          setError(result.message || 'Failed to upload image');
+          setError(result.message || "Failed to upload image");
         }
       } catch (err) {
-        setError('An error occurred while uploading the image');
-        console.error('Image upload error:', err);
+        setError("An error occurred while uploading the image");
       }
     }
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    setMessage('');
-    setError('');
+    setMessage("");
+    setError("");
+
+    // Final validation gate
+    if (errors.email || errors.phone) {
+      setError("Please fix validation errors before submitting.");
+      return;
+    }
 
     try {
-      const response = await fetch('/api/auth/update-profile', {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          profileImage: formData.profileImage,
-          firstName: formData.firstName,
-          lastName: formData.lastName,
-          bio: formData.bio,
-          location: formData.location
-        }),
-        credentials: 'include'
+      const response = await fetch("/api/auth/update-profile", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+        credentials: "include"
       });
-
       const data = await response.json();
 
       if (data.success) {
-        setMessage('Profile updated successfully!');
-        
-        // Update form data to reflect the changes immediately
+        setMessage("Profile updated successfully!");
         setFormData({
           profileImage: data.user.profileImage,
           firstName: data.user.firstName,
           lastName: data.user.lastName,
           bio: data.user.bio,
-          location: data.user.location
+          location: data.user.location,
+          phone: data.user.phone,
+          email: data.user.email,
+          gender: data.user.gender,
+          dob: data.user.dob ? data.user.dob.substring(0, 10) : ""
         });
-        
-        // Update image preview
         setImagePreview(data.user.profileImage);
-        
-        // Refresh user data from the server to ensure we have the latest data in context
+
         if (checkUserAuthentication) {
           await checkUserAuthentication();
         }
-        
-        setTimeout(() => {
-          setIsEditing(false);
-        }, 500);
-        
-        setTimeout(() => {
-          setMessage(''); // Clear message
-          // Optionally redirect after update
-          // router.push('/'); // Redirect to home page after successful update
-        }, 2000);
+
+        setTimeout(() => setIsEditing(false), 500);
+        setTimeout(() => setMessage(""), 2000);
       } else {
-        setError(data.message || 'Failed to update profile');
+        setError(data.message || "Failed to update profile");
       }
     } catch (err) {
-      setError('An error occurred while updating profile');
-      console.error('Profile update error:', err);
+      setError("An error occurred while updating profile");
     }
   };
 
-  if (loading) {
+  if (loading || !isDataLoaded) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
         <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
@@ -163,162 +180,163 @@ export default function ProfilePage() {
   }
 
   if (!user) {
-    router.push('/login');
+    router.push("/login");
     return null;
   }
 
-  if (loading || !isDataLoaded) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
-      </div>
-    );
-  }
-  
-  const handleEditClick = () => {
-    setIsEditing(true);
-  };
-  
+  const handleEditClick = () => setIsEditing(true);
+
   const handleCancelEdit = () => {
     setIsEditing(false);
-    // Reset form to current user data
     if (user) {
       setFormData({
-        profileImage: user.profileImage || '',
-        firstName: user.firstName || '',
-        lastName: user.lastName || '',
-        bio: user.bio || '',
-        location: user.location || ''
+        profileImage: user.profileImage || "",
+        firstName: user.firstName || "",
+        lastName: user.lastName || "",
+        bio: user.bio || "",
+        location: user.location || "",
+        phone: user.phone || "",
+        email: user.email || "",
+        gender: user.gender || "",
+        dob: user.dob ? user.dob.substring(0, 10) : ""
       });
-      setImagePreview(user.profileImage || '');
+      setImagePreview(user.profileImage || "");
+      setErrors({});
+      setError("");
+      setMessage("");
     }
   };
-  
+
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
       <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden">
           <div className="p-6">
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-8 text-center">Edit Profile</h1>
-            
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-8 text-center">
+              {isEditing ? "Edit Profile" : "Your Profile"}
+            </h1>
+
             {message && (
-              <div className="fixed bottom-4 right-4 p-4 bg-green-500 text-white rounded-lg shadow-lg z-50">
+              <div className="p-3 mb-4 bg-green-500 text-white rounded-lg">
                 {message}
               </div>
             )}
-            
             {error && (
-              <div className="fixed bottom-4 right-4 p-4 bg-red-500 text-white rounded-lg shadow-lg z-50">
+              <div className="p-3 mb-4 bg-red-500 text-white rounded-lg">
                 {error}
               </div>
             )}
-            
+
             {!isEditing ? (
               <div className="space-y-6">
-                {/* Profile Preview Card */}
-                <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
-                  <div className="flex items-center justify-between mb-6">
-                    <h2 className="text-xl font-semibold text-gray-800 dark:text-white">Your Profile</h2>
-                    <button 
-                      type="button" 
-                      onClick={handleEditClick}
-                      className="flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
-                    >
-                      <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                      </svg>
-                      Edit
-                    </button>
+                {/* Avatar + username */}
+                <div className="flex flex-col items-center mb-6">
+                  <div className="w-24 h-24 rounded-full bg-gray-200 border-4 border-white dark:border-gray-600 shadow-lg overflow-hidden mb-4">
+                    {user?.profileImage ? (
+                      <img
+                        src={user.profileImage}
+                        alt="Profile"
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center bg-gray-200 text-gray-500">
+                        <span className="text-3xl">
+                          {user?.username?.charAt(0)?.toUpperCase() || "U"}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                  <h3 className="text-xl font-bold text-gray-800 dark:text-white mb-4">
+                    {user?.username || "N/A"}
+                  </h3>
+                </div>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 text-sm text-gray-700 dark:text-gray-300">
+                  <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
+                    <strong>Full Name</strong>
+                    <p>{user.firstName || "N/A"} {user.lastName || ""}</p>
+                  </div>
+                  <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
+                    <strong>Email</strong>
+                    <p>{user.email || "N/A"}</p>
+                  </div>
+                  <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
+                    <strong>Phone</strong>
+                    <p>{user.phone || "N/A"}</p>
                   </div>
-                  
-                  <div className="flex flex-col items-center mb-6">
-                    <div className="w-24 h-24 rounded-full bg-gray-200 border-4 border-white dark:border-gray-600 shadow-lg overflow-hidden mb-4">
-                      {user?.profileImage ? (
-                        <img 
-                          src={user.profileImage} 
-                          alt="Profile" 
+                  <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
+                    <strong>Gender</strong>
+                    <p>{user.gender || "N/A"}</p>
+                  </div>
+                  <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
+                    <strong>Date of Birth</strong>
+                    <p>{user.dob ? new Date(user.dob).toLocaleDateString() : "N/A"}</p>
+                  </div>
+                  <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
+                    <strong>Location</strong>
+                    <p>{user.location || "N/A"}</p>
+                  </div>
+                  <div className="sm:col-span-2 bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
+                    <strong>Bio</strong>
+                    <p>{user.bio || "N/A"}</p>
+                  </div>
+                </div>
+
+                <div className="flex justify-center mt-6">
+                  <button
+                    onClick={() => setIsEditing(true)}
+                    className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition"
+                  >
+                    Edit Profile
+                  </button>
+                </div>
+              </div>
+            ) : isDataLoaded ? (
+              <form onSubmit={handleSubmit} className="space-y-6">
+                {/* Avatar upload */}
+                <div className="flex flex-col items-center mb-8">
+                  <div className="relative">
+                    <div className="w-32 h-32 rounded-full bg-gray-200 border-4 border-white dark:border-gray-700 shadow-lg overflow-hidden">
+                      {imagePreview ? (
+                        <img
+                          src={imagePreview}
+                          alt="Profile Preview"
                           className="w-full h-full object-cover"
                         />
                       ) : (
                         <div className="w-full h-full flex items-center justify-center bg-gray-200 text-gray-500">
-                          <span className="text-3xl">
-                            {user?.username?.charAt(0)?.toUpperCase() || 'U'}
+                          <span className="text-4xl">
+                            {user?.username?.charAt(0)?.toUpperCase() || "U"}
                           </span>
                         </div>
                       )}
                     </div>
-                    <h3 className="text-xl font-bold text-gray-800 dark:text-white">{user?.username || 'N/A'}</h3>
-                  </div>
-                  
-                  <div className="space-y-4">
-                    <div>
-                      <h4 className="text-sm font-medium text-gray-500 dark:text-gray-400">Full Name</h4>
-                      <p className="text-gray-800 dark:text-white">
-                        {user?.firstName || ''} {user?.lastName || ''}
-                        {(user?.firstName || user?.lastName) ? '' : 'N/A'}
-                      </p>
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium text-gray-500 dark:text-gray-400">Bio</h4>
-                      <p className="text-gray-800 dark:text-white">
-                        {user?.bio || 'N/A'}
-                      </p>
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium text-gray-500 dark:text-gray-400">Location</h4>
-                      <p className="text-gray-800 dark:text-white">
-                        {user?.location || 'N/A'}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ) : isDataLoaded ? (
-              <form onSubmit={handleSubmit} className="space-y-6">
-              <div className="flex flex-col items-center mb-8">
-                <div className="relative">
-                  <div className="w-32 h-32 rounded-full bg-gray-200 border-4 border-white dark:border-gray-700 shadow-lg overflow-hidden">
-                    {imagePreview ? (
-                      <img 
-                        src={imagePreview} 
-                        alt="Profile Preview" 
-                        className="w-full h-full object-cover"
+                    <label className="absolute bottom-0 right-0 bg-blue-600 text-white p-2 rounded-full cursor-pointer hover:bg-blue-700 transition-colors shadow-lg">
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+                      </svg>
+                      <input
+                        type="file"
+                        className="hidden"
+                        accept="image/*"
+                        onChange={handleImageChange}
                       />
-                    ) : (
-                      <div className="w-full h-full flex items-center justify-center bg-gray-200 text-gray-500">
-                        <span className="text-4xl">
-                          {user?.username?.charAt(0)?.toUpperCase() || 'U'}
-                        </span>
-                      </div>
-                    )}
+                    </label>
                   </div>
-                  <label className="absolute bottom-0 right-0 bg-blue-600 text-white p-2 rounded-full cursor-pointer hover:bg-blue-700 transition-colors shadow-lg">
-                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
-                    </svg>
-                    <input 
-                      type="file" 
-                      className="hidden" 
-                      accept="image/*"
-                      onChange={handleImageChange}
-                    />
-                  </label>
                 </div>
-              </div>
 
-              <div className="space-y-4">
+                {/* Username (read-only) */}
                 <div>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     Username
                   </label>
                   <div className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
-                    {user?.username || 'N/A'}
+                    {user?.username || "N/A"}
                   </div>
                 </div>
-                
+
+                {/* Name */}
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
                     <label htmlFor="firstName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
@@ -328,13 +346,12 @@ export default function ProfilePage() {
                       type="text"
                       id="firstName"
                       name="firstName"
-                      value={formData.firstName || ''}
+                      value={formData.firstName || ""}
                       onChange={handleInputChange}
                       className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                       placeholder="Enter first name"
                     />
                   </div>
-                  
                   <div>
                     <label htmlFor="lastName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                       Last Name
@@ -343,14 +360,15 @@ export default function ProfilePage() {
                       type="text"
                       id="lastName"
                       name="lastName"
-                      value={formData.lastName || ''}
+                      value={formData.lastName || ""}
                       onChange={handleInputChange}
                       className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                       placeholder="Enter last name"
                     />
                   </div>
                 </div>
-                
+
+                {/* Bio */}
                 <div>
                   <label htmlFor="bio" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     Bio
@@ -358,46 +376,111 @@ export default function ProfilePage() {
                   <textarea
                     id="bio"
                     name="bio"
-                    value={formData.bio || ''}
+                    value={formData.bio || ""}
                     onChange={handleInputChange}
                     rows="3"
                     className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                     placeholder="Tell us about yourself"
                   ></textarea>
                 </div>
-                
-                <div>
-                  <label htmlFor="location" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                    Location
-                  </label>
-                  <input
-                    type="text"
-                    id="location"
-                    name="location"
-                    value={formData.location || ''}
-                    onChange={handleInputChange}
-                    className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                    placeholder="Enter your location"
-                  />
+
+                {/* Contact info */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Email
+                    </label>
+                    <input
+                      type="email"
+                      name="email"
+                      value={formData.email}
+                      onChange={handleInputChange}
+                      onBlur={handleBlur}
+                      className={`w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:text-white ${errors.email ? "border-red-500" : "border-gray-300 dark:border-gray-600"}`}
+                      placeholder="Email"
+                    />
+                    {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Phone
+                    </label>
+                    <input
+                      type="text"
+                      name="phone"
+                      value={formData.phone}
+                      onChange={handleInputChange}
+                      onBlur={handleBlur}
+                      className={`w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:text-white ${errors.phone ? "border-red-500" : "border-gray-300 dark:border-gray-600"}`}
+                      placeholder="Phone"
+                    />
+                    {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
+                  </div>
                 </div>
-              </div>
 
-              <div className="flex justify-end space-x-4 pt-4">
-                <button
-                  type="button"
-                  onClick={handleCancelEdit}
-                  className="px-6 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105 shadow-lg"
-                >
-                  Update Profile
-                </button>
-              </div>
-            </form>
+                {/* Gender, DOB, Location */}
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Gender
+                    </label>
+                    <select
+                      name="gender"
+                      value={formData.gender}
+                      onChange={handleInputChange}
+                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
+                    >
+                      <option value="">Select gender</option>
+                      <option value="Male">Male</option>
+                      <option value="Female">Female</option>
+                      <option value="Other">Other</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Date of Birth
+                    </label>
+                    <input
+                      type="date"
+                      name="dob"
+                      value={formData.dob}
+                      onChange={handleInputChange}
+                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Location
+                    </label>
+                    <input
+                      type="text"
+                      id="location"
+                      name="location"
+                      value={formData.location || ""}
+                      onChange={handleInputChange}
+                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                      placeholder="Enter your location"
+                    />
+                  </div>
+                </div>
+
+                {/* Actions */}
+                <div className="flex justify-end space-x-4 pt-4">
+                  <button
+                    type="button"
+                    onClick={handleCancelEdit}
+                    className="px-6 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105 shadow-lg"
+                  >
+                    Update Profile
+                  </button>
+                </div>
+              </form>
             ) : (
               <div className="flex items-center justify-center py-12">
                 <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
diff --git a/savebook/context/auth/AuthState.js b/savebook/context/auth/AuthState.js
index 68aea5f..3f49950 100644
--- a/savebook/context/auth/AuthState.js
+++ b/savebook/context/auth/AuthState.js
@@ -46,18 +46,17 @@ const AuthProvider = ({ children }) => {
     };
 
     // Login function
-    const login = async (username, password) => {
-        try {
-            setLoading(true);
-            const response = await fetch('/api/auth/login', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ username, password }),
-                credentials: 'include' // Important: to store the cookie
-            });
+    const login = async (username, password, rememberMe) => {
+    try {
+        setLoading(true);
+        const response = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password, rememberMe }),
+        credentials: "include", // keep cookie
+        });
 
+<<<<<<< HEAD
             const data = await response.json();
             
             if (data.success) {
@@ -78,7 +77,35 @@ const AuthProvider = ({ children }) => {
             };
         } finally {
             setLoading(false);
+=======
+        const data = await response.json();
+
+        if (response.ok && data.success) {
+        // Only set authenticated on success
+        setUser(data.data.user);
+        setIsAuthenticated(true);
+        return { success: true, message: data.message };
+        } else {
+        // Do not set isAuthenticated here
+        setIsAuthenticated(false);
+        setUser(null);
+        setIsAuthenticated(false);
+        return {
+            success: false,
+            message: data.message || "Invalid credentials",
+        };
+>>>>>>> a61f6ef (Updated login page and update profile page, fix: removal of console logs, restored .env)
         }
+    } catch (error) {
+        console.error("Login error:", error);
+        setIsAuthenticated(false);
+        return {
+          success: false,
+          message: "An error occurred during login",
+        };
+    } finally {
+        setLoading(false);
+    }
     };
 
     // Register function
@@ -135,6 +162,19 @@ const AuthProvider = ({ children }) => {
         }
     };
 
+    //function created for providing path for updateProfile
+    const updateProfile = async (updates) => {
+    const response = await fetch('/api/auth/updateProfile', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(updates),
+        credentials: 'include'
+    });
+    const data = await response.json();
+    if (data.success) setUser(data.user);
+    return data;
+    };
+
     // Create the context value
     const contextValue = {
         user,
diff --git a/savebook/lib/models/User.js b/savebook/lib/models/User.js
index f95afde..d9df02f 100644
--- a/savebook/lib/models/User.js
+++ b/savebook/lib/models/User.js
@@ -29,6 +29,21 @@ const UserSchema = new Schema({
         type: String,
         default: ''
     },
+    phone: {
+        type: String,
+        match: [/^[6-9]\d{9}$/, "Invalid phone number"]
+    },
+    email: {
+        type: String,
+        match: [/^[^\s@]+@[^\s@]+\.[^\s@]+$/, "Invalid email address"]
+    },
+    gender: {
+        type: String,
+        default: ''
+    },
+    dob: {
+        type: Date
+    },
     bio: {
         type: String,
         default: ''
diff --git a/savebook/lib/utils/jwtAuth.js b/savebook/lib/utils/jwtAuth.js
index 032f254..bd3393c 100644
--- a/savebook/lib/utils/jwtAuth.js
+++ b/savebook/lib/utils/jwtAuth.js
@@ -1,4 +1,8 @@
+<<<<<<< HEAD:savebook/lib/utils/jwtAuth.js
 import * as jose from 'jose';
+=======
+import * as jose from 'jose'
+>>>>>>> a61f6ef (Updated login page and update profile page, fix: removal of console logs, restored .env):savebook/lib/utils/JWT.js
 
 const JWT_SECRET = process.env.ACCESS_TOKEN_SECRET || 'your-secret-key-here';
 
diff --git a/savebook/middleware.js b/savebook/middleware.js
new file mode 100644
index 0000000..7e905ff
--- /dev/null
+++ b/savebook/middleware.js
@@ -0,0 +1,57 @@
+import { NextResponse } from 'next/server';
+import { verifyJwtToken } from './lib/utils/jwt';
+
+export default async function middleware(request) {
+  const protectedPaths = ['/api/notes', '/notes'];
+  const path = request.nextUrl.pathname;
+
+  const isProtectedPath = protectedPaths.some(
+    prefix => path === prefix || path.startsWith(`${prefix}/`)
+  );
+
+  if (!isProtectedPath) {
+    return NextResponse.next();
+  }
+
+  const token = request.cookies.get('authToken')?.value;
+
+  if (!token) {
+    if (path.startsWith('/api/')) {
+      return NextResponse.json(
+        { error: 'Authentication token is required' },
+        { status: 401 }
+      );
+    }
+    return NextResponse.redirect(new URL('/login', request.url));
+  }
+
+  // Verify the token (async)
+  const tokenInfo = await verifyJwtToken(token);
+
+  if (!tokenInfo.success) {
+    if (path.startsWith('/api/')) {
+      return NextResponse.json(
+        { success: false, message: tokenInfo.error },
+        { status: 401 }
+      );
+    }
+
+    const response = NextResponse.redirect(new URL('/login', request.url));
+    response.cookies.delete('authToken');
+    return response;
+  }
+
+  // Add user info to headers for API routes
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set('x-user-id', tokenInfo.userId);
+
+  return NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  });
+}
+
+export const config = {
+  matcher: ['/api/notes/:path*', '/notes/:path*'],
+};
\ No newline at end of file

From 5e96d141f803915774d156a12d79d8e5dae9ae0e Mon Sep 17 00:00:00 2001
From: Saumya-249 <saumya.skdian@gmail.com>
Date: Sun, 18 Jan 2026 20:33:46 +0530
Subject: [PATCH 03/17] fix: updated login error messaging and removed personal
 fields from profile APIs

---
 savebook/app/api/auth/user/route.js | 50 -----------------------------
 savebook/middleware.js              |  2 +-
 2 files changed, 1 insertion(+), 51 deletions(-)

diff --git a/savebook/app/api/auth/user/route.js b/savebook/app/api/auth/user/route.js
index dffd672..7edfacb 100644
--- a/savebook/app/api/auth/user/route.js
+++ b/savebook/app/api/auth/user/route.js
@@ -12,55 +12,6 @@ export async function GET(request) {
         const authToken = request.cookies.get('authToken');
         const tokenValue = authToken?.value;
 
-<<<<<<< HEAD
-        if (!tokenValue) {
-            return NextResponse.json(
-                { success: false, message: 'Unauthorized - No token provided' },
-                { status: 401 }
-            );
-        }
-
-        // Verify token
-        const tokenInfo = await verifyJwtToken(tokenValue);
-
-        if (!tokenInfo || !tokenInfo.success) {
-            return NextResponse.json(
-                { success: false, message: 'Unauthorized - Invalid token' },
-                { status: 401 }
-            );
-        }
-
-        // Find user by ID but exclude the password
-        const user = await User.findById(tokenInfo.userId).select("-password");
-
-        if (!user) {
-            return NextResponse.json(
-                { success: false, message: "User not found" },
-                { status: 404 }
-            );
-        }
-
-        // Return user data
-        return NextResponse.json({
-            success: true,
-            user: {
-                username: user.username,
-                profileImage: user.profileImage,
-                firstName: user.firstName,
-                lastName: user.lastName,
-                bio: user.bio,
-                location: user.location
-            }
-        }, { status: 200 });
-
-    } catch (error) {
-        console.error("Error fetching user:", error);
-        return NextResponse.json(
-            { success: false, message: "Internal Server Error" },
-            { status: 500 }
-        );
-    }
-=======
     await dbConnect();
     
     // Use tokenInfo.userId instead of tokenInfo.data._id
@@ -94,5 +45,4 @@ export async function GET(request) {
       { status: 500 }
     );
   }
->>>>>>> a61f6ef (Updated login page and update profile page, fix: removal of console logs, restored .env)
 }
\ No newline at end of file
diff --git a/savebook/middleware.js b/savebook/middleware.js
index 7e905ff..f02916f 100644
--- a/savebook/middleware.js
+++ b/savebook/middleware.js
@@ -1,5 +1,5 @@
 import { NextResponse } from 'next/server';
-import { verifyJwtToken } from './lib/utils/jwt';
+import { verifyJwtToken } from './lib/utils/JWT';
 
 export default async function middleware(request) {
   const protectedPaths = ['/api/notes', '/notes'];

From 3b803884253e93d31a0085cd51bd8a2861e1b637 Mon Sep 17 00:00:00 2001
From: Saumya-249 <saumya.skdian@gmail.com>
Date: Sun, 18 Jan 2026 21:50:14 +0530
Subject: [PATCH 04/17] chore: add package-lock.json for dependency consistency

---
 package-lock.json | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..3561ce4
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "SaveBook",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

From e3bba70536fe4c076c786ca1bf31b7893b472ddc Mon Sep 17 00:00:00 2001
From: Saumya-249 <saumya.skdian@gmail.com>
Date: Sun, 18 Jan 2026 20:20:57 +0530
Subject: [PATCH 05/17] Update the branch

---
 savebook/app/api/auth/login/route.js          |  12 +-
 savebook/app/api/auth/update-profile/route.js |  20 +-
 savebook/app/api/auth/user/route.js           |   4 -
 savebook/app/profile/page.js                  | 194 +++---------------
 savebook/lib/models/User.js                   |  15 --
 5 files changed, 35 insertions(+), 210 deletions(-)

diff --git a/savebook/app/api/auth/login/route.js b/savebook/app/api/auth/login/route.js
index 599760f..fffb6e7 100644
--- a/savebook/app/api/auth/login/route.js
+++ b/savebook/app/api/auth/login/route.js
@@ -1,8 +1,8 @@
-import { NextResponse } from "next/server";
-import dbConnect from "@/lib/db/mongodb";
-import User from "@/lib/models/User";
-import { generateAuthToken } from "@/lib/utils/jwtAuth";
-import { generateRecoveryCodes } from "@/lib/utils/recoveryCodes";
+import dbConnect from '@/lib/db/mongodb';
+import User from '@/lib/models/User';
+import { generateAuthToken } from "@/lib/utils/JWT";   // make sure filename is lowercase 'jwt.js'
+import { NextResponse } from 'next/server';
+import bcrypt from 'bcryptjs';   // add bcrypt for password comparison
 
 export async function POST(request) {
   try {
@@ -35,7 +35,7 @@ export async function POST(request) {
     const isPasswordValid = await user.comparePassword(password);
     if (!isPasswordValid) {
       return NextResponse.json(
-        { success: false, message: "Invalid Password! Try Again!" },
+        { error: 'Invalid username or password' },
         { status: 401 }
       );
     }
diff --git a/savebook/app/api/auth/update-profile/route.js b/savebook/app/api/auth/update-profile/route.js
index 97806e8..224f3f2 100644
--- a/savebook/app/api/auth/update-profile/route.js
+++ b/savebook/app/api/auth/update-profile/route.js
@@ -30,17 +30,13 @@ export async function PUT(request) {
     // Get user ID from token
     const userId = new mongoose.Types.ObjectId(decoded.userId);
 
-    // Get updated user data from request
+    // Get updated user data from request (only safe fields)
     const {
       profileImage,
       firstName,
       lastName,
       bio,
       location,
-      phone,
-      email,
-      gender,
-      dob
     } = await request.json();
 
     // Update user with validation
@@ -51,11 +47,7 @@ export async function PUT(request) {
         ...(firstName !== undefined && { firstName }),
         ...(lastName !== undefined && { lastName }),
         ...(bio !== undefined && { bio }),
-        ...(location !== undefined && { location }),
-        ...(phone !== undefined && { phone }),
-        ...(email !== undefined && { email }),
-        ...(gender !== undefined && { gender }),
-        ...(dob !== undefined && { dob })
+        ...(location !== undefined && { location })
       },
       {
         new: true,
@@ -71,7 +63,7 @@ export async function PUT(request) {
       );
     }
 
-    // Return success response with updated user data
+    // Return success response with updated user data (only safe fields)
     return NextResponse.json(
       {
         success: true,
@@ -82,11 +74,7 @@ export async function PUT(request) {
           firstName: updatedUser.firstName,
           lastName: updatedUser.lastName,
           bio: updatedUser.bio,
-          location: updatedUser.location,
-          phone: updatedUser.phone,
-          email: updatedUser.email,
-          gender: updatedUser.gender,
-          dob: updatedUser.dob
+          location: updatedUser.location
         }
       },
       { status: 200 }
diff --git a/savebook/app/api/auth/user/route.js b/savebook/app/api/auth/user/route.js
index 7edfacb..6ff00f5 100644
--- a/savebook/app/api/auth/user/route.js
+++ b/savebook/app/api/auth/user/route.js
@@ -31,10 +31,6 @@ export async function GET(request) {
         profileImage: user.profileImage,
         firstName: user.firstName,
         lastName: user.lastName,
-        phone: user.phone,        // newly added field
-        email: user.email,        // newly added field
-        gender: user.gender,      // newly added field
-        dob: user.dob,            // newly added field
         bio: user.bio,
         location: user.location
       }
diff --git a/savebook/app/profile/page.js b/savebook/app/profile/page.js
index a62f672..1a1483b 100644
--- a/savebook/app/profile/page.js
+++ b/savebook/app/profile/page.js
@@ -13,11 +13,7 @@ export default function ProfilePage() {
     firstName: "",
     lastName: "",
     bio: "",
-    location: "",
-    phone: "",
-    email: "",
-    gender: "",
-    dob: ""
+    location: ""
   });
 
   const [imagePreview, setImagePreview] = useState("");
@@ -25,11 +21,6 @@ export default function ProfilePage() {
   const [error, setError] = useState("");
   const [isDataLoaded, setIsDataLoaded] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
-  const [errors, setErrors] = useState({});
-
-  // Validators
-  const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-  const validatePhone = (phone) => /^[6-9]\d{9}$/.test(phone); // Indian 10-digit
 
   useEffect(() => {
     if (user) {
@@ -38,11 +29,7 @@ export default function ProfilePage() {
         firstName: user.firstName || "",
         lastName: user.lastName || "",
         bio: user.bio || "",
-        location: user.location || "",
-        phone: user.phone || "",
-        email: user.email || "",
-        gender: user.gender || "",
-        dob: user.dob ? user.dob.substring(0, 10) : ""
+        location: user.location || ""
       });
       setImagePreview(user.profileImage || "");
       setIsDataLoaded(true);
@@ -52,36 +39,6 @@ export default function ProfilePage() {
   const handleInputChange = (e) => {
     const { name, value } = e.target;
     setFormData((prev) => ({ ...prev, [name]: value }));
-
-    // Live validation
-    if (name === "email") {
-      setErrors((prev) => ({
-        ...prev,
-        email: value ? (validateEmail(value) ? "" : "Invalid email address") : ""
-      }));
-    }
-    if (name === "phone") {
-      setErrors((prev) => ({
-        ...prev,
-        phone: value ? (validatePhone(value) ? "" : "Invalid phone number") : ""
-      }));
-    }
-  };
-
-  const handleBlur = (e) => {
-    const { name, value } = e.target;
-    if (name === "email") {
-      setErrors((prev) => ({
-        ...prev,
-        email: value ? (validateEmail(value) ? "" : "Invalid email address") : ""
-      }));
-    }
-    if (name === "phone") {
-      setErrors((prev) => ({
-        ...prev,
-        phone: value ? (validatePhone(value) ? "" : "Invalid phone number") : ""
-      }));
-    }
   };
 
   const handleImageChange = async (e) => {
@@ -116,7 +73,7 @@ export default function ProfilePage() {
         } else {
           setError(result.message || "Failed to upload image");
         }
-      } catch (err) {
+      } catch {
         setError("An error occurred while uploading the image");
       }
     }
@@ -127,12 +84,6 @@ export default function ProfilePage() {
     setMessage("");
     setError("");
 
-    // Final validation gate
-    if (errors.email || errors.phone) {
-      setError("Please fix validation errors before submitting.");
-      return;
-    }
-
     try {
       const response = await fetch("/api/auth/update-profile", {
         method: "PUT",
@@ -149,11 +100,7 @@ export default function ProfilePage() {
           firstName: data.user.firstName,
           lastName: data.user.lastName,
           bio: data.user.bio,
-          location: data.user.location,
-          phone: data.user.phone,
-          email: data.user.email,
-          gender: data.user.gender,
-          dob: data.user.dob ? data.user.dob.substring(0, 10) : ""
+          location: data.user.location
         });
         setImagePreview(data.user.profileImage);
 
@@ -166,7 +113,7 @@ export default function ProfilePage() {
       } else {
         setError(data.message || "Failed to update profile");
       }
-    } catch (err) {
+    } catch {
       setError("An error occurred while updating profile");
     }
   };
@@ -184,8 +131,6 @@ export default function ProfilePage() {
     return null;
   }
 
-  const handleEditClick = () => setIsEditing(true);
-
   const handleCancelEdit = () => {
     setIsEditing(false);
     if (user) {
@@ -194,14 +139,9 @@ export default function ProfilePage() {
         firstName: user.firstName || "",
         lastName: user.lastName || "",
         bio: user.bio || "",
-        location: user.location || "",
-        phone: user.phone || "",
-        email: user.email || "",
-        gender: user.gender || "",
-        dob: user.dob ? user.dob.substring(0, 10) : ""
+        location: user.location || ""
       });
       setImagePreview(user.profileImage || "");
-      setErrors({});
       setError("");
       setMessage("");
     }
@@ -256,22 +196,6 @@ export default function ProfilePage() {
                     <strong>Full Name</strong>
                     <p>{user.firstName || "N/A"} {user.lastName || ""}</p>
                   </div>
-                  <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
-                    <strong>Email</strong>
-                    <p>{user.email || "N/A"}</p>
-                  </div>
-                  <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
-                    <strong>Phone</strong>
-                    <p>{user.phone || "N/A"}</p>
-                  </div>
-                  <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
-                    <strong>Gender</strong>
-                    <p>{user.gender || "N/A"}</p>
-                  </div>
-                  <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
-                    <strong>Date of Birth</strong>
-                    <p>{user.dob ? new Date(user.dob).toLocaleDateString() : "N/A"}</p>
-                  </div>
                   <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
                     <strong>Location</strong>
                     <p>{user.location || "N/A"}</p>
@@ -384,108 +308,40 @@ export default function ProfilePage() {
                   ></textarea>
                 </div>
 
-                {/* Contact info */}
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                      Email
-                    </label>
-                    <input
-                      type="email"
-                      name="email"
-                      value={formData.email}
-                      onChange={handleInputChange}
-                      onBlur={handleBlur}
-                      className={`w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:text-white ${errors.email ? "border-red-500" : "border-gray-300 dark:border-gray-600"}`}
-                      placeholder="Email"
-                    />
-                    {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                      Phone
-                    </label>
-                    <input
-                      type="text"
-                      name="phone"
-                      value={formData.phone}
-                      onChange={handleInputChange}
-                      onBlur={handleBlur}
-                      className={`w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:text-white ${errors.phone ? "border-red-500" : "border-gray-300 dark:border-gray-600"}`}
-                      placeholder="Phone"
-                    />
-                    {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
-                  </div>
-                </div>
-
-                {/* Gender, DOB, Location */}
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                      Gender
-                    </label>
-                    <select
-                      name="gender"
-                      value={formData.gender}
-                      onChange={handleInputChange}
-                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
-                    >
-                      <option value="">Select gender</option>
-                      <option value="Male">Male</option>
-                      <option value="Female">Female</option>
-                      <option value="Other">Other</option>
-                    </select>
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                      Date of Birth
-                    </label>
-                    <input
-                      type="date"
-                      name="dob"
-                      value={formData.dob}
-                      onChange={handleInputChange}
-                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                      Location
-                    </label>
-                    <input
-                      type="text"
-                      id="location"
-                      name="location"
-                      value={formData.location || ""}
-                      onChange={handleInputChange}
-                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                      placeholder="Enter your location"
-                    />
-                  </div>
+                {/* Location */}
+                <div>
+                  <label htmlFor="location" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Location
+                  </label>
+                  <input
+                    type="text"
+                    id="location"
+                    name="location"
+                    value={formData.location || ""}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                    placeholder="Enter location"
+                  />
                 </div>
 
                 {/* Actions */}
-                <div className="flex justify-end space-x-4 pt-4">
+                <div className="flex justify-end space-x-4">
                   <button
                     type="button"
                     onClick={handleCancelEdit}
-                    className="px-6 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                    className="bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600 transition"
                   >
                     Cancel
                   </button>
                   <button
                     type="submit"
-                    className="px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105 shadow-lg"
+                    className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition"
                   >
-                    Update Profile
+                    Save Changes
                   </button>
                 </div>
               </form>
-            ) : (
-              <div className="flex items-center justify-center py-12">
-                <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
-              </div>
-            )}
+            ) : null}
           </div>
         </div>
       </div>
diff --git a/savebook/lib/models/User.js b/savebook/lib/models/User.js
index d9df02f..f95afde 100644
--- a/savebook/lib/models/User.js
+++ b/savebook/lib/models/User.js
@@ -29,21 +29,6 @@ const UserSchema = new Schema({
         type: String,
         default: ''
     },
-    phone: {
-        type: String,
-        match: [/^[6-9]\d{9}$/, "Invalid phone number"]
-    },
-    email: {
-        type: String,
-        match: [/^[^\s@]+@[^\s@]+\.[^\s@]+$/, "Invalid email address"]
-    },
-    gender: {
-        type: String,
-        default: ''
-    },
-    dob: {
-        type: Date
-    },
     bio: {
         type: String,
         default: ''

From 7c4d86c43704787b39c0f803f7c30577503c397f Mon Sep 17 00:00:00 2001
From: Saumya-249 <saumya.skdian@gmail.com>
Date: Mon, 26 Jan 2026 16:18:24 +0530
Subject: [PATCH 06/17] Updated the branch

---
 savebook/app/api/auth/login/route.js | 11 +++---
 savebook/app/api/auth/user/route.js  |  3 +-
 savebook/app/api/notes/[id]/route.js | 11 ++++++
 savebook/middleware.js               | 57 ----------------------------
 4 files changed, 19 insertions(+), 63 deletions(-)
 delete mode 100644 savebook/middleware.js

diff --git a/savebook/app/api/auth/login/route.js b/savebook/app/api/auth/login/route.js
index fffb6e7..d0c9cf6 100644
--- a/savebook/app/api/auth/login/route.js
+++ b/savebook/app/api/auth/login/route.js
@@ -1,8 +1,9 @@
-import dbConnect from '@/lib/db/mongodb';
-import User from '@/lib/models/User';
-import { generateAuthToken } from "@/lib/utils/JWT";   // make sure filename is lowercase 'jwt.js'
-import { NextResponse } from 'next/server';
-import bcrypt from 'bcryptjs';   // add bcrypt for password comparison
+import { NextResponse } from "next/server";
+import dbConnect from "@/lib/db/mongodb";
+import User from "@/lib/models/User";
+import { generateAuthToken } from "@/lib/utils/jwtAuth";   // ensure lowercase filename
+import { generateRecoveryCodes } from "@/lib/utils/recoveryCodes";
+import bcrypt from "bcryptjs";
 
 export async function POST(request) {
   try {
diff --git a/savebook/app/api/auth/user/route.js b/savebook/app/api/auth/user/route.js
index 6ff00f5..91e0b6f 100644
--- a/savebook/app/api/auth/user/route.js
+++ b/savebook/app/api/auth/user/route.js
@@ -36,8 +36,9 @@ export async function GET(request) {
       }
     });
   } catch (error) {
+    console.error("Error fetching user:", error);
     return NextResponse.json(
-      { success: false, message: 'Server error' },
+      { success: false, message: "Internal Server Error" },
       { status: 500 }
     );
   }
diff --git a/savebook/app/api/notes/[id]/route.js b/savebook/app/api/notes/[id]/route.js
index e861427..dc0434d 100644
--- a/savebook/app/api/notes/[id]/route.js
+++ b/savebook/app/api/notes/[id]/route.js
@@ -1,8 +1,19 @@
+<<<<<<< HEAD
 import { NextResponse } from 'next/server';
 import mongoose from 'mongoose';
 import dbConnect from '@/lib/db/mongodb';
 import Notes from '@/lib/models/Notes';
+=======
+import { NextResponse } from "next/server";
+import mongoose from "mongoose";
+import dbConnect from "@/lib/db/mongodb";
+import Notes from "@/lib/models/Notes";
+<<<<<<< HEAD
+>>>>>>> f927a20 (Updated the branch)
 import { verifyJwtToken } from "@/lib/utils/jwtAuth";
+=======
+import { verifyJwtToken } from "@/lib/utils/jwt";   // ensure lowercase filename
+>>>>>>> f6ab754 (Cleared the conflicts)
 
 // Get a specific note by ID
 export async function GET(request, { params }) {
diff --git a/savebook/middleware.js b/savebook/middleware.js
deleted file mode 100644
index f02916f..0000000
--- a/savebook/middleware.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { NextResponse } from 'next/server';
-import { verifyJwtToken } from './lib/utils/JWT';
-
-export default async function middleware(request) {
-  const protectedPaths = ['/api/notes', '/notes'];
-  const path = request.nextUrl.pathname;
-
-  const isProtectedPath = protectedPaths.some(
-    prefix => path === prefix || path.startsWith(`${prefix}/`)
-  );
-
-  if (!isProtectedPath) {
-    return NextResponse.next();
-  }
-
-  const token = request.cookies.get('authToken')?.value;
-
-  if (!token) {
-    if (path.startsWith('/api/')) {
-      return NextResponse.json(
-        { error: 'Authentication token is required' },
-        { status: 401 }
-      );
-    }
-    return NextResponse.redirect(new URL('/login', request.url));
-  }
-
-  // Verify the token (async)
-  const tokenInfo = await verifyJwtToken(token);
-
-  if (!tokenInfo.success) {
-    if (path.startsWith('/api/')) {
-      return NextResponse.json(
-        { success: false, message: tokenInfo.error },
-        { status: 401 }
-      );
-    }
-
-    const response = NextResponse.redirect(new URL('/login', request.url));
-    response.cookies.delete('authToken');
-    return response;
-  }
-
-  // Add user info to headers for API routes
-  const requestHeaders = new Headers(request.headers);
-  requestHeaders.set('x-user-id', tokenInfo.userId);
-
-  return NextResponse.next({
-    request: {
-      headers: requestHeaders,
-    },
-  });
-}
-
-export const config = {
-  matcher: ['/api/notes/:path*', '/notes/:path*'],
-};
\ No newline at end of file

From 01b68af27786f2053f40a349d265f903ed537070 Mon Sep 17 00:00:00 2001
From: Diksha Dabhole <dikshadabhole78@gmail.com>
Date: Sun, 18 Jan 2026 19:05:27 +0530
Subject: [PATCH 07/17] feat: Add audio recording attachments to notes (Issue
 #122)

---
 savebook/components/notes/AddNote.js | 15 ++---
 savebook/lib/utils/audioStorage.js   | 83 +++++++++++++++++++++++++++-
 2 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/savebook/components/notes/AddNote.js b/savebook/components/notes/AddNote.js
index bde454c..fd93ee5 100644
--- a/savebook/components/notes/AddNote.js
+++ b/savebook/components/notes/AddNote.js
@@ -128,12 +128,6 @@ export default function Addnote() {
         setAudioData(null);
     };
 
-
-
-
-
-
-
     const handleSaveNote = async (e) => {
         e.preventDefault();
         if (isSubmitting) return;
@@ -143,17 +137,16 @@ export default function Addnote() {
             // Upload images
             const imageUrls = images.length ? await uploadImages() : [];
 
-            // Upload audio if recording exists - REQUIRED before note creation
+            // Upload audio if recording exists
             let finalAudioData = null;
             if (audioBlob) {
-                setIsUploadingAudio(true);
                 try {
+                    setIsUploadingAudio(true);
                     finalAudioData = await uploadAudio(audioBlob);
                 } catch (audioError) {
                     console.error('Audio upload error:', audioError);
-                    toast.error(audioError.message || 'Audio upload failed. Please try again.');
-                    // Abort note creation - do NOT save note without audio
-                    return;
+                    toast.error('Failed to upload audio. Note saved without audio.');
+                    finalAudioData = null;
                 }
             }
 
diff --git a/savebook/lib/utils/audioStorage.js b/savebook/lib/utils/audioStorage.js
index 516b9eb..df5a781 100644
--- a/savebook/lib/utils/audioStorage.js
+++ b/savebook/lib/utils/audioStorage.js
@@ -1,9 +1,14 @@
 /**
  * Audio Storage Handler
  * 
- * Supports:
+ * Modular storage interface that can be swapped for different providers:
  * - Local filesystem
+ * - AWS S3
+ * - Google Cloud Storage
  * - Cloudinary
+ * - etc.
+ * 
+ * This file exports the handler that delegates to the configured provider.
  */
 
 import { generateUniqueFileName } from "./audioValidation";
@@ -27,9 +32,15 @@ export async function storeAudioFile({ file, userId, fileName }) {
   // Select storage implementation
   let handler;
   switch (provider) {
+    case "s3":
+      handler = storeToS3;
+      break;
     case "cloudinary":
       handler = storeToCloudinary;
       break;
+    case "gcs": // Google Cloud Storage
+      handler = storeToGCS;
+      break;
     case "local":
     default:
       handler = storeToLocal;
@@ -83,9 +94,45 @@ async function storeToLocal({ file, userId, fileName }) {
 /**
  * Store to AWS S3
  * 
- * Disabled - not configured in this project
+ * Requires:
+ * - AWS_ACCESS_KEY_ID
+ * - AWS_SECRET_ACCESS_KEY
+ * - AWS_REGION
+ * - AUDIO_S3_BUCKET
  */
+async function storeToS3({ file, userId, fileName }) {
+  try {
+    const AWS = await import("@aws-sdk/client-s3");
+    const { PutObjectCommand } = AWS;
+
+    const s3Client = new AWS.S3Client({
+      region: process.env.AWS_REGION,
+    });
+
+    const uniqueName = generateUniqueFileName(fileName, userId);
+    const key = `audio/${userId}/${uniqueName}`;
+    const buffer = await file.arrayBuffer();
+
+    const command = new PutObjectCommand({
+      Bucket: process.env.AUDIO_S3_BUCKET,
+      Key: key,
+      Body: new Uint8Array(buffer),
+      ContentType: file.type,
+      ACL: "public-read",
+    });
+
+    await s3Client.send(command);
+
+    const url = `https://${process.env.AUDIO_S3_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${key}`;
 
+    return {
+      url,
+      duration: null,
+    };
+  } catch (error) {
+    throw new Error(`S3 storage failed: ${error.message}`);
+  }
+}
 
 /**
  * Store to Cloudinary
@@ -137,5 +184,35 @@ async function storeToCloudinary({ file, userId, fileName }) {
 /**
  * Store to Google Cloud Storage
  * 
- * Disabled - not configured in this project
+ * Requires:
+ * - GOOGLE_APPLICATION_CREDENTIALS (path to service account JSON)
+ * - AUDIO_GCS_BUCKET
  */
+async function storeToGCS({ file, userId, fileName }) {
+  try {
+    const { Storage } = await import("@google-cloud/storage");
+    const storage = new Storage();
+    const bucket = storage.bucket(process.env.AUDIO_GCS_BUCKET);
+
+    const uniqueName = generateUniqueFileName(fileName, userId);
+    const gcsFile = bucket.file(`audio/${userId}/${uniqueName}`);
+
+    const buffer = await file.arrayBuffer();
+
+    await gcsFile.save(new Uint8Array(buffer), {
+      metadata: {
+        contentType: file.type,
+      },
+      public: true,
+    });
+
+    const url = `https://storage.googleapis.com/${process.env.AUDIO_GCS_BUCKET}/audio/${userId}/${uniqueName}`;
+
+    return {
+      url,
+      duration: null,
+    };
+  } catch (error) {
+    throw new Error(`GCS storage failed: ${error.message}`);
+  }
+}

From e695fb5fc67f7bf62f5bcdba76d4fcd1a2bc3933 Mon Sep 17 00:00:00 2001
From: Abhijeet-980 <abhijeet.padhy2007@gmail.com>
Date: Tue, 20 Jan 2026 22:34:48 +0530
Subject: [PATCH 08/17] added Password Visibility Toggle

---
 savebook/app/(auth)/login/page.js    | 175 ++++++++++++++++++++--
 savebook/app/(auth)/register/page.js | 213 +++++++++++----------------
 2 files changed, 256 insertions(+), 132 deletions(-)

diff --git a/savebook/app/(auth)/login/page.js b/savebook/app/(auth)/login/page.js
index 7388e8f..66a0034 100644
--- a/savebook/app/(auth)/login/page.js
+++ b/savebook/app/(auth)/login/page.js
@@ -5,6 +5,11 @@ import { useRouter } from "next/navigation";
 import React, { useState, useEffect } from "react";
 import Link from "next/link";
 
+import { Eye, EyeOff } from "lucide-react";
+
+/* =========================
+   Login Form
+========================= */
 const LoginForm = () => {
   const { login, isAuthenticated, loading } = useAuth();
   const [credentials, setCredentials] = useState({ username: "", password: "" });
@@ -14,9 +19,11 @@ const LoginForm = () => {
   const [successMessage, setSuccessMessage] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [hasRedirected, setHasRedirected] = useState(false);
-  const router = useRouter();
+  // Recovery Codes
+  const [recoveryCodes, setRecoveryCodes] = useState(null);
+  const [showRecoveryModal, setShowRecoveryModal] = useState(false);
 
-  // Redirect if authenticated
+  // Redirect after login
   useEffect(() => {
     if (isAuthenticated && !loading && !hasRedirected) {
       setHasRedirected(true);
@@ -109,13 +116,163 @@ const LoginForm = () => {
             placeholder="Enter your password"
             required
           />
-          <button
-            type="button"
-            onClick={() => setShowPassword(!showPassword)}
-            className="absolute right-3 top-3 text-gray-400 hover:text-gray-200"
-          >
-            {showPassword ? "🙈" : "👁️"}
-          </button>
+          {errors.username && <p className="text-red-500 text-sm mt-1">{errors.username}</p>}
+        </div>
+
+        {/* Password */}
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <label htmlFor="password" className="block text-sm font-medium text-gray-300">
+              Password
+            </label>
+            <Link href="/forgot-password" className="text-sm text-blue-400 hover:text-blue-300">
+              Forgot password?
+            </Link>
+          </div>
+          <div className="relative">
+            <input
+              type={showPassword ? "text" : "password"}
+              name="password"
+              value={credentials.password}
+              onChange={onchange}
+              required
+              disabled={isLoading}
+              className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white pr-10 focus:ring-2 focus:ring-blue-500 outline-none"
+              placeholder="Enter password"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200 focus:outline-none"
+              aria-label={showPassword ? "Hide password" : "Show password"}
+            >
+              {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+            </button>
+          </div>
+        </div>
+
+        {/* Remember Me */}
+        <div className="flex items-center">
+          <input
+            id="rememberMe"
+            name="rememberMe"
+            type="checkbox"
+            checked={rememberMe}
+            onChange={(e) => setRememberMe(e.target.checked)}
+            className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+          />
+          <label htmlFor="rememberMe" className="ml-2 block text-sm text-gray-300">
+            Remember me
+          </label>
+        </div>
+
+        {/* Inline messages */}
+        {errorMessage && (
+          <p className="text-red-400 text-sm font-medium text-center mb-2">{errorMessage}</p>
+        )}
+        {successMessage && (
+          <p className="text-green-400 text-sm font-medium text-center mb-2">{successMessage}</p>
+        )}
+
+        {/* Submit */}
+        <button
+          type="submit"
+          disabled={isLoading || isAuthenticated}
+          className="w-full bg-gradient-to-r from-blue-600 to-purple-700 text-white py-3 px-4 rounded-lg font-medium hover:from-blue-700 hover:to-purple-800 transition-all duration-200 flex items-center justify-center disabled:opacity-50"
+        >
+          {isLoading ? "Signing in..." : "Sign in"}
+        </button>
+
+        {/* Sign up link */}
+        <div className="text-center">
+          <span className="text-sm text-gray-300">
+            Don't have an account?{" "}
+            <Link
+              href="/register"
+              className="font-medium text-blue-400 hover:text-blue-300 transition-colors duration-200"
+            >
+              Register
+            </Link>
+          </span>
+        </div>
+      </form>
+
+      {/* ========== RECOVERY CODES MODAL ========== */}
+      {showRecoveryModal && recoveryCodes && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
+          <div className="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md">
+            <h3 className="text-xl font-semibold text-white mb-3">Save your recovery codes</h3>
+            <p className="text-sm text-gray-300 mb-4">
+              These codes will be shown only once.
+              Save them securely.
+            </p>
+
+            <div className="grid grid-cols-2 gap-2 mb-4">
+              {recoveryCodes.map((code, index) => (
+                <div
+                  key={index}
+                  className="bg-gray-800 border border-gray-600 rounded px-3 py-2 text-center text-white font-mono"
+                >
+                  {code}
+                </div>
+              ))}
+            </div>
+
+            <div className="flex gap-3 mb-4">
+              <button
+                type="button"
+                onClick={handleCopy}
+                className="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded"
+              >
+                Copy
+              </button>
+              <button
+                type="button"
+                onClick={handleDownload}
+                className="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded"
+              >
+                Download
+              </button>
+            </div>
+
+            <button
+              onClick={() => setShowRecoveryModal(false)}
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg"
+            >
+              I have saved these codes
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+/* =========================
+   Skeleton
+========================= */
+const LoginFormSkeleton = () => (
+  <div className="space-y-6 animate-pulse">
+    <div className="h-12 bg-gray-700 rounded"></div>
+    <div className="h-12 bg-gray-700 rounded"></div>
+    <div className="h-12 bg-gray-700 rounded"></div>
+  </div>
+);
+
+/* =========================
+   Page Wrapper
+========================= */
+export default function LoginPage() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-blue-900 flex items-center justify-center p-4">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h2 className="text-3xl font-extrabold text-white">Welcome back</h2>
+          <p className="mt-2 text-sm text-gray-300">Sign in to your account</p>
+        </div>
+
+        <div className="bg-gray-800 p-8 rounded-2xl shadow-xl border border-gray-700">
+          <LoginForm />
         </div>
         {errors.password && <p className="text-red-500 text-sm mt-1">{errors.password}</p>}
       </div>
diff --git a/savebook/app/(auth)/register/page.js b/savebook/app/(auth)/register/page.js
index 30dff6f..da1c5f6 100644
--- a/savebook/app/(auth)/register/page.js
+++ b/savebook/app/(auth)/register/page.js
@@ -12,8 +12,22 @@ export default async function SignupPage() {
   const { register, isAuthenticated } = useAuth();
   const router = useRouter();
 
-    const handleSubmit = async (e) => {
-        e.preventDefault();
+  const [credentials, setCredentials] = useState({
+    username: '',
+    password: '',
+    confirmPassword: ''
+  });
+  const [errors, setErrors] = useState({
+    username: '',
+    password: '',
+    confirmPassword: ''
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [usernameMessage, setUsernameMessage] = useState("");
+  const [successMessage, setSuccessMessage] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
 
         // Prevent submission if already authenticated
         if (isAuthenticated) {
@@ -28,98 +42,9 @@ export default async function SignupPage() {
             newErrors.username = 'Username is required';
         }
 
-        if (!credentials.password) {
-            newErrors.password = 'Password is required';
-        } else if (credentials.password.length < 6) {
-            newErrors.password = 'Password must be at least 6 characters';
-        }
-
-        if (!credentials.confirmPassword) {
-            newErrors.confirmPassword = 'Please confirm your password';
-        } else if (credentials.password !== credentials.confirmPassword) {
-            newErrors.confirmPassword = 'Passwords do not match';
-        }
-
-        // If validation errors exist, show them and return
-        if (Object.keys(newErrors).length > 0) {
-            setErrors(newErrors);
-            return;
-        }
-
-        setIsLoading(true);
-
-        try {
-            // Use the register method from AuthContext
-            const result = await register(
-                credentials.username,
-                credentials.password
-            );
-
-            if (result.success) {
-                toast.success("Account created successfully! 🎉");
-                router.push("/login")
-                // The useEffect will handle the redirect
-            } else {
-                toast.error(result.message || "Registration failed");
-            }
-        } catch (error) {
-            console.error("Registration error:", error);
-
-            // Attempt to extract meaningful error message
-            let errorMessage = "Something went wrong. Please try again.";
-
-            try {
-                // Check if response exists and extract message from JSON
-                if (error.response?.data) {
-                    const data = error.response.data;
-
-                    // Try to get message from JSON response
-                    if (typeof data === 'object' && data !== null) {
-                        if (data.message) {
-                            errorMessage = data.message;
-                        } else if (data.error) {
-                            errorMessage = data.error;
-                        }
-                    }
-                    // If data is a string (HTML), it means we got an error page
-                    else if (typeof data === 'string' && data.includes('<')) {
-                        // HTML response detected, use status code instead
-                        throw new Error('HTML_RESPONSE');
-                    }
-                }
-
-                // Handle HTTP status codes if no JSON message was found
-                if (errorMessage.includes('Something went wrong')) {
-                    if (error.response?.status === 500) {
-                        errorMessage = "Server error. Please try again later.";
-                    } else if (error.response?.status === 400) {
-                        errorMessage = "Invalid registration details. Please check your input.";
-                    }
-                }
-            } catch (parseError) {
-                // If JSON parsing failed or HTML was detected, use status-based message
-                if (error.response?.status === 500) {
-                    errorMessage = "Server error. Please try again later.";
-                } else if (error.response?.status === 400) {
-                    errorMessage = "Invalid registration details. Please check your input.";
-                } else if (error.response?.status) {
-                    errorMessage = `Registration failed with error ${error.response.status}. Please try again.`;
-                } else if (error.message && !error.message.includes('<!DOCTYPE')) {
-                    errorMessage = error.message;
-                }
-            }
-
-            toast.error(errorMessage);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const onchange = (e) => {
-        setCredentials({ ...credentials, [e.target.name]: e.target.value });
-        // Clear error for this field when user starts typing
-        setErrors({ ...errors, [e.target.name]: '' });
-    };
+  // Handle form submit
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
     const newErrors = {};
     if (!credentials.username.trim()) {
@@ -147,15 +72,17 @@ export default async function SignupPage() {
 
       if (result?.success) {
         setSuccessMessage("Account created successfully! 🎉 Redirecting...");
-        setErrorMessage(""); //clear any previous error
+        setErrorMessage("");
+        toast.success("Account created successfully! 🎉");
         setTimeout(() => router.push("/login"), 1500);
       } else {
         setSuccessMessage(""); // clear success
         setErrorMessage(result?.message || "Registration failed");
+        toast.error(result?.message || "Registration failed");
       }
     } catch (error) {
-      setSuccessMessage("");
-      setErrorMessage("Something went wrong");
+      console.error("Registration error:", error);
+      toast.error("Something went wrong. Please try again.");
     } finally {
       setIsLoading(false);
     }
@@ -290,9 +217,6 @@ export default async function SignupPage() {
 
           {/* Password */}
           <div className="relative">
-            <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
-              Password
-            </label>
             <input
               type={showPassword ? "text" : "password"}
               name="password"
@@ -300,16 +224,18 @@ export default async function SignupPage() {
               value={credentials.password}
               onChange={onChange}
               disabled={isLoading || isAuthenticated}
-              className={`w-full px-4 py-3 border ${
-                errors.password ? "border-red-500" : "border-gray-600"
-              } bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10`}
+              className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:border-blue-500 transition-all duration-200 outline-none disabled:opacity-50 pr-10 ${
+                errors.password
+                  ? 'border-red-500 bg-red-900/20 focus:ring-red-500'
+                  : 'border-gray-600 bg-gray-700 text-white focus:ring-blue-500'
+              }`}
               placeholder="Create a password"
               required
             />
             <button
               type="button"
               onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-3 top-9 text-gray-400 hover:text-gray-200"
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200 focus:outline-none"
               aria-label={showPassword ? "Hide password" : "Show password"}
             >
                 {isLoading ? (
@@ -325,27 +251,68 @@ export default async function SignupPage() {
                 )}
               {showPassword ? "🙈" : "👁️"}
             </button>
-            {errors.password && <p className="text-red-500 text-sm mt-1">{errors.password}</p>}
           </div>
-
-            {/* Login link */}
-            <div className="text-center">
-                <span className="text-sm text-gray-300">
-                    Already have an account?{' '}
-                    <Link
-                        href="/login"
-                        className="font-medium text-green-400 hover:text-green-300"
-                        onClick={(e) => {
-                            if (isLoading || isAuthenticated) {
-                                e.preventDefault();
-                            }
-                        }}
-                    >
-                        Login
-                    </Link>
-                </span>
-            </div>
+          {errors.password && (
+            <p className="mt-1 text-sm text-red-400">{errors.password}</p>
+          )}
+          {!errors.password && (
+            <p className="mt-1 text-xs text-gray-400">Password must be at least 6 characters long.</p>
+          )}
         </form>
+
+        {/* Confirm Password Field */}
+        <div>
+          <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
+            Confirm Password
+          </label>
+          <div className="relative">
+            <input
+              type={showConfirmPassword ? "text" : "password"}
+              name="confirmPassword"
+              id="confirmPassword"
+              value={credentials.confirmPassword}
+              onChange={onChange}
+              disabled={isLoading || isAuthenticated}
+              className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:border-blue-500 transition-all duration-200 outline-none disabled:opacity-50 pr-10 ${
+                errors.confirmPassword
+                  ? 'border-red-500 bg-red-900/20 focus:ring-red-500'
+                  : 'border-gray-600 bg-gray-700 text-white focus:ring-blue-500'
+              }`}
+              placeholder="Confirm your password"
+              required
+            />
+            <button
+              type="button"
+              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200 focus:outline-none"
+              aria-label={showConfirmPassword ? "Hide password" : "Show password"}
+            >
+              {showConfirmPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+            </button>
+          </div>
+          {errors.confirmPassword && (
+            <p className="mt-1 text-sm text-red-400">{errors.confirmPassword}</p>
+          )}
+        </div>
+
+        {/* Login link */}
+        <div className="text-center">
+          <span className="text-sm text-gray-300">
+            Already have an account?{" "}
+            <Link
+              href="/login"
+              className="font-medium text-green-400 hover:text-green-300"
+              onClick={(e) => {
+                if (isLoading || isAuthenticated) {
+                  e.preventDefault();
+                }
+              }}
+            >
+              Login
+            </Link>
+          </span>
+        </div>
       </form>
+    </form>
   );
 }
\ No newline at end of file

From 1ed1a1a50bb40d69718896e70cd6d48d8147f8d5 Mon Sep 17 00:00:00 2001
From: Suvam Chatterjee <suvamchatterjee873@gmail.com>
Date: Mon, 19 Jan 2026 17:01:51 +0530
Subject: [PATCH 09/17] Add weblinks with preview in notes

---
 savebook/components/notes/NoteItem.js | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/savebook/components/notes/NoteItem.js b/savebook/components/notes/NoteItem.js
index ee346fb..d9ea24b 100644
--- a/savebook/components/notes/NoteItem.js
+++ b/savebook/components/notes/NoteItem.js
@@ -200,24 +200,6 @@ export default function NoteItem(props) {
                                 <LinkPreviewCard url={url} />
                             </div>
                         ))}
-
-                        {/* Audio */}
-                        {note?.audio && note.audio.url && (
-                            <div className="mt-4 p-3 bg-gray-800/50 rounded-lg border border-gray-700">
-                                <p className="text-xs text-gray-400 mb-2 flex items-center gap-2">
-                                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                                        <path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" />
-                                    </svg>
-                                    Audio Recording
-                                </p>
-                                <audio
-                                    controls
-                                    src={note.audio.url}
-                                    className="w-full"
-                                    style={{ maxHeight: '32px' }}
-                                />
-                            </div>
-                        )}
                     </div>
 
                     {/* Enhanced Footer */}

From aac2c1e3ad356a87a8f8576e4be07b5194292197 Mon Sep 17 00:00:00 2001
From: HarshYadav152 <161936085+HarshYadav152@users.noreply.github.com>
Date: Mon, 19 Jan 2026 12:29:59 +0000
Subject: [PATCH 10/17] docs: auto update changelog

---
 CHANGELOG.md | 149 ---------------------------------------------------
 1 file changed, 149 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 74cdcb7..441617d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,152 +1,3 @@
-## [2026-01-26]
-
-### ✨ Features
--  add input validation & security improvements for login/register API (683b1c0) - @Kartikey-0
--  add Docker Compose configuration for MongoDB, application, and Mongo Express services. (0e33768) - @saiusesgithub
--  add audio recording and attachment support for notes (13b37b7) - @Diksha Dabhole
--  Add audio recording attachments to notes (Issue #122) (2df98ac) - @Diksha Dabhole
-
-### 📝 Documentation
--  auto update changelog (f630373) - @vinayboss9669
--  auto update changelog (83dca1b) - @vinayboss9669
--  auto update changelog (2239ad3) - @vinayboss9669
--  auto update changelog (0a88bb5) - @vinayboss9669
--  auto update changelog (aba5ef7) - @HarshYadav152
--  auto update changelog (27786d4) - @HarshYadav152
-
-### 📦 Other Changes
-- Fixed (fd465e1) - @Aagman Pal
-- Note Viewer Error Fixed (f5dca9a) - @Aagman Pal
-- added Password Visibility Toggle (198b3b6) - @Abhijeet-980
-- Note View Modal Added (c8ca166) - @Aagman Pal
-- Update savebook/docker-compose.yml (5ed7f01) - @Sai Srujan Punati
-- Update savebook/.dockerignore (ad968c3) - @Sai Srujan Punati
-- Update savebook/.dockerignore (1320235) - @Sai Srujan Punati
-- Update savebook/.dockerignore (9812ccc) - @Sai Srujan Punati
-- Fix audio upload error handling in AddNote (73d431b) - @Diksha Dabhole
-- Add weblinks with preview in notes (19fc09d) - @Suvam Chatterjee
-
-
-## [2026-01-26]
-
-### ✨ Features
--  add Docker Compose configuration for MongoDB, application, and Mongo Express services. (0e33768) - @saiusesgithub
--  add audio recording and attachment support for notes (13b37b7) - @Diksha Dabhole
--  Add audio recording attachments to notes (Issue #122) (2df98ac) - @Diksha Dabhole
--  add image upload support for notes and user media (8cab3d7) - @avdhut400
-
-### 📝 Documentation
--  auto update changelog (83dca1b) - @vinayboss9669
--  auto update changelog (2239ad3) - @vinayboss9669
--  auto update changelog (0a88bb5) - @vinayboss9669
--  auto update changelog (aba5ef7) - @HarshYadav152
--  auto update changelog (27786d4) - @HarshYadav152
--  auto update changelog (45e18fe) - @HarshYadav152
-
-### 📦 Other Changes
-- Fixed (fd465e1) - @Aagman Pal
-- Note Viewer Error Fixed (f5dca9a) - @Aagman Pal
-- added Password Visibility Toggle (198b3b6) - @Abhijeet-980
-- Note View Modal Added (c8ca166) - @Aagman Pal
-- Update savebook/docker-compose.yml (5ed7f01) - @Sai Srujan Punati
-- Update savebook/.dockerignore (ad968c3) - @Sai Srujan Punati
-- Update savebook/.dockerignore (1320235) - @Sai Srujan Punati
-- Update savebook/.dockerignore (9812ccc) - @Sai Srujan Punati
-- Fix audio upload error handling in AddNote (73d431b) - @Diksha Dabhole
-- Add weblinks with preview in notes (19fc09d) - @Suvam Chatterjee
-
-
-## [2026-01-23]
-
-### ✨ Features
--  add Docker Compose configuration for MongoDB, application, and Mongo Express services. (0e33768) - @saiusesgithub
--  add audio recording and attachment support for notes (13b37b7) - @Diksha Dabhole
--  Add audio recording attachments to notes (Issue #122) (2df98ac) - @Diksha Dabhole
--  add image upload support for notes and user media (8cab3d7) - @avdhut400
-
-### 📝 Documentation
--  auto update changelog (2239ad3) - @vinayboss9669
--  auto update changelog (0a88bb5) - @vinayboss9669
--  auto update changelog (aba5ef7) - @HarshYadav152
--  auto update changelog (27786d4) - @HarshYadav152
--  auto update changelog (45e18fe) - @HarshYadav152
-
-### 📦 Other Changes
-- added Password Visibility Toggle (198b3b6) - @Abhijeet-980
-- Update savebook/docker-compose.yml (5ed7f01) - @Sai Srujan Punati
-- Update savebook/.dockerignore (ad968c3) - @Sai Srujan Punati
-- Update savebook/.dockerignore (1320235) - @Sai Srujan Punati
-- Update savebook/.dockerignore (9812ccc) - @Sai Srujan Punati
-- Fix audio upload error handling in AddNote (73d431b) - @Diksha Dabhole
-- Add weblinks with preview in notes (19fc09d) - @Suvam Chatterjee
-- Add user-media upload route and improve profile upload with size & type validation (088149c) - @avdhut400
-- Add user-media upload route and improve profile upload with size & type validation (c4cfa6d) - @avdhut400
-- route (7edcf39) - @avdhut400
-- await (fab37c8) - @Avdhut Magar
-
-
-## [2026-01-21]
-
-### ✨ Features
--  add audio recording and attachment support for notes (13b37b7) - @Diksha Dabhole
--  Add audio recording attachments to notes (Issue #122) (2df98ac) - @Diksha Dabhole
--  add image upload support for notes and user media (8cab3d7) - @avdhut400
--  add image upload support for notes (fbf9438) - @avdhut400
-
-### 🐛 Bug Fixes
--  improve register page validation and error handling (5f451a0) - @Diksha Dabhole
--  replace browser popup with in-app modal (0662c42) - @saburi004
-
-### 📝 Documentation
--  auto update changelog (0a88bb5) - @vinayboss9669
--  auto update changelog (aba5ef7) - @HarshYadav152
--  auto update changelog (27786d4) - @HarshYadav152
--  auto update changelog (45e18fe) - @HarshYadav152
--  auto update changelog (b7af96d) - @vinayboss9669
--  auto update changelog (f777e40) - @vinayboss9669
-
-### 📦 Other Changes
-- added Password Visibility Toggle (198b3b6) - @Abhijeet-980
-- Fix audio upload error handling in AddNote (73d431b) - @Diksha Dabhole
-- Add weblinks with preview in notes (19fc09d) - @Suvam Chatterjee
-- Add user-media upload route and improve profile upload with size & type validation (088149c) - @avdhut400
-- Add user-media upload route and improve profile upload with size & type validation (c4cfa6d) - @avdhut400
-- route (7edcf39) - @avdhut400
-- await (fab37c8) - @Avdhut Magar
-- Add scroll to top button (4545a0a) - @Harishchandra Gandhare
-
-
-## [2026-01-19]
-
-### ✨ Features
--  add audio recording and attachment support for notes (13b37b7) - @Diksha Dabhole
--  Add audio recording attachments to notes (Issue #122) (2df98ac) - @Diksha Dabhole
--  add image upload support for notes and user media (8cab3d7) - @avdhut400
--  add image upload support for notes (fbf9438) - @avdhut400
-
-### 🐛 Bug Fixes
--  improve register page validation and error handling (5f451a0) - @Diksha Dabhole
--  replace browser popup with in-app modal (0662c42) - @saburi004
-
-### 📝 Documentation
--  auto update changelog (aba5ef7) - @HarshYadav152
--  auto update changelog (27786d4) - @HarshYadav152
--  auto update changelog (45e18fe) - @HarshYadav152
--  auto update changelog (b7af96d) - @vinayboss9669
--  auto update changelog (f777e40) - @vinayboss9669
--  auto update changelog (c727431) - @HarshYadav152
-
-### 📦 Other Changes
-- Fix audio upload error handling in AddNote (73d431b) - @Diksha Dabhole
-- Add weblinks with preview in notes (19fc09d) - @Suvam Chatterjee
-- Add user-media upload route and improve profile upload with size & type validation (088149c) - @avdhut400
-- Add user-media upload route and improve profile upload with size & type validation (c4cfa6d) - @avdhut400
-- route (7edcf39) - @avdhut400
-- await (fab37c8) - @Avdhut Magar
-- Add scroll to top button (4545a0a) - @Harishchandra Gandhare
-- WIP: my changes before syncing upstream (8687fe5) - @avdhut400
-
-
 ## [2026-01-19]
 
 ### ✨ Features

From b702799af06cf03a7d55d82e1a48b3c52a31bcb1 Mon Sep 17 00:00:00 2001
From: Diksha Dabhole <dikshadabhole78@gmail.com>
Date: Sun, 18 Jan 2026 19:05:27 +0530
Subject: [PATCH 11/17] feat: Add audio recording attachments to notes (Issue
 #122)

---
 savebook/components/notes/AddNote.js | 26 +++-----------------------
 1 file changed, 3 insertions(+), 23 deletions(-)

diff --git a/savebook/components/notes/AddNote.js b/savebook/components/notes/AddNote.js
index fd93ee5..106768b 100644
--- a/savebook/components/notes/AddNote.js
+++ b/savebook/components/notes/AddNote.js
@@ -88,27 +88,7 @@ export default function Addnote() {
         });
 
         if (!res.ok) {
-            // Log full error response for debugging
-            let errorMessage = `HTTP ${res.status}`;
-            const contentType = res.headers.get('content-type');
-            
-            try {
-                // Try to parse as JSON first
-                if (contentType?.includes('application/json')) {
-                    const errorData = await res.json();
-                    errorMessage = errorData.error || errorData.message || errorMessage;
-                } else {
-                    // Fallback to text
-                    const errorText = await res.text();
-                    errorMessage = errorText.slice(0, 200) || errorMessage;
-                }
-            } catch (parseError) {
-                // If parsing fails, use status code
-                console.error('Failed to parse error response:', parseError);
-            }
-            
-            console.error('Audio upload error:', { status: res.status, error: errorMessage });
-            throw new Error(`Audio upload failed: ${errorMessage}`);
+            throw new Error('Audio upload failed');
         }
 
         const data = await res.json();
@@ -163,10 +143,10 @@ export default function Addnote() {
             setNote({ title: "", description: "", tag: "" });
             setImages([]);
             setPreview([]);
-            clearAudioRecording(); // Only clear after successful save
+            clearAudioRecording();
         } catch (error) {
             console.error('Error saving note:', error);
-            toast.error(error.message || "Failed to save note. Please try again.");
+            toast.error("Failed to save note");
         } finally {
             setIsSubmitting(false);
             setIsUploadingAudio(false);

From d99075f0360edfa20c0956d97b32d4a26c7c7915 Mon Sep 17 00:00:00 2001
From: Diksha Dabhole <dikshadabhole78@gmail.com>
Date: Mon, 19 Jan 2026 12:49:46 +0530
Subject: [PATCH 12/17] feat: add audio recording and attachment support for
 notes

---
 savebook/components/notes/AddNote.js  | 36 +++++++++---
 savebook/components/notes/NoteItem.js | 18 ++++++
 savebook/lib/utils/audioStorage.js    | 83 +--------------------------
 3 files changed, 49 insertions(+), 88 deletions(-)

diff --git a/savebook/components/notes/AddNote.js b/savebook/components/notes/AddNote.js
index 106768b..062524c 100644
--- a/savebook/components/notes/AddNote.js
+++ b/savebook/components/notes/AddNote.js
@@ -88,7 +88,27 @@ export default function Addnote() {
         });
 
         if (!res.ok) {
-            throw new Error('Audio upload failed');
+            // Log full error response for debugging
+            let errorMessage = `HTTP ${res.status}`;
+            const contentType = res.headers.get('content-type');
+            
+            try {
+                // Try to parse as JSON first
+                if (contentType?.includes('application/json')) {
+                    const errorData = await res.json();
+                    errorMessage = errorData.error || errorData.message || errorMessage;
+                } else {
+                    // Fallback to text
+                    const errorText = await res.text();
+                    errorMessage = errorText.slice(0, 200) || errorMessage;
+                }
+            } catch (parseError) {
+                // If parsing fails, use status code
+                console.error('Failed to parse error response:', parseError);
+            }
+            
+            console.error('Audio upload error:', { status: res.status, error: errorMessage });
+            throw new Error(`Audio upload failed: ${errorMessage}`);
         }
 
         const data = await res.json();
@@ -117,16 +137,17 @@ export default function Addnote() {
             // Upload images
             const imageUrls = images.length ? await uploadImages() : [];
 
-            // Upload audio if recording exists
+            // Upload audio if recording exists - REQUIRED before note creation
             let finalAudioData = null;
             if (audioBlob) {
+                setIsUploadingAudio(true);
                 try {
-                    setIsUploadingAudio(true);
                     finalAudioData = await uploadAudio(audioBlob);
                 } catch (audioError) {
                     console.error('Audio upload error:', audioError);
-                    toast.error('Failed to upload audio. Note saved without audio.');
-                    finalAudioData = null;
+                    toast.error(audioError.message || 'Audio upload failed. Please try again.');
+                    // Abort note creation - do NOT save note without audio
+                    return;
                 }
             }
 
@@ -143,10 +164,10 @@ export default function Addnote() {
             setNote({ title: "", description: "", tag: "" });
             setImages([]);
             setPreview([]);
-            clearAudioRecording();
+            clearAudioRecording(); // Only clear after successful save
         } catch (error) {
             console.error('Error saving note:', error);
-            toast.error("Failed to save note");
+            toast.error(error.message || "Failed to save note. Please try again.");
         } finally {
             setIsSubmitting(false);
             setIsUploadingAudio(false);
@@ -353,7 +374,6 @@ export default function Addnote() {
                                             </div>
                                         )}
                                     </div>
-                                </div>
 
                                 {/* Upload Section */}
                                 <div className="border border-gray-300 dark:border-gray-600 rounded-lg p-4 flex flex-col min-h-64">
diff --git a/savebook/components/notes/NoteItem.js b/savebook/components/notes/NoteItem.js
index d9ea24b..ee346fb 100644
--- a/savebook/components/notes/NoteItem.js
+++ b/savebook/components/notes/NoteItem.js
@@ -200,6 +200,24 @@ export default function NoteItem(props) {
                                 <LinkPreviewCard url={url} />
                             </div>
                         ))}
+
+                        {/* Audio */}
+                        {note?.audio && note.audio.url && (
+                            <div className="mt-4 p-3 bg-gray-800/50 rounded-lg border border-gray-700">
+                                <p className="text-xs text-gray-400 mb-2 flex items-center gap-2">
+                                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                                        <path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" />
+                                    </svg>
+                                    Audio Recording
+                                </p>
+                                <audio
+                                    controls
+                                    src={note.audio.url}
+                                    className="w-full"
+                                    style={{ maxHeight: '32px' }}
+                                />
+                            </div>
+                        )}
                     </div>
 
                     {/* Enhanced Footer */}
diff --git a/savebook/lib/utils/audioStorage.js b/savebook/lib/utils/audioStorage.js
index df5a781..516b9eb 100644
--- a/savebook/lib/utils/audioStorage.js
+++ b/savebook/lib/utils/audioStorage.js
@@ -1,14 +1,9 @@
 /**
  * Audio Storage Handler
  * 
- * Modular storage interface that can be swapped for different providers:
+ * Supports:
  * - Local filesystem
- * - AWS S3
- * - Google Cloud Storage
  * - Cloudinary
- * - etc.
- * 
- * This file exports the handler that delegates to the configured provider.
  */
 
 import { generateUniqueFileName } from "./audioValidation";
@@ -32,15 +27,9 @@ export async function storeAudioFile({ file, userId, fileName }) {
   // Select storage implementation
   let handler;
   switch (provider) {
-    case "s3":
-      handler = storeToS3;
-      break;
     case "cloudinary":
       handler = storeToCloudinary;
       break;
-    case "gcs": // Google Cloud Storage
-      handler = storeToGCS;
-      break;
     case "local":
     default:
       handler = storeToLocal;
@@ -94,45 +83,9 @@ async function storeToLocal({ file, userId, fileName }) {
 /**
  * Store to AWS S3
  * 
- * Requires:
- * - AWS_ACCESS_KEY_ID
- * - AWS_SECRET_ACCESS_KEY
- * - AWS_REGION
- * - AUDIO_S3_BUCKET
+ * Disabled - not configured in this project
  */
-async function storeToS3({ file, userId, fileName }) {
-  try {
-    const AWS = await import("@aws-sdk/client-s3");
-    const { PutObjectCommand } = AWS;
-
-    const s3Client = new AWS.S3Client({
-      region: process.env.AWS_REGION,
-    });
-
-    const uniqueName = generateUniqueFileName(fileName, userId);
-    const key = `audio/${userId}/${uniqueName}`;
-    const buffer = await file.arrayBuffer();
-
-    const command = new PutObjectCommand({
-      Bucket: process.env.AUDIO_S3_BUCKET,
-      Key: key,
-      Body: new Uint8Array(buffer),
-      ContentType: file.type,
-      ACL: "public-read",
-    });
-
-    await s3Client.send(command);
-
-    const url = `https://${process.env.AUDIO_S3_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${key}`;
 
-    return {
-      url,
-      duration: null,
-    };
-  } catch (error) {
-    throw new Error(`S3 storage failed: ${error.message}`);
-  }
-}
 
 /**
  * Store to Cloudinary
@@ -184,35 +137,5 @@ async function storeToCloudinary({ file, userId, fileName }) {
 /**
  * Store to Google Cloud Storage
  * 
- * Requires:
- * - GOOGLE_APPLICATION_CREDENTIALS (path to service account JSON)
- * - AUDIO_GCS_BUCKET
+ * Disabled - not configured in this project
  */
-async function storeToGCS({ file, userId, fileName }) {
-  try {
-    const { Storage } = await import("@google-cloud/storage");
-    const storage = new Storage();
-    const bucket = storage.bucket(process.env.AUDIO_GCS_BUCKET);
-
-    const uniqueName = generateUniqueFileName(fileName, userId);
-    const gcsFile = bucket.file(`audio/${userId}/${uniqueName}`);
-
-    const buffer = await file.arrayBuffer();
-
-    await gcsFile.save(new Uint8Array(buffer), {
-      metadata: {
-        contentType: file.type,
-      },
-      public: true,
-    });
-
-    const url = `https://storage.googleapis.com/${process.env.AUDIO_GCS_BUCKET}/audio/${userId}/${uniqueName}`;
-
-    return {
-      url,
-      duration: null,
-    };
-  } catch (error) {
-    throw new Error(`GCS storage failed: ${error.message}`);
-  }
-}

From 93cd34e3cfa7230473c342ec48683ee05f08bbf5 Mon Sep 17 00:00:00 2001
From: Saumya-249 <saumya.skdian@gmail.com>
Date: Mon, 26 Jan 2026 08:52:30 +0530
Subject: [PATCH 13/17] Used jwtAuth instead of jwt and removed the file
 middleware.js

---
 savebook/app/api/auth/user/route.js  |  2 +-
 savebook/app/api/notes/[id]/route.js | 11 -----------
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/savebook/app/api/auth/user/route.js b/savebook/app/api/auth/user/route.js
index 91e0b6f..92c8ba3 100644
--- a/savebook/app/api/auth/user/route.js
+++ b/savebook/app/api/auth/user/route.js
@@ -1,7 +1,7 @@
 import dbConnect from "@/lib/db/mongodb";
 import User from "@/lib/models/User";
 import { verifyJwtToken } from "@/lib/utils/jwtAuth";
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
 
 export async function GET(request) {
     try {
diff --git a/savebook/app/api/notes/[id]/route.js b/savebook/app/api/notes/[id]/route.js
index dc0434d..2e66baf 100644
--- a/savebook/app/api/notes/[id]/route.js
+++ b/savebook/app/api/notes/[id]/route.js
@@ -1,19 +1,8 @@
-<<<<<<< HEAD
-import { NextResponse } from 'next/server';
-import mongoose from 'mongoose';
-import dbConnect from '@/lib/db/mongodb';
-import Notes from '@/lib/models/Notes';
-=======
 import { NextResponse } from "next/server";
 import mongoose from "mongoose";
 import dbConnect from "@/lib/db/mongodb";
 import Notes from "@/lib/models/Notes";
-<<<<<<< HEAD
->>>>>>> f927a20 (Updated the branch)
 import { verifyJwtToken } from "@/lib/utils/jwtAuth";
-=======
-import { verifyJwtToken } from "@/lib/utils/jwt";   // ensure lowercase filename
->>>>>>> f6ab754 (Cleared the conflicts)
 
 // Get a specific note by ID
 export async function GET(request, { params }) {

From f59bb3f9e1319a8add1a4d71202846311bf03d2e Mon Sep 17 00:00:00 2001
From: Abhijeet-980 <abhijeet.padhy2007@gmail.com>
Date: Tue, 20 Jan 2026 22:34:48 +0530
Subject: [PATCH 14/17] added Password Visibility Toggle

---
 savebook/app/(auth)/login/page.js    |   5 +-
 savebook/app/(auth)/register/page.js | 240 +++++++++++++++++++++++++--
 2 files changed, 233 insertions(+), 12 deletions(-)

diff --git a/savebook/app/(auth)/login/page.js b/savebook/app/(auth)/login/page.js
index 66a0034..0e552a7 100644
--- a/savebook/app/(auth)/login/page.js
+++ b/savebook/app/(auth)/login/page.js
@@ -17,9 +17,10 @@ const LoginForm = () => {
   const [errors, setErrors] = useState({});
   const [errorMessage, setErrorMessage] = useState("");
   const [successMessage, setSuccessMessage] = useState("");
-  const [showPassword, setShowPassword] = useState(false);
   const [hasRedirected, setHasRedirected] = useState(false);
-  // Recovery Codes
+  const [showPassword, setShowPassword] = useState(false);
+
+  //  Recovery Codes
   const [recoveryCodes, setRecoveryCodes] = useState(null);
   const [showRecoveryModal, setShowRecoveryModal] = useState(false);
 
diff --git a/savebook/app/(auth)/register/page.js b/savebook/app/(auth)/register/page.js
index da1c5f6..ddb42e2 100644
--- a/savebook/app/(auth)/register/page.js
+++ b/savebook/app/(auth)/register/page.js
@@ -6,6 +6,7 @@ import Link from "next/link";
 import toast from "react-hot-toast";
 import { useAuth } from "@/context/auth/authContext";
 import { Eye, EyeOff } from 'lucide-react';
+import { Eye, EyeOff } from 'lucide-react';
 
 // Signup Form Component
 export default async function SignupPage() {
@@ -28,6 +29,21 @@ export default async function SignupPage() {
   const [usernameMessage, setUsernameMessage] = useState("");
   const [successMessage, setSuccessMessage] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        // Prevent submission if already authenticated
+        if (isAuthenticated) {
+            router.push("/");
+            return;
+        }
+
+        // Validate and collect errors
+        const newErrors = {};
+
+        if (!credentials.username.trim()) {
+            newErrors.username = 'Username is required';
+        }
 
         // Prevent submission if already authenticated
         if (isAuthenticated) {
@@ -42,9 +58,74 @@ export default async function SignupPage() {
             newErrors.username = 'Username is required';
         }
 
-  // Handle form submit
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+        setIsLoading(true);
+
+        try {
+            // Use the register method from AuthContext
+            const result = await register(
+                credentials.username,
+                credentials.password
+            );
+
+            if (result.success) {
+                toast.success("Account created successfully! 🎉");
+                router.push("/login")
+                // The useEffect will handle the redirect
+            } else {
+                toast.error(result.message || "Registration failed");
+            }
+        } catch (error) {
+            console.error("Registration error:", error);
+
+            // Attempt to extract meaningful error message
+            let errorMessage = "Something went wrong. Please try again.";
+
+            try {
+                // Check if response exists and extract message from JSON
+                if (error.response?.data) {
+                    const data = error.response.data;
+
+                    // Try to get message from JSON response
+                    if (typeof data === 'object' && data !== null) {
+                        if (data.message) {
+                            errorMessage = data.message;
+                        } else if (data.error) {
+                            errorMessage = data.error;
+                        }
+                    }
+                    // If data is a string (HTML), it means we got an error page
+                    else if (typeof data === 'string' && data.includes('<')) {
+                        // HTML response detected, use status code instead
+                        throw new Error('HTML_RESPONSE');
+                    }
+                }
+
+                // Handle HTTP status codes if no JSON message was found
+                if (errorMessage.includes('Something went wrong')) {
+                    if (error.response?.status === 500) {
+                        errorMessage = "Server error. Please try again later.";
+                    } else if (error.response?.status === 400) {
+                        errorMessage = "Invalid registration details. Please check your input.";
+                    }
+                }
+            } catch (parseError) {
+                // If JSON parsing failed or HTML was detected, use status-based message
+                if (error.response?.status === 500) {
+                    errorMessage = "Server error. Please try again later.";
+                } else if (error.response?.status === 400) {
+                    errorMessage = "Invalid registration details. Please check your input.";
+                } else if (error.response?.status) {
+                    errorMessage = `Registration failed with error ${error.response.status}. Please try again.`;
+                } else if (error.message && !error.message.includes('<!DOCTYPE')) {
+                    errorMessage = error.message;
+                }
+            }
+
+            toast.error(errorMessage);
+        } finally {
+            setIsLoading(false);
+        }
+    };
 
     const newErrors = {};
     if (!credentials.username.trim()) {
@@ -87,6 +168,102 @@ export default async function SignupPage() {
       setIsLoading(false);
     }
   };
+    return (
+        <form className="space-y-6" onSubmit={handleSubmit}>
+            {/* Username Field */}
+            <div>
+                <label htmlFor="username" className="block text-sm font-medium text-gray-300 mb-2">
+                    Username
+                </label>
+                <input
+                    type="text"
+                    name="username"
+                    id="username"
+                    value={credentials.username}
+                    onChange={onchange}
+                    disabled={isLoading || isAuthenticated}
+                    className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:border-blue-500 transition-all duration-200 outline-none disabled:opacity-50 ${errors.username
+                            ? 'border-red-500 bg-red-900/20 focus:ring-red-500'
+                            : 'border-gray-600 bg-gray-700 text-white focus:ring-blue-500'
+                        }`}
+                    placeholder="Choose a username"
+                    required
+                />
+                {errors.username && (
+                    <p className="mt-1 text-sm text-red-400">{errors.username}</p>
+                )}
+            </div>
+
+            {/* Password Field */}
+            <div>
+                <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
+                    Password
+                </label>
+                <div className="relative">
+                    <input
+                        type={showPassword ? "text" : "password"}
+                        name="password"
+                        id="password"
+                        value={credentials.password}
+                        onChange={onchange}
+                        disabled={isLoading || isAuthenticated}
+                        className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:border-blue-500 transition-all duration-200 outline-none disabled:opacity-50 pr-10 ${errors.password
+                                ? 'border-red-500 bg-red-900/20 focus:ring-red-500'
+                                : 'border-gray-600 bg-gray-700 text-white focus:ring-blue-500'
+                            }`}
+                        placeholder="Create a password"
+                        required
+                    />
+                    <button
+                        type="button"
+                        onClick={() => setShowPassword(!showPassword)}
+                        className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200 focus:outline-none"
+                        aria-label={showPassword ? "Hide password" : "Show password"}
+                    >
+                        {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                    </button>
+                </div>
+                {errors.password && (
+                    <p className="mt-1 text-sm text-red-400">{errors.password}</p>
+                )}
+                {!errors.password && (
+                    <p className="mt-1 text-xs text-gray-400">Password must be at least 6 characters long.</p>
+                )}
+            </div>
+
+            {/* Confirm Password Field */}
+            <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
+                    Confirm Password
+                </label>
+                <div className="relative">
+                    <input
+                        type={showConfirmPassword ? "text" : "password"}
+                        name="confirmPassword"
+                        id="confirmPassword"
+                        value={credentials.confirmPassword}
+                        onChange={onchange}
+                        disabled={isLoading || isAuthenticated}
+                        className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:border-blue-500 transition-all duration-200 outline-none disabled:opacity-50 pr-10 ${errors.confirmPassword
+                                ? 'border-red-500 bg-red-900/20 focus:ring-red-500'
+                                : 'border-gray-600 bg-gray-700 text-white focus:ring-blue-500'
+                            }`}
+                        placeholder="Confirm your password"
+                        required
+                    />
+                    <button
+                        type="button"
+                        onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                        className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200 focus:outline-none"
+                        aria-label={showConfirmPassword ? "Hide password" : "Show password"}
+                    >
+                        {showConfirmPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                    </button>
+                </div>
+                {errors.confirmPassword && (
+                    <p className="mt-1 text-sm text-red-400">{errors.confirmPassword}</p>
+                )}
+            </div>
 
   // Skeleton loader
   if (isAuthenticated === undefined) {
@@ -251,14 +428,57 @@ export default async function SignupPage() {
                 )}
               {showPassword ? "🙈" : "👁️"}
             </button>
-          </div>
-          {errors.password && (
-            <p className="mt-1 text-sm text-red-400">{errors.password}</p>
-          )}
-          {!errors.password && (
-            <p className="mt-1 text-xs text-gray-400">Password must be at least 6 characters long.</p>
-          )}
+
+            {/* Login link */}
+            <div className="text-center">
+                <span className="text-sm text-gray-300">
+                    Already have an account?{' '}
+                    <Link
+                        href="/login"
+                        className="font-medium text-green-400 hover:text-green-300"
+                        onClick={(e) => {
+                            if (isLoading || isAuthenticated) {
+                                e.preventDefault();
+                            }
+                        }}
+                    >
+                        Login
+                    </Link>
+                </span>
+            </div>
         </form>
+    );
+}
+
+// Signup Skeleton Component for loading state
+const SignupFormSkeleton = () => {
+    return (
+        <div className="space-y-6">
+            {/* Username Field Skeleton */}
+            <div>
+                <div className="h-5 w-20 bg-gray-700 rounded mb-2 animate-pulse"></div>
+                <div className="h-12 bg-gray-700 rounded-lg animate-pulse"></div>
+            </div>
+
+            {/* Password Field Skeleton */}
+            <div>
+                <div className="h-5 w-20 bg-gray-700 rounded mb-2 animate-pulse"></div>
+                <div className="h-12 bg-gray-700 rounded-lg animate-pulse"></div>
+            </div>
+
+            {/* Confirm Password Field Skeleton */}
+            <div>
+                <div className="h-5 w-32 bg-gray-700 rounded mb-2 animate-pulse"></div>
+                <div className="h-12 bg-gray-700 rounded-lg animate-pulse"></div>
+            </div>
+
+            {/* Button Skeleton */}
+            <div className="h-12 bg-gradient-to-r from-green-600/30 to-blue-700/30 rounded-lg animate-pulse"></div>
+
+            {/* Sign up link Skeleton */}
+            <div className="flex justify-center">
+                <div className="h-5 w-48 bg-gray-700 rounded animate-pulse"></div>
+            </div>
 
         {/* Confirm Password Field */}
         <div>

From c6753f1af9a167a9612e1fd42d0869666d6048b9 Mon Sep 17 00:00:00 2001
From: saiusesgithub <saisrujanpunati@gmail.com>
Date: Sat, 17 Jan 2026 12:18:56 +0530
Subject: [PATCH 15/17] feat: Add Docker support for local development

- Add Dockerfile with multi-stage build for optimized images
- Add docker-compose.yml with MongoDB and optional Mongo Express
- Add .dockerignore for efficient builds
- Add comprehensive DOCKER_SETUP.md documentation
- Update next.config.mjs with standalone output mode
- Update README.md with Docker setup reference

Features:
- Quick setup with consistent environment
- Includes MongoDB with persistent volumes
- Health checks for all services
- Follows Docker and Next.js best practices
- Optional Mongo Express for database management

Closes #130
---
 savebook/.dockerignore      | 4 ++++
 savebook/docker-compose.yml | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/savebook/.dockerignore b/savebook/.dockerignore
index c592f96..4f810a7 100644
--- a/savebook/.dockerignore
+++ b/savebook/.dockerignore
@@ -4,6 +4,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+package-lock.json
 yarn.lock
 pnpm-lock.yaml
 
@@ -31,6 +32,9 @@ build
 
 # Debug
 npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
 # Local env files
 .env.local
 .env.development.local
diff --git a/savebook/docker-compose.yml b/savebook/docker-compose.yml
index 2486613..a730988 100644
--- a/savebook/docker-compose.yml
+++ b/savebook/docker-compose.yml
@@ -2,6 +2,7 @@ services:
   # MongoDB Database
   mongodb:
     image: mongo:6.0
+    image: mongo:7.0-jammy
     container_name: savebook-mongodb
     restart: unless-stopped
     environment:
@@ -53,7 +54,7 @@ services:
     networks:
       - savebook-network
     healthcheck:
-      test: ["CMD", "node", "-e", "require('http').get('http://localhost:3000/api/auth/user', res => { if (res.statusCode !== 200) process.exit(1); }).on('error', () => process.exit(1));"]
+      test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:3000/api/auth/user"]
       interval: 30s
       timeout: 10s
       retries: 3

From e733773c890aa34b643d18307a74d16eb5a422fa Mon Sep 17 00:00:00 2001
From: saiusesgithub <saisrujanpunati@gmail.com>
Date: Tue, 20 Jan 2026 12:33:24 +0530
Subject: [PATCH 16/17] feat: add Docker Compose configuration for MongoDB,
 application, and Mongo Express services.

---
 savebook/docker-compose.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/savebook/docker-compose.yml b/savebook/docker-compose.yml
index a730988..a3a4c15 100644
--- a/savebook/docker-compose.yml
+++ b/savebook/docker-compose.yml
@@ -2,7 +2,6 @@ services:
   # MongoDB Database
   mongodb:
     image: mongo:6.0
-    image: mongo:7.0-jammy
     container_name: savebook-mongodb
     restart: unless-stopped
     environment:

From bfc9b292654e145c703b7b207da9a391ab86a561 Mon Sep 17 00:00:00 2001
From: Saumya-249 <saumya.skdian@gmail.com>
Date: Sat, 31 Jan 2026 18:12:48 +0530
Subject: [PATCH 17/17] Updated signup and login pages

---
 savebook/app/(auth)/login/page.js    | 260 ++------
 savebook/app/(auth)/register/page.js | 678 ++++++--------------
 savebook/app/api/auth/login/route.js |  46 +-
 savebook/components/notes/AddNote.js | 924 ++++++++++-----------------
 savebook/context/auth/AuthState.js   |  23 -
 savebook/lib/utils/jwtAuth.js        |   4 -
 6 files changed, 637 insertions(+), 1298 deletions(-)

diff --git a/savebook/app/(auth)/login/page.js b/savebook/app/(auth)/login/page.js
index 0e552a7..feb0a33 100644
--- a/savebook/app/(auth)/login/page.js
+++ b/savebook/app/(auth)/login/page.js
@@ -4,7 +4,6 @@ import { useAuth } from "@/context/auth/authContext";
 import { useRouter } from "next/navigation";
 import React, { useState, useEffect } from "react";
 import Link from "next/link";
-
 import { Eye, EyeOff } from "lucide-react";
 
 /* =========================
@@ -12,6 +11,8 @@ import { Eye, EyeOff } from "lucide-react";
 ========================= */
 const LoginForm = () => {
   const { login, isAuthenticated, loading } = useAuth();
+  const router = useRouter();
+
   const [credentials, setCredentials] = useState({ username: "", password: "" });
   const [rememberMe, setRememberMe] = useState(false);
   const [errors, setErrors] = useState({});
@@ -20,7 +21,7 @@ const LoginForm = () => {
   const [hasRedirected, setHasRedirected] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
 
-  //  Recovery Codes
+  // Recovery Codes
   const [recoveryCodes, setRecoveryCodes] = useState(null);
   const [showRecoveryModal, setShowRecoveryModal] = useState(false);
 
@@ -43,12 +44,9 @@ const LoginForm = () => {
     setSuccessMessage("");
 
     const newErrors = {};
-    if (!credentials.username.trim()) {
-      newErrors.username = "Username is required";
-    }
-    if (!credentials.password) {
-      newErrors.password = "Password is required";
-    }
+    if (!credentials.username.trim()) newErrors.username = "Username is required";
+    if (!credentials.password) newErrors.password = "Password is required";
+
     if (Object.keys(newErrors).length > 0) {
       setErrors(newErrors);
       return;
@@ -56,17 +54,14 @@ const LoginForm = () => {
 
     try {
       const result = await login(credentials.username, credentials.password, rememberMe);
-
       if (result.success) {
         setSuccessMessage("Logging in...");
         setErrorMessage("");
-        // redirect handled by useEffect
       } else {
         setSuccessMessage("");
-        setErrorMessage(result.message);
+        setErrorMessage(result.message || "Invalid credentials");
       }
-    } catch (error) {
-      // Removed console.error
+    } catch {
       setSuccessMessage("");
       setErrorMessage("Something went wrong. Please try again.");
     }
@@ -87,7 +82,7 @@ const LoginForm = () => {
           onChange={onChange}
           className={`w-full px-4 py-3 border ${
             errors.username ? "border-red-500" : "border-gray-600"
-          } bg-gray-700 text-white rounded-lg focus:ring-2 focus:ring-blue-500`}
+          } bg-white text-black rounded-lg focus:ring-2 focus:ring-blue-500`}
           placeholder="Enter your username"
           required
         />
@@ -100,9 +95,9 @@ const LoginForm = () => {
           <label htmlFor="password" className="block text-sm font-medium text-gray-300">
             Password
           </label>
-          <a href="#" className="text-sm text-blue-400 hover:text-blue-300 transition-colors duration-200">
+          <Link href="/forgot-password" className="text-sm text-blue-400 hover:text-blue-300">
             Forgot password?
-          </a>
+          </Link>
         </div>
         <div className="relative">
           <input
@@ -117,163 +112,14 @@ const LoginForm = () => {
             placeholder="Enter your password"
             required
           />
-          {errors.username && <p className="text-red-500 text-sm mt-1">{errors.username}</p>}
-        </div>
-
-        {/* Password */}
-        <div>
-          <div className="flex items-center justify-between mb-2">
-            <label htmlFor="password" className="block text-sm font-medium text-gray-300">
-              Password
-            </label>
-            <Link href="/forgot-password" className="text-sm text-blue-400 hover:text-blue-300">
-              Forgot password?
-            </Link>
-          </div>
-          <div className="relative">
-            <input
-              type={showPassword ? "text" : "password"}
-              name="password"
-              value={credentials.password}
-              onChange={onchange}
-              required
-              disabled={isLoading}
-              className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white pr-10 focus:ring-2 focus:ring-blue-500 outline-none"
-              placeholder="Enter password"
-            />
-            <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200 focus:outline-none"
-              aria-label={showPassword ? "Hide password" : "Show password"}
-            >
-              {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-            </button>
-          </div>
-        </div>
-
-        {/* Remember Me */}
-        <div className="flex items-center">
-          <input
-            id="rememberMe"
-            name="rememberMe"
-            type="checkbox"
-            checked={rememberMe}
-            onChange={(e) => setRememberMe(e.target.checked)}
-            className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-          />
-          <label htmlFor="rememberMe" className="ml-2 block text-sm text-gray-300">
-            Remember me
-          </label>
-        </div>
-
-        {/* Inline messages */}
-        {errorMessage && (
-          <p className="text-red-400 text-sm font-medium text-center mb-2">{errorMessage}</p>
-        )}
-        {successMessage && (
-          <p className="text-green-400 text-sm font-medium text-center mb-2">{successMessage}</p>
-        )}
-
-        {/* Submit */}
-        <button
-          type="submit"
-          disabled={isLoading || isAuthenticated}
-          className="w-full bg-gradient-to-r from-blue-600 to-purple-700 text-white py-3 px-4 rounded-lg font-medium hover:from-blue-700 hover:to-purple-800 transition-all duration-200 flex items-center justify-center disabled:opacity-50"
-        >
-          {isLoading ? "Signing in..." : "Sign in"}
-        </button>
-
-        {/* Sign up link */}
-        <div className="text-center">
-          <span className="text-sm text-gray-300">
-            Don't have an account?{" "}
-            <Link
-              href="/register"
-              className="font-medium text-blue-400 hover:text-blue-300 transition-colors duration-200"
-            >
-              Register
-            </Link>
-          </span>
-        </div>
-      </form>
-
-      {/* ========== RECOVERY CODES MODAL ========== */}
-      {showRecoveryModal && recoveryCodes && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
-          <div className="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md">
-            <h3 className="text-xl font-semibold text-white mb-3">Save your recovery codes</h3>
-            <p className="text-sm text-gray-300 mb-4">
-              These codes will be shown only once.
-              Save them securely.
-            </p>
-
-            <div className="grid grid-cols-2 gap-2 mb-4">
-              {recoveryCodes.map((code, index) => (
-                <div
-                  key={index}
-                  className="bg-gray-800 border border-gray-600 rounded px-3 py-2 text-center text-white font-mono"
-                >
-                  {code}
-                </div>
-              ))}
-            </div>
-
-            <div className="flex gap-3 mb-4">
-              <button
-                type="button"
-                onClick={handleCopy}
-                className="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded"
-              >
-                Copy
-              </button>
-              <button
-                type="button"
-                onClick={handleDownload}
-                className="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded"
-              >
-                Download
-              </button>
-            </div>
-
-            <button
-              onClick={() => setShowRecoveryModal(false)}
-              className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg"
-            >
-              I have saved these codes
-            </button>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-/* =========================
-   Skeleton
-========================= */
-const LoginFormSkeleton = () => (
-  <div className="space-y-6 animate-pulse">
-    <div className="h-12 bg-gray-700 rounded"></div>
-    <div className="h-12 bg-gray-700 rounded"></div>
-    <div className="h-12 bg-gray-700 rounded"></div>
-  </div>
-);
-
-/* =========================
-   Page Wrapper
-========================= */
-export default function LoginPage() {
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-blue-900 flex items-center justify-center p-4">
-      <div className="max-w-md w-full space-y-8">
-        <div className="text-center">
-          <h2 className="text-3xl font-extrabold text-white">Welcome back</h2>
-          <p className="mt-2 text-sm text-gray-300">Sign in to your account</p>
-        </div>
-
-        <div className="bg-gray-800 p-8 rounded-2xl shadow-xl border border-gray-700">
-          <LoginForm />
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200"
+            aria-label={showPassword ? "Hide password" : "Show password"}
+          >
+            {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+          </button>
         </div>
         {errors.password && <p className="text-red-500 text-sm mt-1">{errors.password}</p>}
       </div>
@@ -305,35 +151,9 @@ export default function LoginPage() {
       <button
         type="submit"
         disabled={isAuthenticated}
-        className="w-full bg-gradient-to-r from-blue-600 to-purple-700 text-white py-3 px-4 rounded-lg font-medium hover:from-blue-700 hover:to-purple-800 transition-all duration-200 flex items-center justify-center disabled:opacity-50"
+        className="w-full bg-gradient-to-r from-green-600 to-blue-700 text-white py-3 px-4 rounded-lg font-medium hover:opacity-90 transition-all duration-200 flex items-center justify-center disabled:opacity-50"
       >
-        {isAuthenticated ? (
-          <>
-            <svg
-              className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              ></circle>
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0..."
-              ></path>
-            </svg>
-            Logging in...
-          </>
-        ) : (
-          "Sign in"
-        )}
+        {isAuthenticated ? "Logging in..." : "Sign in"}
       </button>
 
       {/* Sign up link */}
@@ -342,7 +162,7 @@ export default function LoginPage() {
           Don't have an account?{" "}
           <Link
             href="/register"
-            className="font-medium text-blue-400 hover:text-blue-300 transition-colors duration-200"
+            className="font-medium text-green-400 hover:text-green-300 transition-colors duration-200"
           >
             Register
           </Link>
@@ -350,4 +170,38 @@ export default function LoginPage() {
       </div>
     </form>
   );
-};
\ No newline at end of file
+};
+
+/* =========================
+   Skeleton
+========================= */
+const LoginFormSkeleton = () => (
+  <div className="space-y-6 animate-pulse">
+    <div className="h-12 bg-gray-700 rounded"></div>
+    <div className="h-12 bg-gray-700 rounded"></div>
+    <div className="h-12 bg-gray-700 rounded"></div>
+  </div>
+);
+
+/* =========================
+   Page Wrapper
+========================= */
+export default function LoginPage() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-black via-blue-950 to-blue-900 flex items-center justify-center p-4">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
+            SaveBook
+          </h1>
+          <h2 className="text-xl font-semibold text-white mt-2">Login</h2>
+          <p className="mt-1 text-sm text-gray-300">Welcome back, please sign in</p>
+        </div>
+
+        <div className="bg-slate-900 p-8 rounded-lg shadow-lg">
+          <LoginForm /> {/* all logic stays inside here */}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/savebook/app/(auth)/register/page.js b/savebook/app/(auth)/register/page.js
index ddb42e2..3ebb299 100644
--- a/savebook/app/(auth)/register/page.js
+++ b/savebook/app/(auth)/register/page.js
@@ -1,136 +1,35 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import toast from "react-hot-toast";
+import { Eye, EyeOff } from "lucide-react";
 import { useAuth } from "@/context/auth/authContext";
-import { Eye, EyeOff } from 'lucide-react';
-import { Eye, EyeOff } from 'lucide-react';
 
-// Signup Form Component
-export default async function SignupPage() {
+export default function SignupPage() {
   const { register, isAuthenticated } = useAuth();
   const router = useRouter();
 
   const [credentials, setCredentials] = useState({
-    username: '',
-    password: '',
-    confirmPassword: ''
-  });
-  const [errors, setErrors] = useState({
-    username: '',
-    password: '',
-    confirmPassword: ''
+    username: "",
+    password: "",
+    confirmPassword: "",
   });
+  const [errors, setErrors] = useState({});
+  const [globalMessage, setGlobalMessage] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const [usernameMessage, setUsernameMessage] = useState("");
-  const [successMessage, setSuccessMessage] = useState("");
-  const [errorMessage, setErrorMessage] = useState("");
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-
-        // Prevent submission if already authenticated
-        if (isAuthenticated) {
-            router.push("/");
-            return;
-        }
-
-        // Validate and collect errors
-        const newErrors = {};
-
-        if (!credentials.username.trim()) {
-            newErrors.username = 'Username is required';
-        }
-
-        // Prevent submission if already authenticated
-        if (isAuthenticated) {
-            router.push("/");
-            return;
-        }
-
-        // Validate and collect errors
-        const newErrors = {};
 
-        if (!credentials.username.trim()) {
-            newErrors.username = 'Username is required';
-        }
-
-        setIsLoading(true);
-
-        try {
-            // Use the register method from AuthContext
-            const result = await register(
-                credentials.username,
-                credentials.password
-            );
-
-            if (result.success) {
-                toast.success("Account created successfully! 🎉");
-                router.push("/login")
-                // The useEffect will handle the redirect
-            } else {
-                toast.error(result.message || "Registration failed");
-            }
-        } catch (error) {
-            console.error("Registration error:", error);
-
-            // Attempt to extract meaningful error message
-            let errorMessage = "Something went wrong. Please try again.";
-
-            try {
-                // Check if response exists and extract message from JSON
-                if (error.response?.data) {
-                    const data = error.response.data;
-
-                    // Try to get message from JSON response
-                    if (typeof data === 'object' && data !== null) {
-                        if (data.message) {
-                            errorMessage = data.message;
-                        } else if (data.error) {
-                            errorMessage = data.error;
-                        }
-                    }
-                    // If data is a string (HTML), it means we got an error page
-                    else if (typeof data === 'string' && data.includes('<')) {
-                        // HTML response detected, use status code instead
-                        throw new Error('HTML_RESPONSE');
-                    }
-                }
-
-                // Handle HTTP status codes if no JSON message was found
-                if (errorMessage.includes('Something went wrong')) {
-                    if (error.response?.status === 500) {
-                        errorMessage = "Server error. Please try again later.";
-                    } else if (error.response?.status === 400) {
-                        errorMessage = "Invalid registration details. Please check your input.";
-                    }
-                }
-            } catch (parseError) {
-                // If JSON parsing failed or HTML was detected, use status-based message
-                if (error.response?.status === 500) {
-                    errorMessage = "Server error. Please try again later.";
-                } else if (error.response?.status === 400) {
-                    errorMessage = "Invalid registration details. Please check your input.";
-                } else if (error.response?.status) {
-                    errorMessage = `Registration failed with error ${error.response.status}. Please try again.`;
-                } else if (error.message && !error.message.includes('<!DOCTYPE')) {
-                    errorMessage = error.message;
-                }
-            }
+  const onChange = (e) => {
+    setCredentials({ ...credentials, [e.target.name]: e.target.value });
+  };
 
-            toast.error(errorMessage);
-        } finally {
-            setIsLoading(false);
-        }
-    };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
     const newErrors = {};
-    if (!credentials.username.trim()) {
-      newErrors.username = "Username is required";
-    }
+    if (!credentials.username.trim()) newErrors.username = "Username is required";
     if (!credentials.password) {
       newErrors.password = "Password is required";
     } else if (credentials.password.length < 6) {
@@ -144,395 +43,234 @@ export default async function SignupPage() {
 
     if (Object.keys(newErrors).length > 0) {
       setErrors(newErrors);
+      setGlobalMessage("All fields are required");
       return;
     }
 
+    setErrors({});
+    setGlobalMessage("");
     setIsLoading(true);
-    try {
-      const result = await register(credentials.username, credentials.password, credentials.confirmPassword);
 
-      if (result?.success) {
-        setSuccessMessage("Account created successfully! 🎉 Redirecting...");
-        setErrorMessage("");
-        toast.success("Account created successfully! 🎉");
-        setTimeout(() => router.push("/login"), 1500);
-      } else {
-        setSuccessMessage(""); // clear success
-        setErrorMessage(result?.message || "Registration failed");
-        toast.error(result?.message || "Registration failed");
-      }
+    try {
+        const result = await register(credentials.username, credentials.password);
+        if (result?.success) {
+            setGlobalMessage({ text: "Account created successfully!", type: "success" });
+            setTimeout(() => router.push("/login"), 1500);
+        } else {
+            // Username already exists
+            setGlobalMessage({ text: "Account already exists", type: "error" });
+        }
     } catch (error) {
-      console.error("Registration error:", error);
-      toast.error("Something went wrong. Please try again.");
+        // Password mismatch case handled separately
+        if (credentials.password !== credentials.confirmPassword) {
+            setGlobalMessage({ text: "Passwords Mismatched", type: "error" });
+        } else {
+            setGlobalMessage({ text: "Something went wrong. Please try again.", type: "error" });
+        }
     } finally {
-      setIsLoading(false);
+        setIsLoading(false);
     }
-  };
-    return (
-        <form className="space-y-6" onSubmit={handleSubmit}>
-            {/* Username Field */}
-            <div>
-                <label htmlFor="username" className="block text-sm font-medium text-gray-300 mb-2">
-                    Username
-                </label>
-                <input
-                    type="text"
-                    name="username"
-                    id="username"
-                    value={credentials.username}
-                    onChange={onchange}
-                    disabled={isLoading || isAuthenticated}
-                    className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:border-blue-500 transition-all duration-200 outline-none disabled:opacity-50 ${errors.username
-                            ? 'border-red-500 bg-red-900/20 focus:ring-red-500'
-                            : 'border-gray-600 bg-gray-700 text-white focus:ring-blue-500'
-                        }`}
-                    placeholder="Choose a username"
-                    required
-                />
-                {errors.username && (
-                    <p className="mt-1 text-sm text-red-400">{errors.username}</p>
-                )}
-            </div>
+};
 
-            {/* Password Field */}
-            <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
-                    Password
-                </label>
-                <div className="relative">
-                    <input
-                        type={showPassword ? "text" : "password"}
-                        name="password"
-                        id="password"
-                        value={credentials.password}
-                        onChange={onchange}
-                        disabled={isLoading || isAuthenticated}
-                        className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:border-blue-500 transition-all duration-200 outline-none disabled:opacity-50 pr-10 ${errors.password
-                                ? 'border-red-500 bg-red-900/20 focus:ring-red-500'
-                                : 'border-gray-600 bg-gray-700 text-white focus:ring-blue-500'
-                            }`}
-                        placeholder="Create a password"
-                        required
-                    />
-                    <button
-                        type="button"
-                        onClick={() => setShowPassword(!showPassword)}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200 focus:outline-none"
-                        aria-label={showPassword ? "Hide password" : "Show password"}
-                    >
-                        {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-                    </button>
-                </div>
-                {errors.password && (
-                    <p className="mt-1 text-sm text-red-400">{errors.password}</p>
-                )}
-                {!errors.password && (
-                    <p className="mt-1 text-xs text-gray-400">Password must be at least 6 characters long.</p>
-                )}
-            </div>
+  if (isAuthenticated === undefined) {
+    return <SignupFormSkeleton />;
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-black via-blue-950 to-blue-900 text-white flex flex-col">
+      {/* Top Navigation */}
+      <div className="flex justify-end items-center px-6 py-4 space-x-4 text-sm">
+        <Link href="/login" className="hover:text-green-400 transition">Login</Link>
+        <Link href="/register" className="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-4 py-1 rounded-full text-sm font-medium shadow hover:opacity-90 transition">
+          Sign Up
+        </Link>
+      </div>
+
+      {/* Main Form */}
+      <div className="flex-grow flex items-center justify-center px-4">
+        <div className="w-full max-w-md bg-slate-900 p-8 rounded-lg shadow-lg space-y-6">
+          {/* Logo */}
+          <h1 className="text-3xl font-bold text-center bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
+            SaveBook
+          </h1>
+
+          {/* Heading */}
+          <div className="text-center space-y-1">
+            <h2 className="text-xl font-semibold">Create Account</h2>
+            <p className="text-sm text-gray-400">Join us and get started</p>
+          </div>
 
-            {/* Confirm Password Field */}
+          <form className="space-y-6" onSubmit={handleSubmit} noValidate>
+            {/* Username */}
             <div>
-                <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
-                    Confirm Password
-                </label>
-                <div className="relative">
-                    <input
-                        type={showConfirmPassword ? "text" : "password"}
-                        name="confirmPassword"
-                        id="confirmPassword"
-                        value={credentials.confirmPassword}
-                        onChange={onchange}
-                        disabled={isLoading || isAuthenticated}
-                        className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:border-blue-500 transition-all duration-200 outline-none disabled:opacity-50 pr-10 ${errors.confirmPassword
-                                ? 'border-red-500 bg-red-900/20 focus:ring-red-500'
-                                : 'border-gray-600 bg-gray-700 text-white focus:ring-blue-500'
-                            }`}
-                        placeholder="Confirm your password"
-                        required
-                    />
-                    <button
-                        type="button"
-                        onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200 focus:outline-none"
-                        aria-label={showConfirmPassword ? "Hide password" : "Show password"}
-                    >
-                        {showConfirmPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-                    </button>
-                </div>
-                {errors.confirmPassword && (
-                    <p className="mt-1 text-sm text-red-400">{errors.confirmPassword}</p>
-                )}
+              <label htmlFor="username" className="block text-sm font-medium text-gray-300 mb-2">
+                Username
+              </label>
+              <input
+                type="text"
+                name="username"
+                id="username"
+                value={credentials.username}
+                onChange={onChange}
+                disabled={isLoading}
+                className={`w-full px-4 py-3 border rounded-lg outline-none transition-all duration-200 ${
+                  errors.username
+                    ? "border-red-500 bg-red-100 text-black"
+                    : "border-gray-300 bg-white text-black"
+                }`}
+                placeholder="Enter your name"
+                required
+              />
+              {errors.username && <p className="mt-1 text-sm text-red-500">{errors.username}</p>}
             </div>
 
-  // Skeleton loader
-  if (isAuthenticated === undefined) {
-    return (
-        <form className="space-y-6" onSubmit={handleSubmit}>
-            {/* Username Field */}
+            {/* Password */}
             <div>
-                <label htmlFor="username" className="block text-sm font-medium text-gray-300 mb-2">
-                    Username
-                </label>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
+                Password
+              </label>
+              <div className="relative">
                 <input
-                    type="text"
-                    name="username"
-                    id="username"
-                    value={credentials.username}
-                    onChange={onchange}
-                    disabled={isLoading || isAuthenticated}
-                    className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:border-blue-500 transition-all duration-200 outline-none disabled:opacity-50 ${errors.username
-                            ? 'border-red-500 bg-red-900/20 focus:ring-red-500'
-                            : 'border-gray-600 bg-gray-700 text-white focus:ring-blue-500'
-                        }`}
-                    placeholder="Choose a username"
-                    required
+                  type={showPassword ? "text" : "password"}
+                  name="password"
+                  id="password"
+                  value={credentials.password}
+                  onChange={onChange}
+                  disabled={isLoading}
+                  className={`w-full px-4 py-3 border rounded-lg outline-none pr-10 transition-all duration-200 ${
+                    errors.password
+                      ? "border-red-500 bg-red-900/20 text-white"
+                      : "border-gray-600 bg-gray-700 text-white"
+                  }`}
+                  placeholder="Create a password"
+                  required
                 />
-                {errors.username && (
-                    <p className="mt-1 text-sm text-red-400">{errors.username}</p>
-                )}
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200"
+                  aria-label={showPassword ? "Hide password" : "Show password"}
+                >
+                  {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                </button>
+              </div>
+              {errors.password && <p className="mt-1 text-sm text-red-400">{errors.password}</p>}
             </div>
 
-            {/* Password Field */}
+            {/* Confirm Password */}
             <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
-                    Password
-                </label>
-                <div className="relative">
-                    <input
-                        type={showPassword ? "text" : "password"}
-                        name="password"
-                        id="password"
-                        value={credentials.password}
-                        onChange={onchange}
-                        disabled={isLoading || isAuthenticated}
-                        className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:border-blue-500 transition-all duration-200 outline-none disabled:opacity-50 pr-10 ${errors.password
-                                ? 'border-red-500 bg-red-900/20 focus:ring-red-500'
-                                : 'border-gray-600 bg-gray-700 text-white focus:ring-blue-500'
-                            }`}
-                        placeholder="Create a password"
-                        required
-                    />
-                    <button
-                        type="button"
-                        onClick={() => setShowPassword(!showPassword)}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200 focus:outline-none"
-                        aria-label={showPassword ? "Hide password" : "Show password"}
-                    >
-                        {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-                    </button>
-                </div>
-                {errors.password && (
-                    <p className="mt-1 text-sm text-red-400">{errors.password}</p>
-                )}
-                {!errors.password && (
-                    <p className="mt-1 text-xs text-gray-400">Password must be at least 6 characters long.</p>
-                )}
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
+                Confirm Password
+              </label>
+              <div className="relative">
+                <input
+                  type={showConfirmPassword ? "text" : "password"}
+                  name="confirmPassword"
+                  id="confirmPassword"
+                  value={credentials.confirmPassword}
+                  onChange={onChange}
+                  disabled={isLoading}
+                  className={`w-full px-4 py-3 border rounded-lg outline-none pr-10 transition-all duration-200 ${
+                    errors.confirmPassword
+                      ? "border-red-500 bg-red-900/20 text-white"
+                      : "border-gray-600 bg-gray-700 text-white"
+                  }`}
+                  placeholder="Confirm your password"
+                  required
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200"
+                  aria-label={showConfirmPassword ? "Hide password" : "Show password"}
+                >
+                  {showConfirmPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                </button>
+              </div>
+              {errors.confirmPassword && (
+                <p className="mt-1 text-sm text-red-400">{errors.confirmPassword}</p>
+              )}
             </div>
 
-            {/* Confirm Password Field */}
-            <div>
-                <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
-                    Confirm Password
-                </label>
-                <div className="relative">
-                    <input
-                        type={showConfirmPassword ? "text" : "password"}
-                        name="confirmPassword"
-                        id="confirmPassword"
-                        value={credentials.confirmPassword}
-                        onChange={onchange}
-                        disabled={isLoading || isAuthenticated}
-                        className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:border-blue-500 transition-all duration-200 outline-none disabled:opacity-50 pr-10 ${errors.confirmPassword
-                                ? 'border-red-500 bg-red-900/20 focus:ring-red-500'
-                                : 'border-gray-600 bg-gray-700 text-white focus:ring-blue-500'
-                            }`}
-                        placeholder="Confirm your password"
-                        required
-                    />
-                    <button
-                        type="button"
-                        onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200 focus:outline-none"
-                        aria-label={showConfirmPassword ? "Hide password" : "Show password"}
-                    >
-                        {showConfirmPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-                    </button>
+            {/* Global Message Above Button */}
+            {globalMessage?.text && (
+                <div
+                    className={`text-center text-sm font-medium mb-2 ${
+                        globalMessage.type === "success" ? "text-green-400" : "text-red-400"
+                    }`}
+                >
+                    {globalMessage.text}
                 </div>
-                {errors.confirmPassword && (
-                    <p className="mt-1 text-sm text-red-400">{errors.confirmPassword}</p>
-                )}
-            </div>
-
-        <form className="space-y-6" onSubmit={handleSubmit} noValidate>
-          {/* Username */}
-          <div>
-            <label htmlFor="username" className="block text-sm font-medium text-gray-300 mb-2">
-              Username
-            </label>
-            <input
-              type="text"
-              name="username"
-              id="username"
-              value={credentials.username}
-              onChange={onChange}
-              disabled={isLoading || isAuthenticated}
-              className={`w-full px-4 py-3 border ${
-                errors.username ? "border-red-500" : "border-gray-600"
-              } bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500`}
-              placeholder="Choose a username"
-              required
-            />
-            {errors.username && (
-              <p className="text-red-500 text-sm mt-1">{errors.username}</p>
-            )}
-
-            {usernameMessage && !errors.username && (
-              <p className="text-blue-400 text-sm mt-1">{usernameMessage}</p>
             )}
-          </div>
 
-          {/* Password */}
-          <div className="relative">
-            <input
-              type={showPassword ? "text" : "password"}
-              name="password"
-              id="password"
-              value={credentials.password}
-              onChange={onChange}
-              disabled={isLoading || isAuthenticated}
-              className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:border-blue-500 transition-all duration-200 outline-none disabled:opacity-50 pr-10 ${
-                errors.password
-                  ? 'border-red-500 bg-red-900/20 focus:ring-red-500'
-                  : 'border-gray-600 bg-gray-700 text-white focus:ring-blue-500'
-              }`}
-              placeholder="Create a password"
-              required
-            />
+            {/* Submit Button */}
             <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200 focus:outline-none"
-              aria-label={showPassword ? "Hide password" : "Show password"}
+              type="submit"
+              disabled={isLoading}
+              className="w-full py-3 bg-gradient-to-r from-green-600 to-blue-700 text-white rounded-lg font-medium hover:opacity-90 transition disabled:opacity-50"
             >
-                {isLoading ? (
-                    <>
-                        <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
-                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
-                        Registering...
-                    </>
-                ) : (
-                    isAuthenticated ? 'Redirecting...' : 'Create Account'
-                )}
-              {showPassword ? "🙈" : "👁️"}
+              {isLoading ? "Registering..." : "Create Account"}
             </button>
-
-            {/* Login link */}
-            <div className="text-center">
-                <span className="text-sm text-gray-300">
-                    Already have an account?{' '}
-                    <Link
-                        href="/login"
-                        className="font-medium text-green-400 hover:text-green-300"
-                        onClick={(e) => {
-                            if (isLoading || isAuthenticated) {
-                                e.preventDefault();
-                            }
-                        }}
-                    >
-                        Login
-                    </Link>
-                </span>
-            </div>
-        </form>
-    );
+          </form>
+
+          {/* Login Link */}
+          <div className="text-center pt-2">
+            <span className="text-sm text-gray-300">
+              Already have an account?{" "}
+              <Link href="/login" className="font-medium text-green-400 hover:text-green-300">
+                Login
+              </Link>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
-// Signup Skeleton Component for loading state
+// Skeleton Loader Component
 const SignupFormSkeleton = () => {
-    return (
-        <div className="space-y-6">
-            {/* Username Field Skeleton */}
-            <div>
-                <div className="h-5 w-20 bg-gray-700 rounded mb-2 animate-pulse"></div>
-                <div className="h-12 bg-gray-700 rounded-lg animate-pulse"></div>
-            </div>
-
-            {/* Password Field Skeleton */}
-            <div>
-                <div className="h-5 w-20 bg-gray-700 rounded mb-2 animate-pulse"></div>
-                <div className="h-12 bg-gray-700 rounded-lg animate-pulse"></div>
-            </div>
-
-            {/* Confirm Password Field Skeleton */}
-            <div>
-                <div className="h-5 w-32 bg-gray-700 rounded mb-2 animate-pulse"></div>
-                <div className="h-12 bg-gray-700 rounded-lg animate-pulse"></div>
-            </div>
-
-            {/* Button Skeleton */}
-            <div className="h-12 bg-gradient-to-r from-green-600/30 to-blue-700/30 rounded-lg animate-pulse"></div>
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-black via-blue-950 to-blue-900 flex items-center justify-center px-4">
+      <div className="w-full max-w-md bg-slate-900 p-8 rounded-lg shadow-lg space-y-6 animate-pulse">
+        
+        {/* Logo Skeleton */}
+        <div className="h-8 w-32 bg-gradient-to-r from-blue-400 to-purple-500 rounded mx-auto mb-4"></div>
+
+        {/* Heading Skeleton */}
+        <div className="h-6 w-40 bg-gray-600 rounded mx-auto mb-2"></div>
+        <div className="h-4 w-32 bg-gray-600 rounded mx-auto mb-6"></div>
+
+        {/* Username Field Skeleton */}
+        <div>
+          <div className="h-5 w-24 bg-gray-600 rounded mb-2"></div>
+          {/* White box to mimic actual username input */}
+          <div className="h-12 bg-white rounded-lg"></div>
+        </div>
 
-            {/* Sign up link Skeleton */}
-            <div className="flex justify-center">
-                <div className="h-5 w-48 bg-gray-700 rounded animate-pulse"></div>
-            </div>
+        {/* Password Field Skeleton */}
+        <div>
+          <div className="h-5 w-24 bg-gray-600 rounded mb-2"></div>
+          <div className="h-12 bg-gray-700 rounded-lg"></div>
+        </div>
 
-        {/* Confirm Password Field */}
+        {/* Confirm Password Field Skeleton */}
         <div>
-          <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
-            Confirm Password
-          </label>
-          <div className="relative">
-            <input
-              type={showConfirmPassword ? "text" : "password"}
-              name="confirmPassword"
-              id="confirmPassword"
-              value={credentials.confirmPassword}
-              onChange={onChange}
-              disabled={isLoading || isAuthenticated}
-              className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:border-blue-500 transition-all duration-200 outline-none disabled:opacity-50 pr-10 ${
-                errors.confirmPassword
-                  ? 'border-red-500 bg-red-900/20 focus:ring-red-500'
-                  : 'border-gray-600 bg-gray-700 text-white focus:ring-blue-500'
-              }`}
-              placeholder="Confirm your password"
-              required
-            />
-            <button
-              type="button"
-              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-200 focus:outline-none"
-              aria-label={showConfirmPassword ? "Hide password" : "Show password"}
-            >
-              {showConfirmPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-            </button>
-          </div>
-          {errors.confirmPassword && (
-            <p className="mt-1 text-sm text-red-400">{errors.confirmPassword}</p>
-          )}
+          <div className="h-5 w-32 bg-gray-600 rounded mb-2"></div>
+          <div className="h-12 bg-gray-700 rounded-lg"></div>
         </div>
 
-        {/* Login link */}
-        <div className="text-center">
-          <span className="text-sm text-gray-300">
-            Already have an account?{" "}
-            <Link
-              href="/login"
-              className="font-medium text-green-400 hover:text-green-300"
-              onClick={(e) => {
-                if (isLoading || isAuthenticated) {
-                  e.preventDefault();
-                }
-              }}
-            >
-              Login
-            </Link>
-          </span>
+        {/* Global Message Skeleton */}
+        <div className="h-5 w-64 bg-red-400/30 rounded mx-auto"></div>
+
+        {/* Submit Button Skeleton */}
+        <div className="h-12 bg-gradient-to-r from-green-600/30 to-blue-700/30 rounded-lg"></div>
+
+        {/* Login Link Skeleton */}
+        <div className="flex justify-center">
+          <div className="h-5 w-48 bg-gray-600 rounded"></div>
         </div>
-      </form>
-    </form>
+      </div>
+    </div>
   );
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/savebook/app/api/auth/login/route.js b/savebook/app/api/auth/login/route.js
index d0c9cf6..358b56a 100644
--- a/savebook/app/api/auth/login/route.js
+++ b/savebook/app/api/auth/login/route.js
@@ -1,27 +1,26 @@
 import { NextResponse } from "next/server";
 import dbConnect from "@/lib/db/mongodb";
 import User from "@/lib/models/User";
-import { generateAuthToken } from "@/lib/utils/jwtAuth";   // ensure lowercase filename
+import { generateAuthToken } from "@/lib/utils/jwtAuth";
 import { generateRecoveryCodes } from "@/lib/utils/recoveryCodes";
 import bcrypt from "bcryptjs";
 
 export async function POST(request) {
   try {
     await dbConnect();
-    
 
     const { username, password } = await request.json();
     if (
-  !username ||
-  !password ||
-  typeof username !== "string" ||
-  typeof password !== "string"
-) {
-  return NextResponse.json(
-    { success: false, message: "Invalid username or password" },
-    { status: 400 }
-  );
-}
+      !username ||
+      !password ||
+      typeof username !== "string" ||
+      typeof password !== "string"
+    ) {
+      return NextResponse.json(
+        { success: false, message: "Invalid username or password" },
+        { status: 400 }
+      );
+    }
 
     // Find user
     const user = await User.findOne({ username }).select("+password");
@@ -33,17 +32,20 @@ export async function POST(request) {
     }
 
     // Verify password
-    const isPasswordValid = await user.comparePassword(password);
+    const isPasswordValid = await bcrypt.compare(password, user.password);
     if (!isPasswordValid) {
       return NextResponse.json(
-        { error: 'Invalid username or password' },
+        { success: false, message: "Invalid username or password" },
         { status: 401 }
       );
     }
 
-    // Generate token and set cookie
+    // Generate token
     const { authToken } = await generateAuthToken(user._id.toString());
 
+    // Generate recovery codes only on first login (optional)
+    const recoveryCodes = generateRecoveryCodes();
+
     const response = NextResponse.json(
       {
         success: true,
@@ -56,16 +58,15 @@ export async function POST(request) {
             bio: user.bio,
             location: user.location,
           },
-          //  only present on first login
-          recoveryCodes,
+          recoveryCodes, // only if you want to send them
         },
-        message: "Login successful"
+        message: "Login successful",
       },
       { status: 200 }
     );
-    
-    // Set cookie only on success
-    response.cookies.set('authToken', authToken, {
+
+    // Set cookie
+    response.cookies.set("authToken", authToken, {
       httpOnly: true,
       secure: process.env.NODE_ENV === "production",
       sameSite: "lax",
@@ -75,9 +76,10 @@ export async function POST(request) {
 
     return response;
   } catch (error) {
+    console.error("Login error:", error);
     return NextResponse.json(
       { success: false, message: "Internal server error" },
       { status: 500 }
     );
   }
-}
+}
\ No newline at end of file
diff --git a/savebook/components/notes/AddNote.js b/savebook/components/notes/AddNote.js
index 062524c..11a86a6 100644
--- a/savebook/components/notes/AddNote.js
+++ b/savebook/components/notes/AddNote.js
@@ -1,6 +1,6 @@
-"use client"
+"use client";
 import noteContext from '@/context/noteContext';
-import React, { useContext, useState } from 'react'
+import React, { useContext, useState } from 'react';
 import toast from 'react-hot-toast';
 import Modal from '../common/Modal';
 import AudioRecorder from '@/components/AudioRecorder';
@@ -8,602 +8,374 @@ import AudioPlayer from '@/components/AudioPlayer';
 
 // Define Note Templates
 const NOTE_TEMPLATES = {
-    meeting: `Date: [Insert Date]\n\nAttendees: [List attendees]\n\nAgenda:\n- \n- \n- \n\nNotes:\n\nAction Items:\n- \n- `,
-    journal: `What happened today:\n[Write your experiences here]\n\nGoals for tomorrow:\n[List your goals]\n\nGratitude:\n[Write things you're grateful for]`,
-    checklist: `Project: [Project Name]\n\nTasks:\n- [ ] Define project goal\n- [ ] List all tasks\n- [ ] Assign owners\n- [ ] Set deadlines\n- [ ] Plan resources\n- [ ] Review progress\n- [ ] Complete project`
+  meeting: `Date: [Insert Date]\n\nAttendees: [List attendees]\n\nAgenda:\n- \n- \n- \n\nNotes:\n\nAction Items:\n- \n- `,
+  journal: `What happened today:\n[Write your experiences here]\n\nGoals for tomorrow:\n[List your goals]\n\nGratitude:\n[Write things you're grateful for]`,
+  checklist: `Project: [Project Name]\n\nTasks:\n- [ ] Define project goal\n- [ ] List all tasks\n- [ ] Assign owners\n- [ ] Set deadlines\n- [ ] Plan resources\n- [ ] Review progress\n- [ ] Complete project`
 };
 
 export default function Addnote() {
-    const context = useContext(noteContext);
-    const { addNote, notes } = context;
-
-    const [note, setNote] = useState({ title: "", description: "", tag: "" });
-    const [isSubmitting, setIsSubmitting] = useState(false);
-
-    // Modal State
-    const [showModal, setShowModal] = useState(false);
-    const [pendingTemplate, setPendingTemplate] = useState(null);
-    const defaultTags = [
-        "General",
-        "Basic",
-        "Finance",
-        "Grocery",
-        "Office",
-        "Personal",
-        "Work",
-        "Ideas"
-    ];
-    const [images, setImages] = useState([]);
-    const [preview, setPreview] = useState([]);
-    
-    // Audio state management
-    const [audioBlob, setAudioBlob] = useState(null);
-    const [recordedAudioUrl, setRecordedAudioUrl] = useState(null);
-    const [audioData, setAudioData] = useState(null);
-    const [isUploadingAudio, setIsUploadingAudio] = useState(false);
-
-    const handleImageChange = (e) => {
-        const files = Array.from(e.target.files);
-
-        setImages(files);
-        setPreview(files.map(file => URL.createObjectURL(file)));
-    };
-
-
-    const uploadImages = async () => {
-        const formData = new FormData();
-        images.forEach((file) => formData.append("image", file));
-
-        const res = await fetch("/api/upload/user-media", {
-            method: "POST",
-            credentials: "include",
-            body: formData,
-        });
-
-        if (!res.ok) {
-            throw new Error("Image upload failed");
-        }
-
-        const data = await res.json();
-        return Array.isArray(data.imageUrls) ? data.imageUrls : [];
-    };
-
-    // Handle audio recording from AudioRecorder component
-    const handleAudioRecorded = (blob) => {
-        setAudioBlob(blob);
-        // Create temporary URL for preview
-        const url = URL.createObjectURL(blob);
-        setRecordedAudioUrl(url);
-    };
-
-    // Upload audio to API
-    const uploadAudio = async (blob) => {
-        const formData = new FormData();
-        formData.append('audio', blob, 'recording.webm');
-
-        const res = await fetch('/api/upload/audio', {
-            method: 'POST',
-            credentials: 'include',
-            body: formData,
-        });
-
-        if (!res.ok) {
-            // Log full error response for debugging
-            let errorMessage = `HTTP ${res.status}`;
-            const contentType = res.headers.get('content-type');
-            
-            try {
-                // Try to parse as JSON first
-                if (contentType?.includes('application/json')) {
-                    const errorData = await res.json();
-                    errorMessage = errorData.error || errorData.message || errorMessage;
-                } else {
-                    // Fallback to text
-                    const errorText = await res.text();
-                    errorMessage = errorText.slice(0, 200) || errorMessage;
-                }
-            } catch (parseError) {
-                // If parsing fails, use status code
-                console.error('Failed to parse error response:', parseError);
-            }
-            
-            console.error('Audio upload error:', { status: res.status, error: errorMessage });
-            throw new Error(`Audio upload failed: ${errorMessage}`);
-        }
-
-        const data = await res.json();
-        return {
-            url: data.audioUrl,
-            duration: data.duration || 0,
-        };
-    };
-
-    // Clear audio recording
-    const clearAudioRecording = () => {
-        if (recordedAudioUrl) {
-            URL.revokeObjectURL(recordedAudioUrl);
-        }
-        setAudioBlob(null);
-        setRecordedAudioUrl(null);
-        setAudioData(null);
-    };
-
-    const handleSaveNote = async (e) => {
-        e.preventDefault();
-        if (isSubmitting) return;
-
-        setIsSubmitting(true);
-        try {
-            // Upload images
-            const imageUrls = images.length ? await uploadImages() : [];
-
-            // Upload audio if recording exists - REQUIRED before note creation
-            let finalAudioData = null;
-            if (audioBlob) {
-                setIsUploadingAudio(true);
-                try {
-                    finalAudioData = await uploadAudio(audioBlob);
-                } catch (audioError) {
-                    console.error('Audio upload error:', audioError);
-                    toast.error(audioError.message || 'Audio upload failed. Please try again.');
-                    // Abort note creation - do NOT save note without audio
-                    return;
-                }
-            }
-
-            // Save note with audio data (if available)
-            await addNote(
-                note.title,
-                note.description,
-                note.tag,
-                imageUrls,
-                finalAudioData // Pass audio data (or null)
-            );
-
-            toast.success("Note has been saved");
-            setNote({ title: "", description: "", tag: "" });
-            setImages([]);
-            setPreview([]);
-            clearAudioRecording(); // Only clear after successful save
-        } catch (error) {
-            console.error('Error saving note:', error);
-            toast.error(error.message || "Failed to save note. Please try again.");
-        } finally {
-            setIsSubmitting(false);
-            setIsUploadingAudio(false);
+  const context = useContext(noteContext);
+  const { addNote, notes } = context;
+
+  const [note, setNote] = useState({ title: "", description: "", tag: "" });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Modal State
+  const [showModal, setShowModal] = useState(false);
+  const [pendingTemplate, setPendingTemplate] = useState(null);
+
+  const defaultTags = [
+    "General", "Basic", "Finance", "Grocery", "Office",
+    "Personal", "Work", "Ideas"
+  ];
+
+  const [images, setImages] = useState([]);
+  const [preview, setPreview] = useState([]);
+
+  // Audio state management
+  const [audioBlob, setAudioBlob] = useState(null);
+  const [recordedAudioUrl, setRecordedAudioUrl] = useState(null);
+  const [audioData, setAudioData] = useState(null);
+  const [isUploadingAudio, setIsUploadingAudio] = useState(false);
+
+  const handleImageChange = (e) => {
+    const files = Array.from(e.target.files);
+    setImages(files);
+    setPreview(files.map(file => URL.createObjectURL(file)));
+  };
+
+  const uploadImages = async () => {
+    const formData = new FormData();
+    images.forEach((file) => formData.append("image", file));
+
+    const res = await fetch("/api/upload/user-media", {
+      method: "POST",
+      credentials: "include",
+      body: formData,
+    });
+
+    if (!res.ok) throw new Error("Image upload failed");
+
+    const data = await res.json();
+    return Array.isArray(data.imageUrls) ? data.imageUrls : [];
+  };
+
+  // Handle audio recording
+  const handleAudioRecorded = (blob) => {
+    setAudioBlob(blob);
+    const url = URL.createObjectURL(blob);
+    setRecordedAudioUrl(url);
+  };
+
+  const uploadAudio = async (blob) => {
+    const formData = new FormData();
+    formData.append('audio', blob, 'recording.webm');
+
+    const res = await fetch('/api/upload/audio', {
+      method: 'POST',
+      credentials: 'include',
+      body: formData,
+    });
+
+    if (!res.ok) {
+      let errorMessage = `HTTP ${res.status}`;
+      const contentType = res.headers.get('content-type');
+      try {
+        if (contentType?.includes('application/json')) {
+          const errorData = await res.json();
+          errorMessage = errorData.error || errorData.message || errorMessage;
+        } else {
+          const errorText = await res.text();
+          errorMessage = errorText.slice(0, 200) || errorMessage;
         }
-    };
-
-
+      } catch (parseError) {
+        console.error('Failed to parse error response:', parseError);
+      }
+      console.error('Audio upload error:', { status: res.status, error: errorMessage });
+      throw new Error(`Audio upload failed: ${errorMessage}`);
+    }
 
+    const data = await res.json();
+    return { url: data.audioUrl, duration: data.duration || 0 };
+  };
 
+  const clearAudioRecording = () => {
+    if (recordedAudioUrl) URL.revokeObjectURL(recordedAudioUrl);
+    setAudioBlob(null);
+    setRecordedAudioUrl(null);
+    setAudioData(null);
+  };
 
-    const onchange = (e) => {
-        setNote({ ...note, [e.target.name]: e.target.value });
-    }
+  const handleSaveNote = async (e) => {
+    e.preventDefault();
+    if (isSubmitting) return;
 
-    // Apply Template Handler
-    const applyTemplate = (templateKey) => {
-        const template = NOTE_TEMPLATES[templateKey];
-        if (!template) return;
+    setIsSubmitting(true);
+    try {
+      const imageUrls = images.length ? await uploadImages() : [];
 
-        // If description is empty, directly apply the template
-        if (!note.description.trim()) {
-            setNote({ ...note, description: template });
-            toast.success(`${templateKey.charAt(0).toUpperCase() + templateKey.slice(1)} template applied!`);
-        } else {
-            // If description has content, trigger modal
-            setPendingTemplate({ key: templateKey, content: template });
-            setShowModal(true);
+      let finalAudioData = null;
+      if (audioBlob) {
+        setIsUploadingAudio(true);
+        try {
+          finalAudioData = await uploadAudio(audioBlob);
+        } catch (audioError) {
+          console.error('Audio upload error:', audioError);
+          toast.error(audioError.message || 'Audio upload failed. Please try again.');
+          return;
         }
+      }
+
+      await addNote(
+        note.title,
+        note.description,
+        note.tag,
+        imageUrls,
+        finalAudioData
+      );
+
+      toast.success("Note has been saved");
+      setNote({ title: "", description: "", tag: "" });
+      setImages([]);
+      setPreview([]);
+      clearAudioRecording();
+    } catch (error) {
+      console.error('Error saving note:', error);
+      toast.error(error.message || "Failed to save note. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+      setIsUploadingAudio(false);
     }
-
-    const confirmTemplateChange = () => {
-        if (pendingTemplate) {
-            setNote({ ...note, description: pendingTemplate.content });
-            toast.success(`${pendingTemplate.key.charAt(0).toUpperCase() + pendingTemplate.key.slice(1)} template applied!`);
-            handleCloseModal();
-        }
+  };
+
+  // Corrected handler name
+  const handleChange = (e) => {
+    setNote({ ...note, [e.target.name]: e.target.value });
+  };
+
+  // Template handling
+  const applyTemplate = (templateKey) => {
+    const template = NOTE_TEMPLATES[templateKey];
+    if (!template) return;
+
+    if (!note.description.trim()) {
+      setNote({ ...note, description: template });
+      toast.success(`${templateKey.charAt(0).toUpperCase() + templateKey.slice(1)} template applied!`);
+    } else {
+      setPendingTemplate({ key: templateKey, content: template });
+      setShowModal(true);
     }
+  };
 
-    const handleCloseModal = () => {
-        setShowModal(false);
-        setPendingTemplate(null);
+  const confirmTemplateChange = () => {
+    if (pendingTemplate) {
+      setNote({ ...note, description: pendingTemplate.content });
+      toast.success(`${pendingTemplate.key.charAt(0).toUpperCase() + pendingTemplate.key.slice(1)} template applied!`);
+      handleCloseModal();
     }
-    // Collect unique tags from existing notes
-    const userTags = Array.from(
-        new Set(
-            (Array.isArray(notes) ? notes : [])
-                .map(note => note.tag)
-                .filter(tag => tag && tag.trim() !== "")
-        )
-    );
-
-    const allTags = Array.from(new Set([...defaultTags, ...userTags]));
-    const isFormValid = note.title.length >= 5 && note.description.length >= 5 && note.tag.length >= 2;
-
-    return (
-        <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-18 p-2">
-            <div className="max-w-4xl mx-auto">
-                {/* Header */}
-                <div className="text-center mb-8">
-                    <h1 className="text-4xl font-bold text-gray-800 dark:text-white mb-2">
-                        Notebook on the Cloud
-                    </h1>
-                    <p className="text-gray-600 dark:text-gray-300">
-                        Your notes, securely stored and accessible anywhere
-                    </p>
-                </div>
+  };
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+    setPendingTemplate(null);
+  };
+
+  const userTags = Array.from(
+    new Set(
+      (Array.isArray(notes) ? notes : [])
+        .map(note => note.tag)
+        .filter(tag => tag && tag.trim() !== "")
+    )
+  );
+
+  const allTags = Array.from(new Set([...defaultTags, ...userTags]));
+  const isFormValid = note.title.length >= 5 && note.description.length >= 5 && note.tag.length >= 2;
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-18 p-2">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <h1 className="text-4xl font-bold text-gray-800 dark:text-white mb-2">
+            Notebook on the Cloud
+          </h1>
+          <p className="text-gray-600 dark:text-gray-300">
+            Your notes, securely stored and accessible anywhere
+          </p>
+        </div>
 
-                {/* Add Note Form */}
-                <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 mb-8">
-                    <h2 className="text-2xl font-semibold text-gray-800 dark:text-white mb-6">
-                        Add New Note
-                    </h2>
-
-                    <form onSubmit={handleSaveNote} className="space-y-6">
-                        {/* Title Field */}
-                        <div>
-                            <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                Title
-                            </label>
-                            <input
-                                type="text"
-                                name="title"
-                                id="title"
-                                value={note.title}
-                                onChange={onchange}
-                                className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-200 outline-none"
-                                placeholder="Enter a descriptive title for your note"
-                                minLength={5}
-                                required
-                            />
-                            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                                Minimum 5 characters required
-                            </p>
-                        </div>
+        {/* Add Note Form */}
+        <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 mb-8">
+          <h2 className="text-2xl font-semibold text-gray-800 dark:text-white mb-6">
+            Add New Note
+          </h2>
+
+          <form onSubmit={handleSaveNote} className="space-y-6">
+            {/* Title Field */}
+            <div>
+              <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Title
+              </label>
+              <input
+                type="text"
+                name="title"
+                id="title"
+                value={note.title}
+                onChange={handleChange}
+                className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-200 outline-none"
+                placeholder="Enter a descriptive title for your note"
+                minLength={5}
+                required
+              />
+              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                Minimum 5 characters required
+              </p>
+            </div>
 
                         {/* Description Field with Templates */}
-                        <div>
-                            <div className="flex items-center justify-between mb-2">
-                                <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    Description
-                                </label>
-                                <span className="text-xs text-gray-600 dark:text-gray-400">
-                                    Quick Templates:
-                                </span>
-                            </div>
-
-                            {/* Templates Row - Quick Start Buttons */}
-                            <div className="flex flex-wrap gap-2 mb-4 pb-4 border-b border-gray-200 dark:border-gray-700">
-                                <button
-                                    type="button"
-                                    onClick={() => applyTemplate('meeting')}
-                                    className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
-                                    title="Auto-fill with Meeting Notes template"
-                                >
-                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                    </svg>
-                                    Meeting
-                                </button>
-
-                                <button
-                                    type="button"
-                                    onClick={() => applyTemplate('journal')}
-                                    className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
-                                    title="Auto-fill with Daily Journal template"
-                                >
-                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C6.5 6.253 2 10.998 2 17s4.5 10.747 10 10.747c5.5 0 10-4.998 10-10.747 0-6.002-4.5-10.747-10-10.747z" />
-                                    </svg>
-                                    Daily
-                                </button>
-
-                                <button
-                                    type="button"
-                                    onClick={() => applyTemplate('checklist')}
-                                    className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
-                                    title="Auto-fill with Project Checklist template"
-                                >
-                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
-                                    </svg>
-                                    Checklist
-                                </button>
-                            </div>
-
-                            <textarea
-                                name="description"
-                                id="description"
-                                rows="6"
-                                value={note.description}
-                                onChange={onchange}
-                                className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 resize-none transition-all duration-200 outline-none"
-                                placeholder="Write your note content here... or click a template button above to get started!"
-                                minLength={5}
-                                required
-                            />
-                            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                                Minimum 5 characters required. Click template buttons to auto-fill with pre-formatted structures.
-                            </p>
-                        </div>
-                        {/* Audio */}
-                        <div>
-                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-                                Attach Audio (Optional)
-                            </label>
-
-                            {/* Audio Container - Two Column Grid */}
-                            <div className="grid grid-cols-2 gap-4">
-                                {/* Recording Section */}
-                                <div className="border border-gray-300 dark:border-gray-600 rounded-lg p-4 flex flex-col min-h-64">
-                                    <h3 className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-3">🎤 Record</h3>
-                                    
-                                    <div className="flex-1 flex flex-col">
-                                        {!recordedAudioUrl && (
-                                            <div className="flex-1 flex items-center justify-center">
-                                                <div className="w-full bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
-                                                    <AudioRecorder onRecordingComplete={handleAudioRecorded} />
-                                                </div>
-                                            </div>
-                                        )}
-
-                                        {recordedAudioUrl && (
-                                            <div className="flex-1 flex flex-col items-center justify-center">
-                                                <div className="w-full p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700/50 rounded-lg">
-                                                    <div className="flex items-start gap-2 mb-2">
-                                                        <span className="flex-shrink-0 w-4 h-4 rounded-full bg-green-500 dark:bg-green-400 flex items-center justify-center mt-0.5">
-                                                            <svg className="w-2.5 h-2.5 text-white" fill="currentColor" viewBox="0 0 20 20">
-                                                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                                                            </svg>
-                                                        </span>
-                                                        <div className="flex-1 min-w-0">
-                                                            <p className="text-xs font-medium text-green-700 dark:text-green-400">Recording ready</p>
-                                                        </div>
-                                                    </div>
-                                                    <audio controls src={recordedAudioUrl} className="w-full h-8 mb-2" />
-                                                    <button
-                                                        type="button"
-                                                        onClick={clearAudioRecording}
-                                                        className="w-full text-xs px-2 py-1.5 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50 rounded transition-colors font-medium"
-                                                    >
-                                                        Remove
-                                                    </button>
-                                                </div>
-                                            </div>
-                                        )}
-                                    </div>
-
-                                {/* Upload Section */}
-                                <div className="border border-gray-300 dark:border-gray-600 rounded-lg p-4 flex flex-col min-h-64">
-                                    <h3 className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-3">📁 Upload</h3>
-                                    
-                                    <div className="flex-1 flex flex-col items-center justify-center">
-                                        {audioBlob ? (
-                                            // File Selected State
-                                            <div className="w-full p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700/50 rounded-lg">
-                                                <div className="flex items-start gap-2 mb-2">
-                                                    <span className="flex-shrink-0 w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-400 flex items-center justify-center mt-0.5">
-                                                        <svg className="w-2.5 h-2.5 text-white" fill="currentColor" viewBox="0 0 20 20">
-                                                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                                                        </svg>
-                                                    </span>
-                                                    <div className="flex-1 min-w-0">
-                                                        <p className="text-xs font-medium text-blue-700 dark:text-blue-400">File ready</p>
-                                                        <p className="text-xs text-gray-700 dark:text-gray-300 truncate break-all font-medium mt-1" title={audioBlob.name || 'Audio file'}>
-                                                            {audioBlob.name || 'Audio file'}
-                                                        </p>
-                                                    </div>
-                                                </div>
-                                                <button
-                                                    type="button"
-                                                    onClick={() => setAudioBlob(null)}
-                                                    className="w-full text-xs px-2 py-1.5 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50 rounded transition-colors font-medium mt-2"
-                                                >
-                                                    Clear Selection
-                                                </button>
-                                            </div>
-                                        ) : (
-                                            // Empty State with Drop Zone
-                                            <div className="w-full">
-                                                <label htmlFor="audioFile" className="flex flex-col items-center justify-center p-4 border-2 border-dashed border-gray-300 dark:border-gray-500 rounded-lg bg-gray-50 dark:bg-gray-700/30 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors">
-                                                    <svg className="w-6 h-6 text-gray-400 dark:text-gray-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 16m0 0l-3.5-3.5m3.5 3.5l3.5-3.5m-7-4.5h7a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2h7m0-2v2m0 0h2m-2 0H8" />
-                                                    </svg>
-                                                    <p className="text-xs font-medium text-gray-600 dark:text-gray-400">Choose File</p>
-                                                    <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">or drag and drop</p>
-                                                </label>
-                                                <input
-                                                    type="file"
-                                                    id="audioFile"
-                                                    accept="audio/*"
-                                                    onChange={(e) => {
-                                                        const file = e.target.files?.[0];
-                                                        if (file) setAudioBlob(file);
-                                                    }}
-                                                    className="hidden"
-                                                />
-                                            </div>
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        {/* Image Upload */}
-                        <div>
-                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                            Attach Images
-                        </label>
-
-                        <input
-                            type="file"
-                            accept="image/*"
-                            capture="environment"
-                            multiple
-                            onChange={handleImageChange}
-                            className="block w-full text-sm text-gray-500
-                            file:mr-4 file:py-2 file:px-4
-                            file:rounded-lg file:border-0
-                            file:text-sm file:font-semibold
-                            file:bg-blue-50 file:text-blue-700
-                            hover:file:bg-blue-100"
-                        />
-
-                        {preview.length > 0 && (
-                            <div className="flex gap-3 mt-3 flex-wrap">
-                            {preview.map((src, index) => (
-                                <img
-                                key={index}
-                                src={src}
-                                alt="preview"
-                                className="w-24 h-24 object-cover rounded-lg border"
-                                />
-                            ))}
-                            </div>
-                        )}
-                        </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                        {/* Tag Field */}
-                        <div>
-                            <label htmlFor="tag" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                Tag
-                            </label>
-                            <input
-                                list="datalistOptions"
-                                name="tag"
-                                id="tag"
-                                value={note.tag}
-                                onChange={onchange}
-                                className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-200 outline-none"
-                                placeholder="Select or type a tag"
-                                minLength={2}
-                                required
-                            />
-                            <datalist id="datalistOptions" className="bg-white dark:bg-gray-700">
-                                {allTags.map((tag, index) => (
-                                    <option
-                                        key={index}
-                                        value={tag}
-                                        className="bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                                    />
-                                ))}
-                            </datalist>
-                            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                                Choose from suggestions or type your own (min. 2 chars)
-                            </p>
-                        </div>
-
-                        {/* Submit Button */}
-                        <button
-                            type="submit"
-                            disabled={!isFormValid || isSubmitting || isUploadingAudio}
-                            className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-medium py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-[1.02] disabled:transform-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
-                        >
-                            <span className="flex items-center justify-center">
-                                {isSubmitting || isUploadingAudio ? (
-                                    <>
-                                        <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                        </svg>
-                                        {isUploadingAudio ? 'Uploading Audio...' : 'Adding Note...'}
-                                    </>
-                                ) : (
-                                    <>
-                                        <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-                                        </svg>
-                                        Add Note
-                                    </>
-                                )}
-                            </span>
-                        </button>
-                    </form>
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Description
+                </label>
+                <span className="text-xs text-gray-600 dark:text-gray-400">Quick Templates:</span>
+              </div>
+
+              {/* Template Buttons */}
+              <div className="flex flex-wrap gap-2 mb-4 pb-4 border-b border-gray-200 dark:border-gray-700">
+                <button type="button" onClick={() => applyTemplate('meeting')} className="px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
+                  Meeting
+                </button>
+                <button type="button" onClick={() => applyTemplate('journal')} className="px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
+                  Daily
+                </button>
+                <button type="button" onClick={() => applyTemplate('checklist')} className="px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
+                  Checklist
+                </button>
+              </div>
+
+              <textarea
+                name="description"
+                id="description"
+                rows="6"
+                value={note.description}
+                onChange={handleChange}
+                className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white resize-none"
+                placeholder="Write your note content here..."
+                minLength={5}
+                required
+              />
+              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                Minimum 5 characters required. Click template buttons to auto-fill with pre-formatted structures.
+              </p>
+            </div>
+
+            {/* Audio Section */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Attach Audio (Optional)</label>
+              <div className="grid grid-cols-2 gap-4">
+                {/* Recording */}
+                <div className="border border-gray-300 dark:border-gray-600 rounded-lg p-4">
+                  {!recordedAudioUrl ? (
+                    <AudioRecorder onRecordingComplete={handleAudioRecorded} />
+                  ) : (
+                    <div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
+                      <audio controls src={recordedAudioUrl} className="w-full h-8 mb-2" />
+                      <button type="button" onClick={clearAudioRecording} className="w-full text-xs px-2 py-1.5 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded">
+                        Remove
+                      </button>
+                    </div>
+                  )}
                 </div>
 
-                {/* Quick Tips */}
-                <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-6">
-                    <h3 className="text-lg font-semibold text-blue-800 dark:text-blue-300 mb-3 flex items-center">
-                        <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                        </svg>
-                        Quick Tips
-                    </h3>
-                    <ul className="text-blue-700 dark:text-blue-400 text-sm space-y-2">
-                        <li className="flex items-start">
-                            <span className="mr-2">•</span>
-                            Use descriptive titles to easily find your notes later
-                        </li>
-                        <li className="flex items-start">
-                            <span className="mr-2">•</span>
-                            Click template buttons (Meeting, Daily, Checklist) to auto-fill note structure
-                        </li>
-                        <li className="flex items-start">
-                            <span className="mr-2">•</span>
-                            Tags help organize and categorize your notes effectively
-                        </li>
-                        <li className="flex items-start">
-                            <span className="mr-2">•</span>
-                            All fields require at least 5 characters for better note quality
-                        </li>
-                    </ul>
+                {/* Upload */}
+                <div className="border border-gray-300 dark:border-gray-600 rounded-lg p-4">
+                  {audioBlob ? (
+                    <div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+                      <p className="text-xs font-medium text-blue-700 dark:text-blue-400">File ready</p>
+                      <button type="button" onClick={() => setAudioBlob(null)} className="w-full text-xs px-2 py-1.5 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded mt-2">
+                        Clear Selection
+                      </button>
+                    </div>
+                  ) : (
+                    <div>
+                      <input type="file" id="audioFile" accept="audio/*" onChange={(e) => { const file = e.target.files?.[0]; if (file) setAudioBlob(file); }} />
+                    </div>
+                  )}
                 </div>
+              </div>
             </div>
-            {/* Confirmation Modal */}
-            <Modal
-                isOpen={showModal}
-                onClose={handleCloseModal}
-                title="Replace Content?"
-                footer={
-                    <>
-                        <button
-                            onClick={handleCloseModal}
-                            className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
-                        >
-                            Cancel
-                        </button>
-                        <button
-                            onClick={confirmTemplateChange}
-                            className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors shadow-sm"
-                        >
-                            Confirm Replacement
-                        </button>
-                    </>
-                }
-            >
-                <div className="space-y-3">
-                    <p>
-                        Are you sure you want to replace your current note content with the
-                        <span className="font-semibold text-blue-600 dark:text-blue-400"> {pendingTemplate?.key} </span>
-                        template?
-                    </p>
-                    <p className="text-sm text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-3 rounded-lg border border-red-100 dark:border-red-800">
-                        ⚠️ This action cannot be undone. Your current description will be overwritten.
-                    </p>
+
+            {/* Image Upload */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Attach Images</label>
+              <input type="file" accept="image/*" multiple onChange={handleImageChange} />
+              {preview.length > 0 && (
+                <div className="flex gap-3 mt-3 flex-wrap">
+                  {preview.map((src, index) => (
+                    <img key={index} src={src} alt="preview" className="w-24 h-24 object-cover rounded-lg border" />
+                  ))}
                 </div>
-            </Modal>
-        </div>
-    )
-}
+              )}
+            </div>
 
+            {/* Tag Field */}
+            <div>
+              <label htmlFor="tag" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tag</label>
+              <input
+                list="datalistOptions"
+                name="tag"
+                id="tag"
+                value={note.tag}
+                onChange={handleChange}
+                className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                placeholder="Select or type a tag"
+                minLength={2}
+                required
+              />
+              <datalist id="datalistOptions">
+                {allTags.map((tag, index) => <option key={index} value={tag} />)}
+              </datalist>
+            </div>
 
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={!isFormValid || isSubmitting || isUploadingAudio}
+              className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-medium py-3 px-6 rounded-lg"
+            >
+              {isSubmitting || isUploadingAudio ? (isUploadingAudio ? "Uploading Audio..." : "Adding Note...") : "Add Note"}
+            </button>
+          </form>
+        </div>
 
+        {/* Quick Tips */}
+        <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-6">
+          <h3 className="text-lg font-semibold text-blue-800 dark:text-blue-300 mb-3">Quick Tips</h3>
+          <ul className="text-blue-700 dark:text-blue-400 text-sm space-y-2">
+            <li>• Use descriptive titles to easily find your notes later</li>
+            <li>• Click template buttons to auto-fill note structure</li>
+            <li>• Tags help organize and categorize your notes effectively</li>
+            <li>• All fields require at least 5 characters for better note quality</li>
+          </ul>
+        </div>
+      </div>
+
+      {/* Confirmation Modal */}
+      <Modal
+        isOpen={showModal}
+        onClose={handleCloseModal}
+        title="Replace Content?"
+        footer={
+          <>
+            <button onClick={handleCloseModal} className="px-4 py-2 text-sm font-medium bg-white dark:bg-gray-700 border rounded-lg">Cancel</button>
+            <button onClick={confirmTemplateChange} className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg">Confirm Replacement</button>
+          </>
+        }
+      >
+        <p>Are you sure you want to replace your current note content with the <span className="font-semibold">{pendingTemplate?.key}</span> template?</p>
+        <p className="text-sm text-red-500 bg-red-50 dark:bg-red-900/20 p-3 rounded-lg">⚠️ This action cannot be undone.</p>
+      </Modal>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/savebook/context/auth/AuthState.js b/savebook/context/auth/AuthState.js
index 3f49950..a7df7a2 100644
--- a/savebook/context/auth/AuthState.js
+++ b/savebook/context/auth/AuthState.js
@@ -56,28 +56,6 @@ const AuthProvider = ({ children }) => {
         credentials: "include", // keep cookie
         });
 
-<<<<<<< HEAD
-            const data = await response.json();
-            
-            if (data.success) {
-                setUser(data.data.user);
-                setIsAuthenticated(true);
-                return { success: true, message: data.message,recoveryCodes: data.data?.recoveryCodes || null };
-            } else {
-                return { 
-                    success: false, 
-                    message: data.message || "Login failed" 
-                };
-            }
-        } catch (error) {
-            console.error("Login error:", error);
-            return { 
-                success: false, 
-                message: "An error occurred during login" 
-            };
-        } finally {
-            setLoading(false);
-=======
         const data = await response.json();
 
         if (response.ok && data.success) {
@@ -94,7 +72,6 @@ const AuthProvider = ({ children }) => {
             success: false,
             message: data.message || "Invalid credentials",
         };
->>>>>>> a61f6ef (Updated login page and update profile page, fix: removal of console logs, restored .env)
         }
     } catch (error) {
         console.error("Login error:", error);
diff --git a/savebook/lib/utils/jwtAuth.js b/savebook/lib/utils/jwtAuth.js
index bd3393c..032f254 100644
--- a/savebook/lib/utils/jwtAuth.js
+++ b/savebook/lib/utils/jwtAuth.js
@@ -1,8 +1,4 @@
-<<<<<<< HEAD:savebook/lib/utils/jwtAuth.js
 import * as jose from 'jose';
-=======
-import * as jose from 'jose'
->>>>>>> a61f6ef (Updated login page and update profile page, fix: removal of console logs, restored .env):savebook/lib/utils/JWT.js
 
 const JWT_SECRET = process.env.ACCESS_TOKEN_SECRET || 'your-secret-key-here';