feat: Dual certificates

desing: Lots of design/css updates
version++

src/routes/services/[id]/_Services/_MinIO.svelte

@@ -7,42 +7,36 @@
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">MinIO Server</div>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center">
 	<label for="rootUser">Root User</label>
-	<div class="col-span-2 ">
-		<input
-			name="rootUser"
-			id="rootUser"
-			placeholder="User to login"
-			value={service.minio.rootUser}
-			disabled
-			readonly
-		/>
-	</div>
+	<input
+		name="rootUser"
+		id="rootUser"
+		placeholder="User to login"
+		value={service.minio.rootUser}
+		disabled
+		readonly
+	/>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center">
 	<label for="rootUserPassword">Root's Password</label>
-	<div class="col-span-2 ">
-		<CopyPasswordField
-			id="rootUserPassword"
-			isPasswordField
-			readonly
-			disabled
-			name="rootUserPassword"
-			value={service.minio.rootUserPassword}
-		/>
-	</div>
+	<CopyPasswordField
+		id="rootUserPassword"
+		isPasswordField
+		readonly
+		disabled
+		name="rootUserPassword"
+		value={service.minio.rootUserPassword}
+	/>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center">
 	<label for="publicPort">API Port</label>
-	<div class="col-span-2 ">
-		<input
-			name="publicPort"
-			id="publicPort"
-			value={service.minio.publicPort}
-			disabled
-			readonly
-			placeholder="Generated automatically after start"
-		/>
-	</div>
+	<input
+		name="publicPort"
+		id="publicPort"
+		value={service.minio.publicPort}
+		disabled
+		readonly
+		placeholder="Generated automatically after start"
+	/>
 </div>

src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte

@@ -7,86 +7,74 @@
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">Plausible Analytics</div>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center px-10">
 	<label for="email">Email Address</label>
-	<div class="col-span-2">
-		<input
-			name="email"
-			id="email"
-			disabled={readOnly}
-			readonly={readOnly}
-			placeholder="Email address"
-			bind:value={service.plausibleAnalytics.email}
-			required
-		/>
-	</div>
+	<input
+		name="email"
+		id="email"
+		disabled={readOnly}
+		readonly={readOnly}
+		placeholder="Email address"
+		bind:value={service.plausibleAnalytics.email}
+		required
+	/>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center px-10">
 	<label for="username">Username</label>
-	<div class="col-span-2">
-		<CopyPasswordField
-			name="username"
-			id="username"
-			disabled={readOnly}
-			readonly={readOnly}
-			placeholder="User to login"
-			bind:value={service.plausibleAnalytics.username}
-			required
-		/>
-	</div>
+	<CopyPasswordField
+		name="username"
+		id="username"
+		disabled={readOnly}
+		readonly={readOnly}
+		placeholder="User to login"
+		bind:value={service.plausibleAnalytics.username}
+		required
+	/>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center px-10">
 	<label for="password">Password</label>
-	<div class="col-span-2 ">
-		<CopyPasswordField
-			id="password"
-			isPasswordField
-			readonly
-			disabled
-			name="password"
-			value={service.plausibleAnalytics.password}
-		/>
-	</div>
+	<CopyPasswordField
+		id="password"
+		isPasswordField
+		readonly
+		disabled
+		name="password"
+		value={service.plausibleAnalytics.password}
+	/>
 </div>
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">PostgreSQL</div>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center px-10">
 	<label for="postgresqlUser">Username</label>
-	<div class="col-span-2 ">
-		<CopyPasswordField
-			name="postgresqlUser"
-			id="postgresqlUser"
-			value={service.plausibleAnalytics.postgresqlUser}
-			readonly
-			disabled
-		/>
-	</div>
+	<CopyPasswordField
+		name="postgresqlUser"
+		id="postgresqlUser"
+		value={service.plausibleAnalytics.postgresqlUser}
+		readonly
+		disabled
+	/>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center px-10">
 	<label for="postgresqlPassword">Password</label>
-	<div class="col-span-2 ">
-		<CopyPasswordField
-			id="postgresqlPassword"
-			isPasswordField
-			readonly
-			disabled
-			name="postgresqlPassword"
-			value={service.plausibleAnalytics.postgresqlPassword}
-		/>
-	</div>
+	<CopyPasswordField
+		id="postgresqlPassword"
+		isPasswordField
+		readonly
+		disabled
+		name="postgresqlPassword"
+		value={service.plausibleAnalytics.postgresqlPassword}
+	/>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center px-10">
 	<label for="postgresqlDatabase">Database</label>
