fix: add option to manually select SMTP TLS method (#268)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pocket-id-frontend",
-  "version": "0.30.0",
+  "version": "0.35.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pocket-id-frontend",
-      "version": "0.30.0",
+      "version": "0.35.2",
       "dependencies": {
         "@simplewebauthn/browser": "^13.1.0",
         "@tailwindcss/vite": "^4.0.0",

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

@@ -15,7 +15,7 @@ export type AllAppConfig = AppConfig & {
 	smtpFrom: string;
 	smtpUser: string;
 	smtpPassword: string;
-	smtpTls: boolean;
+	smtpTls: 'none' | 'starttls' | 'tls';
 	smtpSkipCertVerify: boolean;
 	emailLoginNotificationEnabled: boolean;
 	// LDAP

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

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { env } from '$env/dynamic/public';
-	import CheckboxWithLabel from '$lib/components/form/checkbox-with-label.svelte';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog';
+	import CheckboxWithLabel from '$lib/components/form/checkbox-with-label.svelte';
 	import FormInput from '$lib/components/form/form-input.svelte';
 	import { Button } from '$lib/components/ui/button';
+	import Label from '$lib/components/ui/label/label.svelte';
+	import * as Select from '$lib/components/ui/select';
 	import AppConfigService from '$lib/services/app-config-service';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
 	import { createForm } from '$lib/utils/form-util';
@@ -20,6 +22,11 @@
 
 	const appConfigService = new AppConfigService();
 	const uiConfigDisabled = env.PUBLIC_UI_CONFIG_DISABLED === 'true';
+	const tlsOptions = {
+		none: 'None',
+		starttls: 'StartTLS',
+		tls: 'TLS'
+	};
 
 	let isSendingTestEmail = $state(false);
 
@@ -29,7 +36,7 @@
 		smtpUser: z.string(),
 		smtpPassword: z.string(),
 		smtpFrom: z.string().email(),
-		smtpTls: z.boolean(),
+		smtpTls: z.enum(['none', 'starttls', 'tls']),
 		smtpSkipCertVerify: z.boolean(),
 		emailOneTimeAccessEnabled: z.boolean(),
 		emailLoginNotificationEnabled: z.boolean()
@@ -96,12 +103,22 @@
 			<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="tls"
-				label="TLS"
-				description="Enable TLS for the SMTP connection."
-				bind:checked={$inputs.smtpTls.value}
-			/>
+			<div class="grid gap-2">
+				<Label class="mb-0" for="smtp-tls">SMTP TLS Option</Label>
+				<Select.Root
+					selected={{ value: $inputs.smtpTls.value, label: tlsOptions[$inputs.smtpTls.value] }}
+					onSelectedChange={(v) => ($inputs.smtpTls.value = v!.value)}
+				>
+					<Select.Trigger>
+						<Select.Value placeholder="Email TLS Option" />
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Item value="none" label="None" />
+						<Select.Item value="starttls" label="StartTLS" />
+						<Select.Item value="tls" label="TLS" />
+					</Select.Content>
+				</Select.Root>
+			</div>
 			<CheckboxWithLabel
 				id="skip-cert-verify"
 				label="Skip Certificate Verification"