Started implementation of basic frontend for ToDoList App

frontend/src/App.tsx

@@ -0,0 +1,16 @@
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Login from "./pages/Login";
+import Tasks from "./pages/Tasks";
+
+const App = () => {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/tasks" element={<Tasks />} />
+      </Routes>
+    </Router>
+  );
+};
+
+export default App;

frontend/src/api/api.ts

@@ -0,0 +1,44 @@
+import axios from "axios";
+import Cookies from "js-cookie";
+
+const API_URL = "http://localhost:5000";
+
+const api = axios.create({
+  baseURL: API_URL,
+  headers: {
+    "Content-Type": "application/json",
+    Accept: "application/json",
+  },
+  withCredentials: true,
+});
+
+// User login
+export const login = async (username: string, password: string) => {
+  try {
+    const response = await api.post("/login", { username, password });
+
+    const userId = response.data.user_id;
+
+    Cookies.set("user_id", String(userId), { secure: true, sameSite: "Strict" });
+
+    return { userId };
+  } catch (error) {
+    throw new Error("Incorrect username or password.");
+  }
+};
+
+// Get user tasks
+export const getTasks = async () => {
+  const userId = Cookies.get("user_id");
+  if (!userId) throw new Error("No user_id in cookies.");
+
+  const response = await api.get(`/tasks/user/${userId}`);
+  return response.data;
+};
+
+// Logout
+export const logout = async () => {
+  await api.get("/logout"); // API usunie JWT
+  Cookies.remove("access_token_cookie");
+  Cookies.remove("user_id");
+};

frontend/src/api/auth.ts

@@ -0,0 +1,22 @@
+import axios from "axios";
+import Cookies from "js-cookie";
+
+const API_URL = "http://localhost:5000";
+
+export const logout = async () => {
+  try {
+    await axios.get(`${API_URL}/logout`, { withCredentials: true });
+  } catch (error) {
+    console.error("Error during logout:", error);
+  }
+
+  // Remove JWT token from cookies
+  document.cookie = "access_token_cookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+  localStorage.removeItem("user_id");
+};
+
+export const getCsrfToken = () => {
+  const value = Cookies.get("csrf_access_token");
+  const header = {"X-CSRF-TOKEN": value}
+  return header;
+};

frontend/src/api/tasks.ts

@@ -0,0 +1,26 @@
+import axios from "axios";
+import { getCsrfToken } from "./auth";
+
+const API_URL = "http://localhost:5000";
+
+// Get user tasks
+export const getUserTasks = async (userId: number) => {
+  const response = await axios.get(`${API_URL}/tasks/user/${userId}`, {withCredentials: true, headers: getCsrfToken()});
+  return response.data;
+};
+
+// Create new task
+export const createTask = async (taskData: {
+  title: string;
+  description: string;
+  due_date: string;
+  done: boolean;
+}) => {
+  const response = await axios.post(`${API_URL}/tasks`, taskData, {withCredentials: true, headers: getCsrfToken()});
+  return response.data;
+};
+
+// Delete task
+export const deleteTask = async (taskId: number) => {
+  await axios.delete(`${API_URL}/tasks/${taskId}`, {withCredentials: true, headers: getCsrfToken()});
+};