-	<div class="col-span-2 ">
-		<CopyPasswordField
-			name="postgresqlDatabase"
-			id="postgresqlDatabase"
-			value={service.plausibleAnalytics.postgresqlDatabase}
-			readonly
-			disabled
-		/>
-	</div>
+	<CopyPasswordField
+		name="postgresqlDatabase"
+		id="postgresqlDatabase"
+		value={service.plausibleAnalytics.postgresqlDatabase}
+		readonly
+		disabled
+	/>
 </div>
 <!-- <div class="grid grid-cols-3 items-center">
 	<label for="postgresqlPublicPort">Public Port</label>

src/routes/services/[id]/_Services/_Services.svelte

@@ -7,6 +7,7 @@
 	import { post } from '$lib/api';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
+	import Setting from '$lib/components/Setting.svelte';
 	import { errorNotification } from '$lib/form';
 	import { toast } from '@zerodevx/svelte-toast';
 	import MinIo from './_MinIO.svelte';
@@ -18,6 +19,7 @@
 
 	let loading = false;
 	let loadingVerification = false;
+	let dualCerts = service.dualCerts;
 
 	async function handleSubmit() {
 		loading = true;
@@ -42,6 +44,17 @@
 			loadingVerification = false;
 		}
 	}
+	async function changeSettings(name) {
+		try {
+			if (name === 'dualCerts') {
+				dualCerts = !dualCerts;
+			}
+			await post(`/services/${id}/settings.json`, { dualCerts });
+			return toast.push('Settings saved.');
+		} catch ({ error }) {
+			return errorNotification(error);
+		}
+	}
 </script>
 
 <div class="mx-auto max-w-4xl px-6">
@@ -67,10 +80,10 @@
 			{/if}
 		</div>
 
-		<div class="grid grid-flow-row gap-2 px-10">
-			<div class="mt-2 grid grid-cols-3 items-center">
+		<div class="grid grid-flow-row gap-2">
+			<div class="mt-2 grid grid-cols-2 items-center px-10">
 				<label for="name">Name</label>
-				<div class="col-span-2 ">
+				<div>
 					<input
 						readonly={!$session.isAdmin}
 						name="name"
@@ -81,9 +94,9 @@
 				</div>
 			</div>
 
-			<div class="grid grid-cols-3 items-center">
+			<div class="grid grid-cols-2 items-center px-10">
 				<label for="destination">Destination</label>
