resolve logout issues

lazy load socket connection
update websocket url passing through server
2025-09-22 20:45:02 +02:00 · 2025-09-21 22:53:23 +02:00 · 2025-09-18 23:14:45 +02:00
19 changed files with 235 additions and 591 deletions
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -0,0 +1,23 @@
+import { WebSocketProvider } from '@/lib/websocket/context';
+import { SteamCMDProvider } from '@/lib/context/SteamCMDContext';
+import { ServerCreationPopupProvider } from '@/lib/context/ServerCreationPopupContext';
+import { ServerCreationPopupContainer } from '@/components/server/ServerCreationPopupContainer';
+import { requireAuth } from '@/lib/auth/server';
+
+export default async function DashboardLayout({
+	children
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	const session = await requireAuth();
+	return (
+		<WebSocketProvider openToken={session.openToken!}>
+			<SteamCMDProvider>
+				<ServerCreationPopupProvider>
+					{children}
+					<ServerCreationPopupContainer />
+				</ServerCreationPopupProvider>
+			</SteamCMDProvider>
+		</WebSocketProvider>
+	);
+}
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,13 +1,10 @@
 import { requireAuth } from '@/lib/auth/server';
 import { getServers } from '@/lib/api/server/servers';
 import { hasPermission } from '@/lib/types';
-import { ServerCard } from '@/components/server/ServerCard';
-import { logoutAction } from '@/lib/actions/auth';
-import RefreshButton from '@/components/ui/RefreshButton';
 import Link from 'next/link';
 import { ServerListWithActions } from '@/components/server/ServerListWithActions';
-import { WebSocketInitializer } from '@/components/websocket/WebSocketInitializer';
 import { SteamCMDNotification } from '@/components/ui/SteamCMDNotification';
+import LogoutButton from '@/components/ui/LogoutButton';

 export default async function DashboardPage() {
 	const session = await requireAuth();
@@ -15,7 +12,6 @@ export default async function DashboardPage() {

 	return (
 		<div className="min-h-screen bg-gray-900 text-white">
-			<WebSocketInitializer openToken={session.openToken} />
 			<header className="bg-gray-800 shadow-md">
 				<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>
@@ -42,25 +38,7 @@ export default async function DashboardPage() {
 								<span className="ml-1 hidden sm:inline">Users</span>
 							</Link>
 						)}
-						<form action={logoutAction}>
-							<button type="submit" className="flex items-center text-gray-300 hover:text-white">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									className="h-6 w-6"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										strokeWidth="2"
-										d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-									/>
-								</svg>
-								<span className="ml-1 hidden sm:inline">Logout</span>
-							</button>
-						</form>
+						<LogoutButton />
 					</div>
 				</div>
 			</header>
--- a/src/app/dashboard/server/[id]/page.tsx
+++ b/src/app/dashboard/server/[id]/page.tsx
@@ -28,7 +28,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-[120rem] px-4 py-8 sm:px-6 lg:px-8">
-				<ServerHeader server={server} />
+				<ServerHeader server={server} user={session.user!} />

 				<div className="mt-8">
 					<ServerConfigurationTabs
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,10 +1,5 @@
 import type { Metadata } from 'next';
 import './globals.css';
-import { QueryProvider } from '@/components/providers/QueryProvider';
-import { WebSocketProvider } from '@/lib/websocket/context';
-import { SteamCMDProvider } from '@/lib/context/SteamCMDContext';
-import { ServerCreationPopupProvider } from '@/lib/context/ServerCreationPopupContext';
-import { ServerCreationPopupContainer } from '@/components/server/ServerCreationPopupContainer';

 export const metadata: Metadata = {
 	title: 'ACC Server Manager',
@@ -18,18 +13,7 @@ export default function RootLayout({
 }>) {
 	return (
 		<html lang="en">
-			<body className="bg-gray-900 text-white antialiased">
-				<QueryProvider>
-					<WebSocketProvider>
-						<SteamCMDProvider>
-							<ServerCreationPopupProvider>
-								{children}
-								<ServerCreationPopupContainer />
-							</ServerCreationPopupProvider>
-						</SteamCMDProvider>
-					</WebSocketProvider>
-				</QueryProvider>
-			</body>
+			<body className="bg-gray-900 text-white antialiased">{children}</body>
 		</html>
 	);
 }
--- a/src/app/logout/route.ts
+++ b/src/app/logout/route.ts
@@ -1,7 +0,0 @@
-import { logout } from '@/lib/auth/server';
-import { redirect, RedirectType } from 'next/navigation';
-
-export async function GET() {
-	await logout();
-	redirect('/login', RedirectType.replace);
-}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,6 +7,6 @@ export default async function HomePage() {
 	if (session.token && session.user) {
 		redirect('/dashboard');
 	} else {
-		redirect('/logout');
+		redirect('/login');
 	}
 }
--- a/src/components/server/ServerCard.tsx
+++ b/src/components/server/ServerCard.tsx
@@ -1,26 +1,21 @@
 import Link from 'next/link';
-import { useState, useTransition } from 'react';
+import { useTransition } from 'react';
 import { Server, ServiceStatus, getStatusColor, serviceStatusToString } from '@/lib/types';
-import { User, hasPermission } from '@/lib/types/user';
 import {
 	startServerEventAction,
 	restartServerEventAction,
 	stopServerEventAction
 } from '@/lib/actions/servers';
-import { DeleteServerModal } from './DeleteServerModal';
 import { useRouter } from 'next/navigation';

 interface ServerCardProps {
 	server: Server;
-	user: User;
 }

-export function ServerCard({ server, user }: ServerCardProps) {
-	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+export function ServerCard({ server }: ServerCardProps) {
 	const [isPending, startTransition] = useTransition();
 	const router = useRouter();

-	const canDeleteServer = hasPermission(user, 'server.delete');
 	const startServer = () =>
 		startTransition(async () => {
 			await startServerEventAction(server.id);
@@ -62,29 +57,6 @@ export function ServerCard({ server, user }: ServerCardProps) {
 								</div>
 							</div>
 							<div className="flex items-center space-x-2">
-								{canDeleteServer && (
-									<button
-										onClick={(e) => {
-											e.preventDefault();
-											setIsDeleteModalOpen(true);
-										}}
-										className="text-gray-400 hover:text-red-400"
-										title="Delete Server"
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											className="h-5 w-5"
-											viewBox="0 0 20 20"
-											fill="currentColor"
-										>
-											<path
-												fillRule="evenodd"
-												d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9zM4 5a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 102 0v3a1 1 0 11-2 0V9zm4 0a1 1 0 10-2 0v3a1 1 0 002 0V9z"
-												clipRule="evenodd"
-											/>
-										</svg>
-									</button>
-								)}
 								<div className="text-gray-400 hover:text-white">
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
@@ -140,12 +112,6 @@ export function ServerCard({ server, user }: ServerCardProps) {
 					</button>
 				</div>
 			</div>
-
-			<DeleteServerModal
-				isOpen={isDeleteModalOpen}
-				onClose={() => setIsDeleteModalOpen(false)}
-				server={server}
-			/>
 		</>
 	);
 }
--- a/src/components/server/ServerCreationPopupContainer.tsx
+++ b/src/components/server/ServerCreationPopupContainer.tsx
@@ -4,10 +4,12 @@ import { useServerCreationPopup } from '@/lib/context/ServerCreationPopupContext
 import { ServerCreationPopup } from './ServerCreationPopup';
 import { useSteamCMD } from '@/lib/context/SteamCMDContext';
 import { useCallback } from 'react';
+import { useRouter } from 'next/navigation';

 export function ServerCreationPopupContainer() {
 	const { popup, hidePopup } = useServerCreationPopup();
 	const { dissociateServer } = useSteamCMD();
+	const router = useRouter();
 	const handleClose = useCallback(() => {
 		hidePopup();
 		if (popup) return dissociateServer(popup.serverId);
@@ -17,7 +19,7 @@ export function ServerCreationPopupContainer() {
 	const handleComplete = (success: boolean) => {
 		if (success) {
 			setTimeout(() => {
-				window.location.reload();
+				router.refresh();
 			}, 2000);
 		}
 	};
--- a/src/components/server/ServerCreationProgressClient.tsx
+++ b/src/components/server/ServerCreationProgressClient.tsx
@@ -1,432 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import { useWebSocket } from '@/lib/websocket/context';
-import {
-	WebSocketMessage,
-	StepData,
-	SteamOutputData,
-	ErrorData,
-	CompleteData
-} from '@/lib/websocket/client';
-
-interface ServerCreationProgressClientProps {
-	serverId: string;
-}
-
-interface ConsoleEntry {
-	id: string;
-	timestamp: number;
-	type: 'step' | 'steam_output' | 'error' | 'complete';
-	content: string;
-	level: 'info' | 'success' | 'warning' | 'error';
-}
-
-interface StepStatus {
-	step: string;
-	status: 'pending' | 'in_progress' | 'completed' | 'failed';
-	message: string;
-}
-
-const STEPS = [
-	{ key: 'validation', label: 'Validation' },
-	{ key: 'directory_creation', label: 'Directory Creation' },
-	{ key: 'steam_download', label: 'Steam Download' },
-	{ key: 'config_generation', label: 'Config Generation' },
-	{ key: 'service_creation', label: 'Service Creation' },
-	{ key: 'firewall_rules', label: 'Firewall Rules' },
-	{ key: 'database_save', label: 'Database Save' },
-	{ key: 'completed', label: 'Completed' }
-];
-
-export function ServerCreationProgressClient({ serverId }: ServerCreationProgressClientProps) {
-	const [entries, setEntries] = useState<ConsoleEntry[]>([]);
-	const [steps, setSteps] = useState<Record<string, StepStatus>>({});
-	const [isCompleted, setIsCompleted] = useState(false);
-	const [completionResult, setCompletionResult] = useState<{
-		success: boolean;
-		message: string;
-	} | null>(null);
-	const [isMinimized, setIsMinimized] = useState(false);
-
-	const {
-		associateWithServer,
-		addMessageHandler,
-		removeMessageHandler,
-		connectionStatus,
-		connectionError,
-		reconnect
-	} = useWebSocket();
-	const router = useRouter();
-	const consoleRef = useRef<HTMLDivElement>(null);
-
-	const addEntry = (entry: Omit<ConsoleEntry, 'id'>) => {
-		const newEntry = {
-			...entry,
-			id: `${Date.now()}-${Math.random()}`
-		};
-		setEntries((prev) => [...prev, newEntry]);
-	};
-
-	const scrollToBottom = () => {
-		if (consoleRef.current && !isMinimized) {
-			consoleRef.current.scrollTop = consoleRef.current.scrollHeight;
-		}
-	};
-
-	useEffect(() => {
-		scrollToBottom();
-	}, [entries, isMinimized]);
-
-	useEffect(() => {
-		if (serverId) {
-			associateWithServer(serverId);
-		}
-	}, [serverId, associateWithServer]);
-
-	useEffect(() => {
-		const handleMessage = (message: WebSocketMessage) => {
-			if (message.server_id !== serverId) return;
-
-			const timestamp = message.timestamp;
-
-			switch (message.type) {
-				case 'step': {
-					const data = message.data as StepData;
-					setSteps((prev) => ({
-						...prev,
-						[data.step]: {
-							step: data.step,
-							status: data.status,
-							message: data.message
-						}
-					}));
-
-					let level: ConsoleEntry['level'] = 'info';
-					if (data.status === 'completed') level = 'success';
-					else if (data.status === 'failed') level = 'error';
-					else if (data.status === 'in_progress') level = 'warning';
-
-					addEntry({
-						timestamp,
-						type: 'step',
-						content: `[${data.step.toUpperCase()}] ${data.message}${data.error ? ` - ${data.error}` : ''}`,
-						level
-					});
-					break;
-				}
-
-				case 'steam_output': {
-					const data = message.data as SteamOutputData;
-					addEntry({
-						timestamp,
-						type: 'steam_output',
-						content: data.output,
-						level: data.is_error ? 'error' : 'info'
-					});
-					break;
-				}
-
-				case 'error': {
-					const data = message.data as ErrorData;
-					addEntry({
-						timestamp,
-						type: 'error',
-						content: `ERROR: ${data.error}${data.details ? ` - ${data.details}` : ''}`,
-						level: 'error'
-					});
-					break;
-				}
-
-				case 'complete': {
-					const data = message.data as CompleteData;
-					setIsCompleted(true);
-					setCompletionResult({ success: data.success, message: data.message });
-
-					addEntry({
-						timestamp,
-						type: 'complete',
-						content: `COMPLETED: ${data.message}`,
-						level: data.success ? 'success' : 'error'
-					});
-					break;
-				}
-			}
-		};
-
-		addMessageHandler(handleMessage);
-		return () => {
-			removeMessageHandler(handleMessage);
-		};
-	}, [addMessageHandler, removeMessageHandler, serverId]);
-
-	const handleReturnToDashboard = () => {
-		router.push('/dashboard');
-	};
-
-	const handleReconnect = async () => {
-		try {
-			await reconnect();
-		} catch (error) {
-			console.error('Failed to reconnect:', error);
-		}
-	};
-
-	const getStepStatusIcon = (status: StepStatus['status']) => {
-		switch (status) {
-			case 'pending':
-				return '⏳';
-			case 'in_progress':
-				return '🔄';
-			case 'completed':
-				return '✅';
-			case 'failed':
-				return '❌';
-		}
-	};
-
-	const getEntryClassName = (level: ConsoleEntry['level']) => {
-		switch (level) {
-			case 'success':
-				return 'text-green-400';
-			case 'warning':
-				return 'text-yellow-400';
-			case 'error':
-				return 'text-red-400';
-			default:
-				return 'text-gray-300';
-		}
-	};
-
-	const getConnectionStatusColor = () => {
-		switch (connectionStatus) {
-			case 'connected':
-				return 'text-green-400';
-			case 'connecting':
-				return 'text-yellow-400';
-			case 'disconnected':
-				return 'text-gray-400';
-			case 'error':
-				return 'text-red-400';
-		}
-	};
-
-	const getConnectionStatusIcon = () => {
-		switch (connectionStatus) {
-			case 'connected':
-				return '🟢';
-			case 'connecting':
-				return '🟡';
-			case 'disconnected':
-				return '⚫';
-			case 'error':
-				return '🔴';
-		}
-	};
-
-	return (
-		<div className="min-h-screen bg-gray-900 text-white">
-			{/* Header */}
-			<header className="bg-gray-800 shadow-md">
-				<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-400 hover:text-white"
-							title="Back to Dashboard"
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								className="h-6 w-6"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-							>
-								<path
-									strokeLinecap="round"
-									strokeLinejoin="round"
-									strokeWidth="2"
-									d="M10 19l-7-7m0 0l7-7m-7 7h18"
-								/>
-							</svg>
-						</Link>
-						<h1 className="text-xl font-bold">Server Creation Progress</h1>
-					</div>
-					<div className="flex items-center space-x-4">
-						{/* Connection Status */}
-						<div className="flex items-center space-x-2">
-							<span className="text-lg">{getConnectionStatusIcon()}</span>
-							<span className={`text-sm ${getConnectionStatusColor()}`}>
-								{connectionStatus === 'connected' && 'Connected'}
-								{connectionStatus === 'connecting' && 'Connecting...'}
-								{connectionStatus === 'disconnected' && 'Disconnected'}
-								{connectionStatus === 'error' && 'Connection Error'}
-							</span>
-							{(connectionStatus === 'disconnected' || connectionStatus === 'error') && (
-								<button
-									onClick={handleReconnect}
-									className="rounded bg-blue-600 px-2 py-1 text-xs hover:bg-blue-700"
-									title="Reconnect to WebSocket"
-								>
-									Reconnect
-								</button>
-							)}
-						</div>
-
-						<button
-							onClick={() => setIsMinimized(!isMinimized)}
-							className="text-gray-400 hover:text-white"
-							title={isMinimized ? 'Expand Console' : 'Minimize Console'}
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								className="h-5 w-5"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-							>
-								{isMinimized ? (
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										strokeWidth="2"
-										d="M7 14l3-3 3 3"
-									/>
-								) : (
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										strokeWidth="2"
-										d="M17 10l-3 3-3-3"
-									/>
-								)}
-							</svg>
-						</button>
-						{isCompleted && (
-							<button
-								onClick={handleReturnToDashboard}
-								className={`rounded-md px-4 py-2 text-sm font-medium ${
-									completionResult?.success
-										? 'bg-green-600 hover:bg-green-700'
-										: 'bg-red-600 hover:bg-red-700'
-								}`}
-							>
-								{completionResult?.success ? 'Return to Dashboard' : 'Back to Dashboard'}
-							</button>
-						)}
-					</div>
-				</div>
-			</header>
-
-			{/* Connection Error Banner */}
-			{(connectionStatus === 'disconnected' || connectionStatus === 'error') && (
-				<div className="border-l-4 border-red-400 bg-red-600 p-4">
-					<div className="flex items-center justify-between">
-						<div className="flex items-center">
-							<div className="flex-shrink-0">
-								<svg className="h-5 w-5 text-red-50" viewBox="0 0 20 20" fill="currentColor">
-									<path
-										fillRule="evenodd"
-										d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-										clipRule="evenodd"
-									/>
-								</svg>
-							</div>
-							<div className="ml-3">
-								<p className="text-sm text-red-50">
-									<strong>WebSocket Connection Lost</strong> -
-									{connectionError
-										? ` ${connectionError}`
-										: ' Unable to receive real-time updates.'}{' '}
-									Progress may not be current.
-								</p>
-							</div>
-						</div>
-						<button
-							onClick={handleReconnect}
-							className="rounded bg-red-700 px-3 py-1 text-sm text-red-50 hover:bg-red-800"
-						>
-							Reconnect
-						</button>
-					</div>
-				</div>
-			)}
-
-			<main className="mx-auto max-w-[120rem] px-4 py-6 sm:px-6 lg:px-8">
-				<div className="space-y-6">
-					{/* Steps Progress */}
-					<div className="rounded-lg bg-gray-800 p-6">
-						<h2 className="mb-4 text-lg font-medium text-gray-300">Progress Steps</h2>
-						<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
-							{STEPS.map(({ key, label }) => {
-								const stepStatus = steps[key];
-								return (
-									<div
-										key={key}
-										className={`flex items-center space-x-3 rounded-lg p-3 text-sm ${
-											stepStatus?.status === 'completed'
-												? 'bg-green-900/50 text-green-100'
-												: stepStatus?.status === 'in_progress'
-													? 'bg-yellow-900/50 text-yellow-100'
-													: stepStatus?.status === 'failed'
-														? 'bg-red-900/50 text-red-100'
-														: 'bg-gray-700 text-gray-300'
-										}`}
-									>
-										<span className="text-lg">
-											{getStepStatusIcon(stepStatus?.status || 'pending')}
-										</span>
-										<span className="font-medium">{label}</span>
-									</div>
-								);
-							})}
-						</div>
-					</div>
-
-					{/* Console Output */}
-					{!isMinimized && (
-						<div className="rounded-lg bg-gray-800">
-							<div className="flex items-center justify-between border-b border-gray-700 p-4">
-								<h2 className="text-lg font-medium text-gray-300">Console Output</h2>
-								<div className="text-sm text-gray-400">{entries.length} log entries</div>
-							</div>
-							<div className="h-96 overflow-hidden rounded-b-lg bg-black p-4">
-								<div
-									ref={consoleRef}
-									className="h-full space-y-1 overflow-y-auto font-mono text-sm"
-								>
-									{entries.map((entry) => (
-										<div
-											key={entry.id}
-											className={`${getEntryClassName(entry.level)} leading-tight`}
-										>
-											<span className="text-xs text-gray-500">
-												{new Date(entry.timestamp * 1000).toLocaleTimeString()}
-											</span>{' '}
-											<span>{entry.content}</span>
-										</div>
-									))}
-									{entries.length === 0 && (
-										<div className="py-8 text-center text-gray-500">
-											Waiting for server creation to begin...
-										</div>
-									)}
-								</div>
-							</div>
-						</div>
-					)}
-
-					{isMinimized && (
-						<div className="rounded-lg bg-gray-800 p-4">
-							<div className="text-center text-gray-400">
-								Console minimized - click the expand button in the header to view output
-							</div>
-						</div>
-					)}
-				</div>
-			</main>
-		</div>
-	);
-}
--- a/src/components/server/ServerHeader.tsx
+++ b/src/components/server/ServerHeader.tsx
@@ -1,3 +1,4 @@
+'use client';
 import Link from 'next/link';
 import { Server, getStatusColor, serviceStatusToString, ServiceStatus } from '@/lib/types/server';
 import {
@@ -5,12 +6,43 @@ import {
 	restartServerEventAction,
 	stopServerEventAction
 } from '@/lib/actions/servers';
+import { hasPermission, User } from '@/lib/types';
+import { useState, useTransition } from 'react';
+import { useRouter } from 'next/navigation';
+import { DeleteServerModal } from './DeleteServerModal';

 interface ServerHeaderProps {
 	server: Server;
+	user: User;
 }

-export function ServerHeader({ server }: ServerHeaderProps) {
+export function ServerHeader({ server, user }: ServerHeaderProps) {
+	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+	const [isPending, startTransition] = useTransition();
+	const router = useRouter();
+	const canDeleteServer = hasPermission(user, 'server.delete');
+	const startServer = () =>
+		startTransition(async () => {
+			await startServerEventAction(server.id);
+			router.refresh();
+		});
+	const restartServer = () =>
+		startTransition(async () => {
+			await restartServerEventAction(server.id);
+			router.refresh();
+		});
+	const stopServer = () =>
+		startTransition(async () => {
+			await stopServerEventAction(server.id);
+			router.refresh();
+		});
+
+	const disabled = [
+		ServiceStatus.Restarting,
+		ServiceStatus.Starting,
+		ServiceStatus.Stopping,
+		ServiceStatus.Unknown
+	].includes(server.status);
 	return (
 		<div className="rounded-lg bg-gray-800 p-6">
 			<div className="flex items-center justify-between">
@@ -53,35 +85,45 @@ export function ServerHeader({ server }: ServerHeaderProps) {
 					</div>

 					<div className="flex space-x-3">
-						<form action={startServerEventAction.bind(null, server.id)}>
+						{canDeleteServer && (
 							<button
-								type="submit"
-								disabled={server.status === ServiceStatus.Running}
-								className="rounded bg-green-600 px-4 py-2 font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+								type="button"
+								onClick={(e) => {
+									e.preventDefault();
+									setIsDeleteModalOpen(true);
+								}}
+								disabled={disabled || isPending}
+								className="mr-3 rounded bg-red-800 px-4 py-2 font-medium text-white transition-colors hover:bg-red-900 disabled:cursor-not-allowed disabled:opacity-50"
 							>
-								Start
+								Remove Server
 							</button>
-						</form>
+						)}
+						<button
+							type="button"
+							onClick={startServer}
+							disabled={server.status === ServiceStatus.Running || disabled || isPending}
+							className="rounded bg-green-600 px-4 py-2 font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+						>
+							Start
+						</button>

-						<form action={restartServerEventAction.bind(null, server.id)}>
-							<button
-								type="submit"
-								disabled={server.status === ServiceStatus.Stopped}
-								className="rounded bg-yellow-600 px-4 py-2 font-medium text-white transition-colors hover:bg-yellow-700 disabled:cursor-not-allowed disabled:opacity-50"
-							>
-								Restart
-							</button>
-						</form>
+						<button
+							type="button"
+							onClick={restartServer}
+							disabled={server.status === ServiceStatus.Stopped || disabled || isPending}
+							className="rounded bg-yellow-600 px-4 py-2 font-medium text-white transition-colors hover:bg-yellow-700 disabled:cursor-not-allowed disabled:opacity-50"
+						>
+							Restart
+						</button>

-						<form action={stopServerEventAction.bind(null, server.id)}>
-							<button
-								type="submit"
-								disabled={server.status === ServiceStatus.Stopped}
-								className="rounded bg-red-600 px-4 py-2 font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
-							>
-								Stop
-							</button>
-						</form>
+						<button
+							type="button"
+							onClick={stopServer}
+							disabled={server.status === ServiceStatus.Stopped || disabled || isPending}
+							className="rounded bg-red-600 px-4 py-2 font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
+						>
+							Stop
+						</button>
 					</div>
 				</div>

@@ -108,6 +150,12 @@ export function ServerHeader({ server }: ServerHeaderProps) {
 					</div>
 				</div>
 			</div>
+
+			<DeleteServerModal
+				isOpen={isDeleteModalOpen}
+				onClose={() => setIsDeleteModalOpen(false)}
+				server={server}
+			/>
 		</div>
 	);
 }
--- a/src/components/server/ServerListWithActions.tsx
+++ b/src/components/server/ServerListWithActions.tsx
@@ -41,7 +41,7 @@ export function ServerListWithActions({ servers, user }: ServerListWithActionsPr

 			<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
 				{servers.map((server) => (
-					<ServerCard key={server.id} server={server} user={user} />
+					<ServerCard key={server.id} server={server} />
 				))}
 			</div>

--- a/src/components/ui/LogoutButton.tsx
+++ b/src/components/ui/LogoutButton.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { logoutAction } from '@/lib/actions/auth';
+import { useActionState } from 'react';
+
+export default function LogoutButton() {
+	const [_, formAction] = useActionState(logoutAction, null);
+	return (
+		<form action={formAction}>
+			<button type="submit" className="flex items-center text-gray-300 hover:text-white">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					className="h-6 w-6"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						strokeWidth="2"
+						d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+					/>
+				</svg>
+				<span className="ml-1 hidden sm:inline">Logout</span>
+			</button>
+		</form>
+	);
+}
--- a/src/lib/actions/auth.ts
+++ b/src/lib/actions/auth.ts
@@ -2,7 +2,7 @@

 import { redirect } from 'next/navigation';
 import { loginUser, getOpenToken } from '@/lib/api/server/auth';
-import { login } from '@/lib/auth/server';
+import { login, logout } from '@/lib/auth/server';

 export type LoginResult = {
 	success: boolean;
@@ -43,5 +43,5 @@ export async function loginAction(prevState: LoginResult, formData: FormData) {
 }

 export async function logoutAction() {
-	redirect('/logout');
+	await logout();
 }
--- a/src/lib/api/client/base.ts
+++ b/src/lib/api/client/base.ts
@@ -1,5 +1,7 @@
 'use client';

+import { SessionData } from '@/lib/session/config';
+
 const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080';

 export type ClientApiResponse<T> = {
@@ -8,6 +10,14 @@ export type ClientApiResponse<T> = {
 	message?: string;
 };

+const getSession = async (): Promise<SessionData | null> => {
+	const response = await fetch('/api/session');
+	if (response.ok) {
+		return await response.json();
+	}
+	return null;
+};
+
 export async function fetchClientAPI<T>(
 	endpoint: string,
 	method: string = 'GET',
@@ -15,13 +25,11 @@ export async function fetchClientAPI<T>(
 	customToken?: string
 ): Promise<ClientApiResponse<T>> {
 	let token = customToken;
+	let session: SessionData | null = null;

 	if (!token) {
-		const response = await fetch('/api/session');
-		if (response.ok) {
-			const session = await response.json();
-			token = session.openToken;
-		}
+		session = await getSession();
+		token = session?.openToken;

 		if (!token) {
 			throw new Error('No authentication token available');
@@ -41,7 +49,7 @@ export async function fetchClientAPI<T>(

 	if (!response.ok) {
 		if (response.status === 401) {
-			window.location.href = '/logout';
+			window.location.href = '/login';
 			return { error: 'unauthorized' };
 		}
 		throw new Error(`API Error: ${response.statusText} - ${method} - ${BASE_URL}${endpoint}`);
--- a/src/lib/api/server/base.ts
+++ b/src/lib/api/server/base.ts
@@ -1,5 +1,3 @@
-import { redirect } from 'next/navigation';
-
 const BASE_URL = process.env.API_BASE_URL || 'http://localhost:8080';

 type ApiResponse<T> = {
@@ -8,6 +6,12 @@ type ApiResponse<T> = {
 	message?: string;
 };

+import { logout } from '@/lib/auth/server';
+
+const destroySession = async (): Promise<void> => {
+	await logout();
+};
+
 export async function fetchServerAPI<T>(
 	endpoint: string,
 	token: string,
@@ -28,7 +32,7 @@ export async function fetchServerAPI<T>(

 	if (!response.ok) {
 		if (response.status == 401) {
-			redirect('/logout');
+			await destroySession();
 			return { error: 'unauthorized' };
 		}
 		throw new Error(
--- a/src/lib/auth/server.ts
+++ b/src/lib/auth/server.ts
@@ -8,11 +8,11 @@ export async function getSession() {
 	return session;
 }

-export async function requireAuth() {
+export async function requireAuth(skipRedirect?: boolean) {
 	const session = await getSession();

-	if (!session.token || !session.user) {
-		redirect('/logout');
+	if (!skipRedirect && (!session.token || !session.user)) {
+		redirect('/login');
 	}

 	return session;
@@ -27,6 +27,7 @@ export async function login(token: string, user: SessionData['user'], openToken?
 }

 export async function logout() {
+	'use server';
 	const session = await getSession();
 	session.destroy();
 }
--- a/src/lib/websocket/client.ts
+++ b/src/lib/websocket/client.ts
@@ -57,9 +57,9 @@ export class WebSocketClient {
 	private associatedServerId: string | null = null;
 	private baseUrl: string;

-	constructor(token: string) {
+	constructor(token: string, url: string) {
 		this.token = token;
-		this.baseUrl = process.env.NEXT_PUBLIC_WEBSOCKET_URL || 'ws://localhost:3000/ws';
+		this.baseUrl = url;
 	}

 	connect(): Promise<void> {
--- a/src/lib/websocket/config.ts
+++ b/src/lib/websocket/config.ts
@@ -0,0 +1,7 @@
+export interface WebsocketOptions {
+	url: string;
+}
+
+export const websocketOptions: WebsocketOptions = {
+	url: process.env.NEXT_PUBLIC_WEBSOCKET_URL || 'ws://localhost:3000/ws'
+};
--- a/src/lib/websocket/context.tsx
+++ b/src/lib/websocket/context.tsx
@@ -1,7 +1,16 @@
 'use client';

-import { createContext, useContext, useEffect, useState, ReactNode, useCallback } from 'react';
+import {
+	createContext,
+	useContext,
+	useEffect,
+	useState,
+	ReactNode,
+	useCallback,
+	useRef
+} from 'react';
 import { WebSocketClient, MessageHandler, ConnectionStatusHandler } from './client';
+import { websocketOptions } from './config';

 interface WebSocketContextType {
 	client: WebSocketClient | null;
@@ -30,9 +39,10 @@ export function useWebSocket() {

 interface WebSocketProviderProps {
 	children: ReactNode;
+	openToken: string;
 }

-export function WebSocketProvider({ children }: WebSocketProviderProps) {
+export function WebSocketProvider({ children, openToken }: WebSocketProviderProps) {
 	const [client, setClient] = useState<WebSocketClient | null>(null);
 	const [isConnected, setIsConnected] = useState(false);
 	const [connectionStatus, setConnectionStatus] = useState<
@@ -50,7 +60,7 @@ export function WebSocketProvider({ children }: WebSocketProviderProps) {
 				client.disconnect();
 			}

-			const newClient = new WebSocketClient(token);
+			const newClient = new WebSocketClient(token, websocketOptions.url);

 			const statusHandler: ConnectionStatusHandler = (status, error) => {
 				setConnectionStatus(status);
@@ -81,7 +91,7 @@ export function WebSocketProvider({ children }: WebSocketProviderProps) {
 		}
 	}, [client]);

-	const reconnect = async () => {
+	const reconnect = useCallback(async () => {
 		if (client) {
 			try {
 				await client.reconnect();
@@ -90,37 +100,60 @@ export function WebSocketProvider({ children }: WebSocketProviderProps) {
 				throw error;
 			}
 		}
-	};
+	}, [client]);
+	const hasInitialized = useRef(false);

-	const associateWithServer = (serverId: string) => {
-		if (client && isConnected) {
-			client.associateWithServer(serverId);
-		}
-	};
+	const associateWithServer = useCallback(
+		(serverId: string) => {
+			if (openToken && !isConnected && !hasInitialized.current) {
+				hasInitialized.current = true;
+				connect(openToken).catch((error) => {
+					console.error('Failed to connect WebSocket:', error);
+					hasInitialized.current = false;
+				});
+			}
+			if (client && isConnected) {
+				client.associateWithServer(serverId);
+			}
+		},
+		[client, isConnected, connect]
+	);

-	const addMessageHandler = (handler: MessageHandler) => {
-		if (client) {
-			client.addMessageHandler(handler);
-		}
-	};
+	const addMessageHandler = useCallback(
+		(handler: MessageHandler) => {
+			if (client) {
+				client.addMessageHandler(handler);
+			}
+		},
+		[client]
+	);

-	const removeMessageHandler = (handler: MessageHandler) => {
-		if (client) {
-			client.removeMessageHandler(handler);
-		}
-	};
+	const removeMessageHandler = useCallback(
+		(handler: MessageHandler) => {
+			if (client) {
+				client.removeMessageHandler(handler);
+			}
+		},
+		[client]
+	);

-	const addConnectionStatusHandler = (handler: ConnectionStatusHandler) => {
-		if (client) {
-			client.addConnectionStatusHandler(handler);
-		}
-	};
+	const addConnectionStatusHandler = useCallback(
+		(handler: ConnectionStatusHandler) => {
+			if (client) {
+				client.addConnectionStatusHandler(handler);
+			}
+		},
+		[client]
+	);

-	const removeConnectionStatusHandler = (handler: ConnectionStatusHandler) => {
-		if (client) {
-			client.removeConnectionStatusHandler(handler);
-		}
-	};
+	const removeConnectionStatusHandler = useCallback(
+		(handler: ConnectionStatusHandler) => {
+			if (client) {
+				client.removeConnectionStatusHandler(handler);
+			}
+		},
+		[client]
+	);

 	useEffect(() => {
 		return () => {
Author	SHA1	Message	Date
Fran Jurmanović	c005090ab1	resolve logout issues	2025-09-22 20:45:02 +02:00
Fran Jurmanović	6aeb654abf	lazy load socket connection	2025-09-21 22:53:23 +02:00
Fran Jurmanović	3ba83ad538	update websocket url passing through server	2025-09-18 23:14:45 +02:00