feat: init moodle and separate stuffs to shared package

apps/ui/src/routes/services/[id]/_ServiceLinks.svelte

@@ -1,76 +1,63 @@
 <script lang="ts">
 	export let service: any;
-
-	import Fider from '$lib/components/svg/services/Fider.svelte';
-
-	import Ghost from '$lib/components/svg/services/Ghost.svelte';
-	import Hasura from '$lib/components/svg/services/Hasura.svelte';
-
-	import LanguageTool from '$lib/components/svg/services/LanguageTool.svelte';
-
-	import MinIo from '$lib/components/svg/services/MinIO.svelte';
-	import N8n from '$lib/components/svg/services/N8n.svelte';
-
-	import NocoDb from '$lib/components/svg/services/NocoDB.svelte';
-
-	import PlausibleAnalytics from '$lib/components/svg/services/PlausibleAnalytics.svelte';
-	import Umami from '$lib/components/svg/services/Umami.svelte';
-	import UptimeKuma from '$lib/components/svg/services/UptimeKuma.svelte';
-	import VaultWarden from '$lib/components/svg/services/VaultWarden.svelte';
-	import VsCodeServer from '$lib/components/svg/services/VSCodeServer.svelte';
-	import Wordpress from '$lib/components/svg/services/Wordpress.svelte';
+	import * as Icons from '$lib/components/svg/services';
 </script>
 
 {#if service.type === 'plausibleanalytics'}
 	<a href="https://plausible.io" target="_blank">
-		<PlausibleAnalytics />
+		<Icons.PlausibleAnalytics />
 	</a>
 {:else if service.type === 'nocodb'}
 	<a href="https://nocodb.com" target="_blank">
-		<NocoDb />
+		<Icons.NocoDb />
 	</a>
 {:else if service.type === 'minio'}
 	<a href="https://min.io" target="_blank">
-		<MinIo />
+		<Icons.MinIo />
 	</a>
 {:else if service.type === 'vscodeserver'}
 	<a href="https://coder.com" target="_blank">
-		<VsCodeServer />
+		<Icons.VsCodeServer />
 	</a>
 {:else if service.type === 'wordpress'}
 	<a href="https://wordpress.org" target="_blank">
-		<Wordpress />
+		<Icons.Wordpress />
 	</a>
 {:else if service.type === 'vaultwarden'}
 	<a href="https://github.com/dani-garcia/vaultwarden" target="_blank">
-		<VaultWarden />
+		<Icons.VaultWarden />
 	</a>
 {:else if service.type === 'languagetool'}
 	<a href="https://languagetool.org/dev" target="_blank">
-		<LanguageTool />
+		<Icons.LanguageTool />
 	</a>
 {:else if service.type === 'n8n'}
 	<a href="https://n8n.io" target="_blank">
-		<N8n />
+		<Icons.N8n />
 	</a>
 {:else if service.type === 'uptimekuma'}
 	<a href="https://github.com/louislam/uptime-kuma" target="_blank">
-		<UptimeKuma />
+		<Icons.UptimeKuma />
 	</a>
 {:else if service.type === 'ghost'}
 	<a href="https://ghost.org" target="_blank">
-		<Ghost />
+		<Icons.Ghost />
 	</a>
 {:else if service.type === 'umami'}
 	<a href="https://umami.is" target="_blank">
-		<Umami />
+		<Icons.Umami />
 	</a>
 {:else if service.type === 'hasura'}
 	<a href="https://hasura.io" target="_blank">
-		<Hasura />
+		<Icons.Hasura />
 	</a>
 {:else if service.type === 'fider'}
 	<a href="https://fider.io" target="_blank">
-		<Fider />
+		<Icons.Fider />
+	</a>
+{:else if service.type === 'moodle'}
+	<a href="https://moodle.org" target="_blank">
+		<Icons.Moodle />
 	</a>
 {/if}
+

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	export let type: string;
+	import * as Icons from '$lib/components/svg/services';
+</script>
+
+{#if type === 'plausibleanalytics'}
+	<Icons.PlausibleAnalytics isAbsolute />
+{:else if type === 'nocodb'}
+	<Icons.NocoDb isAbsolute />
+{:else if type === 'minio'}
+	<Icons.MinIo isAbsolute />
+{:else if type === 'vscodeserver'}
+	<Icons.VsCodeServer isAbsolute />
+{:else if type === 'wordpress'}
+	<Icons.Wordpress isAbsolute />
+{:else if type === 'vaultwarden'}
+	<Icons.VaultWarden isAbsolute />
+{:else if type === 'languagetool'}
+	<Icons.LanguageTool isAbsolute />
+{:else if type === 'n8n'}
+	<Icons.N8n isAbsolute />
+{:else if type === 'uptimekuma'}
+	<Icons.UptimeKuma isAbsolute />
+{:else if type === 'ghost'}
+	<Icons.Ghost isAbsolute />
+{:else if type === 'meilisearch'}
+	<Icons.MeiliSearch isAbsolute />
+{:else if type === 'umami'}
+	<Icons.Umami isAbsolute />
+{:else if type === 'hasura'}
+	<Icons.Hasura isAbsolute />
+{:else if type === 'fider'}
+	<Icons.Fider isAbsolute />
+{:else if type === 'moodle'}
+	<Icons.Moodle isAbsolute />
+{/if}

apps/ui/src/routes/services/[id]/_Services/_Moodle.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
+	export let readOnly: any;
+	export let service: any;
+</script>
+
+<div class="flex space-x-1 py-5 font-bold">
+	<div class="title">Moodle</div>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="email">{$t('forms.default_email_address')}</label>
+	<input
+		name="email"
+		id="email"
+		required
+		readonly={readOnly}
+		disabled={readOnly}
+		placeholder={$t('forms.email')}
+		value={service.moodle.defaultEmail}
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="defaultUsername">Default Username</label>
+	<CopyPasswordField
+		id="defaultUsername"
+		required
+		readonly={readOnly}
+		disabled={readOnly}
+		name="defaultUsername"
+		value={service.moodle.defaultUsername}
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="defaultPassword">{$t('forms.default_password')}</label>
+	<CopyPasswordField
+		id="defaultPassword"
+		isPasswordField
+		required
+		readonly={readOnly}
+		disabled={readOnly}
+		name="defaultPassword"
+		value={service.moodle.defaultPassword}
+	/>
+</div>
+<div class="flex space-x-1 py-5 font-bold">
+	<div class="title">MariaDB</div>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="mariadbUser">{$t('forms.username')}</label>
+	<CopyPasswordField
+		name="mariadbUser"
+		id="mariadbUser"
+		value={service.moodle.mariadbUser}
+		readonly
+		disabled
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="mariadbPassword">{$t('forms.password')}</label>
+	<CopyPasswordField
+		id="mariadbPassword"
+		isPasswordField
+		readonly
+		disabled
+		name="mariadbPassword"
+		value={service.moodle.mariadbPassword}
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="mariadbDatabase">{$t('index.database')}</label>
+	<input
+		name="mariadbDatabase"
+		id="mariadbDatabase"
+		required
+		readonly={readOnly}
+		disabled={readOnly}
+		bind:value={service.moodle.mariadbDatabase}
+		placeholder="{$t('forms.eg')}: moodle_db"
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="mariadbRootUser">{$t('forms.root_db_user')}</label>
+	<CopyPasswordField
+		id="mariadbRootUser"
+		readonly
+		disabled
+		name="mariadbRootUser"
+		value={service.moodle.mariadbRootUser}
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="mariadbRootUserPassword">{$t('forms.root_db_password')}</label>
+	<CopyPasswordField
+		id="mariadbRootUserPassword"
+		isPasswordField
+		readonly
+		disabled
+		name="mariadbRootUserPassword"
+		value={service.moodle.mariadbRootUserPassword}
+	/>
+</div>

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

@@ -16,7 +16,7 @@
 	import { appSession, disabledButton, status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
-	import Setting from '$lib/components/Setting.svelte'
+	import Setting from '$lib/components/Setting.svelte';
 
 	import Fider from './_Fider.svelte';
 	import Ghost from './_Ghost.svelte';
@@ -27,6 +27,7 @@
 	import Umami from './_Umami.svelte';
 	import VsCodeServer from './_VSCodeServer.svelte';
 	import Wordpress from './_Wordpress.svelte';
+	import Moodle from './_Moodle.svelte';
 
 	const { id } = $page.params;
 
@@ -97,6 +98,7 @@
 		}
 	});
 </script>
+
 <div class="mx-auto max-w-4xl px-6 pb-12">
 	<form on:submit|preventDefault={handleSubmit} class="py-4">
 		<div class="flex space-x-1 pb-5 font-bold">
@@ -271,6 +273,8 @@
 				<Hasura bind:service />
 			{:else if service.type === 'fider'}
 				<Fider bind:service {readOnly} />
+			{:else if service.type === 'moodle'}
+				<Moodle bind:service {readOnly} />
 			{/if}
 		</div>
 	</form>

apps/ui/src/routes/services/[id]/__layout.svelte

@@ -47,6 +47,7 @@
 				}
 			};
 		} catch (error) {
+			console.log(error);
 			return handlerNotFoundLoad(error, url);
 		}
 	};
@@ -62,6 +63,7 @@
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
 	import { appSession, disabledButton, status } from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
+	import ServiceLinks from './_ServiceLinks.svelte';
 	const { id } = $page.params;
 
 	export let service: any;
@@ -76,6 +78,13 @@
 	let loading = false;
 	let statusInterval: any;
 
+	let location = service.fqdn || null;
+	if (GITPOD_WORKSPACE_URL && service.exposePort) {
+		const { href } = new URL(GITPOD_WORKSPACE_URL);
+		const newURL = href.replace('https://', `https://${service.exposePort}-`).replace(/\/$/, '');
+		location = newURL;
+	}
+
 	async function deleteService() {
 		const sure = confirm($t('application.confirm_to_delete', { name: service.name }));
 		if (sure) {
@@ -109,7 +118,7 @@
 		loading = true;
 		try {
 			await post(`/services/${service.id}/${service.type}/start`, {});
-			return window.location.reload()
+			return window.location.reload();
 		} catch (error) {
 			return errorNotification(error);
 		} finally {
@@ -147,6 +156,29 @@
 		<Loading fullscreen cover />
 	{:else}
 		{#if service.type && service.destinationDockerId && service.version}
+			{#if location}
+				<a
+					href={location}
+					target="_blank"
+					class="icons tooltip-bottom flex items-center bg-transparent text-sm"
+					><svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+						<line x1="10" y1="14" x2="20" y2="4" />
+						<polyline points="15 4 20 4 20 9" />
+					</svg></a
+				>
+			{/if}
+			<div class="border border-stone-700 h-8" />
 			{#if $status.service.initialLoading}
 				<button
 					class="icons tooltip-bottom flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"

apps/ui/src/routes/services/[id]/configuration/type.svelte

@@ -32,21 +32,7 @@
 	import { get, post } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
-
-	import PlausibleAnalytics from '$lib/components/svg/services/PlausibleAnalytics.svelte';
-	import NocoDb from '$lib/components/svg/services/NocoDB.svelte';
-	import MinIo from '$lib/components/svg/services/MinIO.svelte';
-	import VsCodeServer from '$lib/components/svg/services/VSCodeServer.svelte';
-	import Wordpress from '$lib/components/svg/services/Wordpress.svelte';
-	import VaultWarden from '$lib/components/svg/services/VaultWarden.svelte';
-	import LanguageTool from '$lib/components/svg/services/LanguageTool.svelte';
-	import N8n from '$lib/components/svg/services/N8n.svelte';
-	import UptimeKuma from '$lib/components/svg/services/UptimeKuma.svelte';
-	import Ghost from '$lib/components/svg/services/Ghost.svelte';
-	import MeiliSearch from '$lib/components/svg/services/MeiliSearch.svelte';
-	import Umami from '$lib/components/svg/services/Umami.svelte';
-	import Hasura from '$lib/components/svg/services/Hasura.svelte';
-	import Fider from '$lib/components/svg/services/Fider.svelte';
+	import Services from '../_Services.svelte';
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -70,35 +56,8 @@
 		<div class="p-2">
 			<form on:submit|preventDefault={() => handleSubmit(type.name)}>
 				<button type="submit" class="box-selection relative text-xl font-bold hover:bg-pink-600">
-					{#if type.name === 'plausibleanalytics'}
-						<PlausibleAnalytics isAbsolute />
-					{:else if type.name === 'nocodb'}
-						<NocoDb isAbsolute />
-					{:else if type.name === 'minio'}
-						<MinIo isAbsolute />
-					{:else if type.name === 'vscodeserver'}
-						<VsCodeServer isAbsolute />
-					{:else if type.name === 'wordpress'}
-						<Wordpress isAbsolute />
-					{:else if type.name === 'vaultwarden'}
-						<VaultWarden isAbsolute />
-					{:else if type.name === 'languagetool'}
-						<LanguageTool isAbsolute />
-					{:else if type.name === 'n8n'}
-						<N8n isAbsolute />
-					{:else if type.name === 'uptimekuma'}
-						<UptimeKuma isAbsolute />
-					{:else if type.name === 'ghost'}
-						<Ghost isAbsolute />
-					{:else if type.name === 'meilisearch'}
-						<MeiliSearch isAbsolute />
-					{:else if type.name === 'umami'}
-						<Umami isAbsolute />
-					{:else if type.name === 'hasura'}
-						<Hasura isAbsolute />
-					{:else if type.name === 'fider'}
-						<Fider isAbsolute />
-					{/if}{type.fancyName}
+					<Services type={type.name} />
+					{type.fancyName}
 				</button>
 			</form>
 		</div>

apps/ui/src/routes/services/[id]/configuration/version.svelte

@@ -31,7 +31,8 @@
 	import { goto } from '$app/navigation';
 	import { get, post } from '$lib/api';
 	import { t } from '$lib/translations';
-	import { errorNotification, supportedServiceTypesAndVersions } from '$lib/common';
+	import { errorNotification } from '$lib/common';
+	import { supportedServiceTypesAndVersions } from 'shared/index';
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');

apps/ui/src/routes/services/[id]/index.svelte

@@ -57,30 +57,6 @@
 		</div>
 		<span class="text-xs">{service.name}</span>
 	</div>
-
-	{#if service.fqdn}
-		<a
-			href={service.fqdn}
-			target="_blank"
-			class="icons tooltip-bottom flex items-center bg-transparent text-sm"
-			><svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-				<line x1="10" y1="14" x2="20" y2="4" />
-				<polyline points="15 4 20 4 20 9" />
-			</svg></a
-		>
-	{/if}
-
 	<ServiceLinks {service} />
 </div>
 <div class="mx-auto max-w-4xl px-6 py-4">

apps/ui/src/routes/services/index.svelte

@@ -24,22 +24,9 @@
 	import { t } from '$lib/translations';
 	import { appSession } from '$lib/store';
 
-	import PlausibleAnalytics from '$lib/components/svg/services/PlausibleAnalytics.svelte';
-	import NocoDb from '$lib/components/svg/services/NocoDB.svelte';
-	import MinIo from '$lib/components/svg/services/MinIO.svelte';
-	import VsCodeServer from '$lib/components/svg/services/VSCodeServer.svelte';
-	import Wordpress from '$lib/components/svg/services/Wordpress.svelte';
-	import VaultWarden from '$lib/components/svg/services/VaultWarden.svelte';
-	import LanguageTool from '$lib/components/svg/services/LanguageTool.svelte';
-
-	import N8n from '$lib/components/svg/services/N8n.svelte';
-	import UptimeKuma from '$lib/components/svg/services/UptimeKuma.svelte';
-	import Ghost from '$lib/components/svg/services/Ghost.svelte';
-	import MeiliSearch from '$lib/components/svg/services/MeiliSearch.svelte';
-	import Umami from '$lib/components/svg/services/Umami.svelte';
-	import Hasura from '$lib/components/svg/services/Hasura.svelte';
-	import Fider from '$lib/components/svg/services/Fider.svelte';
+	import * as Icons from '$lib/components/svg/services';
 	import { getDomain } from '$lib/common';
+	import Services from './[id]/_Services.svelte';
 
 	async function newService() {
 		const { id } = await post('/services/new', {});
@@ -88,35 +75,7 @@
 				{#each ownServices as service}
 					<a href="/services/{service.id}" class="w-96 p-2 no-underline">
 						<div class="box-selection group relative hover:bg-pink-600">
-							{#if service.type === 'plausibleanalytics'}
-								<PlausibleAnalytics isAbsolute />
-							{:else if service.type === 'nocodb'}
-								<NocoDb isAbsolute />
-							{:else if service.type === 'minio'}
-								<MinIo isAbsolute />
-							{:else if service.type === 'vscodeserver'}
-								<VsCodeServer isAbsolute />
-							{:else if service.type === 'wordpress'}
-								<Wordpress isAbsolute />
-							{:else if service.type === 'vaultwarden'}
-								<VaultWarden isAbsolute />
-							{:else if service.type === 'languagetool'}
-								<LanguageTool isAbsolute />
-							{:else if service.type === 'n8n'}
-								<N8n isAbsolute />
-							{:else if service.type === 'uptimekuma'}
-								<UptimeKuma isAbsolute />
-							{:else if service.type === 'ghost'}
-								<Ghost isAbsolute />
-							{:else if service.type === 'meilisearch'}
-								<MeiliSearch isAbsolute />
-							{:else if service.type === 'umami'}
-								<Umami isAbsolute />
-							{:else if service.type === 'hasura'}
-								<Hasura isAbsolute />
-							{:else if service.type === 'fider'}
-								<Fider isAbsolute />
-							{/if}
+							<Services type={service.type} />
 							<div class="truncate text-center text-xl font-bold">
 								{service.name}
 							</div>
@@ -141,35 +100,7 @@
 					{#each otherServices as service}
 						<a href="/services/{service.id}" class="w-96 p-2 no-underline">
 							<div class="box-selection group relative hover:bg-pink-600">
-								{#if service.type === 'plausibleanalytics'}
-									<PlausibleAnalytics isAbsolute />
-								{:else if service.type === 'nocodb'}
-									<NocoDb isAbsolute />
-								{:else if service.type === 'minio'}
-									<MinIo isAbsolute />
-								{:else if service.type === 'vscodeserver'}
-									<VsCodeServer isAbsolute />
-								{:else if service.type === 'wordpress'}
-									<Wordpress isAbsolute />
-								{:else if service.type === 'vaultwarden'}
-									<VaultWarden isAbsolute />
-								{:else if service.type === 'languagetool'}
-									<LanguageTool isAbsolute />
-								{:else if service.type === 'n8n'}
-									<N8n isAbsolute />
-								{:else if service.type === 'uptimekuma'}
-									<UptimeKuma isAbsolute />
-								{:else if service.type === 'ghost'}
-									<Ghost isAbsolute />
-								{:else if service.type === 'meilisearch'}
-									<MeiliSearch isAbsolute />
-								{:else if service.type === 'umami'}
-									<Umami isAbsolute />
-								{:else if service.type === 'hasura'}
-									<Hasura isAbsolute />
-								{:else if service.type === 'fider'}
-									<Fider isAbsolute />
-								{/if}
+								<Services type={service.type} />
 								<div class="truncate text-center text-xl font-bold">
 									{service.name}
 								</div>