fix ApiResponse on success

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "acc-server-manager-web",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "acc-server-manager-web",
-      "version": "0.20.0",
+      "version": "0.20.2",
       "dependencies": {
         "@date-fns/utc": "^2.1.1",
         "@hookform/resolvers": "^5.2.1",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "acc-server-manager-web",
-	"version": "0.20.0",
+	"version": "0.20.2",
 	"private": true,
 	"scripts": {
 		"dev": "next dev --turbopack",

src/app/dashboard/page.tsx

@@ -13,7 +13,7 @@ export default async function DashboardPage() {
 	return (
 		<div className="min-h-screen bg-gray-900 text-white">
 			<header className="bg-gray-800 shadow-md">
-				<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+				<div className="mx-auto flex max-w-[120rem] items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
 					<h1 className="text-2xl font-bold">ACC Server Manager</h1>
 					<div className="flex items-center space-x-4">
 						{hasPermission(session.user!, 'membership.view') && (
@@ -61,7 +61,7 @@ export default async function DashboardPage() {
 				</div>
 			</header>
 
-			<main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+			<main className="mx-auto max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8">
 				<div className="mb-6 flex items-center justify-between">
 					<h2 className="text-xl font-semibold">Your Servers</h2>
 					<RefreshButton />

src/app/dashboard/server/[id]/page.tsx

@@ -27,7 +27,7 @@ export default async function ServerPage({ params }: ServerPageProps) {
 
 	return (
 		<div className="min-h-screen bg-gray-900 text-white">
-			<div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+			<div className="mx-auto max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8">
 				<ServerHeader server={server} />
 
 				<div className="mt-8">

src/app/login/page.tsx

@@ -1,6 +1,15 @@
-import { loginAction } from '@/lib/actions/auth';
+'use client';
+
+import { loginAction, LoginResult } from '@/lib/actions/auth';
+import { useActionState } from 'react';
+
+const initialState: LoginResult = {
+	message: '',
+	success: true
+};
 
 export default function LoginPage() {
+	const [state, formAction] = useActionState(loginAction, initialState);
 	return (
 		<div className="flex min-h-screen items-center justify-center bg-gray-900 px-4">
 			<div className="w-full max-w-md space-y-8 rounded-lg bg-gray-800 p-8 shadow-lg">
@@ -8,8 +17,13 @@ export default function LoginPage() {
 					<h1 className="text-3xl font-bold text-white">ACC Server Manager</h1>
 					<p className="mt-2 text-gray-400">Sign in to manage your servers</p>
 				</div>
+				{state?.success ? null : (
+					<div className="rounded-md border border-red-700 bg-red-900/50 p-3 text-sm text-red-200">
+						{state?.message}
+					</div>
+				)}
 
-				<form action={loginAction} className="space-y-6">
+				<form action={formAction} className="space-y-6">
 					<div>
 						<label htmlFor="username" className="mb-2 block text-sm font-medium text-gray-300">
 							Username

src/app/logout/route.ts

@@ -0,0 +1,7 @@
+import { logout } from '@/lib/auth/server';
+import { redirect, RedirectType } from 'next/navigation';
+
+export async function GET() {
+	await logout();
+	redirect('/login', RedirectType.replace);
+}

src/app/page.tsx

@@ -7,6 +7,6 @@ export default async function HomePage() {
 	if (session.token && session.user) {
 		redirect('/dashboard');
 	} else {
-		redirect('/login');
+		redirect('/logout');
 	}
 }

src/components/membership/UserManagementTable.tsx

@@ -80,7 +80,7 @@ export function UserManagementTable({ initialData, roles, currentUser }: UserMan
 	return (
 		<>
 			<header className="bg-gray-800 shadow-md">
-				<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+				<div className="mx-auto flex max-w-[120rem] items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
 					<div className="flex items-center space-x-4">
 						<Link href="/dashboard" className="text-gray-300 hover:text-white">
 							<svg
@@ -111,7 +111,7 @@ export function UserManagementTable({ initialData, roles, currentUser }: UserMan
 				</div>
 			</header>
 
-			<main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+			<main className="mx-auto max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8">
 				{/* Filters */}
 				<div className="mb-6 rounded-lg border border-gray-700 bg-gray-800 p-4">
 					<h2 className="mb-3 text-lg font-semibold">Filters</h2>

src/components/server/ServerCard.tsx

@@ -1,6 +1,10 @@
 import Link from 'next/link';
 import { Server, ServiceStatus, getStatusColor, serviceStatusToString } from '@/lib/types';
-import { startServerAction, stopServerAction, restartServerAction } from '@/lib/actions/servers';
+import {
+	startServerEventAction,
+	restartServerEventAction,
+	stopServerEventAction
+} from '@/lib/actions/servers';
 
 interface ServerCardProps {
 	server: Server;
@@ -49,7 +53,7 @@ export function ServerCard({ server }: ServerCardProps) {
 			</Link>
 
 			<div className="flex justify-between gap-2 bg-gray-900 px-4 py-3">
-				<form action={startServerAction.bind(null, server.id)}>
+				<form action={startServerEventAction.bind(null, server.id)}>
 					<button
 						type="submit"
 						disabled={server.status === ServiceStatus.Running}
@@ -59,7 +63,7 @@ export function ServerCard({ server }: ServerCardProps) {
 					</button>
 				</form>
 
-				<form action={restartServerAction.bind(null, server.id)}>
+				<form action={restartServerEventAction.bind(null, server.id)}>
 					<button
 						type="submit"
 						disabled={server.status === ServiceStatus.Stopped}
@@ -69,7 +73,7 @@ export function ServerCard({ server }: ServerCardProps) {
 					</button>
 				</form>
 
-				<form action={stopServerAction.bind(null, server.id)}>
+				<form action={stopServerEventAction.bind(null, server.id)}>
 					<button
 						type="submit"
 						disabled={server.status === ServiceStatus.Stopped}

src/components/server/ServerHeader.tsx

@@ -1,6 +1,10 @@
 import Link from 'next/link';
 import { Server, getStatusColor, serviceStatusToString, ServiceStatus } from '@/lib/types/server';
-import { startServerAction, stopServerAction, restartServerAction } from '@/lib/actions/servers';
+import {
+	startServerEventAction,
+	restartServerEventAction,
+	stopServerEventAction
+} from '@/lib/actions/servers';
 
 interface ServerHeaderProps {
 	server: Server;
@@ -49,7 +53,7 @@ export function ServerHeader({ server }: ServerHeaderProps) {
 					</div>
 
 					<div className="flex space-x-3">
-						<form action={startServerAction.bind(null, server.id)}>
+						<form action={startServerEventAction.bind(null, server.id)}>
 							<button
 								type="submit"
 								disabled={server.status === ServiceStatus.Running}
@@ -59,7 +63,7 @@ export function ServerHeader({ server }: ServerHeaderProps) {
 							</button>
 						</form>
 
-						<form action={restartServerAction.bind(null, server.id)}>
+						<form action={restartServerEventAction.bind(null, server.id)}>
 							<button
 								type="submit"
 								disabled={server.status === ServiceStatus.Stopped}
@@ -69,7 +73,7 @@ export function ServerHeader({ server }: ServerHeaderProps) {
 							</button>
 						</form>
 
-						<form action={stopServerAction.bind(null, server.id)}>
+						<form action={stopServerEventAction.bind(null, server.id)}>
 							<button
 								type="submit"
 								disabled={server.status === ServiceStatus.Stopped}

src/components/statistics/StatisticsDashboard.tsx

@@ -40,13 +40,13 @@ export function StatisticsDashboard({ stats }: StatisticsDashboardProps) {
 			</div>
 
 			{/* Charts */}
-			<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-				<div className="rounded-lg bg-gray-800 p-6">
+			<div className="grid grid-cols-12 gap-4">
+				<div className="col-span-9 rounded-lg bg-gray-800 p-6">
 					<h3 className="mb-4 text-lg font-medium text-white">Player Count Over Time</h3>
 					<PlayerCountChart data={stats.playerCountOverTime ?? []} />
 				</div>
 
-				<div className="rounded-lg bg-gray-800 p-6">
+				<div className="col-span-3 rounded-lg bg-gray-800 p-6">
 					<h3 className="mb-4 text-lg font-medium text-white">Session Types</h3>
 					<SessionTypesChart data={stats.sessionTypes ?? []} />
 				</div>

src/lib/actions/auth.ts

@@ -1,16 +1,24 @@
 'use server';
 
-import { redirect } from 'next/navigation';
+import { redirect, RedirectType } from 'next/navigation';
 import { loginUser } from '@/lib/api/server/auth';
 import { login, logout } from '@/lib/auth/server';
 
-export async function loginAction(formData: FormData) {
+export type LoginResult = {
+	success: boolean;
+	message: string;
+};
+
+export async function loginAction(prevState: LoginResult, formData: FormData) {
 	try {
 		const username = formData.get('username') as string;
 		const password = formData.get('password') as string;
 
 		if (!username || !password) {
-			throw new Error('Username and password are required');
+			return {
+				success: false,
+				message: 'Username and password are required'
+			};
 		}
 
 		const result = await loginUser(username, password);
@@ -18,16 +26,21 @@ export async function loginAction(formData: FormData) {
 		if (result.token && result.user) {
 			await login(result.token, result.user);
 		} else {
-			throw new Error('Invalid credentials');
+			return {
+				success: false,
+				message: 'Invalid credentials'
+			};
 		}
 	} catch (error) {
-		throw new Error(error instanceof Error ? error.message : 'Authentication failed');
+		return {
+			success: false,
+			message: error instanceof Error ? error.message : 'Authentication failed'
+		};
 	}
 
 	redirect('/dashboard');
 }
 
 export async function logoutAction() {
-	await logout();
-	redirect('/login');
+	redirect('/logout');
 }

src/lib/actions/servers.ts

@@ -11,10 +11,17 @@ export async function startServerAction(serverId: string) {
 		revalidatePath('/dashboard');
 		revalidatePath(`/dashboard/server/${serverId}`);
 	} catch (error) {
-		throw new Error(error instanceof Error ? error.message : 'Failed to start server');
+		return {
+			success: false,
+			message: error instanceof Error ? error.message : 'Failed to start server'
+		};
 	}
 }
 
+export async function startServerEventAction(serverId: string) {
+	await startServerAction(serverId);
+}
+
 export async function stopServerAction(serverId: string) {
 	try {
 		const session = await requireAuth();
@@ -22,10 +29,17 @@ export async function stopServerAction(serverId: string) {
 		revalidatePath('/dashboard');
 		revalidatePath(`/dashboard/server/${serverId}`);
 	} catch (error) {
-		throw new Error(error instanceof Error ? error.message : 'Failed to stop server');
+		return {
+			success: false,
+			message: error instanceof Error ? error.message : 'Failed to stop server'
+		};
 	}
 }
 
+export async function stopServerEventAction(serverId: string) {
+	await stopServerAction(serverId);
+}
+
 export async function restartServerAction(serverId: string) {
 	try {
 		const session = await requireAuth();
@@ -33,6 +47,13 @@ export async function restartServerAction(serverId: string) {
 		revalidatePath('/dashboard');
 		revalidatePath(`/dashboard/server/${serverId}`);
 	} catch (error) {
-		throw new Error(error instanceof Error ? error.message : 'Failed to restart server');
+		return {
+			success: false,
+			message: error instanceof Error ? error.message : 'Failed to restart server'
+		};
 	}
 }
+
+export async function restartServerEventAction(serverId: string) {
+	await restartServerAction(serverId);
+}

src/lib/api/server/auth.ts

@@ -15,7 +15,11 @@ export async function loginUser(username: string, password: string) {
 	});
 
 	if (!response.ok) {
-		throw new Error(`Login failed: ${response.statusText} - ${BASE_URL}${authRoute}/login`);
+		if (response.status === 401) {
+			throw new Error(`Invalid credentials`);
+		}
+
+		throw new Error(`Login failed: ${response.statusText}`);
 	}
 
 	const { token } = await response.json();
@@ -25,6 +29,7 @@ export async function loginUser(username: string, password: string) {
 	return { token, user: userResponse };
 }
 
-export async function getCurrentUser(token: string) {
-	return fetchServerAPI<User>(`${authRoute}/me`, token);
+export async function getCurrentUser(token: string): Promise<User> {
+	const response = await fetchServerAPI<User>(`${authRoute}/me`, token);
+	return response.data!;
 }

src/lib/api/server/base.ts

@@ -1,11 +1,19 @@
+import { redirect } from 'next/navigation';
+
 const BASE_URL = process.env.API_BASE_URL || 'http://localhost:8080';
 
+type ApiResponse<T> = {
+	data?: T;
+	error?: string;
+	message?: string;
+};
+
 export async function fetchServerAPI<T>(
 	endpoint: string,
 	token: string,
 	method: string = 'GET',
 	body?: object
-): Promise<T> {
+): Promise<ApiResponse<T>> {
 	const headers: Record<string, string> = {
 		'Content-Type': 'application/json',
 		Authorization: `Bearer ${token}`
@@ -18,14 +26,18 @@ export async function fetchServerAPI<T>(
 	});
 
 	if (!response.ok) {
+		if (response.status == 401) {
+			redirect('/logout');
+			return { error: 'unauthorized' };
+		}
 		throw new Error(
 			`API Error: ${response.statusText} - ${method} - ${BASE_URL}${endpoint} - ${token}`
 		);
 	}
 
 	if (response.headers.get('Content-Type')?.includes('application/json')) {
-		return response.json();
+		return { data: await response.json() };
 	}
 
-	return response.text() as T;
+	return { message: await response.text() };
 }

src/lib/api/server/configuration.ts

@@ -6,7 +6,8 @@ import type {
 	EventConfig,
 	EventRules,
 	ServerSettings,
-	ConfigFile
+	ConfigFile,
+	Config
 } from '@/lib/types/config';
 
 const serverRoute = '/server';
@@ -15,22 +16,27 @@ export async function getServerConfigurations(
 	token: string,
 	serverId: string
 ): Promise<Configurations> {
-	return fetchServerAPI<Configurations>(`${serverRoute}/${serverId}/config`, token);
+	const response = await fetchServerAPI<Configurations>(`${serverRoute}/${serverId}/config`, token);
+	return response.data!;
 }
 
 export async function getServerConfiguration(
 	token: string,
 	serverId: string,
 	configType: ConfigFile
-): Promise<Configuration | AssistRules | EventConfig | EventRules | ServerSettings> {
-	return fetchServerAPI(`${serverRoute}/${serverId}/config/${configType}`, token);
+): Promise<Config> {
+	const response = await fetchServerAPI<Config>(
+		`${serverRoute}/${serverId}/config/${configType}`,
+		token
+	);
+	return response.data!;
 }
 
 export async function updateServerConfiguration(
 	token: string,
 	serverId: string,
 	configType: ConfigFile,
-	config: Configuration | AssistRules | EventConfig | EventRules | ServerSettings,
+	config: Config,
 	restart = false
 ): Promise<void> {
 	await fetchServerAPI(`${serverRoute}/${serverId}/config/${configType}`, token, 'PUT', {

src/lib/api/server/lookups.ts

@@ -4,21 +4,29 @@ import { Track, CarModel, CupCategory, DriverCategory, SessionType } from '@/lib
 const lookupRoute = '/lookup';
 
 export async function getTracks(token: string): Promise<Track[]> {
-	return fetchServerAPI(`${lookupRoute}/tracks`, token);
+	const response = await fetchServerAPI<Track[]>(`${lookupRoute}/tracks`, token);
+	return response.data!;
 }
 
 export async function getCarModels(token: string): Promise<CarModel[]> {
-	return fetchServerAPI(`${lookupRoute}/car-models`, token);
+	const response = await fetchServerAPI<CarModel[]>(`${lookupRoute}/car-models`, token);
+	return response.data!;
 }
 
 export async function getCupCategories(token: string): Promise<CupCategory[]> {
-	return fetchServerAPI(`${lookupRoute}/cup-categories`, token);
+	const response = await fetchServerAPI<CupCategory[]>(`${lookupRoute}/cup-categories`, token);
+	return response.data!;
 }
 
 export async function getDriverCategories(token: string): Promise<DriverCategory[]> {
-	return fetchServerAPI(`${lookupRoute}/driver-categories`, token);
+	const response = await fetchServerAPI<DriverCategory[]>(
+		`${lookupRoute}/driver-categories`,
+		token
+	);
+	return response.data!;
 }
 
 export async function getSessionTypes(token: string): Promise<SessionType[]> {
-	return fetchServerAPI(`${lookupRoute}/session-types`, token);
+	const response = await fetchServerAPI<SessionType[]>(`${lookupRoute}/session-types`, token);
+	return response.data!;
 }

src/lib/api/server/membership.ts

@@ -24,28 +24,35 @@ export async function getUsers(token: string, params: UserListParams = {}): Prom
 	const queryString = searchParams.toString();
 	const endpoint = `${membershipRoute}${queryString ? `?${queryString}` : ''}`;
 
-	return fetchServerAPI(endpoint, token);
+	const response = await fetchServerAPI<User[]>(endpoint, token);
+	return response.data!;
 }
 
 export async function createUser(
 	token: string,
 	userData: { username: string; password: string; role: string }
-) {
-	return fetchServerAPI(membershipRoute, token, 'POST', userData);
+): Promise<void> {
+	await fetchServerAPI(membershipRoute, token, 'POST', userData);
 }
 
 export async function getUserById(token: string, userId: string): Promise<User> {
-	return fetchServerAPI(`${membershipRoute}/${userId}`, token);
+	const response = await fetchServerAPI<User>(`${membershipRoute}/${userId}`, token);
+	return response.data!;
 }
 
-export async function updateUser(token: string, userId: string, userData: Partial<User>) {
-	return fetchServerAPI(`${membershipRoute}/${userId}`, token, 'PUT', userData);
+export async function updateUser(
+	token: string,
+	userId: string,
+	userData: Partial<User>
+): Promise<void> {
+	await fetchServerAPI(`${membershipRoute}/${userId}`, token, 'PUT', userData);
 }
 
-export async function deleteUser(token: string, userId: string) {
-	return fetchServerAPI(`${membershipRoute}/${userId}`, token, 'DELETE');
+export async function deleteUser(token: string, userId: string): Promise<void> {
+	await fetchServerAPI(`${membershipRoute}/${userId}`, token, 'DELETE');
 }
 
 export async function getRoles(token: string): Promise<Role[]> {
-	return fetchServerAPI(`${membershipRoute}/roles`, token);
+	const response = await fetchServerAPI<Role[]>(`${membershipRoute}/roles`, token);
+	return response.data!;
 }

src/lib/api/server/servers.ts

@@ -1,30 +1,31 @@
 import { fetchServerAPI } from './base';
-import { Server } from '@/lib/types/server';
+import { Server, ServiceStatus } from '@/lib/types/server';
 
 const serverRoute = '/server';
 
 export async function getServers(token: string): Promise<Server[]> {
 	const response = await fetchServerAPI<Server[]>(serverRoute, token);
-	return response;
+	return response.data!;
 }
 
 export async function getServer(token: string, serverId: string): Promise<Server> {
 	const response = await fetchServerAPI<Server>(`${serverRoute}/${serverId}`, token);
-	return response;
+	return response.data!;
 }
 
-export async function restartService(token: string, serverId: string) {
-	return fetchServerAPI(`${serverRoute}/${serverId}/service/restart`, token, 'POST');
+export async function restartService(token: string, serverId: string): Promise<void> {
+	await fetchServerAPI(`${serverRoute}/${serverId}/service/restart`, token, 'POST');
 }
 
-export async function startService(token: string, serverId: string) {
-	return fetchServerAPI(`${serverRoute}/${serverId}/service/start`, token, 'POST');
+export async function startService(token: string, serverId: string): Promise<void> {
+	await fetchServerAPI(`${serverRoute}/${serverId}/service/start`, token, 'POST');
 }
 
-export async function stopService(token: string, serverId: string) {
-	return fetchServerAPI(`${serverRoute}/${serverId}/service/stop`, token, 'POST');
+export async function stopService(token: string, serverId: string): Promise<void> {
+	await fetchServerAPI(`${serverRoute}/${serverId}/service/stop`, token, 'POST');
 }
 
-export async function getServiceStatus(token: string, serverId: string) {
-	return fetchServerAPI(`${serverRoute}/${serverId}/service`, token);
+export async function getServiceStatus(token: string, serverId: string): Promise<ServiceStatus> {
+	const response = await fetchServerAPI<ServiceStatus>(`${serverRoute}/${serverId}/service`, token);
+	return response.data!;
 }

src/lib/api/server/statistics.ts

@@ -9,8 +9,9 @@ export async function getServerStatistics(
 	startDate: string,
 	endDate: string
 ): Promise<StateHistoryStats> {
-	return fetchServerAPI<StateHistoryStats>(
+	const response = await fetchServerAPI<StateHistoryStats>(
 		`${serverRoute}/${serverId}/state-history/statistics?start_date=${startDate}&end_date=${endDate}`,
 		token
 	);
+	return response.data!;
 }

src/lib/auth/server.ts

@@ -12,7 +12,7 @@ export async function requireAuth() {
 	const session = await getSession();
 
 	if (!session.token || !session.user) {
-		redirect('/login');
+		redirect('/logout');
 	}
 
 	return session;