tons of updates

apps/ui/src/lib/components/Services/Fider.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
+	import Select from 'svelte-select';
+	export let service: any;
+	export let readOnly: any;
+
+	let mailgunRegions = [
+		{
+			value: 'EU',
+			label: 'EU'
+		},
+		{
+			value: 'US',
+			label: 'US'
+		}
+	];
+</script>
+
+<div class="flex flex-row border-b border-coolgray-500 my-6 space-x-2">
+	<div class="title font-bold pb-3">Fider</div>
+</div>
+
+<div class="space-y-2 px-4">
+	<div class="grid grid-cols-2 items-center">
+		<label for="jwtSecret">JWT Secret</label>
+		<CopyPasswordField
+			name="jwtSecret"
+			id="jwtSecret"
+			isPasswordField
+			value={service.fider.jwtSecret}
+			readonly
+			disabled
+		/>
+	</div>
+
+	<div class="grid grid-cols-2 items-center">
+		<label for="emailNoreply">Noreply Email</label>
+		<input
+			class="w-full"
+			name="emailNoreply"
+			id="emailNoreply"
+			type="email"
+			required
+			readonly={readOnly}
+			disabled={readOnly}
+			bind:value={service.fider.emailNoreply}
+			placeholder="{$t('forms.eg')}: noreply@yourdomain.com"
+		/>
+	</div>
+</div>
+<div class="flex flex-row border-b border-coolgray-500 my-6 space-x-2">
+	<div class="title font-bold pb-3">Email</div>
+</div>
+<div class="space-y-2 px-4">
+	<div class="grid grid-cols-2 items-center">
+		<label for="emailMailgunApiKey">Mailgun API Key</label>
+		<CopyPasswordField
+			name="emailMailgunApiKey"
+			id="emailMailgunApiKey"
+			isPasswordField
+			bind:value={service.fider.emailMailgunApiKey}
+			readonly={readOnly}
+			disabled={readOnly}
+			placeholder="{$t('forms.eg')}: key-yourkeygoeshere"
+		/>
+	</div>
+
+	<div class="grid grid-cols-2 items-center">
+		<label for="emailMailgunDomain">Mailgun Domain</label>
+		<input
+			class="w-full"
+			name="emailMailgunDomain"
+			id="emailMailgunDomain"
+			readonly={readOnly}
+			disabled={readOnly}
+			bind:value={service.fider.emailMailgunDomain}
+			placeholder="{$t('forms.eg')}: yourdomain.com"
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="emailMailgunRegion">Mailgun Region</label>
+		<div class="custom-select-wrapper">
+			<Select
+				id="baseBuildImages"
+				items={mailgunRegions}
+				showIndicator
+				on:select={(event) => (service.fider.emailMailgunRegion = event.detail.value)}
+				value={service.fider.emailMailgunRegion || 'EU'}
+				isClearable={false}
+			/>
+		</div>
+	</div>
+
+	<div class="flex space-x-1 py-5 font-bold">
+		<div class="text-lg">Or</div>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="emailSmtpHost">SMTP Host</label>
+		<input
+			class="w-full"
+			name="emailSmtpHost"
+			id="emailSmtpHost"
+			readonly={readOnly}
+			disabled={readOnly}
+			bind:value={service.fider.emailSmtpHost}
+			placeholder="{$t('forms.eg')}: smtp.yourdomain.com"
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="emailSmtpPort">SMTP Port</label>
+		<input
+			class="w-full"
+			name="emailSmtpPort"
+			id="emailSmtpPort"
+			readonly={readOnly}
+			disabled={readOnly}
+			bind:value={service.fider.emailSmtpPort}
+			placeholder="{$t('forms.eg')}: 587"
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="emailSmtpUser">SMTP User</label>
+		<input
+			class="w-full"
+			name="emailSmtpUser"
+			id="emailSmtpUser"
+			readonly={readOnly}
+			disabled={readOnly}
+			bind:value={service.fider.emailSmtpUser}
+			placeholder="{$t('forms.eg')}: user@yourdomain.com"
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="emailSmtpPassword">SMTP Password</label>
+		<CopyPasswordField
+			name="emailSmtpPassword"
+			id="emailSmtpPassword"
+			isPasswordField
+			bind:value={service.fider.emailSmtpPassword}
+			readonly={readOnly}
+			disabled={readOnly}
+			placeholder="{$t('forms.eg')}: s0m3p4ssw0rd"
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="emailSmtpEnableStartTls">SMTP Start TLS</label>
+		<input
+			class="w-full"
+			name="emailSmtpEnableStartTls"
+			id="emailSmtpEnableStartTls"
+			readonly={readOnly}
+			disabled={readOnly}
+			bind:value={service.fider.emailSmtpEnableStartTls}
+			placeholder="{$t('forms.eg')}: true"
+		/>
+	</div>
+</div>
+<div class="flex flex-row border-b border-coolgray-500 my-6 space-x-2">
+	<div class="title font-bold pb-3">PostgreSQL</div>
+</div>
+<div class="space-y-2 px-4">
+	<div class="grid grid-cols-2 items-center">
+		<label for="postgresqlUser">{$t('forms.username')}</label>
+		<CopyPasswordField
+			name="postgresqlUser"
+			id="postgresqlUser"
+			value={service.fider.postgresqlUser}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="postgresqlPassword">{$t('forms.password')}</label>
+		<CopyPasswordField
+			id="postgresqlPassword"
+			isPasswordField
+			readonly
+			disabled
+			name="postgresqlPassword"
+			value={service.fider.postgresqlPassword}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="postgresqlDatabase">{$t('index.database')}</label>
+		<CopyPasswordField
+			name="postgresqlDatabase"
+			id="postgresqlDatabase"
+			value={service.fider.postgresqlDatabase}
+			readonly
+			disabled
+		/>
+	</div>
+</div>