From 4d310220dd415e16ed53126bdf4981889890f6a8 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Fri, 28 Jul 2023 12:30:27 +0200
Subject: [PATCH] Updated the Forms example

---
 .../components/{ => examples}/Flows.svelte    |   0
 src/lib/components/examples/Form.svelte       | 119 ++++++++++++++++++
 .../HelloEarth.svelte                         |   0
 src/lib/types/UserSchema.ts                   |  14 ++-
 src/routes/helloearth/+page.svelte            |   7 +-
 src/routes/validation/+page.svelte            |  60 ++-------
 6 files changed, 143 insertions(+), 57 deletions(-)
 rename src/lib/components/{ => examples}/Flows.svelte (100%)
 create mode 100644 src/lib/components/examples/Form.svelte
 rename src/lib/components/{HelloEarth => examples}/HelloEarth.svelte (100%)

diff --git a/src/lib/components/Flows.svelte b/src/lib/components/examples/Flows.svelte
similarity index 100%
rename from src/lib/components/Flows.svelte
rename to src/lib/components/examples/Flows.svelte
diff --git a/src/lib/components/examples/Form.svelte b/src/lib/components/examples/Form.svelte
new file mode 100644
index 0000000..e92815d
--- /dev/null
+++ b/src/lib/components/examples/Form.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { superForm, message } from 'sveltekit-superforms/client';
+	import { UserSchema } from '$lib/types/UserSchema';
+	import { afterUpdate } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	const initialFormData = { name: '', email: '' };
+
+	const { form, errors, validate, constraints, capture, restore } = superForm(initialFormData, {
+		validators: UserSchema,
+		warnings: {
+			noValidationAndConstraints: false
+		},
+		validationMethod: 'oninput', // Trigger validation on input events
+		// Set the clearOnSubmit option to clear both errors and message on submit
+		clearOnSubmit: 'errors-and-message'
+	});
+
+	export const snapshot = { capture, restore };
+	const successMessage = writable<string | null>(null);
+
+	async function handleSubmit() {
+		// Manually validate the form
+		const validationResult = await validate();
+
+		// Prevent submission if there are errors
+		if (!validationResult.valid) {
+			return;
+		}
+
+		// Here, we'll just log the form data
+		console.log(form);
+
+		// Set the success message after successful submission
+		successMessage.set('Form submitted successfully!');
+	}
+
+	function handleReset() {
+		// Reset the form and remove the message
+		form.set({});
+		successMessage.set(null);
+	}
+
+	// After update, scroll to the message container for better user experience
+	afterUpdate(() => {
+		const messageContainer = document.getElementById('message-container');
+		if (messageContainer) {
+			messageContainer.scrollIntoView({ behavior: 'smooth' });
+		}
+	});
+</script>
+
+<div class="flex items-center justify-center min-h-screen">
+	{#if $successMessage}
+		<!-- Display the success message instead of the form -->
+		<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
+			<!-- Icon -->
+			<!-- <div>(icon)</div> -->
+			<!-- Message -->
+			<div class="alert-message">
+				<h3 class="h3">Success</h3>
+				<p>{$successMessage}</p>
+			</div>
+			<!-- Actions (in this case, only the Reset button) -->
+			<div class="alert-actions">
+				<button
+					class="px-4 py-2 mt-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+					on:click={handleReset}
+				>
+					Reset
+				</button>
+			</div>
+		</aside>
+	{:else}
+		<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
+			<div class="mb-4">
+				{#if $errors.name}
+					<span class="block mb-2 font-semibold text-red-500">{$errors.name}</span>
+				{:else}
+					<label for="name" class="block mb-2 font-semibold text-white">Name</label>
+				{/if}
+
+				<input
+					name="name"
+					type="text"
+					class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+					bind:value={$form.name}
+					aria-invalid={$errors.name ? 'true' : undefined}
+					{...constraints.name}
+				/>
+			</div>
+
+			<div class="mb-4">
+				{#if $errors.email}
+					<span class="block mb-2 font-semibold text-red-500">{$errors.email}</span>
+				{:else}
+					<label for="email" class="block mb-2 font-semibold text-white">Email</label>
+				{/if}
+
+				<input
+					name="email"
+					type="email"
+					class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+					bind:value={$form.email}
+					aria-invalid={$errors.email ? 'true' : undefined}
+					{...constraints.email}
+				/>
+			</div>
+
+			<button
+				type="submit"
+				class="w-full px-4 py-2 mt-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+				disabled={$errors.name || $errors.email}
+			>
+				Submit
+			</button>
+		</form>
+	{/if}
+</div>
diff --git a/src/lib/components/HelloEarth/HelloEarth.svelte b/src/lib/components/examples/HelloEarth.svelte
similarity index 100%
rename from src/lib/components/HelloEarth/HelloEarth.svelte
rename to src/lib/components/examples/HelloEarth.svelte
diff --git a/src/lib/types/UserSchema.ts b/src/lib/types/UserSchema.ts
index 4233085..0cbf894 100644
--- a/src/lib/types/UserSchema.ts
+++ b/src/lib/types/UserSchema.ts
@@ -1,5 +1,17 @@
 import { z } from 'zod';
 
+// Define custom validation messages
+const validationMessages = {
+    name: {
+        minLength: 'Name must be at least 3 characters.',
+        maxLength: 'Name must contain at most 10 characters.',
+    },
+    email: {
+        isEmail: 'Invalid email address.',
+    },
+};
+
 export const UserSchema = z.object({
-    name: z.string().min(3).max(10)
+    name: z.string().min(3, validationMessages.name.minLength).max(10, validationMessages.name.maxLength),
+    email: z.string().email(validationMessages.email.isEmail),
 });
diff --git a/src/routes/helloearth/+page.svelte b/src/routes/helloearth/+page.svelte
index 20597d5..b485ab0 100644
--- a/src/routes/helloearth/+page.svelte
+++ b/src/routes/helloearth/+page.svelte
@@ -11,11 +11,12 @@
 		},
 		layout: {
 			areas: `
+				"main aside"
 				"main aside"
 				"footer footer";
 			`,
 			columns: '1fr 1fr',
-			rows: '1fr auto'
+			rows: '1fr 1fr auto'
 		},
 		children: [
 			{
@@ -36,8 +37,8 @@
 				services: ['helloEarthAlert']
 			},
 			{
-				id: 'testflows',
-				component: 'Flows',
+				id: 'form',
+				component: 'Form',
 				slot: 'aside'
 			},
 			{
diff --git a/src/routes/validation/+page.svelte b/src/routes/validation/+page.svelte
index cddb45e..09c407d 100644
--- a/src/routes/validation/+page.svelte
+++ b/src/routes/validation/+page.svelte
@@ -1,56 +1,10 @@
-<script lang="ts">
-	import { superForm } from 'sveltekit-superforms/client';
-	import { UserSchema } from '$lib/types/UserSchema';
+<script>
+	import Composite from '$lib/core/Composite.svelte';
 
-	const initialFormData = { name: '' };
-
-	const { form, errors, validate, constraints } = superForm(initialFormData, {
-		validators: UserSchema,
-		warnings: {
-			noValidationAndConstraints: false
-		},
-		validationMethod: 'oninput' // Trigger validation on input events
-	});
-
-	async function handleSubmit() {
-		// Manually validate the form
-		const validationResult = await validate();
-
-		// Prevent submission if there are errors
-		if (!validationResult.valid) {
-			return;
-		}
-
-		// Here, we'll just log the form data
-		console.log(form);
-	}
+	let composite = {
+		id: 'validationexample',
+		component: 'Form'
+	};
 </script>
 
-<div class="flex items-center justify-center min-h-screen">
-	<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
-		<div class="mb-4">
-			{#if $errors.name}
-				<span class="block mb-2 font-semibold text-red-500">{$errors.name}</span>
-			{:else}
-				<label for="name" class="block mb-2 font-semibold text-white">Name</label>
-			{/if}
-
-			<input
-				name="name"
-				type="text"
-				class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-				bind:value={$form.name}
-				aria-invalid={$errors.name ? 'true' : undefined}
-				{...constraints.name}
-			/>
-		</div>
-
-		<button
-			type="submit"
-			class="w-full px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
-			disabled={$errors.name}
-		>
-			Submit
-		</button>
-	</form>
-</div>
+<Composite {composite} />