Index: frontend/src/pages/Dashboard.jsx =================================================================== --- frontend/src/pages/Dashboard.jsx (revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914) +++ frontend/src/pages/Dashboard.jsx (revision 86158850756b7b97df263e784aecbbae73d37b17) @@ -1,2 +1,61 @@ -// hello world -import React from "react"; +import React, { useMemo } from "react"; +import { Link, useNavigate } from "react-router-dom"; + +const Dashboard = () => { + const navigate = useNavigate(); + + const user = useMemo(() => { + try { + const raw = localStorage.getItem("authUser"); + return raw ? JSON.parse(raw) : null; + } catch { + return null; + } + }, []); + + const onLogout = () => { + localStorage.removeItem("authToken"); + localStorage.removeItem("authUser"); + navigate("/", { replace: true }); + }; + + return ( +
+
+
+

Dashboard

+
+ + Landing + + +
+
+ +
+
+

Account

+
+
+ Username:{" "} + {user?.username ?? "—"} +
+
+ Email:{" "} + {user?.email ?? "—"} +
+
+ User ID:{" "} + {user?.userId ?? "—"} +
+
+
+
+
+
+ ); +}; + +export default Dashboard; Index: frontend/src/pages/LandingPage/components/Hero.jsx =================================================================== --- frontend/src/pages/LandingPage/components/Hero.jsx (revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914) +++ frontend/src/pages/LandingPage/components/Hero.jsx (revision 86158850756b7b97df263e784aecbbae73d37b17) @@ -1,5 +1,20 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; const Hero = () => { + const [isAuthed, setIsAuthed] = useState(() => + Boolean(localStorage.getItem("authToken")), + ); + + useEffect(() => { + const onStorage = (e) => { + if (e.key === "authToken") { + setIsAuthed(Boolean(e.newValue)); + } + }; + window.addEventListener("storage", onStorage); + return () => window.removeEventListener("storage", onStorage); + }, []); + return (
- + + {isAuthed ? "Go to dashboard" : "Get started"} +
Index: frontend/src/pages/LandingPage/components/NavbarLanding.jsx =================================================================== --- frontend/src/pages/LandingPage/components/NavbarLanding.jsx (revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914) +++ frontend/src/pages/LandingPage/components/NavbarLanding.jsx (revision 86158850756b7b97df263e784aecbbae73d37b17) @@ -1,17 +1,54 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; +import { Link, useNavigate } from "react-router-dom"; import logo from "../../../assets/logo.png"; const NavbarLanding = () => { + const navigate = useNavigate(); + const [isAuthed, setIsAuthed] = useState(() => + Boolean(localStorage.getItem("authToken")), + ); + + useEffect(() => { + const onStorage = (e) => { + if (e.key === "authToken") { + setIsAuthed(Boolean(e.newValue)); + } + }; + window.addEventListener("storage", onStorage); + return () => window.removeEventListener("storage", onStorage); + }, []); + + const onLogout = () => { + localStorage.removeItem("authToken"); + localStorage.removeItem("authUser"); + setIsAuthed(false); + navigate("/", { replace: true }); + }; + return (
- + Trekr - +
- + {isAuthed ? ( +
+ + Dashboard + + +
+ ) : ( + + Start Tracking + + )}
Index: frontend/src/pages/Login/Login.jsx =================================================================== --- frontend/src/pages/Login/Login.jsx (revision 86158850756b7b97df263e784aecbbae73d37b17) +++ frontend/src/pages/Login/Login.jsx (revision 86158850756b7b97df263e784aecbbae73d37b17) @@ -0,0 +1,99 @@ +import React, { useEffect, useState } from "react"; +import { Link, useNavigate } from "react-router-dom"; + +import api from "../../api/axios"; + +const Login = () => { + const navigate = useNavigate(); + const [usernameOrEmail, setUsernameOrEmail] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(""); + const [isSubmitting, setIsSubmitting] = useState(false); + + useEffect(() => { + const token = localStorage.getItem("authToken"); + if (token) navigate("/dashboard", { replace: true }); + }, [navigate]); + + const onSubmit = async (e) => { + e.preventDefault(); + setError(""); + setIsSubmitting(true); + try { + const res = await api.post("/auth/login", { + usernameOrEmail, + password, + }); + localStorage.setItem("authToken", res.data.token); + localStorage.setItem( + "authUser", + JSON.stringify({ + userId: res.data.userId, + username: res.data.username, + email: res.data.email, + }), + ); + navigate("/dashboard"); + } catch (err) { + const message = + err?.response?.data?.message || + err?.response?.data?.errors?.usernameOrEmail || + "Login failed"; + setError(message); + } finally { + setIsSubmitting(false); + } + }; + + return ( +
+
+ Login + + + setUsernameOrEmail(e.target.value)} + autoComplete="username" + required + /> + + + setPassword(e.target.value)} + autoComplete="current-password" + required + /> + + {error ?

{error}

: null} + + + +

+ Don't have an account?{" "} + + Register + +

+
+
+ ); +}; + +export default Login; Index: frontend/src/pages/Register/Register.jsx =================================================================== --- frontend/src/pages/Register/Register.jsx (revision 86158850756b7b97df263e784aecbbae73d37b17) +++ frontend/src/pages/Register/Register.jsx (revision 86158850756b7b97df263e784aecbbae73d37b17) @@ -0,0 +1,112 @@ +import React, { useEffect, useState } from "react"; +import { Link, useNavigate } from "react-router-dom"; + +import api from "../../api/axios"; + +const Register = () => { + const navigate = useNavigate(); + const [email, setEmail] = useState(""); + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(""); + const [isSubmitting, setIsSubmitting] = useState(false); + + useEffect(() => { + const token = localStorage.getItem("authToken"); + if (token) navigate("/dashboard", { replace: true }); + }, [navigate]); + + const onSubmit = async (e) => { + e.preventDefault(); + setError(""); + setIsSubmitting(true); + try { + const res = await api.post("/auth/register", { + email, + username, + password, + }); + localStorage.setItem("authToken", res.data.token); + localStorage.setItem( + "authUser", + JSON.stringify({ + userId: res.data.userId, + username: res.data.username, + email: res.data.email, + }), + ); + navigate("/dashboard"); + } catch (err) { + const message = + err?.response?.data?.message || + Object.values(err?.response?.data?.errors ?? {})[0] || + "Registration failed"; + setError(message); + } finally { + setIsSubmitting(false); + } + }; + + return ( +
+
+ Register + + + setEmail(e.target.value)} + autoComplete="email" + required + /> + + + setUsername(e.target.value)} + autoComplete="username" + required + /> + + + setPassword(e.target.value)} + autoComplete="new-password" + required + /> + + {error ?

{error}

: null} + + + +

+ Already have an account?{" "} + + Login + +

+
+
+ ); +}; + +export default Register;