Index: frontend/src/App.jsx =================================================================== --- frontend/src/App.jsx (revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914) +++ frontend/src/App.jsx (revision 3ebe47cce61b3bfc1dee2566f7475e378374591e) @@ -1,6 +1,34 @@ +import { Navigate, Route, Routes } from "react-router-dom"; + import LandingPage from "./pages/LandingPage/LandingPage.jsx"; +import Login from "./pages/Login/Login.jsx"; +import Register from "./pages/Register/Register.jsx"; +import Dashboard from "./pages/Dashboard.jsx"; + +function RequireAuth({ children }) { + const token = localStorage.getItem("authToken"); + if (!token) return ; + return children; +} function App() { - return ; + return ( +
+ + } /> + } /> + } /> + + + + } + /> + } /> + +
+ ); } Index: frontend/src/api/axios.js =================================================================== --- frontend/src/api/axios.js (revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914) +++ frontend/src/api/axios.js (revision 3ebe47cce61b3bfc1dee2566f7475e378374591e) @@ -1,6 +1,16 @@ import axios from "axios"; -export default axios.create({ - baseURL: "http://localhost:8080/api", - withCredentials: true, // important if using cookies +const api = axios.create({ + baseURL: import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8080/api", }); + +api.interceptors.request.use((config) => { + const token = localStorage.getItem("authToken"); + if (token) { + config.headers = config.headers ?? {}; + config.headers.Authorization = `Bearer ${token}`; + } + return config; +}); + +export default api; Index: frontend/src/main.jsx =================================================================== --- frontend/src/main.jsx (revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914) +++ frontend/src/main.jsx (revision 3ebe47cce61b3bfc1dee2566f7475e378374591e) @@ -1,10 +1,14 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.jsx' +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; -createRoot(document.getElementById('root')).render( +import "./index.css"; +import App from "./App.jsx"; + +createRoot(document.getElementById("root")).render( - + + + , -) +); Index: frontend/src/pages/Dashboard.jsx =================================================================== --- frontend/src/pages/Dashboard.jsx (revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914) +++ frontend/src/pages/Dashboard.jsx (revision 3ebe47cce61b3bfc1dee2566f7475e378374591e) @@ -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 3ebe47cce61b3bfc1dee2566f7475e378374591e) @@ -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 3ebe47cce61b3bfc1dee2566f7475e378374591e) @@ -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 3ebe47cce61b3bfc1dee2566f7475e378374591e) +++ frontend/src/pages/Login/Login.jsx (revision 3ebe47cce61b3bfc1dee2566f7475e378374591e) @@ -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 3ebe47cce61b3bfc1dee2566f7475e378374591e) +++ frontend/src/pages/Register/Register.jsx (revision 3ebe47cce61b3bfc1dee2566f7475e378374591e) @@ -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;