feat: Wordpress on-demand SFTP

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

@@ -2,6 +2,7 @@
 	export let service;
 	export let isRunning;
 	export let readOnly;
+	export let settings;
 
 	import { page, session } from '$app/stores';
 	import { post } from '$lib/api';
@@ -143,7 +144,7 @@
 			{:else if service.type === 'vscodeserver'}
 				<VsCodeServer {service} />
 			{:else if service.type === 'wordpress'}
-				<Wordpress bind:service {isRunning} {readOnly} />
+				<Wordpress bind:service {isRunning} {readOnly} {settings} />
 			{:else if service.type === 'ghost'}
 				<Ghost bind:service {readOnly} />
 			{:else if service.type === 'meilisearch'}
@@ -151,17 +152,4 @@
 			{/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/_Wordpress.svelte

@@ -1,9 +1,55 @@
 <script lang="ts">
+	import { post } from '$lib/api';
+	import { page } from '$app/stores';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import Setting from '$lib/components/Setting.svelte';
+	import { errorNotification } from '$lib/form';
+	import { browser } from '$app/env';
+	import { getDomain } from '$lib/components/common';
 
 	export let service;
 	export let isRunning;
 	export let readOnly;
+	export let settings;
+	const { id } = $page.params;
+
+	let ftpUrl = generateUrl(service.wordpress.ftpPublicPort);
+	let ftpUser = service.wordpress.ftpUser;
+	let ftpPassword = service.wordpress.ftpPassword;
+	let ftpLoading = false;
+
+	function generateUrl(publicPort) {
+		return browser
+			? `sftp://${
+					settings.fqdn ? getDomain(settings.fqdn) : window.location.hostname
+			  }:${publicPort}`
+			: 'Loading...';
+	}
+	async function changeSettings(name) {
+		ftpLoading = true;
+		let ftpEnabled = service.wordpress.ftpEnabled;
+
+		if (name === 'ftpEnabled') {
+			ftpEnabled = !ftpEnabled;
+		}
+		try {
+			const {
+				publicPort,
+				ftpUser: user,
+				ftpPassword: password
+			} = await post(`/services/${id}/wordpress/settings.json`, {
+				ftpEnabled
+			});
+			ftpUrl = generateUrl(publicPort);
+			ftpUser = user;
+			ftpPassword = password;
+			service.wordpress.ftpEnabled = ftpEnabled;
+		} catch ({ error }) {
+			return errorNotification(error);
+		} finally {
+			ftpLoading = false;
+		}
+	}
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -28,6 +74,29 @@ define('SUBDOMAIN_INSTALL', false);`
 			: 'N/A'}>{service.wordpress.extraConfig}</textarea
 	>
 </div>
+<div class="grid grid-cols-2 items-center px-10">
+	<Setting
+		bind:setting={service.wordpress.ftpEnabled}
+		loading={ftpLoading}
+		on:click={() => changeSettings('ftpEnabled')}
+		title="Enable sFTP connection to WordPress data"
+		description="Enables an on-demand sFTP connection to the WordPress data directory. This is useful if you want to use sFTP to upload files."
+	/>
+</div>
+{#if service.wordpress.ftpEnabled}
+	<div class="grid grid-cols-2 items-center px-10">
+		<label for="ftpUrl">sFTP Connection URI</label>
+		<CopyPasswordField id="ftpUrl" readonly disabled name="ftpUrl" value={ftpUrl} />
+	</div>
+	<div class="grid grid-cols-2 items-center px-10">
+		<label for="ftpUser">User</label>
+		<CopyPasswordField id="ftpUser" readonly disabled name="ftpUser" value={ftpUser} />
+	</div>
+	<div class="grid grid-cols-2 items-center px-10">
+		<label for="ftpPassword">Password</label>
+		<CopyPasswordField id="ftpPassword" readonly disabled name="ftpPassword" value={ftpPassword} />
+	</div>
+{/if}
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">MySQL</div>
 </div>