+
-
);
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
new file mode 100644
index 0000000..0d822a7
--- /dev/null
+++ b/frontend/src/pages/Login.tsx
@@ -0,0 +1,164 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2 } from "lucide-react";
+import { api } from "@/lib/api";
+import { useAuthStore } from "@/store/authStore";
+
+export function Login() {
+ const [isLogin, setIsLogin] = useState(true);
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState("");
+ const navigate = useNavigate();
+ const login = useAuthStore((state) => state.login);
+
+ const [formData, setFormData] = useState({
+ username: "",
+ email: "",
+ password: "",
+ });
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError("");
+ setIsLoading(true);
+
+ try {
+ if (isLogin) {
+ // Handle Login using application/x-www-form-urlencoded as required by OAuth2PasswordRequestForm
+ const params = new URLSearchParams();
+ params.append("username", formData.username);
+ params.append("password", formData.password);
+
+ const response = await fetch("/api/v1/auth/login", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/x-www-form-urlencoded",
+ },
+ body: params,
+ });
+
+ if (!response.ok) {
+ const errData = await response.json();
+ throw new Error(errData.detail || "Login failed");
+ }
+
+ const data = await response.json();
+ login(data.user, data.access_token);
+ navigate("/");
+ } else {
+ // Handle Registration
+ await api.post("/api/v1/auth/register", {
+ username: formData.username,
+ email: formData.email,
+ password: formData.password,
+ });
+
+ // Auto login after successful registration
+ setIsLogin(true);
+ setError("Registration successful! Please login.");
+ }
+ } catch (err: any) {
+ setError(err.message || "An error occurred");
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ {isLogin ? "Welcome Back" : "Create Account"}
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+ {isLogin ? "Don't have an account?" : "Already have an account?"}
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Users.tsx b/frontend/src/pages/Users.tsx
new file mode 100644
index 0000000..a20e3e3
--- /dev/null
+++ b/frontend/src/pages/Users.tsx
@@ -0,0 +1,266 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Pencil, Trash2, Plus, Users as UsersIcon, Loader2 } from "lucide-react";
+import { api } from "@/lib/api";
+
+interface User {
+ id: number;
+ username: string;
+ email: string;
+ is_active: boolean;
+ is_admin: boolean;
+ created_at: string;
+}
+
+export function Users() {
+ const [users, setUsers] = useState
([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [isDialogOpen, setIsDialogOpen] = useState(false);
+ const [editingUser, setEditingUser] = useState(null);
+ const [formData, setFormData] = useState({
+ username: "",
+ email: "",
+ password: "",
+ is_active: true,
+ is_admin: false,
+ });
+ const [error, setError] = useState("");
+
+ const fetchUsers = async () => {
+ try {
+ setIsLoading(true);
+ const data = await api.get("/api/v1/users");
+ setUsers(data);
+ } catch (err) {
+ console.error("Failed to fetch users", err);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchUsers();
+ }, []);
+
+ const handleOpenDialog = (user?: User) => {
+ setError("");
+ if (user) {
+ setEditingUser(user);
+ setFormData({
+ username: user.username,
+ email: user.email,
+ password: "", // Don't show password
+ is_active: user.is_active,
+ is_admin: user.is_admin,
+ });
+ } else {
+ setEditingUser(null);
+ setFormData({
+ username: "",
+ email: "",
+ password: "",
+ is_active: true,
+ is_admin: false,
+ });
+ }
+ setIsDialogOpen(true);
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError("");
+
+ try {
+ if (editingUser) {
+ // Update
+ await api.put(`/api/v1/users/${editingUser.id}`, {
+ username: formData.username,
+ email: formData.email,
+ is_active: formData.is_active,
+ is_admin: formData.is_admin,
+ });
+ } else {
+ // Create
+ if (!formData.password) {
+ setError("Password is required for new users");
+ return;
+ }
+ await api.post("/api/v1/users", formData);
+ }
+ setIsDialogOpen(false);
+ fetchUsers();
+ } catch (err: any) {
+ setError(err.message || "An error occurred");
+ }
+ };
+
+ const handleDelete = async (id: number) => {
+ if (window.confirm("Are you sure you want to delete this user?")) {
+ try {
+ await api.delete(`/api/v1/users/${id}`);
+ fetchUsers();
+ } catch (err) {
+ console.error("Failed to delete user", err);
+ }
+ }
+ };
+
+ return (
+
+
+
+
+ User Management
+
+
+
+
+
+
+ {isLoading ? (
+
+
+
+ ) : (
+
+
+
+ ID
+ Username
+ Email
+ Status
+ Role
+ Created At
+ Actions
+
+
+
+ {users.length === 0 ? (
+
+
+ No users found.
+
+
+ ) : (
+ users.map((user) => (
+
+ {user.id}
+ {user.username}
+ {user.email}
+
+
+ {user.is_active ? 'Active' : 'Inactive'}
+
+
+
+
+ {user.is_admin ? 'Admin' : 'User'}
+
+
+
+ {new Date(user.created_at).toLocaleDateString()}
+
+
+
+
+
+
+ ))
+ )}
+
+
+ )}
+
+
+