Index: frontend/src/App.tsx =================================================================== --- frontend/src/App.tsx (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) +++ frontend/src/App.tsx (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) @@ -1,34 +1,52 @@ -import { useEffect } from "react"; -import { BrowserRouter, Routes, Route } from "react-router-dom"; +import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom"; import AllUsers from "./components/userProfile/AllUsersHelper"; import UserDetail from "./components/userProfile/UserDetailView"; +import LandingPage from "./LandingPage"; +import Login from "./Login"; +import Nav from "./Nav"; +import Register from "./Register"; -function Home() { - useEffect(() => { - const fetchData = async () => { - const response = await fetch("http://localhost:8080/"); - const data = await response.json(); - console.log(data); - }; - fetchData(); - }); +const Layout = () => { + return ( +
+
+ ); +}; - return ( - <> -

ok

- - ); -} +const router = createBrowserRouter([ + { + path: "", + element: , + children: [ + { + path: "/", + element: , + }, + { + path: "/login", + element: , + }, + { + path: "/users", + element: , + }, + { + path: "/users/:userId", + element: , + }, + { + path: "/register", + element: , + }, + ], + }, +]); function App() { - return ( - - - } /> - } /> - } /> - - - ); + return ; } Index: frontend/src/LandingPage.tsx =================================================================== --- frontend/src/LandingPage.tsx (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) +++ frontend/src/LandingPage.tsx (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) @@ -0,0 +1,5 @@ +const LandingPage = () => { + return
landing page
; +}; + +export default LandingPage; Index: frontend/src/Login.tsx =================================================================== --- frontend/src/Login.tsx (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) +++ frontend/src/Login.tsx (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) @@ -0,0 +1,71 @@ +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import axiosInstance, { scheduleTokenRefresh } from "./api/axiosInstance"; +import { useAuth } from "./context/authContext"; +import type { User } from "./types"; + +const Login = () => { + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(null); + const { setUser } = useAuth(); + const navigate = useNavigate(); + + const handleLogin = async (e: React.FormEvent) => { + e.preventDefault(); + try { + const response = await axiosInstance.post<{ + user: User; + tokenExpiresIn: number; + }>("/auth/login", { username, password }); + scheduleTokenRefresh(response.data.tokenExpiresIn); + setUser(response.data.user); + navigate("/"); + } catch (error) { + setError("Login failed. Please check your credentials."); + } + }; + return ( +
+

Login

+
+ {error &&

{error}

} +
+ + setUsername(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+ +
+
+ ); +}; + +export default Login; Index: frontend/src/Nav.tsx =================================================================== --- frontend/src/Nav.tsx (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) +++ frontend/src/Nav.tsx (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) @@ -0,0 +1,85 @@ +import { Link } from "react-router-dom"; +import axiosInstance, { baseURL } from "./api/axiosInstance"; +import Logo from "./assets/logo-finkwave.png"; +import { useAuth } from "./context/authContext"; + +const Nav = () => { + const { user, setUser, isAuthLoading } = useAuth(); + + const handleLogout = async (e: React.MouseEvent) => { + e.preventDefault(); + try { + await axiosInstance.post("/auth/logout"); + setUser(undefined); + } catch (error) { + console.error("Logout failed:", error); + } + }; + + return ( +
+ + Finkwave Logo + + +
+ {!isAuthLoading && ( +
+ {user ? ( +
+
+ {user.profilePhoto ? ( + {`${user.username}'s + ) : ( +
+ + {user.username.charAt(0).toUpperCase()} + +
+ )} + +
+

{user.username}

+

+ {user.role} +

+
+
+ +
+ ) : ( +
+ + Login + + + Register + +
+ )} +
+ )} +
+
+ ); +}; + +export default Nav; Index: frontend/src/Register.tsx =================================================================== --- frontend/src/Register.tsx (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) +++ frontend/src/Register.tsx (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) @@ -0,0 +1,160 @@ +import { useEffect, useState } from "react"; +import { useNavigate } from "react-router"; +import axiosInstance, { scheduleTokenRefresh } from "./api/axiosInstance"; +import { useAuth } from "./context/authContext"; +import type { User } from "./types"; + +const Register = () => { + const { setUser } = useAuth(); + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [fullname, setFullname] = useState(""); + const [email, setEmail] = useState(""); + const [profilePhotoFile, setProfilePhotoFile] = useState(null); + const [previewProfilePhoto, setPreviewProfilePhoto] = useState( + null, + ); + + const navigate = useNavigate(); + + useEffect(() => { + return () => { + if (previewProfilePhoto) { + URL.revokeObjectURL(previewProfilePhoto); + } + }; + }, [previewProfilePhoto]); + + const handleRegister = async (e: React.FormEvent) => { + e.preventDefault(); + // todo: add proper error handling + if (profilePhotoFile && profilePhotoFile.size > 5 * 1024 * 1024) { + alert("Max file size is 5MB"); + return; + } + + if (profilePhotoFile && !profilePhotoFile.type.startsWith("image/")) { + alert("Only images allowed"); + return; + } + const formData = new FormData(); + if (profilePhotoFile) formData.append("profilePhoto", profilePhotoFile); + formData.append("username", username); + formData.append("fullname", fullname); + formData.append("email", email); + formData.append("password", password); + + try { + const response = await axiosInstance.post<{ + user: User; + tokenExpiresIn: number; + }>("/auth/register", formData); + scheduleTokenRefresh(response.data.tokenExpiresIn); + setUser(response.data.user); + navigate("/"); + } catch (error) { + console.error("Registration failed:", error); + } + }; + + return ( +
+

Register

+
+
+ + setUsername(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+
+ + setFullname(e.target.value)} + /> +
+
+ + setEmail(e.target.value)} + /> +
+
+ +
+ + + {profilePhotoFile ? profilePhotoFile.name : "No file chosen"} + +
+ { + if (e.target.files && e.target.files[0]) { + setProfilePhotoFile(e.target.files[0]); + setPreviewProfilePhoto(URL.createObjectURL(e.target.files[0])); + } + }} + /> +
+ {previewProfilePhoto && ( +
+

Profile Photo Preview:

+ Profile Preview +
+ )} + +
+
+ ); +}; + +export default Register; Index: frontend/src/api/axiosInstance.ts =================================================================== --- frontend/src/api/axiosInstance.ts (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) +++ frontend/src/api/axiosInstance.ts (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) @@ -0,0 +1,88 @@ +import axios from "axios"; + +export const baseURL = import.meta.env.VITE_API_BASE_URL; + +export const axiosInstance = axios.create({ + baseURL, + withCredentials: true, +}); + +// set content-type to application/json unless sending FormData +axiosInstance.interceptors.request.use((config) => { + if (!(config.data instanceof FormData)) { + config.headers["Content-Type"] = "application/json"; + } + return config; +}); + +let refreshPromise: Promise | null = null; +let refreshTimeout: number | null = null; + +export const clearRefreshTimeout = () => { + if (refreshTimeout) { + clearTimeout(refreshTimeout); + refreshTimeout = null; + } +}; + +export const scheduleTokenRefresh = (expiryTimeSeconds: number) => { + clearRefreshTimeout(); + + if (!expiryTimeSeconds || expiryTimeSeconds <= 0) { + return; + } + + const refreshTime = (expiryTimeSeconds - 60) * 1000; + if (refreshTime <= 0) { + refreshTokenMethod(); + } else { + refreshTimeout = setTimeout(refreshTokenMethod, refreshTime); + } +}; + +export const refreshTokenMethod = async (): Promise => { + if (refreshPromise) { + return refreshPromise; + } + + refreshPromise = (async () => { + try { + const refreshResponse = await axiosInstance.post<{ + tokenExpiresIn: number; + }>("/auth/refresh"); + scheduleTokenRefresh(refreshResponse.data.tokenExpiresIn); + } catch (err) { + clearRefreshTimeout(); + console.error(err); + throw err; + } finally { + refreshPromise = null; + } + })(); + return refreshPromise; +}; + +axiosInstance.interceptors.response.use( + (response) => response, + async (error) => { + const originalConfig = error.config; + if ( + [401, 403].includes(error.response?.status) && + !originalConfig._retry && + originalConfig.url !== "/auth/refresh" + ) { + originalConfig._retry = true; + + try { + await refreshTokenMethod(); + return axiosInstance(originalConfig); + } catch (err) { + clearRefreshTimeout(); + return Promise.reject(err); + } + } + return Promise.reject(error); + }, +); + +export default axiosInstance; Index: frontend/src/context/authContext.tsx =================================================================== --- frontend/src/context/authContext.tsx (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) +++ frontend/src/context/authContext.tsx (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) @@ -0,0 +1,63 @@ +import { + createContext, + useContext, + useEffect, + useState, + type Dispatch, + type ReactNode, + type SetStateAction, +} from "react"; +import axiosInstance, { + refreshTokenMethod, + scheduleTokenRefresh, +} from "../api/axiosInstance"; +import { type User } from "../types"; + +interface AuthContextType { + user: User | undefined; + setUser: Dispatch>; + isAuthLoading: boolean; +} + +const AuthContext = createContext({ + user: undefined, + setUser: () => {}, + isAuthLoading: false, +}); + +interface AuthProviderProps { + children: ReactNode; +} + +export const AuthProvider = ({ children }: AuthProviderProps) => { + const [user, setUser] = useState(undefined); + const [isAuthLoading, setIsAuthLoading] = useState(true); + + useEffect(() => { + const fetchUserDetails = async () => { + try { + await refreshTokenMethod(); + const response = await axiosInstance.get<{ + tokenExpiresIn: number; + user: User; + }>("/auth/user"); + setUser(response.data.user); + scheduleTokenRefresh(response.data.tokenExpiresIn); + } catch (error) { + setUser(undefined); + } finally { + setIsAuthLoading(false); + } + }; + + fetchUserDetails(); + }, []); + + return ( + + {children} + + ); +}; + +export const useAuth = () => useContext(AuthContext); Index: frontend/src/main.tsx =================================================================== --- frontend/src/main.tsx (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) +++ frontend/src/main.tsx (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) @@ -2,9 +2,12 @@ import { createRoot } from "react-dom/client"; import App from "./App.tsx"; +import { AuthProvider } from "./context/authContext.tsx"; import "./index.css"; createRoot(document.getElementById("root")!).render( - + + + , ); Index: frontend/src/types.ts =================================================================== --- frontend/src/types.ts (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) +++ frontend/src/types.ts (revision d47e22514aceaaacf9474187f2d3ee201e310ecd) @@ -0,0 +1,7 @@ +export interface User { + username: string; + fullName: string; + email?: string; + profilePhoto?: string | null; + role?: "ADMIN" | "NONADMIN"; +}