fix(setup): test-email is now a client-side call (no form wipe) + allow /setup/* during first-run

Author: Ignacio Van Droogenbroeck

src/hooks.server.ts

@@ -91,15 +91,18 @@ export const handle: Handle = async ({ event, resolve }) => {
   const db = getDb();
   const hasUser = db.prepare('SELECT 1 FROM users WHERE deleted_at IS NULL LIMIT 1').get();
 
+  const onSetup = path === '/setup' || path.startsWith('/setup/');
   const firstRunAllowed =
-    path === '/setup' ||
+    onSetup ||
     path.startsWith('/_app/') ||
     path.startsWith('/images/') ||
     path === '/favicon.ico';
   if (!hasUser && !firstRunAllowed) {
     return Response.redirect(new URL('/setup', event.url.origin).toString(), 302);
   }
-  // Once setup is complete, the wizard is gone — never serve it again.
+  // Once setup is complete, the wizard page is gone — redirect it to login.
+  // (Its sub-routes like /setup/test-email return their own 403, so only the
+  // page itself is redirected.)
   if (hasUser && path === '/setup') {
     return Response.redirect(new URL('/login', event.url.origin).toString(), 302);
   }

src/routes/(auth)/setup/+page.server.ts

@@ -4,7 +4,6 @@ import type { PageServerLoad, Actions } from './$types';
 import { getDb } from '$lib/server/db';
 import { hashPassword, createToken, sessionCookieOptions } from '$lib/server/auth';
 import { hasAnyUser, setEmailConfig, type EmailConfig } from '$lib/server/settings';
-import { sendTestEmail } from '$lib/server/email';
 
 // First-run setup wizard. Available ONLY while no account exists; once the
 // admin is created it is permanently closed (redirects to /login).
@@ -48,23 +47,9 @@ function parseEmailConfig(form: FormData): EmailConfig {
 }
 
 export const actions: Actions = {
-  // Test the email config without creating the admin (used by the "Send test" button).
-  testEmail: async ({ request }) => {
-    if (hasAnyUser()) return fail(403, { error: 'Setup already completed.' });
-    const form = await request.formData();
-    const to = String(form.get('test_to') || '').trim();
-    if (!to) return fail(400, { emailError: 'Enter an address to send the test to.' });
-    const cfg = parseEmailConfig(form);
-    if (cfg.provider === 'none') return fail(400, { emailError: 'Choose a provider first.' });
-    try {
-      await sendTestEmail(cfg, to);
-      return { emailTested: true };
-    } catch (err: any) {
-      return fail(400, { emailError: `Test failed: ${err.message}` });
-    }
-  },
-
   // Create the first admin account (and persist email config if provided).
+  // (The "Send test" button uses the /setup/test-email endpoint instead, so it
+  // never submits this form and never wipes the entered data.)
   complete: async ({ request, cookies }) => {
     if (hasAnyUser()) throw redirect(302, '/login');
 

src/routes/(auth)/setup/+page.svelte

@@ -7,9 +7,62 @@
   export let form: ActionData;
 
   let step = 1;
-  let provider: 'none' | 'smtp' | 'mailgun' = 'none';
   let submitting = false;
+
+  // All fields are bound so their values survive any re-render (notably the
+  // "Send test" round-trip, which previously wiped unbound inputs).
+  let firstName = '';
+  let lastName = '';
+  let email = '';
+  let password = '';
+
+  let provider: 'none' | 'smtp' | 'mailgun' = 'none';
+  let from = '';
+  let smtpHost = '';
+  let smtpPort = 587;
+  let smtpSecure = false;
+  let smtpUser = '';
+  let smtpPass = '';
+  let mgDomain = '';
+  let mgApiKey = '';
+  let mgApiUrl = '';
+
+  // Test email is a pure client-side call — it never submits the form, so the
+  // entered data is preserved.
+  let testTo = '';
   let testing = false;
+  let testError = '';
+  let testOk = false;
+
+  function emailPayload() {
+    if (provider === 'smtp') {
+      return { provider, from, host: smtpHost, port: smtpPort, secure: smtpSecure, user: smtpUser, pass: smtpPass };
+    }
+    if (provider === 'mailgun') {
+      return { provider, from, domain: mgDomain, apiKey: mgApiKey, apiUrl: mgApiUrl };
+    }
+    return { provider: 'none' };
+  }
+
+  async function sendTest() {
+    testing = true;
+    testError = '';
+    testOk = false;
+    try {
+      const res = await fetch('/setup/test-email', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ...emailPayload(), to: testTo }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Test failed');
+      testOk = true;
+    } catch (err: any) {
+      testError = err.message;
+    } finally {
+      testing = false;
+    }
+  }
 
   // Shared input styling — matches the login/signup fields.
   const inputClass =
@@ -71,20 +124,20 @@
     <div class="grid grid-cols-2 gap-3">
       <div>
         <label for="first_name" class="mb-1.5 block text-sm font-medium">First name</label>
-        <input id="first_name" name="first_name" autocomplete="given-name" class={inputClass} />
+        <input id="first_name" name="first_name" bind:value={firstName} autocomplete="given-name" class={inputClass} />
       </div>
       <div>
         <label for="last_name" class="mb-1.5 block text-sm font-medium">Last name</label>
-        <input id="last_name" name="last_name" autocomplete="family-name" class={inputClass} />
+        <input id="last_name" name="last_name" bind:value={lastName} autocomplete="family-name" class={inputClass} />
       </div>
     </div>
     <div>
       <label for="email" class="mb-1.5 block text-sm font-medium">Email</label>
-      <input id="email" name="email" type="email" required autocomplete="email" class={inputClass} />
+      <input id="email" name="email" type="email" required bind:value={email} autocomplete="email" class={inputClass} />
     </div>
     <div>
       <label for="password" class="mb-1.5 block text-sm font-medium">Password</label>
-      <input id="password" name="password" type="password" required minlength="8" autocomplete="new-password" class={inputClass} />
+      <input id="password" name="password" type="password" required minlength="8" bind:value={password} autocomplete="new-password" class={inputClass} />
       <p class="mt-1.5 text-xs text-muted-foreground">At least 8 characters, with an uppercase letter and a number or symbol.</p>
     </div>
     <Button type="button" class="w-full" on:click={() => (step = 2)}>Continue</Button>
@@ -104,76 +157,67 @@
     {#if provider !== 'none'}
       <div>
         <label for="from" class="mb-1.5 block text-sm font-medium">From address</label>
-        <input id="from" name="from" placeholder="Arc Launchpad <noreply@example.com>" class={inputClass} />
+        <input id="from" name="from" bind:value={from} placeholder="Arc Launchpad <noreply@example.com>" class={inputClass} />
       </div>
     {/if}
 
     {#if provider === 'smtp'}
       <div class="grid grid-cols-3 gap-3">
         <div class="col-span-2">
           <label for="smtp_host" class="mb-1.5 block text-sm font-medium">Host</label>
-          <input id="smtp_host" name="smtp_host" placeholder="smtp.example.com" class={inputClass} />
+          <input id="smtp_host" name="smtp_host" bind:value={smtpHost} placeholder="smtp.example.com" class={inputClass} />
         </div>
         <div>
           <label for="smtp_port" class="mb-1.5 block text-sm font-medium">Port</label>
-          <input id="smtp_port" name="smtp_port" type="number" value="587" class={inputClass} />
+          <input id="smtp_port" name="smtp_port" type="number" bind:value={smtpPort} class={inputClass} />
         </div>
       </div>
       <div class="grid grid-cols-2 gap-3">
         <div>
           <label for="smtp_user" class="mb-1.5 block text-sm font-medium">Username</label>
-          <input id="smtp_user" name="smtp_user" autocomplete="off" class={inputClass} />
+          <input id="smtp_user" name="smtp_user" bind:value={smtpUser} autocomplete="off" class={inputClass} />
         </div>
         <div>
           <label for="smtp_pass" class="mb-1.5 block text-sm font-medium">Password</label>
-          <input id="smtp_pass" name="smtp_pass" type="password" autocomplete="off" class={inputClass} />
+          <input id="smtp_pass" name="smtp_pass" type="password" bind:value={smtpPass} autocomplete="off" class={inputClass} />
         </div>
       </div>
       <label class="flex items-center gap-2 text-sm">
-        <input type="checkbox" name="smtp_secure" class="h-4 w-4 rounded border-input accent-primary" />
+        <input type="checkbox" name="smtp_secure" bind:checked={smtpSecure} class="h-4 w-4 rounded border-input accent-primary" />
         <span class="text-muted-foreground">Use TLS (port 465)</span>
       </label>
     {/if}
 
     {#if provider === 'mailgun'}
       <div>
         <label for="mg_domain" class="mb-1.5 block text-sm font-medium">Mailgun domain</label>
-        <input id="mg_domain" name="mg_domain" placeholder="mg.example.com" class={inputClass} />
+        <input id="mg_domain" name="mg_domain" bind:value={mgDomain} placeholder="mg.example.com" class={inputClass} />
       </div>
       <div>
         <label for="mg_api_key" class="mb-1.5 block text-sm font-medium">API key</label>
-        <input id="mg_api_key" name="mg_api_key" type="password" autocomplete="off" class={inputClass} />
+        <input id="mg_api_key" name="mg_api_key" type="password" bind:value={mgApiKey} autocomplete="off" class={inputClass} />
       </div>
       <div>
         <label for="mg_api_url" class="mb-1.5 block text-sm font-medium">API base URL</label>
-        <input id="mg_api_url" name="mg_api_url" placeholder="https://api.mailgun.net" class={inputClass} />
+        <input id="mg_api_url" name="mg_api_url" bind:value={mgApiUrl} placeholder="https://api.mailgun.net" class={inputClass} />
       </div>
     {/if}
 
     {#if provider !== 'none'}
-      {#if form?.emailError}
-        <div class="rounded-md bg-destructive/10 p-3 text-sm text-destructive">{form.emailError}</div>
+      {#if testError}
+        <div class="rounded-md bg-destructive/10 p-3 text-sm text-destructive">{testError}</div>
       {/if}
-      {#if form?.emailTested}
+      {#if testOk}
         <div class="flex items-center gap-1.5 rounded-md bg-green-500/10 p-3 text-sm text-green-600">
           <Check class="h-4 w-4" /> Test email sent — check the inbox.
         </div>
       {/if}
       <div class="flex items-end gap-2">
         <div class="flex-1">
           <label for="test_to" class="mb-1.5 block text-sm font-medium">Send a test to</label>
-          <input id="test_to" name="test_to" type="email" placeholder="you@example.com" class={inputClass} />
+          <input id="test_to" type="email" bind:value={testTo} placeholder="you@example.com" class={inputClass} />
         </div>
-        <Button
-          type="submit"
-          variant="outline"
-          formaction="?/testEmail"
-          disabled={testing}
-          on:click={() => {
-            testing = true;
-            setTimeout(() => (testing = false), 4000);
-          }}
-        >
+        <Button type="button" variant="outline" disabled={testing || !testTo} on:click={sendTest}>
           {testing ? 'Sending…' : 'Send test'}
         </Button>
       </div>

src/routes/(auth)/setup/test-email/+server.ts

@@ -0,0 +1,46 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { hasAnyUser, type EmailConfig } from '$lib/server/settings';
+import { sendTestEmail } from '$lib/server/email';
+
+// Client-side test-email endpoint for the setup wizard. Available only during
+// first-run (no users yet); once an admin exists, use Settings → Email instead.
+export const POST: RequestHandler = async ({ request }) => {
+  if (hasAnyUser()) {
+    return json({ error: 'Setup already completed.' }, { status: 403 });
+  }
+
+  const body = await request.json();
+  const to = String(body?.to || '').trim();
+  if (!to) return json({ error: 'Enter an address to send the test to.' }, { status: 400 });
+
+  let cfg: EmailConfig;
+  if (body.provider === 'smtp') {
+    cfg = {
+      provider: 'smtp',
+      from: String(body.from || '').trim(),
+      host: String(body.host || '').trim(),
+      port: parseInt(String(body.port || '587'), 10),
+      secure: !!body.secure,
+      user: body.user ? String(body.user).trim() : undefined,
+      pass: body.pass ? String(body.pass) : undefined,
+    };
+  } else if (body.provider === 'mailgun') {
+    cfg = {
+      provider: 'mailgun',
+      from: String(body.from || '').trim(),
+      domain: String(body.domain || '').trim(),
+      apiKey: String(body.apiKey || '').trim(),
+      apiUrl: body.apiUrl ? String(body.apiUrl).trim() : undefined,
+    };
+  } else {
+    return json({ error: 'Choose a provider first.' }, { status: 400 });
+  }
+
+  try {
+    await sendTestEmail(cfg, to);
+    return json({ ok: true });
+  } catch (err: any) {
+    return json({ error: `Test failed: ${err.message}` }, { status: 400 });
+  }
+};