frontend/src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/pages/Login.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { login } from "../api/api";
+
+const Login = () => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const navigate = useNavigate();
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    try {
+      const { userId } = await login(username, password);
+      console.log("User logged in successfully! user_id:", userId);
+      navigate("/tasks");
+    } catch (err) {
+      console.error(err);
+      setError("Incorrect login data");
+    }
+  };
+
+  return (
+    <div className="flex justify-center items-center h-screen bg-gray-100">
+      <div className="bg-white p-8 rounded-lg shadow-md w-96">
+        <h2 className="text-2xl font-bold mb-4 text-center">Logowanie</h2>
+        {error && <p className="text-red-500 text-center">{error}</p>}
+        
+        <form onSubmit={handleLogin} className="flex flex-col gap-4">
+          <input 
+            type="text" 
+            placeholder="Nazwa użytkownika" 
+            value={username} 
+            onChange={(e) => setUsername(e.target.value)} 
+            className="border p-2 rounded"
+            required
+          />
+          <input 
+            type="password" 
+            placeholder="Hasło" 
+            value={password} 
+            onChange={(e) => setPassword(e.target.value)} 
+            className="border p-2 rounded"
+            required
+          />
+          <button type="submit" className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">
+            Zaloguj się
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

frontend/src/pages/Tasks.tsx

@@ -0,0 +1,127 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { getUserTasks, createTask, deleteTask } from "../api/tasks";
+import { logout } from "../api/auth";
+import Cookies from "js-cookie";
+
+// Define Task type
+interface Task {
+  id: number;
+  title: string;
+  description: string;
+  due_date: string;
+  done: boolean;
+}
+
+const Tasks = () => {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [newTask, setNewTask] = useState({ title: "", description: "", due_date: "", done: false });
+  const navigate = useNavigate();
+  const userId = Number(Cookies.get("user_id"))
+
+  useEffect(() => {
+    if (!userId) {
+      navigate("/login");
+      return;
+    }
+
+    const fetchTasks = async () => {
+      try {
+        const tasksData = await getUserTasks(userId);
+        setTasks(tasksData);
+      } catch (error) {
+        console.error("Błąd pobierania zadań:", error);
+      }
+    };
+
+    fetchTasks();
+  }, [userId]);
+
+  const handleLogout = async () => {
+    await logout();
+    navigate("/login");
+  };
+
+  const handleCreateTask = async () => {
+    try {
+      const task = await createTask(newTask);
+      setTasks([...tasks, task]); // List update
+      setNewTask({ title: "", description: "", due_date: "", done: false }); // Form reset
+    } catch (error) {
+      console.error("Błąd tworzenia zadania:", error);
+    }
+  };
+
+  const handleDeleteTask = async (taskId: number) => {
+    try {
+      await deleteTask(taskId);
+      setTasks(tasks.filter((task) => task.id !== taskId));
+    } catch (error) {
+      console.error("Błąd usuwania zadania:", error);
+    }
+  };
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">Twoje zadania</h1>
+
+      <button 
+        onClick={handleLogout} 
+        className="bg-red-500 text-white p-2 rounded hover:bg-red-600 mb-4"
+      >
+        Wyloguj
+      </button>
+
+      {/* Form to add a task */}
+      <div className="mb-6">
+        <input 
+          type="text" placeholder="Tytuł" value={newTask.title} 
+          onChange={(e) => setNewTask({ ...newTask, title: e.target.value })} 
+          className="border p-2 mr-2"
+        />
+        <input 
+          type="text" placeholder="Opis" value={newTask.description} 
+          onChange={(e) => setNewTask({ ...newTask, description: e.target.value })} 
+          className="border p-2 mr-2"
+        />
+        <input 
+          type="text" placeholder="Termin (DD-MM-YYYY HH:MM)" value={newTask.due_date} 
+          onChange={(e) => setNewTask({ ...newTask, due_date: e.target.value })} 
+          className="border p-2 mr-2"
+        />
+        <button 
+          onClick={handleCreateTask} 
+          className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
+        >
+          Dodaj zadanie
+        </button>
+      </div>
+
+      {/* 🔹 Task list */}
+      {tasks.length === 0 ? (
+        <p>Brak zadań.</p>
+      ) : (
+        <ul>
+          {tasks.map((task) => (
+            <li key={task.id} className="border p-2 rounded mb-2 flex justify-between items-center">
+              <div>
+                <h2 className="font-semibold">{task.title}</h2>
+                <p>{task.description}</p>
+                <p><strong>Termin:</strong> {task.due_date}</p>
+                <p><strong>Status:</strong> {task.done ? "✅ Zrobione" : "⏳ Do zrobienia"}</p>
+              </div>
+              <button 
+                onClick={() => handleDeleteTask(task.id)} 
+                className="bg-red-500 text-white p-2 rounded hover:bg-red-600"
+              >
+                ❌ Usuń
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default Tasks;

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />