feat: init moodle and separate stuffs to shared package

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>