@functionalcms/svelte-components 5.24.2 → 5.24.3

package/dist/components/form/SmartForm.svelte

@@ -59,6 +59,8 @@
 		]
 	}: Props = $props();
 
+	let formErrors = errors ?? new Map<string, string>();
+
 	let form: HTMLFormElement;
 	let showMessage = $state(false);
 
@@ -231,7 +233,7 @@
 	<form method="POST" {action} class={css} bind:this={form}>
 		<fieldset>
 			{#each fields as field}
-				<div class={hasErrors(field, errors)}>
+				<div class={hasErrors(field, formErrors)}>
 					{#if field.typeOfField === 'input'}
 						{@render renderInput(field)}
 					{:else if field.typeOfField === 'textarea'}
@@ -255,7 +257,7 @@
 					{:else if field.typeOfField === 'html'}
 						{@render renderHtmlEditory(field)}
 					{/if}
-					{@render showErrors(field, errors)}
+					{@render showErrors(field, formErrors)}
 				</div>
 			{/each}
 

package/dist/components/form/form.d.ts

@@ -128,4 +128,4 @@ export type ButtonConfig = {
     class?: string;
     action?: (event: Event) => Promise<void>;
 };
-export declare function convertResponseToFields(fields: Array<Field>, request: any): Promise<any>;
+export declare function convertResponseToFields(fields: Array<Field>, request: Request): Promise<any>;

package/package.json

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

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

@@ -1,17 +1,25 @@
 import { DOMAIN } from '$env/static/private';
 import { getUsersService } from '@functionalcms/svelte-components/index-server.js';
-import { fail } from '@sveltejs/kit';
-
+import { convertResponseToFields } from '@functionalcms/svelte-components';
+import { fields } from './fields';
 /** @type {import('./$types').PageServerLoad} */
-export async function load({ params }) {
-  const code = params.email;
-
-  return { code };
+export async function load({ params, locals, url }) {
+  const username = params.email;
+  return { username, success: false };
 }
 
 export const actions = {
-  setup: async ({ request, locals, params }) => {
+  setup: async ({ request, locals, params, url }) => {
     const userService = getUsersService(locals);
+    const code = url.searchParams.get("code");
+
+    const data = await convertResponseToFields(fields, request);
+
+    if (data.password != data.confirm) {
+      return {
+        errors: new Map<string, string>([["confirm", m.auth_password_do_not_match()]])
+      }
+    }
 
     const result = await userService.setup(DOMAIN, params.email);
 

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

@@ -1,25 +1,33 @@
 <script lang="ts">
   import {
     Button,
+    createInputField,
+    InputType,
+    SmartForm,
     Spinner,
   } 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: {
-      code: string | null;
+      username: string | null;
+      errors: string
     };
+    form: any
   }
 
-  let { data } = $props();
+  let { data, form = {} } = $props();
 
+  let submitError = $state(false);
 
   let isProcesing = $state(false);
   let resultMessage = $state("");
 
   async function resetPassword() {
     isProcesing = true;
+    submitError = false;
 
     const response = await fetch("?/setup", {
       method: "POST",
@@ -42,21 +50,31 @@
     class="flex flex-col justify-around items-center gap-4 w-full m-auto p-4"
   >
     <h1>{m.auth_setup_title()}</h1>
-    {#if !data.code}
+    {#if !data.username}
       <p>{m.auth_setup_missing_code()}</p>
     {:else}
       <div>
         {@html m.auth_setup_into()}
       </div>
-      <Button onclick={resetPassword} disabled={isProcesing}>
-        {#if isProcesing}
-          <Spinner size="16"/>
-        {/if}
-        {m.auth_setup_submit()}
-      </Button>
+      <SmartForm
+        {fields}
+        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>

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

@@ -0,0 +1,23 @@
+import { m } from "$lib/paraglide/messages";
+import { createInputField, InputType } from "@functionalcms/svelte-components";
+
+export const fields = [
+    createInputField(
+      "password",
+      m.auth_password(),
+      InputType.Password,
+      "",
+      {
+        required: true,
+      },
+    ),
+    createInputField(
+      "confirm",
+      m.auth_comnfirm_password(),
+      InputType.Password,
+      "",
+      {
+        required: true,
+      },
+    ),
+  ];