Changeset 24a2a2a for frontend

Timestamp:

01/26/26 16:28:56 (6 months ago)

Author:

Filip Gavrilovski <filipgavrilovski28@…>

Branches:

main

Children:

4022db1

Parents:

0c86e77

Message:

add login page

Location:

frontend/src

Files:

• App.tsx (modified) (2 diffs)
• Login.tsx (modified) (1 diff)
• Nav.tsx (added)
• Register.tsx (modified) (3 diffs)
• context/authContext.tsx (modified) (1 diff)

frontend/src/App.tsx

@@ -2 +2 @@
 import LandingPage from "./LandingPage";
 import Login from "./Login";
+import Nav from "./Nav";
 import Register from "./Register";
 
@@ -7 +8 @@
         return (
                 <div className="flex flex-col min-h-screen">
-                        {/* <Nav /> */}
+                        <Nav />
                         <main className="grow">
                                 <Outlet />

frontend/src/Login.tsx

@@ +1 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import axiosInstance, { scheduleTokenRefresh } from "./api/axiosInstance";
+import { useAuth } from "./context/authContext";
+import type { UserResponse } from "./types";
+
 const Login = () => {
-        return <div>login</div>;
+        const [username, setUsername] = useState("");
+        const [password, setPassword] = useState("");
+        const [error, setError] = useState<string | null>(null);
+        const { setUser } = useAuth();
+        const navigate = useNavigate();
+
+        const handleLogin = async (e: React.FormEvent) => {
+                e.preventDefault();
+                try {
+                        const response = await axiosInstance.post<{
+                                user: UserResponse;
+                                tokenExpiresIn: number;
+                        }>("/auth/login", { username, password });
+                        scheduleTokenRefresh(response.data.tokenExpiresIn);
+                        setUser({
+                                username: response.data.user.username,
+                                fullName: "demo",
+                                email: "demo@demo.com",
+                                role: response.data.user.role,
+                        });
+                        navigate("/");
+                } catch (error) {
+                        setError("Login failed. Please check your credentials.");
+                }
+        };
+        return (
+                <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+                        <h2 className="text-2xl mb-4">Login</h2>
+                        <form
+                                onSubmit={handleLogin}
+                                className="bg-white p-6 rounded shadow-md w-80"
+                        >
+                                {error && <p className="text-red-500 mb-4">{error}</p>}
+                                <div className="mb-4">
+                                        <label className="block text-gray-700 mb-2" htmlFor="username">
+                                                Username
+                                        </label>
+                                        <input
+                                                type="text"
+                                                id="username"
+                                                className="w-full p-2 border border-gray-300 rounded"
+                                                value={username}
+                                                onChange={(e) => setUsername(e.target.value)}
+                                        />
+                                </div>
+                                <div className="mb-4">
+                                        <label className="block text-gray-700 mb-2" htmlFor="password">
+                                                Password
+                                        </label>
+                                        <input
+                                                type="password"
+                                                id="password"
+                                                className="w-full p-2 border border-gray-300 rounded"
+                                                value={password}
+                                                onChange={(e) => setPassword(e.target.value)}
+                                        />
+                                </div>
+                                <button
+                                        type="submit"
+                                        className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200 w-full"
+                                >
+                                        Login
+                                </button>
+                        </form>
+                </div>
+        );
 };
 

frontend/src/Register.tsx

@@ -15 +15 @@
         const navigate = useNavigate();
 
-        const handleRegister = async () => {
+        const handleRegister = async (e: React.FormEvent) => {
+                e.preventDefault();
                 const newUser: User = {
                         username,
@@ -35 +36 @@
                         scheduleTokenRefresh(response.data.tokenExpiresIn);
                         setUser(newUser);
+                        // todo
                         // setUser(response.data.user);
                         navigate("/");
@@ -109 +111 @@
                                         type="submit"
                                         className="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
-                                        onClick={(e) => {
-                                                e.preventDefault();
-                                                handleRegister();
-                                        }}
+                                        onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
+                                                handleRegister(e)
+                                        }
                                 >
                                         Register

frontend/src/context/authContext.tsx

@@ -41 +41 @@
                                         tokenExpiresIn: number;
                                         user: User;
-                                }>("/user");
+                                }>("/auth/user");
                                 setUser(response.data.user);
                                 scheduleTokenRefresh(response.data.tokenExpiresIn);