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

Compare commits

base: FJurmanovic:v0.20.6
Branches Tags
FJurmanovic:main
FJurmanovic:v0.21.8 FJurmanovic:v0.21.7 FJurmanovic:v0.21.6 FJurmanovic:v0.21.5 FJurmanovic:v0.21.4 FJurmanovic:v0.21.3 FJurmanovic:v0.21.2 FJurmanovic:v0.21.1 FJurmanovic:v0.21.0 FJurmanovic:v0.20.7 FJurmanovic:v0.20.6 FJurmanovic:v0.20.5 FJurmanovic:v0.20.4 FJurmanovic:v0.20.3 FJurmanovic:v0.20.2 FJurmanovic:v0.20.1 FJurmanovic:v0.20.0 FJurmanovic:v0.10.0
..
compare: FJurmanovic:v0.21.3
Branches Tags
FJurmanovic:main
FJurmanovic:v0.21.8 FJurmanovic:v0.21.7 FJurmanovic:v0.21.6 FJurmanovic:v0.21.5 FJurmanovic:v0.21.4 FJurmanovic:v0.21.3 FJurmanovic:v0.21.2 FJurmanovic:v0.21.1 FJurmanovic:v0.21.0 FJurmanovic:v0.20.7 FJurmanovic:v0.20.6 FJurmanovic:v0.20.5 FJurmanovic:v0.20.4 FJurmanovic:v0.20.3 FJurmanovic:v0.20.2 FJurmanovic:v0.20.1 FJurmanovic:v0.20.0 FJurmanovic:v0.10.0

8 Commits
v0.20.6 ... v0.21.3

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
Fran Jurmanović
fe6a36f3dc move websocket base url inside of constructor 2025-09-18 22:56:47 +02:00
Fran Jurmanović
1ca98233f8 fix build errors 2025-09-18 22:12:40 +02:00
Fran Jurmanović
fe4d299eae code cleanup 2025-09-18 22:04:34 +02:00
Fran Jurmanović
b0ee67c2be server creation 2025-09-18 01:34:16 +02:00
Fran Jurmanović
b7999b02e8 fix ApiResponse on success 2025-09-14 21:44:54 +02:00
37 changed files with 1751 additions and 149 deletions
Expand all files Collapse all files

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

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

@@ -1,10 +1,10 @@
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 RefreshButton from '@/components/ui/RefreshButton';
import Link from 'next/link'; import Link from 'next/link';
import { ServerListWithActions } from '@/components/server/ServerListWithActions';
import { SteamCMDNotification } from '@/components/ui/SteamCMDNotification';
import LogoutButton from '@/components/ui/LogoutButton';
export default async function DashboardPage() { export default async function DashboardPage() {
const session = await requireAuth(); const session = await requireAuth();
@@ -38,40 +38,15 @@ export default async function DashboardPage() {
<span className="ml-1 hidden sm:inline">Users</span> <span className="ml-1 hidden sm:inline">Users</span>
</Link> </Link>
)} )}
<form action={logoutAction}> <LogoutButton />
<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>
</div> </div>
</div> </div>
</header> </header>
<main className="mx-auto max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8"> <SteamCMDNotification />
<div className="mb-6 flex items-center justify-between">
<h2 className="text-xl font-semibold">Your Servers</h2>
<RefreshButton />
</div>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"> <main className="mx-auto max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8">
{servers.map((server) => ( <ServerListWithActions servers={servers} user={session.user!} />
<ServerCard key={server.id} server={server} />
))}
</div>
</main> </main>
</div> </div>
); );

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

5
src/app/layout.tsx
View File

@@ -1,6 +1,5 @@
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import './globals.css'; import './globals.css';
import { QueryProvider } from '@/components/providers/QueryProvider';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'ACC Server Manager', title: 'ACC Server Manager',
@@ -14,9 +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>{children}</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');
} }
} }

2
src/components/membership/CreateUserModal.tsx
View File

