@functionalcms/svelte-components 5.24.4 → 5.24.6

package/dist/components/form/SmartForm.svelte

@@ -77,7 +77,7 @@
 	};
 
 	function hasErrors(field: any, errors: Map<string, string>) {
-		return errors.has(fields?.id) ? 'error' : '';
+		return errors.has(field?.id) ? 'error' : '';
 	}
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "5.24.4",
+	"version": "5.24.6",
 	"license": "MIT",
 	"watch": {
 		"build": {

package/src/pages/auth/setup/[email]/+page.server.ts

@@ -7,23 +7,24 @@ import * as m from "$lib/paraglide/messages.js";
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ params, locals, url }) {
   const username = params.email;
-  return { username, success: false };
+  const code = url.searchParams.get("code");
+  return { username, code: code, success: false };
 }
 
 export const actions = {
   setup: async ({ request, locals, params, url }) => {
     const userService = getUsersService(locals);
-    const code = url.searchParams.get("code");
 
-    const data = await convertResponseToFields(fields, request);
+    const data = await convertResponseToFields(fields(""), request);
 
     if (data.password != data.confirm) {
       return {
+        code: data.code,
         errors: new Map<string, string>([["confirm", m.auth_password_do_not_match()]])
       }
     }
 
-    const result = await userService.setup(DOMAIN, params.email);
+    const result = await userService.setup(DOMAIN, params.email, data.code, data.password);
 
     return { success: true };
   },

package/src/pages/auth/setup/[email]/+page.svelte

@@ -1,72 +1,72 @@
-<script lang="ts">
-	import { SmartForm } from '@functionalcms/svelte-components';
-	import * as m from '$lib/paraglide/messages.js';
-	import { deserialize } from '$app/forms';
-	import { fields } from './fields.js';
+  <script lang="ts">
+    import { SmartForm } from '@functionalcms/svelte-components';
+    import * as m from '$lib/paraglide/messages.js';
+    import { deserialize } from '$app/forms';
+    import { fields } from './fields.js';
 
-	interface Props {
-		data: {
-			username: string | null;
-			errors: string;
-		};
-		form: any;
-	}
+    interface Props {
+      data: {
+        username: string | null;
+        errors: string;
+      };
+      form: any;
+    }
 
-	let { data, form = {} } = $props();
+    let { data, form = {} } = $props();
 
-	let submitError = $state(false);
+    let submitError = $state(false);
 
-	let isProcesing = $state(false);
-	let resultMessage = $state('');
+    let isProcesing = $state(false);
+    let resultMessage = $state('');
 
-	async function resetPassword() {
-		isProcesing = true;
-		submitError = false;
+    async function resetPassword() {
+      isProcesing = true;
+      submitError = false;
 
-		const response = await fetch('?/setup', {
-			method: 'POST',
-			body: ''
-		});
+      const response = await fetch('?/setup', {
+        method: 'POST',
+        body: ''
+      });
 
-		const result = deserialize(await response.text());
+      const result = deserialize(await response.text());
 
-		resultMessage = result.type === 'success' ? m.auth_setup_success() : m.auth_setup_failure();
+      resultMessage = result.type === 'success' ? m.auth_setup_success() : m.auth_setup_failure();
 
-		isProcesing = false;
-	}
-</script>
+      isProcesing = false;
+    }
+  </script>
 
-<article class="w-full">
-	<main class="flex flex-col justify-around items-center gap-4 w-full m-auto p-4">
-		<h1>{m.auth_setup_title()}</h1>
-		{#if !data.username}
-			<p>{m.auth_setup_missing_code()}</p>
-		{:else}
-			<div>
-				{@html m.auth_setup_into()}
-			</div>
-			<SmartForm
-				{fields}
-				errors={form?.errors}
-				action="?/setup"
-				buttons={[
-					{
-						type: 'submit',
-						label: m.auth_submit(),
-						color: 'primary'
-					}
-				]}
-			/>
-			{#if resultMessage != ''}
-				<p>{resultMessage}</p>
-			{/if}
+  <article class="w-full">
+    <main class="flex flex-col justify-around items-center gap-4 w-full m-auto p-4">
+      <h1>{m.auth_setup_title()}</h1>
+      {#if !data.username}
+        <p>{m.auth_setup_missing_code()}</p>
+      {:else}
+        <div>
+          {@html m.auth_setup_into()}
+        </div>
+        <SmartForm
+          fields={fields(data.code ?? form.code)}
+          errors={form?.errors}
+          action="?/setup"
+          buttons={[
+            {
+              type: 'submit',
+              label: m.auth_submit(),
+              color: 'primary'
+            }
+          ]}
+        />
+        {#if resultMessage != ''}
+          <p>{resultMessage}</p>
+        {/if}
 
-			{#if submitError}
-				<p class="text-red-600">{m.auth_setup_error()}</p>
-			{/if}
-		{/if}
-	</main>
-</article>
+        {#if submitError}
+          <p class="text-red-600">{m.auth_setup_error()}</p>
+        {/if}
+      {/if}
+    </main>
+  </article>
 
-<style>
-</style>
+  <style>
+  </style>

package/src/pages/auth/setup/[email]/fields.ts

@@ -1,7 +1,7 @@
 import { m } from "$lib/paraglide/messages";
-import { createInputField, InputType } from "@functionalcms/svelte-components";
+import { createHiddenField, createInputField, InputType } from "@functionalcms/svelte-components";
 
-export const fields = [
+export const fields = (code: string) => [
     createInputField(
       "password",
       m.auth_password(),
@@ -20,4 +20,8 @@ export const fields = [
         required: true,
       },
     ),
+    createHiddenField(
+      "code",
+      code
+    )
   ];