improvements

.gitea/workflows/docker-build.yml

@@ -0,0 +1,55 @@
+name: Build and Push Svelte Docker Image
+
+on:
+  push:
+    branches: [prod]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Svelte app
+        run: npm run build
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to Gitea Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: git.vinylnostalgia.com
+          username: ${{ secrets.RUNNER_USERNAME }}
+          password: ${{ secrets.RUNNER_PASSWORD }}
+
+      - name: Generate Docker metadata
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: git.vinylnostalgia.com/mo/caddyui
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=sha
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -0,0 +1,11 @@
+# Use a minimal base image to serve static files
+FROM nginx:alpine
+
+# Copy the built files from the local system to the nginx web root
+COPY build /usr/share/nginx/html
+
+# Expose port 80 for serving the application
+EXPOSE 80
+
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]

package.json

@@ -17,6 +17,7 @@
 	"devDependencies": {
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-node": "^5.2.11",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@tailwindcss/typography": "^0.5.14",

src/routes/+page.svelte

@@ -17,211 +17,216 @@
 		Textarea,
 		Spinner
 	} from 'flowbite-svelte';
-	import { fly, fade } from 'svelte/transition';
 	import type { Upstream, CAInfo } from './CaddyService';
 
-	let config: Record<string, any> = {};
+	// State variables
+	let config = {};
 	let upstreams: Upstream[] = [];
 	let caInfo: CAInfo | null = null;
-	let caCertificates: string = '';
+	let caCertificates = '';
-	let showConfigModal: boolean = false;
+	let showConfigModal = false;
-	let showCAModal: boolean = false;
+	let showCAModal = false;
-	let loadingConfig: boolean = false;
+	let loadingConfig = false;
-	let loadingUpstreams: boolean = false;
+	let loadingUpstreams = false;
-	let newConfig: string = '';
+	let newConfig = '';
-	let configPath: string = '';
+	let configPath = '';
-	let caId: string = 'local';
+	let caId = 'local';
-	let activeTab: string = 'config';
+	let activeTab = 'config'; // Tracks the active tab
 
-	configStore.subscribe((value) => (config = value));
+	// Subscribe to stores
-	upstreamsStore.subscribe((value) => (upstreams = value));
+	configStore.subscribe((value: any) => (config = value));
+	upstreamsStore.subscribe((value: any) => (upstreams = value));
 
 	onMount(async () => {
 		await refreshData();
 	});
 
