Changeset 3ebe47c for frontend

Timestamp:

02/09/26 21:36:40 (5 months ago)

Author:

Andrej <asumanovski@…>

Branches:

master

Children:

8615885

Parents:

140d098

Message:

Made authentication on frontend and backend

Location:

frontend/src

Files:

• App.jsx (modified) (1 diff)
• api/axios.js (modified) (1 diff)
• main.jsx (modified) (1 diff)
• pages/Dashboard.jsx (modified) (1 diff)
• pages/LandingPage/components/Hero.jsx (modified) (2 diffs)
• pages/LandingPage/components/NavbarLanding.jsx (modified) (1 diff)
• pages/Login/Login.jsx (added)
• pages/Register/Register.jsx (added)

frontend/src/App.jsx

@@ +1 @@
+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 <Navigate to="/login" replace />;
+  return children;
+}
 
 function App() {
-  return <LandingPage />;
+  return (
+    <div data-theme="forest" className="min-h-screen w-full">
+      <Routes>
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+        <Route
+          path="/dashboard"
+          element={
+            <RequireAuth>
+              <Dashboard />
+            </RequireAuth>
+          }
+        />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </div>
+  );
 }
 

frontend/src/api/axios.js

@@ -1 +1 @@
 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;

frontend/src/main.jsx

@@ -1 @@
-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(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
-)
+);

frontend/src/pages/Dashboard.jsx

@@ -1 @@
-// 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 (
+    <div className="min-h-screen p-6">
+      <div className="max-w-3xl mx-auto">
+        <div className="flex items-center justify-between gap-3">
+          <h1 className="text-2xl font-bold">Dashboard</h1>
+          <div className="flex items-center gap-2">
+            <Link className="btn btn-ghost" to="/">
+              Landing
+            </Link>
+            <button className="btn btn-outline" onClick={onLogout}>
+              Logout
+            </button>
+          </div>
+        </div>
+
+        <div className="mt-6 card bg-base-200 border border-base-300">
+          <div className="card-body">
+            <h2 className="card-title">Account</h2>
+            <div className="text-sm leading-7">
+              <div>
+                <span className="opacity-70">Username:</span>{" "}
+                <span className="font-medium">{user?.username ?? "—"}</span>
+              </div>
+              <div>
+                <span className="opacity-70">Email:</span>{" "}
+                <span className="font-medium">{user?.email ?? "—"}</span>
+              </div>
+              <div>
+                <span className="opacity-70">User ID:</span>{" "}
+                <span className="font-medium">{user?.userId ?? "—"}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

frontend/src/pages/LandingPage/components/Hero.jsx

@@ -1 @@
-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 (
     <div
@@ -21 +36 @@
             consistently, and see your progress in one place.
           </p>
-          <button className="btn btn-primary">Get started</button>
+          <Link
+            className="btn btn-primary"
+            to={isAuthed ? "/dashboard" : "/register"}
+          >
+            {isAuthed ? "Go to dashboard" : "Get started"}
+          </Link>
         </div>
       </div>

frontend/src/pages/LandingPage/components/NavbarLanding.jsx

@@ -1 @@
-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 (
     <div className="navbar bg-neutral shadow-sm">
       <div className="navbar-start">
-        <a className="btn btn-ghost" aria-label="Trekr home">
+        <Link className="btn btn-ghost" aria-label="Trekr home" to="/">
           <img src={logo} alt="Trekr" className="h-12 w-auto rounded-2xl" />
-        </a>
+        </Link>
       </div>
       <div className="navbar-end">
-        <button className="btn bg-black text-green-200 border-black hover:bg-black/90 hover:border-black px-8 mr-6">
-          Start Tracking
-        </button>
+        {isAuthed ? (
+          <div className="flex items-center gap-2 mr-6">
+            <Link className="btn btn-primary" to="/dashboard">
+              Dashboard
+            </Link>
+            <button className="btn btn-outline" onClick={onLogout}>
+              Logout
+            </button>
+          </div>
+        ) : (
+          <Link
+            className="btn bg-black text-green-200 border-black hover:bg-black/90 hover:border-black px-8 mr-6"
+            to="/login"
+          >
+            Start Tracking
+          </Link>
+        )}
       </div>
     </div>