-
Making a Difference
-
+
Making a Difference
+
-
10,000+
+
10,000+
Veterans Served
-
24/7
+
24/7
Support Available
-
95%
+
95%
Satisfaction Rate
@@ -113,10 +114,10 @@ const Index = () => {
{/* CTA Section */}
-
+
-
Ready to Take the First Step?
-
+
Ready to Take the First Step?
+
Your wellbeing matters. Connect with resources and support designed by veterans, for veterans.
);
};
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
new file mode 100644
index 0000000..2bf2448
--- /dev/null
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -0,0 +1,392 @@
+import React, { useEffect, useState, useRef } from "react";
+import axios from "@/lib/axios";
+import { useAuthStore } from "@/store/useAuthStore";
+import Navigation from "@/components/Navigation";
+import { useNavigate } from "react-router-dom";
+
+const tagOptions = [
+ "Job",
+ "Mental Health",
+ "Wellness",
+ "Engagement",
+ "Hobby",
+ "Other",
+];
+
+const ProfilePage = () => {
+ const navigate = useNavigate();
+ const { user, fetchUser, setUser } = useAuthStore();
+ const [edit, setEdit] = useState(false);
+ const [form, setForm] = useState
({});
+ const [loading, setLoading] = useState(true);
+ const [profilePic, setProfilePic] = useState(null);
+ const [isLoggedIn, setIsLoggedIn] = useState(() => !!localStorage.getItem("access"));
+ const fileInputRef = useRef(null);
+
+ useEffect(() => {
+ setIsLoggedIn(!!localStorage.getItem("access"));
+ async function fetchData() {
+ setLoading(true);
+ await fetchUser();
+ setLoading(false);
+ }
+ if (isLoggedIn) fetchData();
+ }, [fetchUser, isLoggedIn]);
+
+ useEffect(() => {
+ if (!loading && (!user || !isLoggedIn)) {
+ navigate("/"); // redirect to home if not authenticated
+ } else if (user) {
+ setForm({
+ ...user,
+ tags: user.tags ? user.tags.split(",") : [],
+ fullName:
+ (user.first_name || "") +
+ (user.last_name ? " " + user.last_name : ""),
+ });
+ setProfilePic(user.profile_pic || null);
+ }
+ }, [user, loading, isLoggedIn, navigate]);
+
+ const handleChange = (
+ e: React.ChangeEvent
+ ) => {
+ setForm({ ...form, [e.target.name]: e.target.value });
+ };
+
+ const handleTagChange = (tag: string) => {
+ const tags = form.tags || [];
+ if (tags.includes(tag)) {
+ setForm({ ...form, tags: tags.filter((t: string) => t !== tag) });
+ } else {
+ setForm({ ...form, tags: [...tags, tag] });
+ }
+ };
+
+ const handlePicChange = (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ setProfilePic(reader.result as string);
+ setForm({ ...form, profile_pic: reader.result });
+ };
+ reader.readAsDataURL(file);
+ };
+
+ const handleSave = async () => {
+ try {
+ // Split fullName into first_name and last_name
+ let first_name = form.fullName?.split(" ")[0] || "";
+ let last_name = form.fullName?.split(" ").slice(1).join(" ") || "";
+ const payload = {
+ ...form,
+ first_name,
+ last_name,
+ tags: (form.tags || []).join(","),
+ profile_pic: profilePic,
+ };
+ delete payload.fullName;
+ await axios.patch("/api/users/me/", payload);
+ setUser({ ...user, ...payload });
+ setEdit(false);
+ } catch (e) {
+ // handle error
+ }
+ };
+
+ if (loading) return Loading...
;
+
+ return (
+ <>
+
+
+
My Profile
+
+
+
+ {edit && (
+
+ )}
+
+
+
+
+ {edit ? (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Password field (edit only) */}
+
+
+
+
+
+ ) : (
+ <>
+
+
+
Username:
+
{form.username}
+
+
+
Email:
+
{form.email}
+
+
+
Full Name:
+
{form.fullName}
+
+
+
Phone:
+
{form.phone}
+
+
+
+
Mental Health:
+
{form.mental_health}
+
+
+
Wellness:
+
{form.wellness}
+
+
+
Engagement:
+
{form.engage}
+
+
+
Location:
+
{form.location}
+
+
+
Gender:
+
{form.gender}
+
+
+
+
Description:
+
{form.description}
+
+
+
Hobby:
+
{form.hobby}
+
+
+
+ )}
+ {/* Tags/Labels */}
+
+
+
+ {tagOptions.map((tag) => (
+
+ ))}
+
+
+
+
+ {edit ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+