-	async function refreshData(): Promise<void> {
+	// Fetch and refresh data
+	async function refreshData() {
+		loadingConfig = true;
 		try {
-			loadingConfig = true;
 			await CaddyService.getConfig();
 			await CaddyService.getUpstreams();
 		} catch (error) {
-			alert(`Failed to refresh data: ${(error as Error).message}`);
+			alert(`Error refreshing data: ${(error as Error).message}`);
 		} finally {
 			loadingConfig = false;
 			loadingUpstreams = false;
 		}
 	}
 
-	async function handleUpdateConfig(): Promise<void> {
+	// Update configuration
+	async function handleUpdateConfig() {
 		try {
 			loadingConfig = true;
 			await CaddyService.updateConfig(configPath, JSON.parse(newConfig));
 			await refreshData();
 			showConfigModal = false;
 		} catch (error) {
-			alert(`Failed to update config: ${(error as Error).message}`);
+			alert(`Error updating config: ${(error as Error).message}`);
 		} finally {
 			loadingConfig = false;
 		}
 	}
 
-	async function handleLoadConfig(): Promise<void> {
+	// Load new configuration
+	async function handleLoadConfig() {
 		try {
 			loadingConfig = true;
 			await CaddyService.loadConfig(JSON.parse(newConfig));
 			await refreshData();
 			showConfigModal = false;
 		} catch (error) {
-			alert(`Failed to load config: ${(error as Error).message}`);
+			alert(`Error loading config: ${(error as Error).message}`);
 		} finally {
 			loadingConfig = false;
 		}
 	}
 
-	async function handleStopServer(): Promise<void> {
+	// Stop the Caddy server
+	async function handleStopServer() {
 		if (confirm('Are you sure you want to stop the Caddy server?')) {
 			try {
 				await CaddyService.stopServer();
 				alert('Caddy server stopped successfully');
 			} catch (error) {
-				alert(`Failed to stop server: ${(error as Error).message}`);
+				alert(`Error stopping server: ${(error as Error).message}`);
 			}
 		}
 	}
 
-	async function handleGetCAInfo(): Promise<void> {
+	// Fetch CA information
+	async function handleGetCAInfo() {
 		try {
 			caInfo = await CaddyService.getCAInfo(caId);
 			caCertificates = await CaddyService.getCACertificates(caId);
 			showCAModal = true;
 		} catch (error) {
-			alert(`Failed to get CA info: ${(error as Error).message}`);
+			alert(`Error fetching CA info: ${(error as Error).message}`);
 		}
 	}
 
+	// Change active tab
 	function handleTabChange(tab: string) {
 		activeTab = tab;
 	}
-
-	import { Cog, ServerCrash, Shield, RefreshCw } from 'lucide-svelte';
 </script>
 
-<main class="container mx-auto p-4 bg-gray-50 min-h-screen">
+<main class="container mx-auto min-h-screen bg-gray-50 p-6">
-	<h1 class="text-4xl font-bold mb-6 text-caddy-green">Caddy UI</h1>
+	<header class="mb-6">
+		<h1 class="text-caddy-green text-4xl font-bold">Caddy Dashboard</h1>
+		<p class="mt-2 text-gray-700">
+			Manage your Caddy server configurations, upstreams, and CA information easily.
+		</p>
+	</header>
 
 	<Tabs style="pills">
-		<!-- Removed bind:active -->
 		<TabItem
 			open={activeTab === 'config'}
 			on:click={() => handleTabChange('config')}
 			title="Configuration"
-			class="flex items-center gap-2"
+		/>
-		></TabItem>
 		<TabItem
 			open={activeTab === 'upstreams'}
 			on:click={() => handleTabChange('upstreams')}
 			title="Upstreams"
-			class="flex items-center gap-2"
+		/>
-		></TabItem>
-
 		<TabItem
 			open={activeTab === 'ca_management'}
 			on:click={() => handleTabChange('ca_management')}
 			title="CA Management"
-			class="flex items-center gap-2"
+		/>
-		></TabItem>
 	</Tabs>
 
-	<!-- Display content based on the activeTab -->
+	<!-- Tab Content -->
 	{#if activeTab === 'config'}
-		<div class="mt-6">
+		<section class="mt-6">
 			<Card class="shadow-lg">
-				<div class="flex justify-between items-center mb-4">
+				<header class="mb-4 flex items-center justify-between">
-					<h2 class="text-2xl font-semibold text-caddy-blue">Current Configuration</h2>
+					<h2 class="text-caddy-blue text-2xl font-semibold">Current Configuration</h2>
-					<Button
+					<Button on:click={() => (showConfigModal = true)} class="flex items-center gap-2">
-						color="green"
-						on:click={() => (showConfigModal = true)}
-						class="flex items-center gap-2"
-					>
-						<RefreshCw size="16" />
 						Update Configuration
 					</Button>
-				</div>
+				</header>
 				{#if loadingConfig}
 					<div class="flex justify-center p-4">
 						<Spinner size="xl" color="blue" />
 					</div>
 				{:else}
-					<pre class="bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm">{JSON.stringify(
+					<pre class="overflow-x-auto rounded-lg bg-gray-100 p-4 text-sm">
-							config,
+            {JSON.stringify(config, null, 2)}
-							null,
+          </pre>
-							2
-						)}</pre>
 				{/if}
 			</Card>
-		</div>
+		</section>
 	{/if}
 
 	{#if activeTab === 'upstreams'}
-		<div class="mt-6">
+		<section class="mt-6">
 			<Card class="shadow-lg">
-				<h2 class="text-2xl font-semibold mb-4 text-caddy-blue">Upstreams</h2>
+				<header class="mb-4">
+					<h2 class="text-caddy-blue text-2xl font-semibold">Upstreams</h2>
+				</header>
 				{#if loadingUpstreams}
 					<div class="flex justify-center p-4">
 						<Spinner size="xl" color="blue" />
 					</div>
 				{:else}
-					<div class="overflow-x-auto">
+					<Table striped hoverable>
-						<Table striped={true} hoverable={true}>
+						<TableHead>
-							<TableHead>
+							<TableHeadCell>Address</TableHeadCell>
-								<TableHeadCell>Address</TableHeadCell>
+							<TableHeadCell>Requests</TableHeadCell>
-								<TableHeadCell>Requests</TableHeadCell>
+							<TableHeadCell>Fails</TableHeadCell>
-								<TableHeadCell>Fails</TableHeadCell>
+						</TableHead>
-							</TableHead>
+						<TableBody>
-							<TableBody>
+							{#each upstreams as upstream}
-								{#each upstreams as upstream}
+								<TableBodyRow>
-									<TableBodyRow>
+									<TableBodyCell>{upstream.address}</TableBodyCell>
-										<TableBodyCell>{upstream.address}</TableBodyCell>
+									<TableBodyCell>{upstream.num_requests}</TableBodyCell>
-										<TableBodyCell>{upstream.num_requests}</TableBodyCell>
+									<TableBodyCell>{upstream.fails}</TableBodyCell>
-										<TableBodyCell>{upstream.fails}</TableBodyCell>
+								</TableBodyRow>
-									</TableBodyRow>
+							{/each}
-								{/each}
+						</TableBody>
-							</TableBody>
+					</Table>
-						</Table>
-					</div>
 				{/if}
 			</Card>
-		</div>
+		</section>
 	{/if}
 
 	{#if activeTab === 'ca_management'}
-		<div class="mt-6">
+		<section class="mt-6">
 			<Card class="shadow-lg">
-				<h2 class="text-2xl font-semibold mb-4 text-caddy-blue">CA Management</h2>
+				<header class="mb-4">
-				<div class="flex items-center gap-2">
+					<h2 class="text-caddy-blue text-2xl font-semibold">CA Management</h2>
-					<Input type="text" placeholder="CA ID (e.g., local)" bind:value={caId} />
+				</header>
-					<Button color="green" on:click={handleGetCAInfo}>Get CA Info</Button>
+				<div class="flex items-center gap-4">
+					<Input
+						type="text"
+						placeholder="Enter CA ID (e.g., local)"
+						bind:value={caId}
+						class="flex-1"
+					/>
+					<Button on:click={handleGetCAInfo}>Get CA Info</Button>
 				</div>
 			</Card>
-		</div>
+		</section>
 	{/if}
+
+	<footer class="mt-6 flex justify-end">
+		<Button color="red" on:click={handleStopServer} class="flex items-center gap-2">
+			Stop Caddy Server
+		</Button>
+	</footer>
 </main>
 
-<div class="mt-6 flex justify-end">
+<!-- Modals -->
-	<Button color="red" on:click={handleStopServer} class="flex items-center gap-2">
+<Modal bind:open={showConfigModal} size="xl" autoclose={false}>
-		<ServerCrash size="16" />
+	<h2 class="text-caddy-blue mb-4 text-2xl font-semibold">Update Configuration</h2>
-		Stop Caddy Server
-	</Button>
-</div>
-
-<Modal bind:open={showConfigModal} size="xl" autoclose={false} class="w-full max-w-4xl">
-	<h2 class="text-2xl font-semibold mb-4 text-caddy-blue">Update Configuration</h2>
 	<Input
 		type="text"
 		placeholder="Config path (e.g., apps/http/servers/myserver/listen)"
-		class="mb-4"
 		bind:value={configPath}
+		class="mb-4"
 	/>
 	<Textarea
 		rows={10}
@@ -229,32 +234,29 @@
 		bind:value={newConfig}
 		class="mb-4"
 	/>
-	<div class="flex justify-end gap-2">
+	<div class="flex justify-end gap-4">
-		<Button color="light" on:click={() => (showConfigModal = false)}>Cancel</Button>
+		<Button on:click={() => (showConfigModal = false)}>Cancel</Button>
-		<Button color="green" on:click={handleUpdateConfig}>Update Config</Button>
+		<Button color="green" on:click={handleUpdateConfig}>Update</Button>
 		<Button color="blue" on:click={handleLoadConfig}>Load Full Config</Button>
 	</div>
 </Modal>
 
 <Modal bind:open={showCAModal} size="xl" autoclose={false}>
-	<h2 class="text-2xl font-semibold mb-4 text-caddy-blue">CA Information</h2>
+	<h2 class="text-caddy-blue mb-4 text-2xl font-semibold">CA Information</h2>
 	{#if caInfo}
-		<div class="mb-4 space-y-2">
+		<div class="space-y-4">
-			<p><strong class="text-caddy-green">ID:</strong> {caInfo.id}</p>
+			<p><strong>ID:</strong> {caInfo.id}</p>
-			<p><strong class="text-caddy-green">Name:</strong> {caInfo.name}</p>
+			<p><strong>Name:</strong> {caInfo.name}</p>
-			<p><strong class="text-caddy-green">Root CN:</strong> {caInfo.root_common_name}</p>
+			<p><strong>Root CN:</strong> {caInfo.root_common_name}</p>
-			<p>
+			<p><strong>Intermediate CN:</strong> {caInfo.intermediate_common_name}</p>
-				<strong class="text-caddy-green">Intermediate CN:</strong>
-				{caInfo.intermediate_common_name}
-			</p>
 		</div>
-		<h3 class="text-lg font-semibold mb-2 text-caddy-blue">Certificates</h3>
+		<h3 class="text-caddy-blue mt-4 text-lg font-semibold">Certificates</h3>
-		<Textarea rows={10} readonly value={caCertificates} class="mb-4" />
+		<Textarea readonly rows={10} value={caCertificates} />
 	{:else}
-		<p class="text-gray-600">No CA information available.</p>
+		<p>No CA information available.</p>
 	{/if}
-	<div class="flex justify-end">
+	<div class="mt-4 flex justify-end">
-		<Button color="blue" on:click={() => (showCAModal = false)}>Close</Button>
+		<Button on:click={() => (showCAModal = false)}>Close</Button>
 	</div>
 </Modal>
 
@@ -262,20 +264,10 @@
 	:global(body) {
 		background-color: #f3f4f6;
 	}
-
 	:global(.text-caddy-green) {
 		color: #00add8;
 	}
-
 	:global(.text-caddy-blue) {
 		color: #0097b7;
 	}
-
-	:global(.bg-caddy-green) {
-		background-color: #00add8;
-	}
-
-	:global(.bg-caddy-blue) {
-		background-color: #0097b7;
-	}
 </style>

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */