feat: add option to skip TLS certificate check and ability to send test email

frontend/src/lib/services/app-config-service.ts

@@ -53,6 +53,10 @@ export default class AppConfigService extends APIService {
 		await this.api.put(`/application-configuration/background-image`, formData);
 	}
 
+	async sendTestEmail() {
+		await this.api.post('/application-configuration/test-email');
+	}
+
 	async getVersionInformation() {
 		const response = (
 			await axios.get('https://api.github.com/repos/stonith404/pocket-id/releases/latest')

frontend/src/lib/types/application-configuration.ts

@@ -12,6 +12,7 @@ export type AllAppConfig = AppConfig & {
 	smtpFrom: string;
 	smtpUser: string;
 	smtpPassword: string;
+	smtpSkipCertVerify: boolean;
 };
 
 export type AppConfigRawResponse = {

frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import CheckboxWithLabel from '$lib/components/checkbox-with-label.svelte';
 	import FormInput from '$lib/components/form-input.svelte';
 	import { Button } from '$lib/components/ui/button';
+	import AppConfigService from '$lib/services/app-config-service';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
 	import { createForm } from '$lib/utils/form-util';
 	import { toast } from 'svelte-sonner';
@@ -14,7 +16,9 @@
 		callback: (appConfig: Partial<AllAppConfig>) => Promise<void>;
 	} = $props();
 
-	let isLoading = $state(false);
+	const appConfigService = new AppConfigService();
+
+	let isSendingTestEmail = $state(false);
 	let emailEnabled = $state(appConfig.emailEnabled);
 
 	const updatedAppConfig = {
@@ -23,7 +27,8 @@
 		smtpPort: appConfig.smtpPort,
 		smtpUser: appConfig.smtpUser,
 		smtpPassword: appConfig.smtpPassword,
-		smtpFrom: appConfig.smtpFrom
+		smtpFrom: appConfig.smtpFrom,
+		smtpSkipCertVerify: appConfig.smtpSkipCertVerify
 	};
 
 	const formSchema = z.object({
@@ -31,7 +36,8 @@
 		smtpPort: z.number().min(1),
 		smtpUser: z.string().min(1),
 		smtpPassword: z.string().min(1),
-		smtpFrom: z.string().email()
+		smtpFrom: z.string().email(),
+		smtpSkipCertVerify: z.boolean()
 	});
 
 	const { inputs, ...form } = createForm<typeof formSchema>(formSchema, updatedAppConfig);
@@ -39,11 +45,10 @@
 	async function onSubmit() {
 		const data = form.validate();
 		if (!data) return false;
-		isLoading = true;
 		await callback({
 			...data,
 			emailEnabled: true
-		}).finally(() => (isLoading = false));
+		});
 		toast.success('Email configuration updated successfully');
 		return true;
 	}
@@ -59,6 +64,17 @@
 			emailEnabled = true;
 		}
 	}
+
+	async function onTestEmail() {
+		isSendingTestEmail = true;
+		await appConfigService
+			.sendTestEmail()
+			.then(() => toast.success('Test email sent successfully to your Email address.'))
+			.catch(() =>
+				toast.error('Failed to send test email. Check the server logs for more information.')
+			)
+			.finally(() => (isSendingTestEmail = false));
+	}
 </script>
 
 <form onsubmit={onSubmit}>
@@ -68,13 +84,23 @@
 		<FormInput label="SMTP User" bind:input={$inputs.smtpUser} />
 		<FormInput label="SMTP Password" type="password" bind:input={$inputs.smtpPassword} />
 		<FormInput label="SMTP From" bind:input={$inputs.smtpFrom} />
+		<CheckboxWithLabel
+			id="skip-cert-verify"
+			label="Skip Certificate Verification"
+			description="This can be useful for self-signed certificates."
+			bind:checked={$inputs.smtpSkipCertVerify.value}
+		/>
 	</div>
-	<div class="mt-5 flex justify-end gap-3">
+	<div class="mt-8 flex justify-end gap-3">
 		{#if emailEnabled}
 			<Button variant="secondary" onclick={onDisable}>Disable</Button>
-			<Button {isLoading} onclick={onSubmit} type="submit">Save</Button>
+			<Button isLoading={isSendingTestEmail} variant="secondary" onclick={onTestEmail}
+				>Send Test Email</Button
+			>
+
+			<Button onclick={onSubmit} type="submit">Save</Button>
 		{:else}
-			<Button {isLoading} onclick={onEnable} type="submit">Enable</Button>
+			<Button onclick={onEnable} type="submit">Enable</Button>
 		{/if}
 	</div>
 </form>