Email Auth Finished | SQL code done |

backend/index.js

@@ -2,6 +2,7 @@ import express, { json } from "express";
 import cors from "cors";
 import mysql from "mysql2";
 import nodemailer from "nodemailer";
+
 import crypto from "crypto";
 import jwt from "jsonwebtoken";
 
@@ -33,7 +34,7 @@ const transporter = nodemailer.createTransport({
   port: 465,
   auth: {
     user: "campusplug@zohomailcloud.ca", //Zoho email
-    pass: "NzaZ7FFKNh18", //Zoho password
+    pass: "e0YRrNSeJZQd", //Zoho password
   },
 });
 
@@ -74,7 +75,8 @@ app.post("/send-verification", async (req, res) => {
         if (results.length > 0) {
           // Update existing record
           db_con.query(
-            "UPDATE AuthVerification SET VerificationCode = ?, Authenticated = FALSE, Date = CURRENT_TIMESTAMP WHERE Email = ?",
+            `UPDATE AuthVerification SET VerificationCode = ?, Authenticated = FALSE, Date = CURRENT_TIMESTAMP
+            WHERE Email = ?`,
             [verificationCode, email],
             async (err) => {
               if (err) {
@@ -138,7 +140,7 @@ app.post("/verify-code", (req, res) => {
 
   // Check verification code
   db_con.query(
-    "SELECT * FROM AuthVerification WHERE Email = ? AND VerificationCode = ? AND Authenticated = FALSE AND Date > DATE_SUB(NOW(), INTERVAL 15 MINUTE)",
+    "SELECT * FROM AuthVerification WHERE Email = ? AND VerificationCode = ? AND Authenticated = 0 AND Date > DATE_SUB(NOW(), INTERVAL 15 MINUTE)",
     [email, code],
     (err, results) => {
       if (err) {
@@ -179,11 +181,11 @@ app.post("/verify-code", (req, res) => {
 });
 
 // Create a users and Complete user registration after verification
-app.post("/complete-registration", (req, res) => {
+app.post("/complete-signup", (req, res) => {
   const data = req.body;
 
   db_con.query(
-    `SELECT * FROM AuthVerification WHERE Email = ${data.email} AND Authenticated = 1`,
+    `SELECT * FROM AuthVerification WHERE Email = '${data.email}' AND Authenticated = 1;`,
     (err, results) => {
       if (err) {
         console.error("Database error:", err);
@@ -196,7 +198,7 @@ app.post("/complete-registration", (req, res) => {
       // Create the user
       db_con.query(
         `INSERT INTO User (Name, Email, UCID, Password, Phone, Address)
-        VALUES (${data.name}, ${data.email}, ${data.UCID}, ${data.password}, ${data.phone}, ${data.address})`,
+        VALUES ('${data.name}', '${data.email}', '${data.UCID}', '${data.password}', '${data.phone}', '${data.address}')`,
         (err, result) => {
           if (err) {
             console.error("Error creating user:", err);
@@ -215,7 +217,7 @@ app.post("/complete-registration", (req, res) => {
 
               // Delete verification record
               db_con.query(
-                `DELETE FROM AuthVerification WHERE Email = ${data.email}`,
+                `DELETE FROM AuthVerification WHERE Email = '${data.email}'`,
                 (deleteErr) => {
                   if (deleteErr) {
                     console.error("Error deleting verification:", deleteErr);
@@ -223,7 +225,10 @@ app.post("/complete-registration", (req, res) => {
                   res.json({
                     success: true,
                     message: "User registration completed successfully",
-                    userId: result.insertId,
+                    name: data.name,
+                    email: data.email,
+                    UCID: data.UCID,
+                    phone: data.phone,
                   });
                 },
               );
@@ -243,9 +248,7 @@ function cleanupExpiredCodes() {
       if (err) {
         console.error("Error cleaning up expired codes:", err);
       } else {
-        console.log(
+        console.log(`Cleaned up ${results} expired verification codes`);
-          `Cleaned up ${result.affectedRows} expired verification codes`,
-        );
       }
     },
   );
@@ -253,7 +256,7 @@ function cleanupExpiredCodes() {
 
 // Set up a scheduler to run cleanup every hour
 setInterval(cleanupExpiredCodes, 60 * 60 * 1000);
-//TODO: Fetch all users data:
+//Fetch all users data:
 app.get("/fetch_all_users", (req, res) => {
   db_con.query("SELECT * FROM User;", (err, data) => {
     if (err) {
@@ -264,7 +267,7 @@ app.get("/fetch_all_users", (req, res) => {
   });
 });
 
-//TODO: Fetch One user Data:
+//Fetch One user Data:
 app.post("/find_user", (req, res) => {
   const { email, password } = req.body;
 
@@ -310,7 +313,82 @@ app.post("/find_user", (req, res) => {
 });
 
 //TODO: Update A uses Data:
-//TODO: Delete A uses Data:
+app.post("/update", (req, res) => {
+  const { userId, ...updateData } = req.body;
+
+  if (!userId) {
+    return res.status(400).json({ error: "User ID is required" });
+  }
+
+  // Create query dynamically based on provided fields
+  const updateFields = [];
+  const values = [];
+
+  Object.entries(updateData).forEach(([key, value]) => {
+    // Only include fields that are actually in the User table
+    if (["Name", "Email", "Password", "Phone", "UCID"].includes(key)) {
+      updateFields.push(`${key} = ?`);
+      values.push(value);
+    }
+  });
+
+  if (updateFields.length === 0) {
+    return res.status(400).json({ error: "No valid fields to update" });
+  }
+
+  // Add userId to values array
+  values.push(userId);
+
+  const query = `UPDATE User SET ${updateFields.join(", ")} WHERE UserID = ?`;
+
+  db_con.query(query, values, (err, result) => {
+    if (err) {
+      console.error("Error updating user:", err);
+      return res.status(500).json({ error: "Could not update user" });
+    }
+
+    if (result.affectedRows === 0) {
+      return res.status(404).json({ error: "User not found" });
+    }
+
+    res.json({ success: true, message: "User updated successfully" });
+  });
+});
+
+//Delete A uses Data:
+app.post("/delete", (req, res) => {
+  const { userId } = req.body;
+
+  if (!userId) {
+    return res.status(400).json({ error: "User ID is required" });
+  }
+
+  // Delete from UserRole first (assuming foreign key constraint)
+  db_con.query("DELETE FROM UserRole WHERE UserID = ?", [userId], (err) => {
+    if (err) {
+      console.error("Error deleting user role:", err);
+      return res.status(500).json({ error: "Could not delete user role" });
+    }
+
+    // Then delete from User table
+    db_con.query(
+      "DELETE FROM User WHERE UserID = ?",
+      [userId],
+      (err, result) => {
+        if (err) {
+          console.error("Error deleting user:", err);
+          return res.status(500).json({ error: "Could not delete user" });
+        }
+
+        if (result.affectedRows === 0) {
+          return res.status(404).json({ error: "User not found" });
+        }
+
+        res.json({ success: true, message: "User deleted successfully" });
+      },
+    );
+  });
+});
 
 app.listen(3030, () => {
   console.log(`Running Backend on http://localhost:3030/`);

frontend/index.html

@@ -1,13 +1,17 @@
 <!doctype html>
 <html lang="en">
-  <head>
+    <head>
-    <meta charset="UTF-8" />
+        <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./public/icon.png" />
+        <link
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            rel="icon"
-    <title>Campus Plug</title>
+            type="image/svg+xml"
-  </head>
+            href="./public/icon/favicon.ico"
-  <body>
+        />
-    <div id="root"></div>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script type="module" src="/src/main.jsx"></script>
+        <title>Campus</title>
-  </body>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.jsx"></script>
+    </body>
 </html>

frontend/src/App.jsx

@@ -29,6 +29,11 @@ function App() {
   const [error, setError] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
+  // New verification states
+  const [verificationStep, setVerificationStep] = useState("initial"); // 'initial', 'code-sent', 'verifying'
+  const [tempUserData, setTempUserData] = useState(null);
+  const [verificationCode, setVerificationCode] = useState("");
+
   // Auto-hide image on smaller screens
   useEffect(() => {
     const handleResize = () => {
@@ -38,17 +43,162 @@ function App() {
         setShowImage(true);
       }
     };
-
-    // Initial check
     handleResize();
 
-    // Listen for window resize
     window.addEventListener("resize", handleResize);
 
-    // Cleanup
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
+  // Send verification code
+  const sendVerificationCode = async (userData) => {
+    try {
+      setIsLoading(true);
+      setError("");
+
+      console.log("Sending verification code to:", userData.email);
+
+      // Make API call to send verification code
+      const response = await fetch("http://localhost:3030/send-verification", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email: userData.email,
+          // Add any other required fields
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to send verification code");
+      }
+
+      const result = await response.json();
+
+      if (result.success) {
+        // Store temporary user data
+        setTempUserData(userData);
+        // Move to verification step
+        setVerificationStep("code-sent");
+        console.log("Verification code sent successfully");
+        return true;
+      } else {
+        setError(result.message || "Failed to send verification code");
+        return false;
+      }
+    } catch (err) {
+      console.error("Error sending verification code:", err);
+      setError("Failed to send verification code. Please try again.");
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Verify code
+  const verifyCode = async (code) => {
+    try {
+      setIsLoading(true);
+      setError("");
+
+      console.log("Verifying code:", code);
+
+      // Make API call to verify code
+      const response = await fetch("http://localhost:3030/verify-code", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email: tempUserData.email,
+          code: code,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to verify code");
+      }
+
+      const result = await response.json();
+
+      if (result.success) {
+        console.log("Code verified successfully");
+        // Proceed to complete signup
+        return await completeSignUp(tempUserData);
+      } else {
+        setError(result.message || "Invalid verification code");
+        return false;
+      }
+    } catch (err) {
+      console.error("Error verifying code:", err);
+      setError("Failed to verify code. Please try again.");
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Complete signup
+  const completeSignUp = async (userData) => {
+    try {
+      setIsLoading(true);
+      setError("");
+
+      console.log("Completing signup for:", userData.email);
+      console.log(userData);
+
+      // Make API call to complete signup
+      const response = await fetch("http://localhost:3030/complete-signup", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(userData),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to complete signup");
+      }
+
+      const result = await response.json();
+
+      if (result.success) {
+        // Create user object from API response
+        const newUser = {
+          name: result.name || userData.name,
+          email: result.email || userData.email,
+          UCID: result.UCID || userData.ucid,
+          phone: result.phone || userData.phone,
+        };
+
+        // Set authenticated user
+        setUser(newUser);
+        setIsAuthenticated(true);
+
+        // Save to localStorage to persist across refreshes
+        localStorage.setItem("isAuthenticated", "true");
+        localStorage.setItem("user", JSON.stringify(newUser));
+
+        // Reset verification steps
+        setVerificationStep("initial");
+        setTempUserData(null);
+
+        console.log("Signup completed successfully");
+        return true;
+      } else {
+        setError(result.message || "Failed to complete signup");
+        return false;
+      }
+    } catch (err) {
+      console.error("Error completing signup:", err);
+      setError("Failed to complete signup. Please try again.");
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setIsLoading(true);
@@ -63,31 +213,30 @@ function App() {
       setError("Email and password are required");
       setIsLoading(false);
       return;
+    } else if (!formValues.email.endsWith("@ucalgary.ca")) {
+      setError("Please use your UCalgary email address (@ucalgary.ca)");
+      setIsLoading(false);
+      return;
     }
-
     try {
       if (isSignUp) {
-        // Handle Sign Up
+        // Handle Sign Up with verification
         console.log("Sign Up Form Data:", formValues);
 
-        // You could add API endpoint for registration here
+        // Create a user object with the form data
-        // For now, we'll just simulate a successful registration
         const newUser = {
           name: formValues.name,
           email: formValues.email,
-          ucid: formValues.ucid,
+          UCID: formValues.ucid,
           phone: formValues.phone,
+          password: formValues.password, // This will be needed for the final signup
+          address: "NOT_GIVEN",
+          client: 1,
+          admin: 0,
         };
 
-        // Set authenticated user
+        // Send verification code
-        setUser(newUser);
+        await sendVerificationCode(newUser);
-        setIsAuthenticated(true);
-
-        // Save to localStorage to persist across refreshes
-        localStorage.setItem("isAuthenticated", "true");
-        localStorage.setItem("user", JSON.stringify(newUser));
-
-        console.log("New user registered:", newUser);
       } else {
         // Handle Login with API
         console.log("Login Attempt:", {
@@ -144,10 +293,25 @@ function App() {
     }
   };
 
+  // Handle code verification submission
+  const handleVerifySubmit = async (e) => {
+    e.preventDefault();
+    const code = e.target.verificationCode.value;
+
+    if (!code) {
+      setError("Verification code is required");
+      return;
+    }
+
+    await verifyCode(code);
+  };
+
   const handleLogout = () => {
     // Clear authentication state
     setIsAuthenticated(false);
     setUser(null);
+    setVerificationStep("initial");
+    setTempUserData(null);
 
     // Clear localStorage
     localStorage.removeItem("isAuthenticated");
@@ -159,6 +323,20 @@ function App() {
   const toggleAuthMode = () => {
     setIsSignUp(!isSignUp);
     setError(""); // Clear errors when switching modes
+    setVerificationStep("initial"); // Reset verification step
+  };
+
+  // Resend verification code
+  const handleResendCode = async () => {
+    if (tempUserData) {
+      await sendVerificationCode(tempUserData);
+    }
+  };
+
+  // Back to signup form
+  const handleBackToSignup = () => {
+    setVerificationStep("initial");
+    setError("");
   };
 
   // Login component
@@ -168,9 +346,9 @@ function App() {
       {showImage && (
         <div className="w-1/2 relative">
           <img
-            src="../market.png"
+            src="../market.jpg"
             alt="auth illustration"
-            className="w-full h-full object-cover opacity-75"
+            className="w-full h-full object-scale-down"
           />
           <div className="absolute inset-0"></div>
         </div>
@@ -185,10 +363,18 @@ function App() {
         <div className="w-full max-w-md">
           <div className="mb-8 text-center">
             <h2 className="text-2xl font-bold text-gray-800">
-              {isSignUp ? "Create Account" : "Welcome Back"}
+              {isSignUp
+                ? verificationStep === "initial"
+                  ? "Create Account"
+                  : "Verify Your Email"
+                : "Welcome Back"}
             </h2>
             <p className="mt-2 text-gray-600">
-              {isSignUp ? "Set up your new account" : "Sign in to your account"}
+              {isSignUp
+                ? verificationStep === "initial"
+                  ? "Set up your new account"
+                  : "Enter the verification code sent to your email"
+                : "Sign in to your account"}
             </p>
           </div>
 
@@ -199,132 +385,191 @@ function App() {
               </div>
             )}
 
-            <form onSubmit={handleSubmit} className="space-y-4">
+            {/* Signup or Login Form */}
-              {/* Name field - only for signup */}
+            {(!isSignUp || (isSignUp && verificationStep === "initial")) && (
-              {isSignUp && (
+              <form onSubmit={handleSubmit} className="space-y-4">
+                {/* Name field - only for signup */}
+                {isSignUp && (
+                  <div>
+                    <label
+                      htmlFor="name"
+                      className="block mb-1 text-sm font-medium text-gray-800"
+                    >
+                      Full Name
+                    </label>
+                    <input
+                      type="text"
+                      id="name"
+                      name="name"
+                      placeholder="Enter your name"
+                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                      required={isSignUp}
+                    />
+                  </div>
+                )}
+
+                {isSignUp && (
+                  <div>
+                    <label
+                      htmlFor="ucid"
+                      className="block mb-1 text-sm font-medium text-gray-800"
+                    >
+                      UCID
+                    </label>
+                    <input
+                      type="text"
+                      id="ucid"
+                      name="ucid"
+                      placeholder="1234567"
+                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                      required={isSignUp}
+                    />
+                  </div>
+                )}
+
                 <div>
                   <label
-                    htmlFor="name"
+                    htmlFor="email"
                     className="block mb-1 text-sm font-medium text-gray-800"
                   >
-                    Full Name
+                    Email
+                  </label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    placeholder="your.email@ucalgary.ca"
+                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                    required
+                  />
+                </div>
+
+                {isSignUp && (
+                  <div>
+                    <label
+                      htmlFor="phone"
+                      className="block mb-1 text-sm font-medium text-gray-800"
+                    >
+                      Phone Number
+                    </label>
+                    <input
+                      type="tel"
+                      id="phone"
+                      name="phone"
+                      placeholder="+1(123)456 7890"
+                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                      required={isSignUp}
+                    />
+                  </div>
+                )}
+
+                <div>
+                  <label
+                    htmlFor="password"
+                    className="block mb-1 text-sm font-medium text-gray-800"
+                  >
+                    Password
+                  </label>
+                  <input
+                    type="password"
+                    id="password"
+                    name="password"
+                    placeholder={
+                      isSignUp
+                        ? "Create a secure password"
+                        : "Enter your password"
+                    }
+                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                    required
+                  />
+                </div>
+
+                <div className="pt-4">
+                  <button
+                    type="submit"
+                    disabled={isLoading}
+                    className="w-full px-6 py-2 text-base font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-colors disabled:bg-green-300"
+                  >
+                    {isLoading
+                      ? "Please wait..."
+                      : isSignUp
+                        ? "Create Account"
+                        : "Sign In"}
+                  </button>
+                </div>
+              </form>
+            )}
+
+            {/* Verification Code Form */}
+            {isSignUp && verificationStep === "code-sent" && (
+              <form onSubmit={handleVerifySubmit} className="space-y-4">
+                <div>
+                  <label
+                    htmlFor="verificationCode"
+                    className="block mb-1 text-sm font-medium text-gray-800"
+                  >
+                    Verification Code
                   </label>
                   <input
                     type="text"
-                    id="name"
+                    id="verificationCode"
-                    name="name"
+                    name="verificationCode"
-                    placeholder="Enter your name"
+                    placeholder="Enter the 6-digit code"
                     className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
-                    required={isSignUp}
+                    required
                   />
+                  <p className="mt-1 text-xs text-gray-500">
+                    We've sent a verification code to {tempUserData?.email}
+                  </p>
                 </div>
-              )}
 
-              {isSignUp && (
+                <div className="pt-4">
-                <div>
+                  <button
-                  <label
+                    type="submit"
-                    htmlFor="ucid"
+                    disabled={isLoading}
-                    className="block mb-1 text-sm font-medium text-gray-800"
+                    className="w-full px-6 py-2 text-base font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-colors disabled:bg-green-300"
                   >
-                    UCID
+                    {isLoading ? "Please wait..." : "Verify Code"}
-                  </label>
+                  </button>
-                  <input
-                    type="text"
-                    id="ucid"
-                    name="ucid"
-                    placeholder="1234567"
-                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
-                    required={isSignUp}
-                  />
                 </div>
-              )}
 
-              <div>
+                <div className="flex justify-between mt-4">
-                <label
+                  <button
-                  htmlFor="email"
+                    type="button"
-                  className="block mb-1 text-sm font-medium text-gray-800"
+                    onClick={handleBackToSignup}
-                >
+                    className="text-sm text-gray-600 hover:text-gray-800"
-                  Email
-                </label>
-                <input
-                  type="email"
-                  id="email"
-                  name="email"
-                  placeholder="your.email@ucalgary.ca"
-                  className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
-                  required
-                />
-              </div>
-
-              {isSignUp && (
-                <div>
-                  <label
-                    htmlFor="phone"
-                    className="block mb-1 text-sm font-medium text-gray-800"
                   >
-                    Phone Number
+                    Back to signup
-                  </label>
+                  </button>
-                  <input
+                  <button
-                    type="tel"
+                    type="button"
-                    id="phone"
+                    onClick={handleResendCode}
-                    name="phone"
+                    disabled={isLoading}
-                    placeholder="+1(123)456 7890"
+                    className="text-sm text-green-500 hover:text-green-700"
-                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                  >
-                    required={isSignUp}
+                    Resend code
-                  />
+                  </button>
                 </div>
-              )}
+              </form>
+            )}
 
-              <div>
+            {/* Auth mode toggle */}
-                <label
+            {verificationStep === "initial" && (
-                  htmlFor="password"
+              <div className="mt-6 text-center text-sm text-gray-500">
-                  className="block mb-1 text-sm font-medium text-gray-800"
+                <p>
-                >
+                  {isSignUp
-                  Password
+                    ? "Already have an account?"
-                </label>
+                    : "Don't have an account?"}{" "}
-                <input
+                  <button
-                  type="password"
+                    onClick={toggleAuthMode}
-                  id="password"
+                    type="button"
-                  name="password"
+                    className="text-green-500 font-medium hover:text-green-700"
-                  placeholder={
+                  >
-                    isSignUp
+                    {isSignUp ? "Sign in" : "Sign up"}
-                      ? "Create a secure password"
+                  </button>
-                      : "Enter your password"
+                </p>
-                  }
-                  className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
-                  required
-                />
               </div>
-
+            )}
-              <div className="pt-4">
-                <button
-                  type="submit"
-                  disabled={isLoading}
-                  className="w-full px-6 py-2 text-base font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-colors disabled:bg-green-300"
-                >
-                  {isLoading
-                    ? "Please wait..."
-                    : isSignUp
-                      ? "Create Account"
-                      : "Sign In"}
-                </button>
-              </div>
-            </form>
-
-            <div className="mt-6 text-center text-sm text-gray-500">
-              <p>
-                {isSignUp
-                  ? "Already have an account?"
-                  : "Don't have an account?"}{" "}
-                <button
-                  onClick={toggleAuthMode}
-                  type="button"
-                  className="text-green-500 font-medium hover:text-green-700"
-                >
-                  {isSignUp ? "Sign in" : "Sign up"}
-                </button>
-              </p>
-            </div>
           </div>
         </div>
       </div>

frontend/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

frontend/src/components/Navbar.jsx

@@ -1,18 +1,18 @@
-import { useState } from 'react';
+import { useState } from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import UserDropdown from './UserDropdown';
+import UserDropdown from "./UserDropdown";
-import { Search, Heart } from 'lucide-react';
+import { Search, Heart } from "lucide-react";
 
 const Navbar = ({ onLogout, userName }) => {
-  const [searchQuery, setSearchQuery] = useState('');
+  const [searchQuery, setSearchQuery] = useState("");
-  
+
   const handleSearchChange = (e) => {
     setSearchQuery(e.target.value);
   };
-  
+
   const handleSearchSubmit = (e) => {
     e.preventDefault();
-    console.log('Searching for:', searchQuery);
+    console.log("Searching for:", searchQuery);
     // TODO: Implement search functionality
   };
 
@@ -23,10 +23,17 @@ const Navbar = ({ onLogout, userName }) => {
           {/* Logo */}
           <div className="flex-shrink-0">
             <Link to="/" className="flex items-center">
-              <span className="text-green-600 font-bold text-xl">Campus Plug</span>
+              <img
+                src="/icon/icon-512.png"
+                alt="Campus Plug"
+                className="h-8 px-2"
+              />
+              <span className="hidden md:block text-green-600 font-bold text-xl">
+                Campus Plug
+              </span>
             </Link>
           </div>
-          
+
           {/* Search Bar */}
           <div className="flex-1 max-w-2xl px-4">
             <form onSubmit={handleSearchSubmit} className="w-full">
@@ -44,11 +51,14 @@ const Navbar = ({ onLogout, userName }) => {
               </div>
             </form>
           </div>
-          
+
           {/* User Navigation */}
           <div className="flex items-center space-x-4">
             {/* Favorites Button */}
-            <Link to="/favorites" className="p-2 text-gray-600 hover:text-green-600">
+            <Link
+              to="/favorites"
+              className="p-2 text-gray-600 hover:text-green-600"
+            >
               <Heart className="h-6 w-6" />
             </Link>
             {/* User Profile */}
@@ -60,4 +70,4 @@ const Navbar = ({ onLogout, userName }) => {
   );
 };
 
-export default Navbar;
+export default Navbar;

frontend/src/pages/Home.jsx

@@ -1,74 +1,86 @@
-import { useState } from 'react';
+import { useState } from "react";
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from "react-router-dom";
-import { Tag, Book, Laptop, Sofa, Utensils, Gift, Heart } from 'lucide-react';
+import { Tag, Book, Laptop, Sofa, Utensils, Gift, Heart } from "lucide-react";
 
 const Home = () => {
   const navigate = useNavigate();
   // Same categories
   const categories = [
-    { id: 1, name: 'Textbooks', icon: <Book className="h-5 w-5" /> },
+    { id: 1, name: "Textbooks", icon: <Book className="h-5 w-5" /> },
-    { id: 2, name: 'Electronics', icon: <Laptop className="h-5 w-5" /> },
+    { id: 2, name: "Electronics", icon: <Laptop className="h-5 w-5" /> },
-    { id: 3, name: 'Furniture', icon: <Sofa className="h-5 w-5" /> },
+    { id: 3, name: "Furniture", icon: <Sofa className="h-5 w-5" /> },
-    { id: 4, name: 'Kitchen', icon: <Utensils className="h-5 w-5" /> },
+    { id: 4, name: "Kitchen", icon: <Utensils className="h-5 w-5" /> },
-    { id: 5, name: 'Other', icon: <Gift className="h-5 w-5" /> },
+    { id: 5, name: "Other", icon: <Gift className="h-5 w-5" /> },
   ];
-  
+
   // Same listings data
   const [listings, setListings] = useState([
     {
       id: 0,
-      title: 'Dell XPS 16 Laptop',
+      title: "Dell XPS 16 Laptop",
       price: 850,
-      category: 'Electronics',
+      category: "Electronics",
-      image: 'image1.avif',
+      image: "image1.avif",
-      condition: 'Good',
+      condition: "Good",
-      seller: 'Michael T.',
+      seller: "Michael T.",
-      datePosted: '5d ago',
+      datePosted: "5d ago",
       isFavorite: true,
     },
   ]);
-  
+
   // Toggle favorite status
   const toggleFavorite = (id, e) => {
     e.preventDefault(); // Prevent navigation when clicking the heart icon
     setListings(
       listings.map((listing) =>
-        listing.id === id ? { ...listing, isFavorite: !listing.isFavorite } : listing
+        listing.id === id
-      )
+          ? { ...listing, isFavorite: !listing.isFavorite }
+          : listing,
+      ),
     );
   };
 
   const handleSelling = () => {
-    navigate('/selling');
+    navigate("/selling");
+  };
 
-  }
-  
   return (
     <div>
-      {/* Hero Section */}
+      {/* Hero Section with School Background */}
-      <div className="bg-green-100 py-8 px-4 mb-8 shadow-2xs">
+      <div className="relative py-12 px-4 mb-8 shadow-sm">
-        <div className="max-w-3xl mx-auto text-center">
+        {/* Background Image - Positioned at bottom */}
-          <h1 className="text-3xl font-bold text-gray-800 mb-4">
+        <div className="absolute inset-0 z-0 overflow-hidden bg-black bg-opacity-100">
+          <img
+            src="../public/Ucalgary.png"
+            alt="University of Calgary"
+            className="w-full h-full object-cover object-bottom opacity-50"
+          />
+          {/* Dark overlay for better text readability */}
+        </div>
+
+        {/* Content */}
+        <div className="max-w-2xl mx-auto text-center relative z-1">
+          <h1 className="text-3xl font-bold text-white mb-4">
             Buy and Sell on Campus
           </h1>
-          <p className="text-gray-600 mb-6">
+          <p className="text-white mb-6">
-            The marketplace exclusively for university students. Find everything you need or sell what you don't.
+            The marketplace exclusively for university students. Find everything
+            you need or sell what you don't.
           </p>
-
+          <button
-          <button onClick={handleSelling}
+            onClick={handleSelling}
-          className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-green-400">
+            className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-green-400 transition-colors"
+          >
             Post an Item
           </button>
-          
         </div>
       </div>
-      
+
       {/* Categories */}
-      <div className="mb-8">
+      {/* <div className="mb-8">
         <h2 className="text-xl font-semibold text-gray-800 mb-4">Categories</h2>
         <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
           {categories.map((category) => (
-        
             <button
               key={category.id}
               className="flex flex-col items-center justify-center p-4 bg-white border border-gray-200 hover:border-green-500 hover:shadow-sm"
@@ -76,16 +88,20 @@ const Home = () => {
               <div className="flex items-center justify-center w-12 h-12 bg-green-50 text-green-600 rounded-full mb-2">
                 {category.icon}
               </div>
-              <span className="text-sm font-medium text-gray-700">{category.name}</span>
+              <span className="text-sm font-medium text-gray-700">
+                {category.name}
+              </span>
             </button>
           ))}
         </div>
-      </div>
+      </div> */}
-      
+
       {/* Recent Listings */}
       <div>
-        <h2 className="text-xl font-semibold text-gray-800 mb-4">Recent Listings</h2>
+        <h2 className="text-xl font-semibold text-gray-800 mb-4">
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+          Recent Listings
+        </h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
           {listings.map((listing) => (
             <Link
               key={listing.id}
@@ -93,37 +109,49 @@ const Home = () => {
               className="bg-white border border-gray-200 hover:shadow-md transition-shadow"
             >
               <div className="relative">
-                <img src={listing.image} alt={listing.title} className="w-full h-48 object-cover" />
+                <img
+                  src={listing.image}
+                  alt={listing.title}
+                  className="w-full h-48 object-cover"
+                />
                 <button
                   onClick={(e) => toggleFavorite(listing.id, e)}
                   className="absolute top-2 right-2 p-1 bg-white rounded-full shadow-sm"
                 >
                   <Heart
                     className={`h-5 w-5 ${
-                      listing.isFavorite ? 'text-red-500 fill-red-500' : 'text-gray-400'
+                      listing.isFavorite
+                        ? "text-red-500 fill-red-500"
+                        : "text-gray-400"
                     }`}
                   />
                 </button>
               </div>
-              
+
               <div className="p-4">
                 <div className="flex justify-between items-start mb-2">
                   <h3 className="text-lg font-medium text-gray-800 leading-tight">
                     {listing.title}
                   </h3>
-                  <span className="font-semibold text-green-600">${listing.price}</span>
+                  <span className="font-semibold text-green-600">
+                    ${listing.price}
+                  </span>
                 </div>
-                
+
                 <div className="flex items-center text-sm text-gray-500 mb-3">
                   <Tag className="h-4 w-4 mr-1" />
                   <span>{listing.category}</span>
                   <span className="mx-2">•</span>
                   <span>{listing.condition}</span>
                 </div>
-                
+
                 <div className="flex justify-between items-center pt-2 border-t border-gray-100">
-                  <span className="text-xs text-gray-500">{listing.datePosted}</span>
+                  <span className="text-xs text-gray-500">
-                  <span className="text-sm font-medium text-gray-700">{listing.seller}</span>
+                    {listing.datePosted}
+                  </span>
+                  <span className="text-sm font-medium text-gray-700">
+                    {listing.seller}
+                  </span>
                 </div>
               </div>
             </Link>
@@ -134,4 +162,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Home;