mannpatel/Campus-Plug
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

singup & login now bug free

Browse Source
This commit is contained in:
Mann Patel
2025-03-14 19:54:20 -06:00
parent 03861b5718
commit f67b46b5f7
3 changed files with 314 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
backend/index.js
View File

@@ -2,9 +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";
const app = express();
app.use(cors());
@@ -120,7 +118,7 @@ async function sendVerificationEmail(email, verificationCode) {
await transporter.sendMail({
from: "campusplug@zohomailcloud.ca",
to: email,
subject: "Your Verification Code",
subject: "Campus Plug: Signup Verification Code",
text: `Your verification code is: ${verificationCode}. This code will expire in 15 minutes.`,
html: `<p>Your verification code is: <strong>${verificationCode}</strong></p><p>This code will expire in 15 minutes.</p>`,
});
@@ -215,6 +213,11 @@ app.post("/complete-signup", (req, res) => {
return res.status(500).json({ error: "Could not create role" });
}
db_con.query(
`SELECT * FROM User WHERE Email='${data.Email}'`,
(err, userID),
);
// Delete verification record
db_con.query(
`DELETE FROM AuthVerification WHERE Email = '${data.email}'`,
@@ -225,10 +228,10 @@ app.post("/complete-signup", (req, res) => {
res.json({
success: true,
message: "User registration completed successfully",
userID: userID,
name: data.name,
email: data.email,
UCID: data.UCID,
phone: data.phone,
});
},
);
@@ -248,7 +251,7 @@ function cleanupExpiredCodes() {
if (err) {
console.error("Error cleaning up expired codes:", err);
} else {
console.log(`Cleaned up ${results} expired verification codes`);
console.log(`Cleaned up ${result} expired verification codes`);
}
},
);
@@ -267,22 +270,21 @@ app.get("/fetch_all_users", (req, res) => {
});
});
//Fetch One user Data:
//Fetch One user Data with all fields:
app.post("/find_user", (req, res) => {
const { email, password } = req.body;
const { email } = req.body;
// Input validation
if (!email || !password) {
if (!email) {
return res.status(400).json({
found: false,
error: "Email and password are required",
error: "Email is required",
});
}
// Query to find user with matching email and password
const query = "SELECT * FROM User WHERE email = ? AND password = ?";
db_con.query(query, [email, password], (err, data) => {
const query = "SELECT * FROM User WHERE email = ?";
db_con.query(query, [email], (err, data) => {
if (err) {
console.error("Error finding user:", err);
return res.status(500).json({
@@ -296,11 +298,17 @@ app.post("/find_user", (req, res) => {
console.log(data);
const user = data[0];
// Return user data without sensitive information
// Return all user data except password
return res.json({
found: true,
userID: user.UserID,
name: user.Name,
email: user.Email,
UCID: user.UCID,
phone: user.Phone,
address: user.Address,
// Include any other fields your user might have
// Make sure the field names match exactly with your database column names
});
} else {
// User not found or invalid credentials

32
frontend/src/App.jsx
View File

@@ -16,10 +16,10 @@ import ProductDetail from "./pages/ProductDetail";
function App() {
// Authentication state - initialize from localStorage if available
const [isAuthenticated, setIsAuthenticated] = useState(() => {
return localStorage.getItem("isAuthenticated") === "true";
return sessionStorage.getItem("isAuthenticated") === "true";
});
const [user, setUser] = useState(() => {
const savedUser = localStorage.getItem("user");
const savedUser = sessionStorage.getItem("user");
return savedUser ? JSON.parse(savedUser) : null;
});
@@ -32,7 +32,6 @@ function App() {
// 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(() => {
@@ -166,10 +165,10 @@ function App() {
if (result.success) {
// Create user object from API response
const newUser = {
ID: result.userID,
name: result.name || userData.name,
email: result.email || userData.email,
UCID: result.UCID || userData.ucid,
phone: result.phone || userData.phone,
};
// Set authenticated user
@@ -177,8 +176,8 @@ function App() {
setIsAuthenticated(true);
// Save to localStorage to persist across refreshes
localStorage.setItem("isAuthenticated", "true");
localStorage.setItem("user", JSON.stringify(newUser));
sessionStorage.setItem("isAuthenticated", "true");
sessionStorage.setItem("user", JSON.stringify(newUser));
// Reset verification steps
setVerificationStep("initial");
@@ -265,7 +264,8 @@ function App() {
if (userData && userData.found) {
// Create user object
const userObj = {
name: userData.name || userData.email,
ID: userData.userID,
name: userData.name,
email: userData.email,
// Add any other user data returned from the API
};
@@ -275,8 +275,10 @@ function App() {
setIsAuthenticated(true);
// Save to localStorage to persist across refreshes
localStorage.setItem("isAuthenticated", "true");
localStorage.setItem("user", JSON.stringify(userObj));
sessionStorage.setItem("isAuthenticated", "true");
sessionStorage.setItem("user", JSON.stringify(userObj));
sessionStorage.getItem("user");
console.log("Login successful for:", userData.email);
} else {
@@ -314,8 +316,9 @@ function App() {
setTempUserData(null);
// Clear localStorage
localStorage.removeItem("isAuthenticated");
localStorage.removeItem("user");
//
sessionStorage.removeItem("user");
sessionStorage.removeItem("isAuthenticated");
console.log("User logged out");
};
@@ -592,14 +595,12 @@ function App() {
{isAuthenticated && (
<Navbar onLogout={handleLogout} userName={user?.name} />
)}
<Routes>
{/* Public routes */}
<Route
path="/login"
element={isAuthenticated ? <Navigate to="/" /> : <LoginComponent />}
/>
{/* Protected routes */}
<Route
path="/"
@@ -611,7 +612,6 @@ function App() {
</ProtectedRoute>
}
/>
<Route
path="/product/:id"
element={
@@ -620,7 +620,6 @@ function App() {
</ProtectedRoute>
}
/>
<Route
path="/settings"
element={
@@ -631,7 +630,6 @@ function App() {
</ProtectedRoute>
}
/>
<Route
path="/selling"
element={
@@ -653,7 +651,6 @@ function App() {
</ProtectedRoute>
}
/>
<Route
path="/favorites"
element={
@@ -664,7 +661,6 @@ function App() {
</ProtectedRoute>
}
/>
{/* Redirect to login for any unmatched routes */}
<Route
path="*"

355
frontend/src/pages/Settings.jsx
View File

@@ -1,48 +1,147 @@
import { useState } from 'react';
import { User, Lock, Trash2, History, Search, Shield } from 'lucide-react';
import { useState, useEffect } from "react";
import { User, Lock, Trash2, History, Search, Shield } from "lucide-react";
const Settings = () => {
const [userData, setUserData] = useState({
name: '',
email: '',
phone: '',
ucid: '',
currentPassword: '',
newPassword: '',
confirmPassword: ''
userId: "",
name: "",
email: "",
phone: "",
UCID: "",
address: "",
currentPassword: "",
newPassword: "",
confirmPassword: "",
});
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
// Fetch user data when component mounts
useEffect(() => {
const fetchUserData = async () => {
try {
setIsLoading(true);
setError(null);
// Get the user's data from localStorage
const storedUser = JSON.parse(sessionStorage.getItem("user"));
console.log(storedUser);
if (!storedUser || !storedUser.email) {
throw new Error("User details not found. Please log in again.");
}
// Make API call to fetch user data
const response = await fetch("http://localhost:3030/find_user", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email: storedUser.email,
}),
});
const data = await response.json();
console.log(data);
if (data.found) {
// Update state with fetched data
setUserData((prevData) => ({
...prevData,
userId: data.userId || storedUser.id || "", // Try both sources
name: data.name || storedUser.name || "",
email: data.email || storedUser.email || "",
UCID: data.UCID || storedUser.UCID || "",
phone: data.phone || storedUser.phone || "",
address: data.address || storedUser.address || "",
// Reset password fields
currentPassword: "",
newPassword: "",
confirmPassword: "",
}));
} else {
throw new Error(data.error || "Failed to retrieve user data");
}
} catch (error) {
console.error("Error fetching user data:", error);
setError(
error.message || "An error occurred while loading your profile",
);
} finally {
setIsLoading(false);
}
};
fetchUserData();
}, []);
const handleInputChange = (e) => {
const { id, value } = e.target;
setUserData(prevData => ({
setUserData((prevData) => ({
...prevData,
[id]: value
[id]: value,
}));
};
const handleProfileUpdate = (e) => {
const handleProfileUpdate = async (e) => {
e.preventDefault();
// TODO: updated profile data to a server
console.log('Profile updated:', userData);
alert('Profile updated successfully!');
};
try {
// TODO: Implement the actual update API call
console.log("Profile updated:", userData);
const handlePasswordUpdate = (e) => {
e.preventDefault();
// TODO: validate and update password
if (userData.newPassword !== userData.confirmPassword) {
alert('New passwords do not match!');
return;
// Update localStorage with new user data
const storedUser = JSON.parse(localStorage.getItem("user"));
const updatedUser = {
...storedUser,
name: userData.name,
phone: userData.phone,
UCID: userData.UCID,
address: userData.address,
};
localStorage.setItem("user", JSON.stringify(updatedUser));
alert("Profile updated successfully!");
} catch (error) {
console.error("Error updating profile:", error);
alert("Failed to update profile: " + error.message);
}
};
const handlePasswordUpdate = async (e) => {
e.preventDefault();
try {
// Validate passwords match
if (userData.newPassword !== userData.confirmPassword) {
alert("New passwords do not match!");
return;
}
// TODO: Implement the actual password update API call
console.log("Password updated");
// Update password in localStorage
const storedUser = JSON.parse(localStorage.getItem("user"));
const updatedUser = {
...storedUser,
password: userData.newPassword,
};
localStorage.setItem("user", JSON.stringify(updatedUser));
// Reset password fields
setUserData((prevData) => ({
...prevData,
currentPassword: "",
newPassword: "",
confirmPassword: "",
}));
alert("Password updated successfully!");
} catch (error) {
console.error("Error updating password:", error);
alert("Failed to update password: " + error.message);
}
console.log('Password updated');
// Reset password fields
setUserData(prevData => ({
...prevData,
currentPassword: '',
newPassword: '',
confirmPassword: ''
}));
alert('Password updated successfully!');
};
const handleDeleteHistory = (type) => {
@@ -51,24 +150,91 @@ const Settings = () => {
alert(`${type} history deleted successfully!`);
};
const handleDeleteAccount = async () => {
if (
window.confirm(
"Are you sure you want to delete your account? This action cannot be undone.",
)
) {
try {
// Get user ID from state or localStorage
const storedUser = JSON.parse(sessionStorage.getItem("user"));
const userId = storedUser.ID;
if (!userId) {
throw new Error("User ID not found");
}
// Make API call to delete the account
const response = await fetch("http://localhost:3030/delete", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
userId: userId,
}),
});
const data = await response.json();
if (data.success) {
alert("Account deleted successfully. You will be logged out.");
// Clear user data from localStorage and redirect to login
sessionStorage.removeItem("user");
sessionStorage.removeItem("isAuthenticated");
window.location.href = "/login";
} else {
throw new Error(data.error || "Failed to delete account");
}
} catch (error) {
console.error("Error deleting account:", error);
alert("Failed to delete account: " + error.message);
}
}
};
// Show loading state
if (isLoading) {
return (
<div className="flex justify-center items-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500"></div>
</div>
);
}
return (
<div className="max-w-3xl mx-auto">
<h1 className="text-2xl font-bold text-gray-800 mb-6">Account Settings</h1>
<h1 className="text-2xl font-bold text-gray-800 mb-6">
Account Settings
</h1>
{/* Error message if any */}
{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
{error}
</div>
)}
{/* Profile Information Section */}
<div className="bg-white border border-gray-200 mb-6">
<div className="border-b border-gray-200 p-4">
<div className="flex items-center">
<User className="h-5 w-5 text-gray-500 mr-2" />
<h2 className="text-lg font-medium text-gray-800">Profile Information</h2>
<h2 className="text-lg font-medium text-gray-800">
Profile Information
</h2>
</div>
</div>
<div className="p-4">
<form onSubmit={handleProfileUpdate}>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
<label
htmlFor="name"
className="block text-sm font-medium text-gray-700 mb-1"
>
Full Name
</label>
<input
@@ -80,9 +246,12 @@ const Settings = () => {
required
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700 mb-1"
>
Email Address
</label>
<input
@@ -92,11 +261,15 @@ const Settings = () => {
onChange={handleInputChange}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
required
readOnly // Email is often used as identifier and not changeable
/>
</div>
<div>
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
<label
htmlFor="phone"
className="block text-sm font-medium text-gray-700 mb-1"
>
Phone Number
</label>
<input
@@ -107,23 +280,42 @@ const Settings = () => {
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
/>
</div>
<div>
<label htmlFor="ucid" className="block text-sm font-medium text-gray-700 mb-1">
<label
htmlFor="UCID"
className="block text-sm font-medium text-gray-700 mb-1"
>
UCID
</label>
<input
type="text"
id="ucid"
value={userData.ucid}
id="UCID"
value={userData.UCID}
onChange={handleInputChange}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
required
/>
</div>
<div>
<label
htmlFor="address"
className="block text-sm font-medium text-gray-700 mb-1"
>
Address
</label>
<input
type="text"
id="address"
value={userData.address}
onChange={handleInputChange}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
/>
</div>
</div>
<button
<button
type="submit"
className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
>
@@ -132,7 +324,7 @@ const Settings = () => {
</form>
</div>
</div>
{/* Security Section */}
<div className="bg-white border border-gray-200 mb-6">
<div className="border-b border-gray-200 p-4">
@@ -141,12 +333,15 @@ const Settings = () => {
<h2 className="text-lg font-medium text-gray-800">Password</h2>
</div>
</div>
<div className="p-4">
<form onSubmit={handlePasswordUpdate}>
<div className="space-y-4 mb-4">
<div>
<label htmlFor="currentPassword" className="block text-sm font-medium text-gray-700 mb-1">
<label
htmlFor="currentPassword"
className="block text-sm font-medium text-gray-700 mb-1"
>
Current Password
</label>
<input
@@ -158,9 +353,12 @@ const Settings = () => {
required
/>
</div>
<div>
<label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 mb-1">
<label
htmlFor="newPassword"
className="block text-sm font-medium text-gray-700 mb-1"
>
New Password
</label>
<input
@@ -172,9 +370,12 @@ const Settings = () => {
required
/>
</div>
<div>
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
<label
htmlFor="confirmPassword"
className="block text-sm font-medium text-gray-700 mb-1"
>
Confirm New Password
</label>
<input
@@ -187,8 +388,8 @@ const Settings = () => {
/>
</div>
</div>
<button
<button
type="submit"
className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
>
@@ -197,7 +398,7 @@ const Settings = () => {
</form>
</div>
</div>
{/* Privacy Section */}
<div className="bg-white border border-gray-200 mb-6">
<div className="border-b border-gray-200 p-4">
@@ -206,7 +407,7 @@ const Settings = () => {
<h2 className="text-lg font-medium text-gray-800">Privacy</h2>
</div>
</div>
<div className="p-4">
<div className="space-y-4">
<div className="flex justify-between items-center pb-4 border-b border-gray-100">
@@ -214,28 +415,34 @@ const Settings = () => {
<Search className="h-5 w-5 text-gray-500 mr-2 mt-0.5" />
<div>
<h3 className="font-medium text-gray-800">Search History</h3>
<p className="text-sm text-gray-500">Delete all your search history on StudentMarket</p>
<p className="text-sm text-gray-500">
Delete all your search history on StudentMarket
</p>
</div>
</div>
<button
onClick={() => handleDeleteHistory('search')}
<button
onClick={() => handleDeleteHistory("search")}
className="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 flex items-center"
>
<Trash2 className="h-4 w-4 mr-1" />
Delete
</button>
</div>
<div className="flex justify-between items-center">
<div className="flex items-start">
<History className="h-5 w-5 text-gray-500 mr-2 mt-0.5" />
<div>
<h3 className="font-medium text-gray-800">Browsing History</h3>
<p className="text-sm text-gray-500">Delete all your browsing history on StudentMarket</p>
<h3 className="font-medium text-gray-800">
Browsing History
</h3>
<p className="text-sm text-gray-500">
Delete all your browsing history on StudentMarket
</p>
</div>
</div>
<button
onClick={() => handleDeleteHistory('browsing')}
<button
onClick={() => handleDeleteHistory("browsing")}
className="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 flex items-center"
>
<Trash2 className="h-4 w-4 mr-1" />
@@ -245,29 +452,25 @@ const Settings = () => {
</div>
</div>
</div>
{/* Delete Account (Danger Zone) */}
<div className="bg-white border border-red-200 mb-6">
<div className="border-b border-red-200 p-4 bg-red-50">
<h2 className="text-lg font-medium text-red-700">Danger Zone</h2>
</div>
<div className="p-4">
<div className="flex justify-between items-center">
<div>
<h3 className="font-medium text-gray-800">Delete Account</h3>
<p className="text-sm text-gray-500">
Once you delete your account, there is no going back. Please be certain.
Once you delete your account, there is no going back. Please be
certain.
</p>
</div>
<button
<button
className="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4"
onClick={() => {
if (window.confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
console.log('Account deletion requested');
alert('Account deletion request submitted. You will receive a confirmation email.');
}
}}
onClick={handleDeleteAccount}
>
Delete Account
</button>
@@ -278,4 +481,4 @@ const Settings = () => {
);
};
export default Settings;
export default Settings;