-				<div class="col-span-2">
+				<div>
 					{#if service.destinationDockerId}
 						<div class="no-underline">
 							<input
@@ -96,9 +109,9 @@
 					{/if}
 				</div>
 			</div>
-			<div class="grid grid-cols-3">
+			<div class="grid grid-cols-2 px-10">
 				<label for="fqdn" class="pt-2">Domain (FQDN)</label>
-				<div class="col-span-2 ">
+				<div>
 					<CopyPasswordField
 						placeholder="eg: https://analytics.coollabs.io"
 						readonly={!$session.isAdmin && !isRunning}
@@ -114,6 +127,14 @@
 					/>
 				</div>
 			</div>
+			<div class="grid grid-cols-2 items-center px-10">
+				<Setting
+					bind:setting={dualCerts}
+					title="Generate SSL for www and non-www?"
+					description="It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-pink-600'>both DNS entries</span> set in advance.<br><br>Service needs to be restarted."
+					on:click={() => changeSettings('dualCerts')}
+				/>
+			</div>
 			{#if service.type === 'plausibleanalytics'}
 				<PlausibleAnalytics bind:service {readOnly} />
 			{:else if service.type === 'minio'}

src/routes/services/[id]/_Services/_VSCodeServer.svelte

@@ -7,16 +7,14 @@
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">VSCode Server</div>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center px-10">
 	<label for="password">Password</label>
-	<div class="col-span-2 ">
-		<CopyPasswordField
-			id="password"
-			isPasswordField
-			readonly
-			disabled
-			name="password"
-			value={service.vscodeserver.password}
-		/>
-	</div>
+	<CopyPasswordField
+		id="password"
+		isPasswordField
+		readonly
+		disabled
+		name="password"
+		value={service.vscodeserver.password}
+	/>
 </div>

src/routes/services/[id]/_Services/_Wordpress.svelte

@@ -10,85 +10,73 @@
 	<div class="title">Wordpress</div>
 </div>
 
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center px-10">
 	<label for="extraConfig">Extra Config</label>
-	<div class="col-span-2 ">
-		<textarea
-			disabled={isRunning}
-			readonly={isRunning}
-			class:resize-none={isRunning}
-			rows={isRunning ? 1 : 5}
-			name="extraConfig"
-			id="extraConfig"
-			placeholder={!isRunning
-				? `eg:
+	<textarea
+		disabled={isRunning}
+		readonly={isRunning}
+		class:resize-none={isRunning}
+		rows={isRunning ? 1 : 5}
+		name="extraConfig"
+		id="extraConfig"
+		placeholder={!isRunning
+			? `eg:
 
 define('WP_ALLOW_MULTISITE', true);
 define('MULTISITE', true);
 define('SUBDOMAIN_INSTALL', false);`
-				: null}>{service.wordpress.extraConfig}</textarea
-		>
-	</div>
+			: null}>{service.wordpress.extraConfig || 'N/A'}</textarea
+	>
 </div>
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">MySQL</div>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center px-10">
 	<label for="mysqlDatabase">Database</label>
-	<div class="col-span-2 ">
-		<input
-			name="mysqlDatabase"
-			id="mysqlDatabase"
-			required
-			readonly={readOnly}
-			disabled={readOnly}
-			bind:value={service.wordpress.mysqlDatabase}
-			placeholder="eg: wordpress_db"
-		/>
-	</div>
+	<input
+		name="mysqlDatabase"
+		id="mysqlDatabase"
+		required
+		readonly={readOnly}
+		disabled={readOnly}
+		bind:value={service.wordpress.mysqlDatabase}
+		placeholder="eg: wordpress_db"
+	/>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center px-10">
 	<label for="mysqlRootUser">Root User</label>
-	<div class="col-span-2 ">
-		<input
-			name="mysqlRootUser"
-			id="mysqlRootUser"
-			placeholder="MySQL Root User"
-			value={service.wordpress.mysqlRootUser}
-			disabled
-			readonly
-		/>
-	</div>
+	<input
+		name="mysqlRootUser"
+		id="mysqlRootUser"
+		placeholder="MySQL Root User"
+		value={service.wordpress.mysqlRootUser}
+		disabled
+		readonly
+	/>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center px-10">
 	<label for="mysqlRootUserPassword">Root's Password</label>
-	<div class="col-span-2 ">
-		<CopyPasswordField
-			id="mysqlRootUserPassword"
-			isPasswordField
-			readonly
-			disabled
-			name="mysqlRootUserPassword"
-			value={service.wordpress.mysqlRootUserPassword}
-		/>
-	</div>
+	<CopyPasswordField
+		id="mysqlRootUserPassword"
+		isPasswordField
+		readonly
+		disabled
+		name="mysqlRootUserPassword"
+		value={service.wordpress.mysqlRootUserPassword}
+	/>
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center px-10">
 	<label for="mysqlUser">User</label>
-	<div class="col-span-2 ">
-		<input name="mysqlUser" id="mysqlUser" value={service.wordpress.mysqlUser} disabled readonly />
-	</div>
+	<input name="mysqlUser" id="mysqlUser" value={service.wordpress.mysqlUser} disabled readonly />
 </div>
-<div class="grid grid-cols-3 items-center">
+<div class="grid grid-cols-2 items-center px-10">
 	<label for="mysqlPassword">Password</label>
-	<div class="col-span-2 ">
-		<CopyPasswordField
-			id="mysqlPassword"
-			isPasswordField
-			readonly
-			disabled
-			name="mysqlPassword"
-			value={service.wordpress.mysqlPassword}
-		/>
-	</div>
+	<CopyPasswordField
+		id="mysqlPassword"
+		isPasswordField
+		readonly
+		disabled
+		name="mysqlPassword"
+		value={service.wordpress.mysqlPassword}
+	/>
 </div>

src/routes/services/[id]/configuration/version.json.ts

@@ -30,7 +30,7 @@ export const post: RequestHandler = async (event) => {
 	const { version } = await event.request.json();
 
 	try {
-		await db.setService({ id, version });
+		await db.setServiceVersion({ id, version });
 		return {
 			status: 201
 		};

src/routes/services/[id]/settings.json.ts

@@ -0,0 +1,19 @@
+import { getUserDetails } from '$lib/common';
+import * as db from '$lib/database';
+import { ErrorHandler } from '$lib/database';
+import type { RequestHandler } from '@sveltejs/kit';
+
+export const post: RequestHandler = async (event) => {
+	const { teamId, status, body } = await getUserDetails(event);
+	if (status === 401) return { status, body };
+
+	const { id } = event.params;
+	const { dualCerts } = await event.request.json();
+
+	try {
+		await db.setServiceSettings({ id, dualCerts });
+		return { status: 201 };
+	} catch (error) {
+		return ErrorHandler(error);
+	}
+};