@@ -32,7 +32,7 @@ export function CreateUserModal({ roles, onClose }: CreateUserModalProps) {
const result = await createUserAction(formDataObj); const result = await createUserAction(formDataObj);
if (result.success) { if (result.success) {
onClose(); onClose();
window.location.reload(); // Refresh to show new user window.location.reload();
} else { } else {
setError(result.message); setError(result.message);
} }

2
src/components/membership/DeleteUserModal.tsx
View File

@@ -25,7 +25,7 @@ export function DeleteUserModal({ user, onClose }: DeleteUserModalProps) {
const result = await deleteUserAction(formDataObj); const result = await deleteUserAction(formDataObj);
if (result.success) { if (result.success) {
onClose(); onClose();
window.location.reload(); // Refresh to remove deleted user window.location.reload();
} else { } else {
setError(result.message); setError(result.message);
} }

108
src/components/server/CreateServerModal.tsx Normal file
View File

@@ -0,0 +1,108 @@
'use client';
import { useState, useEffect, useActionState, useTransition } from 'react';
import { Modal } from '@/components/ui/Modal';
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
import { createServerAction, type ServerActionResult } from '@/lib/actions/server-management';
import { useServerCreationPopup } from '@/lib/context/ServerCreationPopupContext';
interface CreateServerModalProps {
isOpen: boolean;
onClose: () => void;
}
const initialState: ServerActionResult = { success: false, message: '', data: undefined };
export function CreateServerModal({ isOpen, onClose }: CreateServerModalProps) {
const [serverName, setServerName] = useState('');
const [submittedName, setSubmittedName] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [isPending, setTransition] = useTransition();
const [state, formAction] = useActionState(createServerAction, initialState);
const { showPopup } = useServerCreationPopup();
useEffect(() => {
if (state.success && state.data?.id) {
showPopup(state.data.id, submittedName);
onClose();
setIsSubmitting(false);
}
}, [state.success, state.data, showPopup, onClose, submittedName]);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) =>
setTransition(async () => {
e.preventDefault();
if (!serverName.trim()) {
return;
}
setIsSubmitting(true);
const formData = new FormData();
formData.append('name', serverName.trim());
formAction(formData);
setSubmittedName(serverName.trim());
setServerName('');
});
const handleClose = () => {
if (isSubmitting) {
return;
}
onClose();
setServerName('');
setIsSubmitting(false);
};
return (
<Modal isOpen={isOpen} onClose={handleClose} title="Create New Server">
{!state.success && state.message && (
<div className="mb-4 rounded-md bg-red-900 p-3 text-sm text-red-300">{state.message}</div>
)}
<form onSubmit={handleSubmit}>
<div className="mb-6">
<label htmlFor="server-name" className="block text-sm font-medium text-gray-300">
Server Name
</label>
<input
id="server-name"
type="text"
value={serverName}
onChange={(e) => setServerName(e.target.value)}
required
disabled={isSubmitting || isPending}
className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none disabled:opacity-50"
placeholder="Enter server name..."
/>
</div>
<div className="flex justify-end space-x-2">
<button
type="button"
onClick={handleClose}
disabled={isSubmitting || isPending}
className="rounded-md bg-gray-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-700 disabled:opacity-50"
>
Cancel
</button>
<button
type="submit"
disabled={isSubmitting || !serverName.trim() || isPending}
className="flex items-center rounded-md bg-green-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-green-700 disabled:opacity-50"
>
{isSubmitting ? (
<>
<LoadingSpinner className="mr-2 h-4 w-4" />
Creating...
</>
) : (
'Create Server'
)}
</button>
</div>
</form>
</Modal>
);
}

79
src/components/server/DeleteServerModal.tsx Normal file
View File

@@ -0,0 +1,79 @@
'use client';
import { useState, useTransition } from 'react';
import { Modal } from '@/components/ui/Modal';
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
import { deleteServerAction } from '@/lib/actions/server-management';
import { Server } from '@/lib/types/server';
interface DeleteServerModalProps {
isOpen: boolean;
onClose: () => void;
server: Server;
}
export function DeleteServerModal({ isOpen, onClose, server }: DeleteServerModalProps) {
const [error, setError] = useState<string | null>(null);
const [isPending, startTransition] = useTransition();
const handleDelete = () => {
setError(null);
startTransition(async () => {
try {
const result = await deleteServerAction(server.id);
if (result.success) {
onClose();
} else {
setError(result.message);
}
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to delete server');
}
});
};
const handleClose = () => {
if (isPending) {
return;
}
onClose();
setError(null);
};
return (
<Modal isOpen={isOpen} onClose={handleClose} title="Delete Server">
{error && <div className="mb-4 rounded-md bg-red-900 p-3 text-sm text-red-300">{error}</div>}
<div className="mb-6">
<p className="text-gray-300">
Are you sure you want to delete the server <strong>&quot;{server.name}&quot;</strong>?
</p>
<p className="mt-2 text-sm text-gray-400">This action cannot be undone.</p>
</div>
<div className="flex justify-end space-x-2">
<button
onClick={handleClose}
disabled={isPending}
className="rounded-md bg-gray-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-700 disabled:opacity-50"
>
Cancel
</button>
<button
onClick={handleDelete}
disabled={isPending}
className="flex items-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-red-700 disabled:opacity-50"
>
{isPending ? (
<>
<LoadingSpinner size="sm" className="mr-2" />
Deleting...
</>
) : (
'Delete Server'
)}
</button>
</div>
</Modal>
);
}

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

@@ -1,88 +1,117 @@
import Link from 'next/link'; import Link from 'next/link';
import { useTransition } from 'react';
import { Server, ServiceStatus, getStatusColor, serviceStatusToString } from '@/lib/types'; import { Server, ServiceStatus, getStatusColor, serviceStatusToString } from '@/lib/types';
import { import {
startServerEventAction, startServerEventAction,
restartServerEventAction, restartServerEventAction,
stopServerEventAction stopServerEventAction
} from '@/lib/actions/servers'; } from '@/lib/actions/servers';
import { useRouter } from 'next/navigation';
interface ServerCardProps { interface ServerCardProps {
server: Server; server: Server;
} }
export function ServerCard({ server }: ServerCardProps) { export function ServerCard({ server }: ServerCardProps) {
const [isPending, startTransition] = useTransition();
const router = useRouter();
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="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-lg"> <>
<Link href={`/dashboard/server/${server.id}`} className="block"> <div className="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-lg">
<div className="p-6"> <Link href={`/dashboard/server/${server.id}`} className="block">
<div className="flex items-start justify-between"> <div className="p-6">
<div> <div className="flex items-start justify-between">
<h3 className="text-lg font-medium text-white">{server.name}</h3> <div>
<div className="mt-2 flex items-center"> <h3 className="text-lg font-medium text-white">{server.name}</h3>
<span <div className="mt-2 flex items-center">
className={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`} <span
/> className={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`}
<span className="text-sm text-gray-300 capitalize"> />
{serviceStatusToString(server.status)} <span className="text-sm text-gray-300 capitalize">
</span> {serviceStatusToString(server.status)}
</span>
</div>
</div>
<div className="flex items-center space-x-2">
<div className="text-gray-400 hover:text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
</svg>
</div>
</div> </div>
</div> </div>
<div className="text-gray-400 hover:text-white">
<svg <div className="mt-4 grid grid-cols-2 gap-4 text-sm text-gray-300">
xmlns="http://www.w3.org/2000/svg" <div>
className="h-5 w-5" <span className="text-gray-500">Track:</span>
viewBox="0 0 20 20" <span className="ml-2">{server.state?.track || 'N/A'}</span>
fill="currentColor" </div>
> <div>
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" /> <span className="text-gray-500">Players:</span>
</svg> <span className="ml-2">{server.state?.playerCount || 0}</span>
</div>
</div> </div>
</div> </div>
</Link>
<div className="mt-4 grid grid-cols-2 gap-4 text-sm text-gray-300"> <div className="flex justify-between gap-2 bg-gray-900 px-4 py-3">
<div>
<span className="text-gray-500">Track:</span>
<span className="ml-2">{server.state?.track || 'N/A'}</span>
</div>
<div>
<span className="text-gray-500">Players:</span>
<span className="ml-2">{server.state?.playerCount || 0}</span>
</div>
</div>
</div>
</Link>
<div className="flex justify-between gap-2 bg-gray-900 px-4 py-3">
<form action={startServerEventAction.bind(null, server.id)}>
<button <button
type="submit" type="button"
disabled={server.status === ServiceStatus.Running} onClick={startServer}
disabled={server.status === ServiceStatus.Running || isPending || disabled}
className="rounded bg-green-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50" className="rounded bg-green-600 px-3 py-2 text-xs 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 || isPending || disabled}
className="rounded bg-yellow-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-yellow-700 disabled:cursor-not-allowed disabled:opacity-50" className="rounded bg-yellow-600 px-3 py-2 text-xs 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 || isPending || disabled}
className="rounded bg-red-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50" className="rounded bg-red-600 px-3 py-2 text-xs 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> </>
); );
} }

477
src/components/server/ServerCreationPopup.tsx Normal file
View File

@@ -0,0 +1,477 @@
'use client';
import { useEffect, useRef, useState, useCallback } from 'react';
import { useWebSocket } from '@/lib/websocket/context';
import {
WebSocketMessage,
StepData,
SteamOutputData,
ErrorData,
CompleteData
} from '@/lib/websocket/client';
interface ServerCreationPopupProps {
serverId: string;
serverName: string;
isOpen: boolean;
onClose: () => void;
onComplete?: (success: boolean, message: string) => void;
}
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 ServerCreationPopup({
serverId,
serverName,
isOpen,
onClose,
onComplete
}: ServerCreationPopupProps) {
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 [isConsoleVisible, setIsConsoleVisible] = useState(true);
const {
associateWithServer,
addMessageHandler,
removeMessageHandler,
connectionStatus,
reconnect
} = useWebSocket();
const consoleRef = useRef<HTMLDivElement>(null);
const addEntry = useCallback((entry: Omit<ConsoleEntry, 'id'>) => {
const newEntry = {
...entry,
id: `${Date.now()}-${Math.random()}`
};
setEntries((prev) => [...prev, newEntry]);
}, []);
const scrollToBottom = () => {
if (consoleRef.current && !isMinimized && isConsoleVisible) {
consoleRef.current.scrollTop = consoleRef.current.scrollHeight;
}
};
useEffect(() => {
scrollToBottom();
}, [entries, isMinimized, isConsoleVisible]);
useEffect(() => {
if (serverId && isOpen) {
associateWithServer(serverId);
}
}, [serverId, isOpen, associateWithServer]);
const handleMessage = useCallback(
(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) => {
const updatedSteps = { ...prev };
const stepIndex = STEPS.findIndex((step) => step.key === data.step);
if (stepIndex > 0) {
for (let i = 0; i < stepIndex; i++) {
const prevStepKey = STEPS[i].key;
if (!updatedSteps[prevStepKey] || updatedSteps[prevStepKey].status === 'pending') {
updatedSteps[prevStepKey] = {
step: prevStepKey,
status: 'completed',
message: `${prevStepKey.replace('_', ' ')} completed`
};
}
}
}
updatedSteps[data.step] = {
step: data.step,
status: data.status,
message: data.message
};
return updatedSteps;
});
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;
setSteps((prev) => {
const updatedSteps = { ...prev };
if (
!updatedSteps['steam_download'] ||
updatedSteps['steam_download'].status === 'pending'
) {
updatedSteps['steam_download'] = {
step: 'steam_download',
status: 'in_progress',
message: 'Steam download in progress'
};
}
if (!updatedSteps['validation'] || updatedSteps['validation'].status === 'pending') {
updatedSteps['validation'] = {
step: 'validation',
status: 'completed',
message: 'Validation completed'
};
}
if (
!updatedSteps['directory_creation'] ||
updatedSteps['directory_creation'].status === 'pending'
) {
updatedSteps['directory_creation'] = {
step: 'directory_creation',
status: 'completed',
message: 'Directory creation completed'
};
}
return updatedSteps;
});
addEntry({
timestamp,
type: 'steam_output',
content: data.output,
level: data.is_error ? 'error' : 'info'
});
break;
}
case 'error': {
const data = message.data as ErrorData;
setSteps((prev) => {
const updatedSteps = { ...prev };
const currentStep = Object.values(updatedSteps).find(
(step) => step.status === 'in_progress'
);
if (currentStep) {
updatedSteps[currentStep.step] = {
...currentStep,
status: 'failed',
message: `${currentStep.step.replace('_', ' ')} failed: ${data.error}`
};
}
return updatedSteps;
});
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'
});
onComplete?.(data.success, data.message);
break;
}
}
},
[serverId, addEntry, onComplete]
);
useEffect(() => {
if (isOpen) {
addMessageHandler(handleMessage);
return () => {
removeMessageHandler(handleMessage);
};
}
}, [addMessageHandler, removeMessageHandler, handleMessage, isOpen]);
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 getConnectionStatusIcon = () => {
switch (connectionStatus) {
case 'connected':
return '🟢';
case 'connecting':
return '🟡';
case 'disconnected':
return '⚫';
case 'error':
return '🔴';
}
};
const getCurrentProgress = () => {
const completedSteps = Object.values(steps).filter(
(step) => step.status === 'completed'
).length;
const totalSteps = STEPS.length;
return { completed: completedSteps, total: totalSteps };
};
if (!isOpen) return null;
if (isMinimized) {
const progress = getCurrentProgress();
const isProgressing =
!isCompleted && Object.values(steps).some((step) => step.status === 'in_progress');
return (
<div className="fixed right-4 bottom-4 z-40">
<button
onClick={() => setIsMinimized(false)}
className={`flex h-16 w-16 items-center justify-center rounded-full border-2 shadow-lg transition-all hover:scale-105 ${
isCompleted
? completionResult?.success
? 'border-green-400 bg-green-600 hover:bg-green-700'
: 'border-red-400 bg-red-600 hover:bg-red-700'
: 'border-blue-400 bg-blue-600 hover:bg-blue-700'
}`}
title={`Server Creation: ${serverName} - ${progress.completed}/${progress.total} steps`}
>
<div className="text-center text-white">
{isCompleted ? (
<span className="text-2xl">{completionResult?.success ? '✅' : '❌'}</span>
) : (
<>
<div className="text-xs font-bold">
{progress.completed}/{progress.total}
</div>
{isProgressing && <div className="animate-pulse text-xs">⚡</div>}
</>
)}
</div>
{!isCompleted && (
<svg className="absolute inset-0 h-16 w-16 -rotate-90 transform">
<circle
cx="32"
cy="32"
r="28"
stroke="currentColor"
strokeWidth="4"
fill="none"
className="text-gray-300 opacity-20"
/>
<circle
cx="32"
cy="32"
r="28"
stroke="currentColor"
strokeWidth="4"
fill="none"
strokeDasharray={`${(progress.completed / progress.total) * 175.929} 175.929`}
className="text-white transition-all duration-500"
/>
</svg>
)}
</button>
</div>
);
}
return (
<div className="fixed right-4 bottom-4 z-40 max-h-[600px] w-96 rounded-lg border border-gray-700 bg-gray-800 shadow-2xl select-none">
<div className="flex items-center justify-between border-b border-gray-700 p-4">
<div className="flex items-center space-x-2">
<span className="text-lg">🔧</span>
<h3 className="truncate font-medium text-white">{serverName}</h3>
</div>
<div className="flex items-center space-x-2">
<div className="flex items-center space-x-1">
<span className="text-sm">{getConnectionStatusIcon()}</span>
{(connectionStatus === 'disconnected' || connectionStatus === 'error') && (
<button
onClick={handleReconnect}
className="rounded bg-blue-600 px-1 py-0.5 text-xs hover:bg-blue-700"
title="Reconnect"
>
🔄
</button>
)}
</div>
<button
onClick={() => setIsConsoleVisible(!isConsoleVisible)}
className="text-sm text-gray-400 hover:text-white"
title={isConsoleVisible ? 'Hide Console' : 'Show Console'}
>
📋
</button>
<button
onClick={() => setIsMinimized(true)}
className="text-gray-400 hover:text-white"
title="Minimize"
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
</svg>
</button>
<button onClick={onClose} className="text-gray-400 hover:text-white" title="Close">
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
<div className="border-b border-gray-700 p-4">
<div className="grid grid-cols-2 gap-2">
{STEPS.map(({ key, label }) => {
const stepStatus = steps[key];
return (
<div
key={key}
className={`flex items-center space-x-2 rounded p-2 text-xs ${
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>{getStepStatusIcon(stepStatus?.status || 'pending')}</span>
<span className="truncate">{label}</span>
</div>
);
})}
</div>
</div>
{isConsoleVisible && (
<div className="h-64 bg-black">
<div ref={consoleRef} className="h-full space-y-1 overflow-y-auto p-3 font-mono text-xs">
{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>
)}
{isCompleted && (
<div
className={`p-3 text-center text-sm ${
completionResult?.success
? 'bg-green-900/50 text-green-100'
: 'bg-red-900/50 text-red-100'
}`}
>
{completionResult?.message}
</div>
)}
</div>
);
}

36
src/components/server/ServerCreationPopupContainer.tsx Normal file
View File

@@ -0,0 +1,36 @@
'use client';
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);
}, [popup, dissociateServer, hidePopup]);
if (!popup) return null;
const handleComplete = (success: boolean) => {
if (success) {
setTimeout(() => {
router.refresh();
}, 2000);
}
};
return (
<ServerCreationPopup
serverId={popup.serverId}
serverName={popup.serverName}
isOpen={popup.isOpen}
onClose={handleClose}
onComplete={handleComplete}
/>
);
}

98
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) => {
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" 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> </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
<button type="button"
type="submit" onClick={restartServer}
disabled={server.status === ServiceStatus.Stopped} 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="button"
type="submit" onClick={stopServer}
disabled={server.status === ServiceStatus.Stopped} 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>
); );
} }

51
src/components/server/ServerListWithActions.tsx Normal file
View File

@@ -0,0 +1,51 @@
'use client';
import { useCallback, useState } from 'react';
import { Server } from '@/lib/types/server';
import { User, hasPermission } from '@/lib/types/user';
import { ServerCard } from './ServerCard';
import { CreateServerModal } from './CreateServerModal';
import RefreshButton from '@/components/ui/RefreshButton';
import { useSteamCMD } from '@/lib/context/SteamCMDContext';
interface ServerListWithActionsProps {
servers: Server[];
user: User;
}
export function ServerListWithActions({ servers, user }: ServerListWithActionsProps) {
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const { isSteamCMDRunning } = useSteamCMD();
const handleOnClose = useCallback(() => setIsCreateModalOpen(false), []);
const canCreateServer = hasPermission(user, 'server.create');
return (
<>
<div className="mb-6 flex items-center justify-between">
<h2 className="text-xl font-semibold">Your Servers</h2>
<div className="flex items-center space-x-4">
{canCreateServer && (
<button
onClick={() => setIsCreateModalOpen(true)}
disabled={isSteamCMDRunning}
className="rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
title={isSteamCMDRunning ? 'Server creation disabled while SteamCMD is running' : ''}
>
Create Server
</button>
)}
<RefreshButton />
</div>
</div>
<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} />
))}
</div>
<CreateServerModal isOpen={isCreateModalOpen} onClose={handleOnClose} />
</>
);
}

29
src/components/ui/LogoutButton.tsx Normal file
View File

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

5
src/components/ui/RefreshButton.tsx
View File

@@ -1,9 +1,12 @@
'use client'; 'use client';
import { useRouter } from 'next/navigation';
export default function RefreshButton() { export default function RefreshButton() {
const router = useRouter();
return ( return (
<button <button
onClick={() => window.location.reload()} onClick={() => router.refresh()}
className="rounded-md bg-gray-700 px-3 py-1 text-sm hover:bg-gray-600" className="rounded-md bg-gray-700 px-3 py-1 text-sm hover:bg-gray-600"
> >
Refresh Refresh

46
src/components/ui/SteamCMDNotification.tsx Normal file
View File

@@ -0,0 +1,46 @@
'use client';
import { useSteamCMD } from '@/lib/context/SteamCMDContext';
export function SteamCMDNotification() {
const { isSteamCMDRunning, runningSteamServers } = useSteamCMD();
if (!isSteamCMDRunning) {
return null;
}
const serverCount = runningSteamServers.size;
return (
<div className="bg-yellow-600 border-l-4 border-yellow-400 p-4">
<div className="flex items-center">
<div className="flex-shrink-0">
<svg
className="h-5 w-5 text-yellow-50"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="ml-3">
<p className="text-sm text-yellow-50">
<strong>SteamCMD is currently running</strong> for {serverCount} server{serverCount !== 1 ? 's' : ''}.
Server actions are temporarily disabled to prevent conflicts.
This will automatically resolve when the download completes.
</p>
</div>
<div className="ml-auto flex-shrink-0">
<div className="flex items-center">
<div className="animate-spin h-4 w-4 border-2 border-yellow-50 border-t-transparent rounded-full mr-2"></div>
<span className="text-xs text-yellow-50">Downloading...</span>
</div>
</div>
</div>
</div>
);
}

25
src/components/websocket/WebSocketInitializer.tsx Normal file
View File

@@ -0,0 +1,25 @@
'use client';
import { useEffect, useRef } from 'react';
import { useWebSocket } from '@/lib/websocket/context';
interface WebSocketInitializerProps {
openToken?: string;
}
export function WebSocketInitializer({ openToken }: WebSocketInitializerProps) {
const { connect, isConnected } = useWebSocket();
const hasInitialized = useRef(false);
useEffect(() => {
if (openToken && !isConnected && !hasInitialized.current) {
hasInitialized.current = true;
connect(openToken).catch((error) => {
console.error('Failed to connect WebSocket:', error);
hasInitialized.current = false;
});
}
}, [openToken, connect, isConnected]);
return null;
}

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

@@ -1,7 +1,7 @@
'use server'; 'use server';
import { redirect, RedirectType } from 'next/navigation'; import { redirect } from 'next/navigation';
import { loginUser } from '@/lib/api/server/auth'; import { loginUser, getOpenToken } from '@/lib/api/server/auth';
import { login, logout } from '@/lib/auth/server'; import { login, logout } from '@/lib/auth/server';
export type LoginResult = { export type LoginResult = {
@@ -24,7 +24,8 @@ export async function loginAction(prevState: LoginResult, formData: FormData) {
const result = await loginUser(username, password); const result = await loginUser(username, password);
if (result.token && result.user) { if (result.token && result.user) {
await login(result.token, result.user); const openToken = await getOpenToken(result.token);
await login(result.token, result.user, openToken);
} else { } else {
return { return {
success: false, success: false,
@@ -42,5 +43,5 @@ export async function loginAction(prevState: LoginResult, formData: FormData) {
} }
export async function logoutAction() { export async function logoutAction() {
redirect('/logout'); await logout();
} }

64
src/lib/actions/server-management.ts Normal file
View File

@@ -0,0 +1,64 @@
'use server';
import { revalidatePath } from 'next/cache';
import { requireAuth } from '@/lib/auth/server';
import { createServer, deleteServer } from '@/lib/api/server/servers';
export type ServerActionData = {
id: string;
};
export type ServerActionResult = {
success: boolean;
message: string;
data?: ServerActionData;
};
export async function createServerAction(
prevState: ServerActionResult,
formData: FormData
): Promise<ServerActionResult> {
try {
const session = await requireAuth();
const name = formData.get('name') as string;
if (!name?.trim()) {
return {
success: false,
message: 'Server name is required'
};
}
const server = await createServer(session.token!, name.trim());
revalidatePath('/dashboard');
return {
success: true,
message: 'Server creation started',
data: server
};
} catch (error) {
return {
success: false,
message: error instanceof Error ? error.message : 'Failed to create server'
};
}
}
export async function deleteServerAction(serverId: string): Promise<ServerActionResult> {
try {
const session = await requireAuth();
await deleteServer(session.token!, serverId);
revalidatePath('/dashboard');
return {
success: true,
message: 'Server deleted successfully'
};
} catch (error) {
return {
success: false,
message: error instanceof Error ? error.message : 'Failed to delete server'
};
}
}

5
src/lib/actions/servers.ts
View File

@@ -1,6 +1,6 @@
'use server'; 'use server';
import { revalidatePath } from 'next/cache'; import { revalidatePath, revalidateTag } from 'next/cache';
import { requireAuth } from '@/lib/auth/server'; import { requireAuth } from '@/lib/auth/server';
import { startService, stopService, restartService } from '@/lib/api/server/servers'; import { startService, stopService, restartService } from '@/lib/api/server/servers';
@@ -10,6 +10,7 @@ export async function startServerAction(serverId: string) {
await startService(session.token!, serverId); await startService(session.token!, serverId);
revalidatePath('/dashboard'); revalidatePath('/dashboard');
revalidatePath(`/dashboard/server/${serverId}`); revalidatePath(`/dashboard/server/${serverId}`);
revalidateTag('/server');
} catch (error) { } catch (error) {
return { return {
success: false, success: false,
@@ -28,6 +29,7 @@ export async function stopServerAction(serverId: string) {
await stopService(session.token!, serverId); await stopService(session.token!, serverId);
revalidatePath('/dashboard'); revalidatePath('/dashboard');
revalidatePath(`/dashboard/server/${serverId}`); revalidatePath(`/dashboard/server/${serverId}`);
revalidateTag('/server');
} catch (error) { } catch (error) {
return { return {
success: false, success: false,
@@ -46,6 +48,7 @@ export async function restartServerAction(serverId: string) {
await restartService(session.token!, serverId); await restartService(session.token!, serverId);
revalidatePath('/dashboard'); revalidatePath('/dashboard');
revalidatePath(`/dashboard/server/${serverId}`); revalidatePath(`/dashboard/server/${serverId}`);
revalidateTag('/server');
} catch (error) { } catch (error) {
return { return {
success: false, success: false,

63
src/lib/api/client/base.ts Normal file
View File

@@ -0,0 +1,63 @@
'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> = {
data?: T;
error?: string;
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',
body?: object,
customToken?: string
): Promise<ClientApiResponse<T>> {
let token = customToken;
let session: SessionData | null = null;
if (!token) {
session = await getSession();
token = session?.openToken;
if (!token) {
throw new Error('No authentication token available');
}
}
const headers: Record<string, string> = {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`
};
const response = await fetch(`${BASE_URL}${endpoint}`, {
method,
headers,
body: body ? JSON.stringify(body) : undefined
});
if (!response.ok) {
if (response.status === 401) {
window.location.href = '/login';
return { error: 'unauthorized' };
}
throw new Error(`API Error: ${response.statusText} - ${method} - ${BASE_URL}${endpoint}`);
}
if (response.headers.get('Content-Type')?.includes('application/json')) {
return { data: await response.json() };
}
return { message: await response.text() };
}

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

@@ -33,3 +33,12 @@ export async function getCurrentUser(token: string): Promise<User> {
const response = await fetchServerAPI<User>(`${authRoute}/me`, token); const response = await fetchServerAPI<User>(`${authRoute}/me`, token);
return response.data!; return response.data!;
} }
export async function getOpenToken(token: string): Promise<string> {
const response = await fetchServerAPI<{ token: string }>(
`${authRoute}/open-token`,
token,
'POST'
);
return response.data!.token;
}

15
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,12 @@ type ApiResponse<T> = {
message?: string; message?: string;
}; };
import { logout } from '@/lib/auth/server';
const destroySession = async (): Promise<void> => {
await logout();
};
export async function fetchServerAPI<T>( export async function fetchServerAPI<T>(
endpoint: string, endpoint: string,
token: string, token: string,
@@ -22,12 +26,13 @@ export async function fetchServerAPI<T>(
const response = await fetch(`${BASE_URL}${endpoint}`, { const response = await fetch(`${BASE_URL}${endpoint}`, {
method, method,
headers, headers,
body: body ? JSON.stringify(body) : undefined body: body ? JSON.stringify(body) : undefined,
next: { tags: [endpoint] }
}); });
if (!response.ok) { if (!response.ok) {
if (response.status == 401) { if (response.status == 401) {
redirect('/logout'); await destroySession();
return { error: 'unauthorized' }; return { error: 'unauthorized' };
} }
throw new Error( throw new Error(
@@ -36,7 +41,7 @@ export async function fetchServerAPI<T>(
} }
if (response.headers.get('Content-Type')?.includes('application/json')) { if (response.headers.get('Content-Type')?.includes('application/json')) {
return await response.json(); return { data: await response.json() };
} }
return { message: await response.text() }; return { message: await response.text() };

11
src/lib/api/server/configuration.ts
View File

@@ -1,14 +1,5 @@
import { fetchServerAPI } from './base'; import { fetchServerAPI } from './base';
import type { import type { Configurations, ConfigFile, Config } from '@/lib/types/config';
Configurations,
Configuration,
AssistRules,
EventConfig,
EventRules,
ServerSettings,
ConfigFile,
Config
} from '@/lib/types/config';
const serverRoute = '/server'; const serverRoute = '/server';

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

@@ -29,3 +29,12 @@ export async function getServiceStatus(token: string, serverId: string): Promise
const response = await fetchServerAPI<ServiceStatus>(`${serverRoute}/${serverId}/service`, token); const response = await fetchServerAPI<ServiceStatus>(`${serverRoute}/${serverId}/service`, token);
return response.data!; return response.data!;
} }
export async function createServer(token: string, name: string): Promise<Server> {
const response = await fetchServerAPI<Server>(serverRoute, token, 'POST', { name });
return response.data!;
}
export async function deleteServer(token: string, serverId: string): Promise<void> {
await fetchServerAPI(`${serverRoute}/${serverId}`, token, 'DELETE');
}

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

@@ -8,24 +8,26 @@ 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'); redirect('/login');
} }
return session; return session;
} }
export async function login(token: string, user: SessionData['user']) { export async function login(token: string, user: SessionData['user'], openToken?: string) {
const session = await getSession(); const session = await getSession();
session.token = token; session.token = token;
session.user = user; session.user = user;
session.openToken = openToken;
await session.save(); await session.save();
} }
export async function logout() { export async function logout() {
'use server';
const session = await getSession(); const session = await getSession();
session.destroy(); session.destroy();
} }

61
src/lib/context/ServerCreationPopupContext.tsx Normal file
View File

@@ -0,0 +1,61 @@
'use client';
import { createContext, useContext, useState, ReactNode, useCallback } from 'react';
interface ServerCreationPopupState {
serverId: string;
serverName: string;
isOpen: boolean;
}
interface ServerCreationPopupContextType {
popup: ServerCreationPopupState | null;
showPopup: (serverId: string, serverName: string) => void;
hidePopup: () => void;
isPopupOpen: boolean;
}
const ServerCreationPopupContext = createContext<ServerCreationPopupContextType | null>(null);
export function useServerCreationPopup() {
const context = useContext(ServerCreationPopupContext);
if (!context) {
throw new Error('useServerCreationPopup must be used within a ServerCreationPopupProvider');
}
return context;
}
interface ServerCreationPopupProviderProps {
children: ReactNode;
}
export function ServerCreationPopupProvider({ children }: ServerCreationPopupProviderProps) {
const [popup, setPopup] = useState<ServerCreationPopupState | null>(null);
const showPopup = useCallback((serverId: string, serverName: string) => {
setPopup({
serverId,
serverName,
isOpen: true
});
}, []);
const hidePopup = useCallback(() => {
setPopup(null);
}, []);
const isPopupOpen = popup?.isOpen || false;
return (
<ServerCreationPopupContext.Provider
value={{
popup,
showPopup,
hidePopup,
isPopupOpen
}}
>
{children}
</ServerCreationPopupContext.Provider>
);
}

79
src/lib/context/SteamCMDContext.tsx Normal file
View File

@@ -0,0 +1,79 @@
'use client';
import { createContext, useContext, useState, ReactNode, useEffect, useCallback } from 'react';
import { useWebSocket } from '@/lib/websocket/context';
import { WebSocketMessage, StepData } from '@/lib/websocket/client';
interface SteamCMDContextType {
isSteamCMDRunning: boolean;
runningSteamServers: Set<string>;
dissociateServer: (serverId: string) => void;
}
const SteamCMDContext = createContext<SteamCMDContextType | null>(null);
export function useSteamCMD() {
const context = useContext(SteamCMDContext);
if (!context) {
throw new Error('useSteamCMD must be used within a SteamCMDProvider');
}
return context;
}
interface SteamCMDProviderProps {
children: ReactNode;
}
export function SteamCMDProvider({ children }: SteamCMDProviderProps) {
const [runningSteamServers, setRunningSteamServers] = useState<Set<string>>(new Set());
const { addMessageHandler, removeMessageHandler } = useWebSocket();
const isSteamCMDRunning = runningSteamServers.size > 0;
useEffect(() => {
const handleWebSocketMessage = (message: WebSocketMessage) => {
if (message.type === 'step') {
const data = message.data as StepData;
if (data.step === 'steam_download') {
setRunningSteamServers((prev) => {
const newSet = new Set(prev);
if (data.status === 'in_progress') {
newSet.add(message.server_id);
} else if (data.status === 'completed' || data.status === 'failed') {
newSet.delete(message.server_id);
}
return newSet;
});
}
}
};
addMessageHandler(handleWebSocketMessage);
return () => {
removeMessageHandler(handleWebSocketMessage);
};
}, [addMessageHandler, removeMessageHandler]);
const dissociateServer = useCallback((serverId: string) => {
setRunningSteamServers((prev) => {
const newSet = new Set(prev);
newSet.delete(serverId);
return newSet;
});
}, []);
return (
<SteamCMDContext.Provider
value={{
isSteamCMDRunning,
runningSteamServers,
dissociateServer
}}
>
{children}
</SteamCMDContext.Provider>
);
}

1
src/lib/session/config.ts
View File

@@ -3,6 +3,7 @@ import { User } from '@/lib/types';
export interface SessionData { export interface SessionData {
token?: string; token?: string;
openToken?: string;
user?: User; user?: User;
} }

1
src/lib/types/config.ts
View File

@@ -15,7 +15,6 @@ export enum ServerTab {
settings = 'settings' settings = 'settings'
} }
// Configuration interfaces
export interface Configuration { export interface Configuration {
udpPort: number; udpPort: number;
tcpPort: number; tcpPort: number;

1
src/lib/types/index.ts
View File

@@ -1,4 +1,3 @@
// Re-export all types for easier imports
export * from './server'; export * from './server';
export * from './user'; export * from './user';
export * from './config'; export * from './config';

2
src/lib/types/user.ts
View File

@@ -20,7 +20,7 @@ export function hasPermission(user: User | null, permission: string): boolean {
if (!user || !user.role || !user.role.permissions) { if (!user || !user.role || !user.role.permissions) {
return false; return false;
} }
// Super Admins have all permissions
if (user.role.name === 'Super Admin') { if (user.role.name === 'Super Admin') {
return true; return true;
} }

206
src/lib/websocket/client.ts Normal file
View File

@@ -0,0 +1,206 @@
export interface WebSocketMessage {
type: 'step' | 'steam_output' | 'error' | 'complete';
server_id: string;
timestamp: number;
data: StepData | SteamOutputData | ErrorData | CompleteData;
}
export interface StepData {
step:
| 'validation'
| 'directory_creation'
| 'steam_download'
| 'config_generation'
| 'service_creation'
| 'firewall_rules'
| 'database_save'
| 'completed';
status: 'pending' | 'in_progress' | 'completed' | 'failed';
message: string;
error: string;
}
export interface SteamOutputData {
output: string;
is_error: boolean;
}
export interface ErrorData {
error: string;
details: string;
}
export interface CompleteData {
server_id: string;
success: boolean;
message: string;
}
export type MessageHandler = (message: WebSocketMessage) => void;
export type ConnectionStatusHandler = (
status: 'connecting' | 'connected' | 'disconnected' | 'error',
error?: string
) => void;
export class WebSocketClient {
private ws: WebSocket | null = null;
private token: string;
private messageHandlers: MessageHandler[] = [];
private connectionStatusHandlers: ConnectionStatusHandler[] = [];
private connectionPromise: Promise<void> | null = null;
private reconnectAttempts = 0;
private maxReconnectAttempts = 10;
private reconnectDelay = 1000; // 1 second
private maxReconnectDelay = 30000; // 30 seconds
private reconnectTimer: NodeJS.Timeout | null = null;
private shouldReconnect = true;
private associatedServerId: string | null = null;
private baseUrl: string;
constructor(token: string, url: string) {
this.token = token;
this.baseUrl = url;
}
connect(): Promise<void> {
if (this.connectionPromise) {
return this.connectionPromise;
}
this.shouldReconnect = true;
this.notifyStatus('connecting');
this.connectionPromise = new Promise((resolve, reject) => {
try {
this.ws = new WebSocket(`${this.baseUrl}?token=${this.token}`);
this.ws.onopen = () => {
console.log('WebSocket connected');
this.reconnectAttempts = 0;
this.reconnectDelay = 5000;
this.notifyStatus('connected');
if (this.associatedServerId) {
this.associateWithServer(this.associatedServerId);
}
resolve();
};
this.ws.onmessage = (event) => {
try {
const message: WebSocketMessage = JSON.parse(event.data);
this.messageHandlers.forEach((handler) => handler(message));
} catch (error) {
console.error('Failed to parse WebSocket message:', error);
}
};
this.ws.onclose = (event) => {
console.log('WebSocket disconnected:', event.code, event.reason);
this.connectionPromise = null;
this.notifyStatus('disconnected');
if (this.shouldReconnect && this.reconnectAttempts < this.maxReconnectAttempts) {
this.scheduleReconnect();
}
};
this.ws.onerror = (error) => {
console.error('WebSocket error:', error);
this.notifyStatus('error', 'Connection failed');
reject(error);
};
} catch (error) {
this.notifyStatus('error', error instanceof Error ? error.message : 'Unknown error');
reject(error);
}
});
return this.connectionPromise;
}
associateWithServer(serverId: string): void {
this.associatedServerId = serverId;
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
this.ws.send(`server_id:${serverId}`);
}
}
addMessageHandler(handler: MessageHandler): void {
this.messageHandlers.push(handler);
}
removeMessageHandler(handler: MessageHandler): void {
const index = this.messageHandlers.indexOf(handler);
if (index > -1) {
this.messageHandlers.splice(index, 1);
}
}
disconnect(): void {
this.shouldReconnect = false;
if (this.reconnectTimer) {
clearTimeout(this.reconnectTimer);
this.reconnectTimer = null;
}
if (this.ws) {
this.ws.close();
this.ws = null;
}
this.connectionPromise = null;
this.messageHandlers = [];
this.connectionStatusHandlers = [];
this.associatedServerId = null;
}
isConnected(): boolean {
return this.ws?.readyState === WebSocket.OPEN;
}
addConnectionStatusHandler(handler: ConnectionStatusHandler): void {
this.connectionStatusHandlers.push(handler);
}
removeConnectionStatusHandler(handler: ConnectionStatusHandler): void {
const index = this.connectionStatusHandlers.indexOf(handler);
if (index > -1) {
this.connectionStatusHandlers.splice(index, 1);
}
}
reconnect(): Promise<void> {
this.disconnect();
return this.connect();
}
private notifyStatus(
status: 'connecting' | 'connected' | 'disconnected' | 'error',
error?: string
): void {
this.connectionStatusHandlers.forEach((handler) => handler(status, error));
}
private scheduleReconnect(): void {
if (this.reconnectTimer) {
clearTimeout(this.reconnectTimer);
}
this.reconnectAttempts++;
const delay = Math.min(
this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1),
this.maxReconnectDelay
);
console.log(
`WebSocket reconnect attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts} in ${delay}ms`
);
this.reconnectTimer = setTimeout(() => {
this.reconnectTimer = null;
this.connect().catch((error) => {
console.error('Reconnection failed:', error);
});
}, delay);
}
}

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'
};

184
src/lib/websocket/context.tsx Normal file
View File

@@ -0,0 +1,184 @@
'use client';
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;
isConnected: boolean;
connectionStatus: 'connecting' | 'connected' | 'disconnected' | 'error';
connectionError: string | null;
connect: (token: string) => Promise<void>;
disconnect: () => void;
reconnect: () => Promise<void>;
associateWithServer: (serverId: string) => void;
addMessageHandler: (handler: MessageHandler) => void;
removeMessageHandler: (handler: MessageHandler) => void;
addConnectionStatusHandler: (handler: ConnectionStatusHandler) => void;
removeConnectionStatusHandler: (handler: ConnectionStatusHandler) => void;
}
const WebSocketContext = createContext<WebSocketContextType | null>(null);
export function useWebSocket() {
const context = useContext(WebSocketContext);
if (!context) {
throw new Error('useWebSocket must be used within a WebSocketProvider');
}
return context;
}
interface WebSocketProviderProps {
children: ReactNode;
openToken: string;
}
export function WebSocketProvider({ children, openToken }: WebSocketProviderProps) {
const [client, setClient] = useState<WebSocketClient | null>(null);
const [isConnected, setIsConnected] = useState(false);
const [connectionStatus, setConnectionStatus] = useState<
'connecting' | 'connected' | 'disconnected' | 'error'
>('disconnected');
const [connectionError, setConnectionError] = useState<string | null>(null);
const connect = useCallback(
async (token: string) => {
if (client?.isConnected()) {
return;
}
if (client) {
client.disconnect();
}
const newClient = new WebSocketClient(token, websocketOptions.url);
const statusHandler: ConnectionStatusHandler = (status, error) => {
setConnectionStatus(status);
setIsConnected(status === 'connected');
setConnectionError(error || null);
};
newClient.addConnectionStatusHandler(statusHandler);
try {
await newClient.connect();
setClient(newClient);
} catch (error) {
console.error('Failed to connect WebSocket:', error);
throw error;
}
},
[client]
);
const disconnect = useCallback(() => {
if (client) {
client.disconnect();
setClient(null);
setIsConnected(false);
setConnectionStatus('disconnected');
setConnectionError(null);
}
}, [client]);
const reconnect = useCallback(async () => {
if (client) {
try {
await client.reconnect();
} catch (error) {
console.error('Failed to reconnect WebSocket:', error);
throw error;
}
}
}, [client]);
const hasInitialized = useRef(false);
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 = useCallback(
(handler: MessageHandler) => {
if (client) {
client.addMessageHandler(handler);
}
},
[client]
);
const removeMessageHandler = useCallback(
(handler: MessageHandler) => {
if (client) {
client.removeMessageHandler(handler);
}
},
[client]
);
const addConnectionStatusHandler = useCallback(
(handler: ConnectionStatusHandler) => {
if (client) {
client.addConnectionStatusHandler(handler);
}
},
[client]
);
const removeConnectionStatusHandler = useCallback(
(handler: ConnectionStatusHandler) => {
if (client) {
client.removeConnectionStatusHandler(handler);
}
},
[client]
);
useEffect(() => {
return () => {
disconnect();
};
}, [disconnect]);
return (
<WebSocketContext.Provider
value={{
client,
isConnected,
connectionStatus,
connectionError,
connect,
disconnect,
reconnect,
associateWithServer,
addMessageHandler,
removeMessageHandler,
addConnectionStatusHandler,
removeConnectionStatusHandler
}}
>
{children}
</WebSocketContext.Provider>
);
}