- {!isLoggedIn ? (
+ {!user || !isLoggedIn ? (
<>
Sign up
@@ -144,7 +149,7 @@ export default function Header() {
{isMobileMenuOpen && (
- {!isLoggedIn ? (
+ {!user || !isLoggedIn ? (
Log in
Sign up
@@ -183,5 +188,5 @@ export default function Header() {
)}
- )
-}
+ );
+}
\ No newline at end of file
diff --git a/client/src/context/AuthContext.jsx b/client/src/context/AuthContext.jsx
index 4700a70..6c63428 100644
--- a/client/src/context/AuthContext.jsx
+++ b/client/src/context/AuthContext.jsx
@@ -11,6 +11,20 @@ export const AuthProvider = ({ children }) => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [loading, setLoading] = useState(true);
+ const refreshUser = async () => {
+ const current = auth.currentUser;
+ if (current) {
+ const token = await current.getIdToken();
+ setUser({
+ uid: current.uid,
+ email: current.email,
+ name: current.displayName || "",
+ avatar: current.photoURL || "",
+ token,
+ });
+ }
+ };
+
const logout = () => {
auth.signOut()
.then(() => {
@@ -25,7 +39,16 @@ export const AuthProvider = ({ children }) => {
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, async (firebaseUser) => {
if (firebaseUser) {
- setUser(firebaseUser);
+ const token = await firebaseUser.getIdToken();
+
+ setUser({
+ uid: firebaseUser.uid,
+ email: firebaseUser.email,
+ name: firebaseUser.displayName || "",
+ avatar: firebaseUser.photoURL || "",
+ token,
+ });
+
setIsLoggedIn(true);
} else {
setUser(null);
@@ -38,8 +61,19 @@ export const AuthProvider = ({ children }) => {
}, []);
return (
-
+
{children}
);
-};
+};
\ No newline at end of file
diff --git a/client/src/pages/ProfilePage.jsx b/client/src/pages/ProfilePage.jsx
new file mode 100644
index 0000000..0831435
--- /dev/null
+++ b/client/src/pages/ProfilePage.jsx
@@ -0,0 +1,205 @@
+import { useState } from "react";
+import { useAuth } from "../context/AuthContext";
+import axios from "axios";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import { FaPen } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+
+export default function ProfilePage() {
+ const { user, isLoggedIn, refreshUser } = useAuth();
+ const [name, setName] = useState(user?.name || "");
+ const [email] = useState(user?.email || "");
+ const [editName, setEditName] = useState(false);
+ const [saving, setSaving] = useState(false);
+ const [deleting, setDeleting] = useState(false);
+ const [message, setMessage] = useState("");
+ const [error, setError] = useState("");
+ const navigate = useNavigate();
+
+ const isEdited = editName && name.trim() !== user.name;
+
+ const recentActivity = [
+ { id: 1, action: "Completed React quiz", date: "Aug 1, 2025" },
+ { id: 2, action: "Commented on State Management article", date: "Jul 30, 2025" },
+ { id: 3, action: "Joined Practice Room", date: "Jul 28, 2025" },
+ ];
+
+ const preferences = {
+ theme: "Light Mode",
+ notifications: true,
+ language: "English",
+ };
+
+ const updateProfile = async () => {
+ setSaving(true);
+ setMessage("");
+ setError("");
+
+ try {
+ await axios.put(`${import.meta.env.VITE_API_URL}/api/auth/update-profile`, { name }, {
+ headers: { Authorization: `Bearer ${user.token}` },
+ withCredentials: true,
+ });
+
+ await refreshUser();
+ setMessage("Profile updated successfully.");
+ setEditName(false);
+ } catch (err) {
+ console.error(err);
+ setError("Failed to update profile.");
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const deleteAccount = async () => {
+ if (!window.confirm("Are you sure you want to delete your account? This action is irreversible.")) return;
+
+ setDeleting(true);
+ setMessage("");
+ setError("");
+
+ try {
+ await axios.delete(`${import.meta.env.VITE_API_URL}/api/auth/delete`, {
+ headers: { Authorization: `Bearer ${user.token}` },
+ withCredentials: true,
+ });
+
+ setMessage("Account deleted. Redirecting...");
+ setTimeout(() => navigate("/login"), 1500);
+ } catch (err) {
+ console.error(err);
+ setError("Account deletion failed.");
+ } finally {
+ setDeleting(false);
+ }
+ };
+
+ if (!isLoggedIn || !user) {
+ return (
+
+
+
Please log in to view your profile.
+
+
+
+
+
+
+
+
+
+
Your Profile
+
+ {/* Avatar */}
+
+ {user.avatar ? (
+
+ ) : (
+
+ {user.name?.charAt(0) || "U"}
+
+ )}
+
+
+ {/* Editable Info */}
+
+ {/* Name */}
+
+
+ {!editName ? (
+
+
{name}
+
+
+ ) : (
+
setName(e.target.value)}
+ className="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring focus:ring-indigo-300"
+ />
+ )}
+
+
+ {/* Email */}
+
+
+ {/* Preferences & Activity */}
+
+
+
Preferences
+
+ - 🌈 Theme: {preferences.theme}
+ - 🔔 Notifications: {preferences.notifications ? "Enabled" : "Disabled"}
+ - 🗣️ Language: {preferences.language}
+
+
+
+
+
Recent Activity
+
+ {recentActivity.map((item) => (
+ -
+ {item.action}
+ {item.date}
+
+ ))}
+
+
+
+
+
+ {/* Buttons */}
+
+ {isEdited && (
+
+ )}
+
+
+
+ {/* Feedback */}
+ {(message || error) && (
+
+ {message &&
{message}
}
+ {error &&
{error}
}
+
+ )}
+
+
+
+
+