@functionalcms/svelte-components 5.24.0 → 5.24.2

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,
@@ -63,8 +61,6 @@
 
 	let form: HTMLFormElement;
 	let showMessage = $state(false);
-	let isSendingMessage = $state(false);
-	let loading = $state(false);
 
 	const isValid = (event: Event) => {
 		debugger;
@@ -78,36 +74,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 +231,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, errors)}>
+					{#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, errors)}
+				</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: any): 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.0",
+	"version": "5.24.2",
 	"license": "MIT",
 	"watch": {
 		"build": {

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

@@ -1,7 +1,9 @@
 <script lang="ts">
-  import { Button, Input, Label } from "@functionalcms/svelte-components";
+  import {
+    Button,
+    Spinner,
+  } from "@functionalcms/svelte-components";
   import * as m from "$lib/paraglide/messages.js";
-  import { goto } from "$app/navigation";
   import { deserialize } from "$app/forms";
 
   interface Props {
@@ -12,12 +14,12 @@
 
   let { data } = $props();
 
-  let password = $state("");
-  let confirmPassword = $state("");
-  let submitError = $state(false);
+
+  let isProcesing = $state(false);
+  let resultMessage = $state("");
 
   async function resetPassword() {
-    submitError = false;
+    isProcesing = true;
 
     const response = await fetch("?/setup", {
       method: "POST",
@@ -25,6 +27,13 @@
     });
 
     const result = deserialize(await response.text());
+
+    resultMessage =
+      result.type === "success"
+        ? m.auth_setup_success()
+        : m.auth_setup_failure();
+
+    isProcesing = false;
   }
 </script>
 
@@ -33,20 +42,22 @@
     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}
-        <p>{m.auth_setup_missing_code()}</p>
-      {:else}
-        <div>
-          {@html m.auth_setup_into()}
-        </div>
-        <Button onclick={resetPassword}>
-          {m.auth_setup_submit()}
-        </Button>
-
-        {#if submitError}
-          <p class="text-red-600">{m.auth_setup_error()}</p>
+    {#if !data.code}
+      <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>
+      {#if resultMessage != ""}
+        <p>{resultMessage}</p>
       {/if}
+    {/if}
   </main>
 </article>