FJurmanovic/acc-server-manager-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lazy load socket connection

Browse Source
This commit is contained in:
Fran Jurmanović
2025-09-21 22:53:23 +02:00
parent 3ba83ad538
commit 6aeb654abf
18 changed files with 216 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/api/session/route.ts Normal file
View File

@@ -0,0 +1,11 @@
import { requireAuth } from '@/lib/auth/server';
import { NextResponse } from 'next/server';
export async function GET(): Promise<NextResponse> {
const session = await requireAuth(true);
return NextResponse.json({ openToken: session.openToken });
}
export async function DELETE(): Promise<void> {
const session = await requireAuth(true);
session.destroy();
}

23
src/app/dashboard/layout.tsx Normal file
View File

@@ -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>
);
}

4
src/app/dashboard/page.tsx
View File

@@ -1,12 +1,9 @@
import { requireAuth } from '@/lib/auth/server'; import { requireAuth } from '@/lib/auth/server';
import { getServers } from '@/lib/api/server/servers'; import { getServers } from '@/lib/api/server/servers';
import { hasPermission } from '@/lib/types'; import { hasPermission } from '@/lib/types';
import { ServerCard } from '@/components/server/ServerCard';
import { logoutAction } from '@/lib/actions/auth'; import { logoutAction } from '@/lib/actions/auth';
import RefreshButton from '@/components/ui/RefreshButton';
import Link from 'next/link'; import Link from 'next/link';
import { ServerListWithActions } from '@/components/server/ServerListWithActions'; import { ServerListWithActions } from '@/components/server/ServerListWithActions';
import { WebSocketInitializer } from '@/components/websocket/WebSocketInitializer';
import { SteamCMDNotification } from '@/components/ui/SteamCMDNotification'; import { SteamCMDNotification } from '@/components/ui/SteamCMDNotification';
export default async function DashboardPage() { export default async function DashboardPage() {
@@ -15,7 +12,6 @@ export default async function DashboardPage() {
return ( return (
<div className="min-h-screen bg-gray-900 text-white"> <div className="min-h-screen bg-gray-900 text-white">
<WebSocketInitializer openToken={session.openToken} />
<header className="bg-gray-800 shadow-md"> <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="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> <h1 className="text-2xl font-bold">ACC Server Manager</h1>

2
src/app/dashboard/server/[id]/page.tsx
View File

@@ -28,7 +28,7 @@ export default async function ServerPage({ params }: ServerPageProps) {
return ( return (
<div className="min-h-screen bg-gray-900 text-white"> <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"> <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"> <div className="mt-8">
<ServerConfigurationTabs <ServerConfigurationTabs

20
src/app/layout.tsx
View File

@@ -1,10 +1,5 @@
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import './globals.css'; 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 = { export const metadata: Metadata = {
title: 'ACC Server Manager', title: 'ACC Server Manager',
@@ -18,20 +13,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body className="bg-gray-900 text-white antialiased"> <body className="bg-gray-900 text-white antialiased">{children}</body>
<QueryProvider>
<WebSocketProvider
websocketURL={process.env.NEXT_PUBLIC_WEBSOCKET_URL || 'ws://localhost:3000/ws'}
>
<SteamCMDProvider>
<ServerCreationPopupProvider>
{children}
<ServerCreationPopupContainer />
</ServerCreationPopupProvider>
</SteamCMDProvider>
</WebSocketProvider>
</QueryProvider>
</body>
</html> </html>
); );
} }

7
src/app/logout/route.ts
View File

@@ -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);
}

2
src/app/page.tsx
View File

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

38
src/components/server/ServerCard.tsx
View File

@@ -1,26 +1,21 @@
import Link from 'next/link'; import Link from 'next/link';
import { useState, useTransition } from 'react'; import { useTransition } from 'react';
import { Server, ServiceStatus, getStatusColor, serviceStatusToString } from '@/lib/types'; import { Server, ServiceStatus, getStatusColor, serviceStatusToString } from '@/lib/types';
import { User, hasPermission } from '@/lib/types/user';
import { import {
startServerEventAction, startServerEventAction,
restartServerEventAction, restartServerEventAction,
stopServerEventAction stopServerEventAction
} from '@/lib/actions/servers'; } from '@/lib/actions/servers';
import { DeleteServerModal } from './DeleteServerModal';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
interface ServerCardProps { interface ServerCardProps {
server: Server; server: Server;
user: User;
} }
export function ServerCard({ server, user }: ServerCardProps) { export function ServerCard({ server }: ServerCardProps) {
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isPending, startTransition] = useTransition(); const [isPending, startTransition] = useTransition();
const router = useRouter(); const router = useRouter();
const canDeleteServer = hasPermission(user, 'server.delete');
const startServer = () => const startServer = () =>
startTransition(async () => { startTransition(async () => {
await startServerEventAction(server.id); await startServerEventAction(server.id);
@@ -62,29 +57,6 @@ export function ServerCard({ server, user }: ServerCardProps) {
</div> </div>
</div> </div>
<div className="flex items-center space-x-2"> <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"> <div className="text-gray-400 hover:text-white">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -140,12 +112,6 @@ export function ServerCard({ server, user }: ServerCardProps) {
</button> </button>
</div> </div>
</div> </div>
<DeleteServerModal
isOpen={isDeleteModalOpen}
onClose={() => setIsDeleteModalOpen(false)}
server={server}
/>
</> </>
); );
} }

4
src/components/server/ServerCreationPopupContainer.tsx
View File

@@ -4,10 +4,12 @@ import { useServerCreationPopup } from '@/lib/context/ServerCreationPopupContext
import { ServerCreationPopup } from './ServerCreationPopup'; import { ServerCreationPopup } from './ServerCreationPopup';
import { useSteamCMD } from '@/lib/context/SteamCMDContext'; import { useSteamCMD } from '@/lib/context/SteamCMDContext';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useRouter } from 'next/navigation';
export function ServerCreationPopupContainer() { export function ServerCreationPopupContainer() {
const { popup, hidePopup } = useServerCreationPopup(); const { popup, hidePopup } = useServerCreationPopup();
const { dissociateServer } = useSteamCMD(); const { dissociateServer } = useSteamCMD();
const router = useRouter();
const handleClose = useCallback(() => { const handleClose = useCallback(() => {
hidePopup(); hidePopup();
if (popup) return dissociateServer(popup.serverId); if (popup) return dissociateServer(popup.serverId);
@@ -17,7 +19,7 @@ export function ServerCreationPopupContainer() {
const handleComplete = (success: boolean) => { const handleComplete = (success: boolean) => {
if (success) { if (success) {
setTimeout(() => { setTimeout(() => {
window.location.reload(); router.refresh();
}, 2000); }, 2000);
} }
}; };

432
src/components/server/ServerCreationProgressClient.tsx
View File

@@ -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>
);
}

74
src/components/server/ServerHeader.tsx
View File

@@ -1,3 +1,4 @@
'use client';
import Link from 'next/link'; import Link from 'next/link';
import { Server, getStatusColor, serviceStatusToString, ServiceStatus } from '@/lib/types/server'; import { Server, getStatusColor, serviceStatusToString, ServiceStatus } from '@/lib/types/server';
import { import {
@@ -5,12 +6,43 @@ import {
restartServerEventAction, restartServerEventAction,
stopServerEventAction stopServerEventAction
} from '@/lib/actions/servers'; } 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 { interface ServerHeaderProps {
server: Server; 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 ( return (
<div className="rounded-lg bg-gray-800 p-6"> <div className="rounded-lg bg-gray-800 p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@@ -53,35 +85,45 @@ export function ServerHeader({ server }: ServerHeaderProps) {
</div> </div>
<div className="flex space-x-3"> <div className="flex space-x-3">
<form action={startServerEventAction.bind(null, server.id)}> {canDeleteServer && (
<button <button
type="submit" type="button"
disabled={server.status === ServiceStatus.Running} 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"
>
Remove Server
</button>
)}
<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" 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 Start
</button> </button>
</form>
<form action={restartServerEventAction.bind(null, server.id)}>
<button <button
type="submit" type="button"
disabled={server.status === ServiceStatus.Stopped} 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" 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 Restart
</button> </button>
</form>
<form action={stopServerEventAction.bind(null, server.id)}>
<button <button
type="submit" type="button"
disabled={server.status === ServiceStatus.Stopped} 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" 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 Stop
</button> </button>
</form>
</div> </div>
</div> </div>
@@ -108,6 +150,12 @@ export function ServerHeader({ server }: ServerHeaderProps) {
</div> </div>
</div> </div>
</div> </div>
<DeleteServerModal
isOpen={isDeleteModalOpen}
onClose={() => setIsDeleteModalOpen(false)}
server={server}
/>
</div> </div>
); );
} }

2
src/components/server/ServerListWithActions.tsx
View File

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

4
src/lib/actions/auth.ts
View File

@@ -2,7 +2,7 @@
import { redirect } from 'next/navigation'; import { redirect } from 'next/navigation';
import { loginUser, getOpenToken } from '@/lib/api/server/auth'; import { loginUser, getOpenToken } from '@/lib/api/server/auth';
import { login } from '@/lib/auth/server'; import { login, logout } from '@/lib/auth/server';
export type LoginResult = { export type LoginResult = {
success: boolean; success: boolean;
@@ -43,5 +43,5 @@ export async function loginAction(prevState: LoginResult, formData: FormData) {
} }
export async function logoutAction() { export async function logoutAction() {
redirect('/logout'); logout();
} }

24
src/lib/api/client/base.ts
View File

@@ -1,5 +1,7 @@
'use client'; 'use client';
import { SessionData } from '@/lib/session/config';
const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080'; const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080';
export type ClientApiResponse<T> = { export type ClientApiResponse<T> = {
@@ -8,6 +10,17 @@ export type ClientApiResponse<T> = {
message?: string; message?: string;
}; };
const getSession = async (): Promise<SessionData | null> => {
const response = await fetch('/api/session');
if (response.ok) {
return await response.json();
}
return null;
};
const destroySession = async (): Promise<void> => {
await fetch('/api/session', { method: 'DELETE' });
};
export async function fetchClientAPI<T>( export async function fetchClientAPI<T>(
endpoint: string, endpoint: string,
method: string = 'GET', method: string = 'GET',
@@ -15,13 +28,11 @@ export async function fetchClientAPI<T>(
customToken?: string customToken?: string
): Promise<ClientApiResponse<T>> { ): Promise<ClientApiResponse<T>> {
let token = customToken; let token = customToken;
let session: SessionData | null = null;
if (!token) { if (!token) {
const response = await fetch('/api/session'); session = await getSession();
if (response.ok) { token = session?.openToken;
const session = await response.json();
token = session.openToken;
}
if (!token) { if (!token) {
throw new Error('No authentication token available'); throw new Error('No authentication token available');
@@ -41,7 +52,8 @@ export async function fetchClientAPI<T>(
if (!response.ok) { if (!response.ok) {
if (response.status === 401) { if (response.status === 401) {
window.location.href = '/logout'; await destroySession();
window.location.href = '/login';
return { error: 'unauthorized' }; return { error: 'unauthorized' };
} }
throw new Error(`API Error: ${response.statusText} - ${method} - ${BASE_URL}${endpoint}`); throw new Error(`API Error: ${response.statusText} - ${method} - ${BASE_URL}${endpoint}`);

9
src/lib/api/server/base.ts
View File

@@ -1,5 +1,3 @@
import { redirect } from 'next/navigation';
const BASE_URL = process.env.API_BASE_URL || 'http://localhost:8080'; const BASE_URL = process.env.API_BASE_URL || 'http://localhost:8080';
type ApiResponse<T> = { type ApiResponse<T> = {
@@ -8,6 +6,10 @@ type ApiResponse<T> = {
message?: string; message?: string;
}; };
const destroySession = async (): Promise<void> => {
await fetch('/api/session', { method: 'DELETE' });
};
export async function fetchServerAPI<T>( export async function fetchServerAPI<T>(
endpoint: string, endpoint: string,
token: string, token: string,
@@ -28,7 +30,8 @@ export async function fetchServerAPI<T>(
if (!response.ok) { if (!response.ok) {
if (response.status == 401) { if (response.status == 401) {
redirect('/logout'); await destroySession();
window.location.href = '/login';
return { error: 'unauthorized' }; return { error: 'unauthorized' };
} }
throw new Error( throw new Error(

7
src/lib/auth/server.ts
View File

@@ -8,11 +8,12 @@ export async function getSession() {
return session; return session;
} }
export async function requireAuth() { export async function requireAuth(skipRedirect?: boolean) {
const session = await getSession(); const session = await getSession();
if (!session.token || !session.user) { if (!skipRedirect && (!session.token || !session.user)) {
redirect('/logout'); session.destroy();
redirect('/login');
} }
return session; return session;

7
src/lib/websocket/config.ts Normal file
View File

@@ -0,0 +1,7 @@
export interface WebsocketOptions {
url: string;
}
export const websocketOptions: WebsocketOptions = {
url: process.env.NEXT_PUBLIC_WEBSOCKET_URL || 'ws://localhost:3000/ws'
};

64
src/lib/websocket/context.tsx
View File

@@ -1,7 +1,16 @@
'use client'; '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 { WebSocketClient, MessageHandler, ConnectionStatusHandler } from './client';
import { websocketOptions } from './config';
interface WebSocketContextType { interface WebSocketContextType {
client: WebSocketClient | null; client: WebSocketClient | null;
@@ -30,10 +39,10 @@ export function useWebSocket() {
interface WebSocketProviderProps { interface WebSocketProviderProps {
children: ReactNode; children: ReactNode;
websocketURL: string; openToken: string;
} }
export function WebSocketProvider({ children, websocketURL }: WebSocketProviderProps) { export function WebSocketProvider({ children, openToken }: WebSocketProviderProps) {
const [client, setClient] = useState<WebSocketClient | null>(null); const [client, setClient] = useState<WebSocketClient | null>(null);
const [isConnected, setIsConnected] = useState(false); const [isConnected, setIsConnected] = useState(false);
const [connectionStatus, setConnectionStatus] = useState< const [connectionStatus, setConnectionStatus] = useState<
@@ -51,7 +60,7 @@ export function WebSocketProvider({ children, websocketURL }: WebSocketProviderP
client.disconnect(); client.disconnect();
} }
const newClient = new WebSocketClient(token, websocketURL); const newClient = new WebSocketClient(token, websocketOptions.url);
const statusHandler: ConnectionStatusHandler = (status, error) => { const statusHandler: ConnectionStatusHandler = (status, error) => {
setConnectionStatus(status); setConnectionStatus(status);
@@ -82,7 +91,7 @@ export function WebSocketProvider({ children, websocketURL }: WebSocketProviderP
} }
}, [client]); }, [client]);
const reconnect = async () => { const reconnect = useCallback(async () => {
if (client) { if (client) {
try { try {
await client.reconnect(); await client.reconnect();
@@ -91,37 +100,60 @@ export function WebSocketProvider({ children, websocketURL }: WebSocketProviderP
throw error; throw error;
} }
} }
}; }, [client]);
const hasInitialized = useRef(false);
const associateWithServer = (serverId: string) => { 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) { if (client && isConnected) {
client.associateWithServer(serverId); client.associateWithServer(serverId);
} }
}; },
[client, isConnected, connect]
);
const addMessageHandler = (handler: MessageHandler) => { const addMessageHandler = useCallback(
(handler: MessageHandler) => {
if (client) { if (client) {
client.addMessageHandler(handler); client.addMessageHandler(handler);
} }
}; },
[client]
);
const removeMessageHandler = (handler: MessageHandler) => { const removeMessageHandler = useCallback(
(handler: MessageHandler) => {
if (client) { if (client) {
client.removeMessageHandler(handler); client.removeMessageHandler(handler);
} }
}; },
[client]
);
const addConnectionStatusHandler = (handler: ConnectionStatusHandler) => { const addConnectionStatusHandler = useCallback(
(handler: ConnectionStatusHandler) => {
if (client) { if (client) {
client.addConnectionStatusHandler(handler); client.addConnectionStatusHandler(handler);
} }
}; },
[client]
);
const removeConnectionStatusHandler = (handler: ConnectionStatusHandler) => { const removeConnectionStatusHandler = useCallback(
(handler: ConnectionStatusHandler) => {
if (client) { if (client) {
client.removeConnectionStatusHandler(handler); client.removeConnectionStatusHandler(handler);
} }
}; },
[client]
);
useEffect(() => { useEffect(() => {
return () => { return () => {