update version

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "acc-server-manager-web",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "acc-server-manager-web",
-      "version": "0.20.0",
+      "version": "0.20.1",
       "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.1",
 	"private": true,
 	"scripts": {
 		"dev": "next dev --turbopack",

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/components/server/ServerCard.tsx

@@ -7,6 +7,18 @@ interface ServerCardProps {
 }
 
 export function ServerCard({ server }: ServerCardProps) {
+	const handleStartServer = () => {
+		startServerAction(server.id);
+	};
+
+	const handleStopServer = () => {
+		stopServerAction(server.id);
+	};
+
+	const handleRestartServer = () => {
+		restartServerAction(server.id);
+	};
+
 	return (
 		<div className="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-lg">
 			<Link href={`/dashboard/server/${server.id}`} className="block">
@@ -49,7 +61,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={handleStartServer}>
 					<button
 						type="submit"
 						disabled={server.status === ServiceStatus.Running}
@@ -59,7 +71,7 @@ export function ServerCard({ server }: ServerCardProps) {
 					</button>
 				</form>
 
-				<form action={restartServerAction.bind(null, server.id)}>
+				<form action={handleRestartServer}>
 					<button
 						type="submit"
 						disabled={server.status === ServiceStatus.Stopped}
@@ -69,7 +81,7 @@ export function ServerCard({ server }: ServerCardProps) {
 					</button>
 				</form>
 
-				<form action={stopServerAction.bind(null, server.id)}>
+				<form action={handleStopServer}>
 					<button
 						type="submit"
 						disabled={server.status === ServiceStatus.Stopped}

src/components/server/ServerHeader.tsx

@@ -7,6 +7,18 @@ interface ServerHeaderProps {
 }
 
 export function ServerHeader({ server }: ServerHeaderProps) {
+	const handleStartServer = () => {
+		startServerAction(server.id);
+	};
+
+	const handleStopServer = () => {
+		stopServerAction(server.id);
+	};
+
+	const handleRestartServer = () => {
+		restartServerAction(server.id);
+	};
+
 	return (
 		<div className="rounded-lg bg-gray-800 p-6">
 			<div className="flex items-center justify-between">
@@ -49,7 +61,7 @@ export function ServerHeader({ server }: ServerHeaderProps) {
 					</div>
 
 					<div className="flex space-x-3">
-						<form action={startServerAction.bind(null, server.id)}>
+						<form action={handleStartServer}>
 							<button
 								type="submit"
 								disabled={server.status === ServiceStatus.Running}
@@ -59,7 +71,7 @@ export function ServerHeader({ server }: ServerHeaderProps) {
 							</button>
 						</form>
 
-						<form action={restartServerAction.bind(null, server.id)}>
+						<form action={handleRestartServer}>
 							<button
 								type="submit"
 								disabled={server.status === ServiceStatus.Stopped}
@@ -69,7 +81,7 @@ export function ServerHeader({ server }: ServerHeaderProps) {
 							</button>
 						</form>
 
-						<form action={stopServerAction.bind(null, server.id)}>
+						<form action={handleStopServer}>
 							<button
 								type="submit"
 								disabled={server.status === ServiceStatus.Stopped}

src/lib/actions/auth.ts

@@ -4,13 +4,21 @@ import { redirect } 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,10 +26,16 @@ 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');

src/lib/actions/servers.ts

@@ -11,7 +11,10 @@ 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'
+		};
 	}
 }
 
@@ -22,7 +25,10 @@ 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'
+		};
 	}
 }
 
@@ -33,6 +39,9 @@ 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'
+		};
 	}
 }

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();