@functionalcms/svelte-components 5.24.1 → 5.24.3

package/dist/components/form/SmartForm.svelte

@@ -12,12 +12,8 @@
 		type HiddenField,
 		type DatePickerField,
 		SubmitResult,
-
 		type MarkdownEditorField,
-
 		type HtmlEditorField
-
-
 	} from './form.js';
 	import {
 		Button,
@@ -42,6 +38,7 @@
 		class?: string;
 		successMessage?: string;
 		fields?: Array<Field>;
+		errors?: Map<string, string>;
 		onMessageSubmitted?: (result: SubmitResult) => void;
 		buttons: Array<ButtonConfig>;
 	}
@@ -49,6 +46,7 @@
 	let {
 		action,
 		fields = [],
+		errors = new Map(),
 		class: css = '',
 		successMessage,
 		onMessageSubmitted,
@@ -61,10 +59,10 @@
 		]
 	}: Props = $props();
 
+	let formErrors = errors ?? new Map<string, string>();
+
 	let form: HTMLFormElement;
 	let showMessage = $state(false);
-	let isSendingMessage = $state(false);
-	let loading = $state(false);
 
 	const isValid = (event: Event) => {
 		debugger;
@@ -78,36 +76,16 @@
 		return allValid;
 	};
 
-	const handleSubmit = async (event: Event) => {
-		console.log('SmartForm submit processing');
-		event.preventDefault();
-		loading = true;
-		debugger;
-		try {
-			if (isValid(event) && !isSendingMessage) {
-				isSendingMessage = true;
-				const formData = new FormData(form);
-				const response = await fetch(action, {
-					method: 'POST',
-					body: formData
-				});
-				showMessage = response.status === 200;
-				onMessageSubmitted?.(showMessage ? SubmitResult.Success : SubmitResult.Error);
-				setTimeout(() => {
-					showMessage = false;
-				}, 3000);
-			}else {
-				console.warn('Form is invalid or already sending message');
-			}
-		} catch (error) {
-			console.error('Error submitting form:', error);
-		} finally {
-			isSendingMessage = false;
-		}
-		loading = false;
-	};
+	function hasErrors(field: any, errors: Map<string, string>) {
+		return errors.has(fields?.id) ? 'error' : '';
+	}
 </script>
 
+{#snippet showErrors(fields: InputField, errors: Map<string, string>)}
+	{#if errors.has(fields.id)}
+		<div>errors.get(fields.id)</div>
+	{/if}
+{/snippet}
 {#snippet renderInput(field: InputField)}
 	{#if field.isFloat}
 		<FloatingLabelInput
@@ -255,53 +233,44 @@
 	<form method="POST" {action} class={css} bind:this={form}>
 		<fieldset>
 			{#each fields as field}
-				{#if field.typeOfField === 'input'}
-					{@render renderInput(field)}
-				{:else if field.typeOfField === 'textarea'}
-					{@render renderTextarea(field)}
-				{:else if field.typeOfField === 'select'}
-					{@render renderSelect(field)}
-				{:else if field.typeOfField === 'collection'}
-					{@render renderCollection(field)}
-				{:else if field.typeOfField === 'file'}
-					{@render renderFile(field)}
-				{:else if field.typeOfField === 'phoneInput'}
-					{@render renderPhoneInput(field)}
-				{:else if field.typeOfField === 'timepicker'}
-					{@render renderTimePicker(field)}
-				{:else if field.typeOfField === 'hidden'}
-					{@render renderHidden(field)}
-				{:else if field.typeOfField === 'date'}
-					{@render renderDatePicker(field)}
-				{:else if field.typeOfField === 'markdown'}
-					{@render renderMdEditory(field)}
-				{:else if field.typeOfField === 'html'}
-					{@render renderHtmlEditory(field)}
-				{/if}
+				<div class={hasErrors(field, formErrors)}>
+					{#if field.typeOfField === 'input'}
+						{@render renderInput(field)}
+					{:else if field.typeOfField === 'textarea'}
+						{@render renderTextarea(field)}
+					{:else if field.typeOfField === 'select'}
+						{@render renderSelect(field)}
+					{:else if field.typeOfField === 'collection'}
+						{@render renderCollection(field)}
+					{:else if field.typeOfField === 'file'}
+						{@render renderFile(field)}
+					{:else if field.typeOfField === 'phoneInput'}
+						{@render renderPhoneInput(field)}
+					{:else if field.typeOfField === 'timepicker'}
+						{@render renderTimePicker(field)}
+					{:else if field.typeOfField === 'hidden'}
+						{@render renderHidden(field)}
+					{:else if field.typeOfField === 'date'}
+						{@render renderDatePicker(field)}
+					{:else if field.typeOfField === 'markdown'}
+						{@render renderMdEditory(field)}
+					{:else if field.typeOfField === 'html'}
+						{@render renderHtmlEditory(field)}
+					{/if}
+					{@render showErrors(field, formErrors)}
+				</div>
 			{/each}
 
 			<div class="buttons">
 				{#each buttons as button}
-					<!-- {#if button.type === 'submit'}
-						<Button
-							type="button"
-							class={button.class}
-							color={button.color}
-							onclick={handleSubmit}
-							{loading}
-						>
-							{button.label}
-						</Button>
-					{:else} -->
-						<Button
-							type={button.type}
-							class={button.class}
-							color={button.color}
-							onclick={button.action}
-						>
-							{button.label}
-						</Button>
-					<!-- {/if} -->
+					<Button
+						type={button.type}
+						class={button.class}
+						color={button.color}
+						onclick={button.action}
+					>
+						{button.label}
+					</Button>
 				{/each}
 			</div>
 		</fieldset>

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>, form: FormData): any;
+export declare function convertResponseToFields(fields: Array<Field>, request: Request): Promise<any>;

package/dist/components/form/form.js

@@ -124,10 +124,11 @@ export function createEditorField(id, label, type, value) {
         typeOfField: type,
     };
 }
-export function convertResponseToFields(fields, form) {
+export async function convertResponseToFields(fields, request) {
+    const formData = await request.formData();
     let result = {};
     for (const field of fields) {
-        const value = form.get(field.id);
+        const value = formData.get(field.id);
         result[field.id] = value;
     }
     return result;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "5.24.1",
+	"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,
+      },
+    ),
+  ];