V2 (#111)

Just v2

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+
+	export let service;
+</script>
+
+<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">
+	<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>
+</div>
+<div class="grid grid-cols-3 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>
+</div>
+<div class="grid grid-cols-3 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>
+</div>

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

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	export let service;
+	export let readOnly;
+</script>
+
+<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">
+	<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>
+</div>
+<div class="grid grid-cols-3 items-center">
+	<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>
+</div>
+<div class="grid grid-cols-3 items-center">
+	<label for="password">Password</label>
+	<div class="col-span-2 ">
+		<CopyPasswordField
+			id="password"
+			isPasswordField
+			readonly
+			disabled
+			name="password"
+			value={service.plausibleAnalytics.password}
+		/>
+	</div>
+</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">
+	<label for="postgresqlUser">Username</label>
+	<div class="col-span-2 ">
+		<CopyPasswordField
+			name="postgresqlUser"
+			id="postgresqlUser"
+			value={service.plausibleAnalytics.postgresqlUser}
+			readonly
+			disabled
+		/>
+	</div>
+</div>
+<div class="grid grid-cols-3 items-center">
+	<label for="postgresqlPassword">Password</label>
+	<div class="col-span-2 ">
+		<CopyPasswordField
+			id="postgresqlPassword"
+			isPasswordField
+			readonly
+			disabled
+			name="postgresqlPassword"
+			value={service.plausibleAnalytics.postgresqlPassword}
+		/>
+	</div>
+</div>
+<div class="grid grid-cols-3 items-center">
+	<label for="postgresqlDatabase">Database</label>
+	<div class="col-span-2 ">
+		<CopyPasswordField
+			name="postgresqlDatabase"
+			id="postgresqlDatabase"
+			value={service.plausibleAnalytics.postgresqlDatabase}
+			readonly
+			disabled
+		/>
+	</div>
+</div>
+<!-- <div class="grid grid-cols-3 items-center">
+	<label for="postgresqlPublicPort">Public Port</label>
+	<div class="col-span-2 ">
+		<CopyPasswordField
+			placeholder="Generated automatically after start"
+			readonly
+			disabled
+			id="postgresqlPublicPort"
+			name="postgresqlPublicPort"
+			value={service.plausibleAnalytics.postgresqlPublicPort}
+		/>
+	</div>
+</div> -->

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

@@ -0,0 +1,157 @@
+<script lang="ts">
+	export let service;
+	export let isRunning;
+	export let readOnly;
+
+	import { page, session } from '$app/stores';
+	import { post } from '$lib/api';
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
+	import { errorNotification } from '$lib/form';
+	import { toast } from '@zerodevx/svelte-toast';
+	import MinIo from './_MinIO.svelte';
+	import PlausibleAnalytics from './_PlausibleAnalytics.svelte';
+	import VsCodeServer from './_VSCodeServer.svelte';
+	import Wordpress from './_Wordpress.svelte';
+
+	const { id } = $page.params;
+
+	let loading = false;
+	let loadingVerification = false;
+
+	async function handleSubmit() {
+		loading = true;
+		try {
+			await post(`/services/${id}/check.json`, { fqdn: service.fqdn });
+			await post(`/services/${id}/${service.type}.json`, { ...service });
+			return window.location.reload();
+		} catch ({ error }) {
+			return errorNotification(error);
+		} finally {
+			loading = false;
+		}
+	}
+	async function setEmailsToVerified() {
+		loadingVerification = true;
+		try {
+			await post(`/services/${id}/${service.type}/activate.json`, { id: service.id });
+			toast.push('All email verified. You can login now.');
+		} catch ({ error }) {
+			return errorNotification(error);
+		} finally {
+			loadingVerification = false;
+		}
+	}
+</script>
+
+<div class="mx-auto max-w-4xl px-6">
+	<form on:submit|preventDefault={handleSubmit} class="py-4">
+		<div class="flex space-x-1 pb-5 font-bold">
+			<div class="title">General</div>
+			{#if $session.isAdmin}
+				<button
+					type="submit"
+					class:bg-pink-600={!loading}
+					class:hover:bg-pink-500={!loading}
+					disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
+				>
+			{/if}
+			{#if service.type === 'plausibleanalytics' && isRunning}
+				<button
+					on:click|preventDefault={setEmailsToVerified}
+					class:bg-pink-600={!loadingVerification}
+					class:hover:bg-pink-500={!loadingVerification}
+					disabled={loadingVerification}
+					>{loadingVerification ? 'Verifying' : 'Verify emails without SMTP'}</button
+				>
+			{/if}
+		</div>
+
+		<div class="grid grid-flow-row gap-2 px-10">
+			<div class="mt-2 grid grid-cols-3 items-center">
+				<label for="name">Name</label>
+				<div class="col-span-2 ">
+					<input
+						readonly={!$session.isAdmin}
+						name="name"
+						id="name"
+						bind:value={service.name}
+						required
+					/>
+				</div>
+			</div>
+
+			<div class="grid grid-cols-3 items-center">
+				<label for="destination">Destination</label>
+				<div class="col-span-2">
+					{#if service.destinationDockerId}
+						<div class="no-underline">
+							<input
+								value={service.destinationDocker.name}
+								id="destination"
+								disabled
+								class="bg-transparent "
+							/>
+						</div>
+					{/if}
+				</div>
+			</div>
+			<div class="grid grid-cols-3">
+				<label for="fqdn" class="pt-2">Domain (FQDN)</label>
+				<div class="col-span-2 ">
+					<CopyPasswordField
+						placeholder="eg: https://analytics.coollabs.io"
+						readonly={!$session.isAdmin && !isRunning}
+						disabled={!$session.isAdmin || isRunning}
+						name="fqdn"
+						id="fqdn"
+						pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
+						bind:value={service.fqdn}
+						required
+					/>
+					<Explainer
+						text="If you specify <span class='text-green-600 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you."
+					/>
+				</div>
+				<!-- {:else}
+					<label for="fqdn" class="pt-2">Domain (FQDN)</label>
+					<div class="col-span-2 ">
+						<CopyPasswordField
+							placeholder="eg: https://analytics.coollabs.io"
+							readonly={!$session.isAdmin}
+							name="fqdn"
+							id="fqdn"
+							bind:value={service.fqdn}
+							required
+						/>
+						<Explainer
+							text="If you specify <span class='text-green-600'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you."
+						/>
+					</div>
+				{/if} -->
+			</div>
+			{#if service.type === 'plausibleanalytics'}
+				<PlausibleAnalytics bind:service {readOnly} />
+			{:else if service.type === 'minio'}
+				<MinIo {service} />
+			{:else if service.type === 'vscodeserver'}
+				<VsCodeServer {service} />
+			{:else if service.type === 'wordpress'}
+				<Wordpress bind:service {isRunning} {readOnly} />
+			{/if}
+		</div>
+	</form>
+	<!-- <div class="font-bold flex space-x-1 pb-5">
+		<div class="text-xl tracking-tight mr-4">Features</div>
+	</div>
+	<div class="px-4 sm:px-6 pb-10">
+		<ul class="mt-2 divide-y divide-stone-800">
+			<Setting
+				bind:setting={isPublic}
+				on:click={() => changeSettings('isPublic')}
+				title="Set it public"
+				description="Your database will be reachable over the internet. <br>Take security seriously in this case!"
+			/>
+		</ul>
+	</div> -->
+</div>

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+
+	export let service;
+</script>
+
+<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">
+	<label for="password">Password</label>
+	<div class="col-span-2 ">
+		<CopyPasswordField
+			id="password"
+			isPasswordField
+			readonly
+			disabled
+			name="password"
+			value={service.vscodeserver.password}
+		/>
+	</div>
+</div>

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

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+
+	export let service;
+	export let isRunning;
+	export let readOnly;
+</script>
+
+<div class="flex space-x-1 py-5 font-bold">
+	<div class="title">Wordpress</div>
+</div>
+
+<div class="grid grid-cols-3 items-center">
+	<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:
+
+define('WP_ALLOW_MULTISITE', true);
+define('MULTISITE', true);
+define('SUBDOMAIN_INSTALL', false);`
+				: null}>{service.wordpress.extraConfig}</textarea
+		>
+	</div>
+</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">
+	<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>
+</div>
+<div class="grid grid-cols-3 items-center">
+	<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>
+</div>
+<div class="grid grid-cols-3 items-center">
+	<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>
+</div>
+<div class="grid grid-cols-3 items-center">
+	<label for="mysqlUser">User</label>
+	<div class="col-span-2 ">
+		<input name="mysqlUser" id="mysqlUser" value={service.wordpress.mysqlUser} disabled readonly />
+	</div>
+</div>
+<div class="grid grid-cols-3 items-center">
+	<label for="mysqlPassword">Password</label>
+	<div class="col-span-2 ">
+		<CopyPasswordField
+			id="mysqlPassword"
+			isPasswordField
+			readonly
+			disabled
+			name="mysqlPassword"
+			value={service.wordpress.mysqlPassword}
+		/>
+	</div>
+</div>