fix: The profile page now shows the logged-in user's info

client/src/App.tsx

@@ -10,7 +10,7 @@ import SignUp from './pages/SignUp';
 
 const App: React.FC = () => {
   const [isDarkMode, setIsDarkMode] = useState(false); // Dark mode state
-  const [username, setUsername] = useState<string | null>(null);
+  const [user, setUser] = useState<Record<string, string> | null>(null);
 
   const toggleDarkMode = () => {
     setIsDarkMode((prev) => !prev);
@@ -19,16 +19,18 @@ const App: React.FC = () => {
 
   return (
     <Router>
-      <Navbar toggleDarkMode={toggleDarkMode} isDarkMode={isDarkMode} username={username} setUsername={setUsername} />
+      <Navbar toggleDarkMode={toggleDarkMode} isDarkMode={isDarkMode} username={user?.username ?? null} setUser={setUser} />
       <Routes>
-        <Route path="/login" element={<Login setUsername={setUsername} />} />
+        <Route path="/login" element={<Login setUser={setUser} />} />
         <Route path="/signup" element={<SignUp />} />
-        <Route path="/" element={<Home isDarkMode={isDarkMode} />} />
-        <Route path="/profile" element={<Profile isDarkMode={isDarkMode} username={username} />} />
+        {user !== null && <>
+          <Route path="/" element={<Home isDarkMode={isDarkMode} />} />
+        <Route path="/profile" element={<Profile isDarkMode={isDarkMode} user={user} />} />
         <Route
           path="/events-dashboard"
           element={<EventsDashboard isDarkMode={isDarkMode} />}
         />
+        </>}
       </Routes>
     </Router>
   );

client/src/components/Navbar.tsx

@@ -4,7 +4,7 @@ import { NavbarProps } from '../types';
 import LOGO from '../assets/RAILGUIDE.png';
 //import '../index.scss';
 
-const Navbar: React.FC<NavbarProps> = ({ toggleDarkMode, isDarkMode, username, setUsername }) => {
+const Navbar: React.FC<NavbarProps> = ({ toggleDarkMode, isDarkMode, username, setUser }) => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const navigate = useNavigate();
@@ -15,8 +15,8 @@ const Navbar: React.FC<NavbarProps> = ({ toggleDarkMode, isDarkMode, username, s
 
   const handleLogout = () => {
     console.log('User logged out');
-    setUsername(null);
-    navigate('/');
+    setUser(null);
+    navigate('/login');
   };
 
   useEffect(() => {

client/src/pages/Login.tsx

@@ -2,9 +2,9 @@ import React, { useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
 
 const Login: React.FC<{
-  setUsername: React.Dispatch<React.SetStateAction<string | null>>;
-}> = ({ setUsername }) => {
-  const [username, setLocalUsername] = useState("");
+  setUser: React.Dispatch<React.SetStateAction<Record<string, string> | null>>;
+}> = ({ setUser }) => {
+  const [localUsername, setLocalUsername] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
@@ -15,7 +15,7 @@ const Login: React.FC<{
     setError(null);
 
     // Basic form validation
-    if ((!username && !email) || (username && email)) {
+    if ((!localUsername && !email) || (localUsername && email)) {
       setError("Please provide either a username or an email, but not both");
       return;
     }
@@ -37,15 +37,15 @@ const Login: React.FC<{
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          username: username || null,
+          username: localUsername || null,
           work_email: email || null,
           password,
         }),
       });
-      const { username: dbUsername } = await response.json() as {username: string};
-      console.log(dbUsername);
+      const user = await response.json() as {username: string};
+
       if (response.ok) {
-        setUsername(dbUsername);
+        setUser(user);
         console.log("Sign-up successful!");
         navigate("/profile");
       }
@@ -69,7 +69,7 @@ const Login: React.FC<{
           <input
             type="text"
             id="username"
-            value={username}
+            value={localUsername}
             onChange={(e) => setLocalUsername(e.target.value)}
             autoComplete="username"
           />

client/src/pages/Profile.tsx

@@ -1,26 +1,8 @@
 import React from 'react';
 import { ProfileProps } from "../types";
-//import "../profile.css";
 
-interface User {
-  username: string;
-  displayName: string;
-  email: string;
-  phone: string;
-  company: string;
-  link: string;
-}
+const Profile: React.FC<ProfileProps> = ({ isDarkMode, user }) => {
 
-const user: User = {
-  username: "BobTest",
-  displayName: "Bob Test",
-  email: "[email protected]",
-  phone: "+1 (234) 567-890",
-  company: "Test Guys Inc.",
-  link: "https://aws.amazon.com",
-};
-
-const Profile: React.FC<ProfileProps> = ({ isDarkMode }) => {
   return (
     <div className={`profile-container ${isDarkMode ? 'dark-mode' : ''}`}>
       <div className="left-container">
@@ -33,20 +15,20 @@ const Profile: React.FC<ProfileProps> = ({ isDarkMode }) => {
           </div>
           <div className="profile-info">
             <div className="info-container">
-              <p>Username: {user.username}</p>
+              <p>Username: {user?.username ?? "Not Logged In"}</p>
             </div>
             <div className="info-container">
-              <p>Display Name: {user.displayName}</p>
+              <p>Display Name: {user?.display_name ?? "Not Logged In"}</p>
             </div>
             <div className="info-container">
-              <p>Work Email: {user.email}</p>
+              <p>Work Email: {user?.work_email ?? "Not Logged In"}</p>
             </div>
             <div className="info-container">
-              <p>Work Phone: {user.phone}</p>
+              <p>Work Phone: {user?.work_phone ?? "Not Logged In"}</p>
             </div>
-            <div className="info-container">
+            {/* <div className="info-container">
               <p>Company: {user.company}</p>
-            </div>
+            </div> */}
             <img
               className="aws-logo"
               src="https://a0.awsstatic.com/libra-css/images/logos/aws_logo_smile_1200x630.png"
@@ -67,8 +49,8 @@ const Profile: React.FC<ProfileProps> = ({ isDarkMode }) => {
           <input type="text" id="region" name="region" />
         </div>
         <button className="submit-button">Submit</button>
-        <button className="logout-button logout-button-styled">Logout</button>
-        <a className="aws-login-button submit-button" href={user.link} target="_blank" rel="noopener noreferrer">
+        {/* <button className="logout-button logout-button-styled" >Logout</button> */}
+        <a className="aws-login-button submit-button" href='https://aws.amazon.com' target="_blank" rel="noopener noreferrer">
           AWS Log-in Information
         </a>
       </div>

client/src/types.ts

@@ -10,8 +10,7 @@
 
 export interface ProfileProps {
   isDarkMode: boolean;
-  username: string | null
-
+  user: Record<string, string> | null
 }
 
 export interface CardProps {
@@ -39,7 +38,7 @@ export interface NavbarProps {
   toggleDarkMode: () => void;
   isDarkMode: boolean;
   username: string | null; 
-  setUsername: React.Dispatch<React.SetStateAction<string | null>>; 
+  setUser: React.Dispatch<React.SetStateAction<Record<string,string> | null>>; 
 }
 
 export interface EventCardProps {