More good things

src/OAP/Oap.Theme.Svelte/index.html

@@ -9,6 +9,7 @@
 		<div id="app"></div>
 
 		<main class="container mx-auto flex flex-col max-w-screen-md p-6">
+			<input type="hidden" name="__RequestVerificationToken" value="fakeaft" />
 			<div
 				id="4j2b7wf1fmjdd1g2twvxhpng4h"
 				class="OapApplicationForm"

src/OAP/Oap.Theme.Svelte/src/OapApplicationForm.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { Client, setContextClient, queryStore } from "@urql/svelte";
-	import OapApplicationFormStep from "./components/OapApplicationFormStep.svelte";
 	import { graphql } from "./gql";
+	import OapApplicationFormStep from "./components/OapApplicationFormStep.svelte";
+	import step from "./lib/stores/step";
 
+	export let antiForgeryToken: string | null;
 	export let contentItemId: string;
 	export let client: Client;
 
@@ -30,6 +32,10 @@
 			contentItemId,
 		},
 	});
+
+	function handleSubmit(event: SubmitEvent) {
+		step.update(x => x + 1);
+	}
 </script>
 
 {#if $content.fetching}
@@ -48,13 +54,14 @@
 					{oapApplicationForm.displayText}
 				</h1>
 			{/if}
-			{#if oapApplicationForm?.list}
-				{#each oapApplicationForm.list.contentItems ?? [] as contentItem}
-					{#if contentItem?.__typename === "OapApplicationFormStep"}
-						<OapApplicationFormStep fragment={contentItem} />
-					{/if}
-				{/each}
-			{/if}
+			{#each oapApplicationForm?.list?.contentItems ?? [] as contentItem, index}
+				{#if contentItem?.__typename === "OapApplicationFormStep" && $step === index}
+					<OapApplicationFormStep
+						onSubmit={handleSubmit}
+						{antiForgeryToken}
+						fragment={contentItem} />
+				{/if}
+			{/each}
 		{/each}
 	</div>
 {/if}

src/OAP/Oap.Theme.Svelte/src/components/Form.svelte

@@ -1,4 +1,5 @@
 <script context="module" lang="ts">
+	import type { EventHandler } from "svelte/elements";
 	import { graphql } from "../gql";
 
 	export const FormFragment = graphql(/* GraphQL */ `
@@ -32,7 +33,8 @@
 	import SelectPart from "./SelectPart.svelte";
 	import TextAreaPart from "./TextAreaPart.svelte";
 
-	export let antiForgeryToken: string;
+	export let onSubmit: EventHandler<SubmitEvent, HTMLFormElement> | undefined | null;
+	export let antiForgeryToken: string | null;
 	export let fragment: FragmentType<typeof FormFragment>;
 
 	const content = useFragment(FormFragment, fragment);
@@ -42,9 +44,9 @@
 	id={content.formElement?.id}
 	action={content.form?.action}
 	method={content.form?.method}
+	on:submit|preventDefault={onSubmit}
 >
-	{antiForgeryToken}
-
+	<input type="hidden" name="__RequestVerificationToken" value={antiForgeryToken}/>
 	<div class="flex flex-col gap-2">
 		{#if content.flow}
 			{#each content.flow.widgets ?? [] as widget}

src/OAP/Oap.Theme.Svelte/src/components/OapApplicationFormStep.svelte

@@ -22,7 +22,10 @@
 
 	import RichText from "./RichText.svelte";
 	import Form from "./Form.svelte";
+	import type { EventHandler } from "svelte/elements";
 
+	export let onSubmit: EventHandler<SubmitEvent, HTMLFormElement> | undefined | null;
+	export let antiForgeryToken: string | null;
 	export let fragment: FragmentType<typeof OapApplicationFormStepFragment>;
 
 	const content = useFragment(OapApplicationFormStepFragment, fragment);
@@ -37,9 +40,9 @@
 {/if}
 
 {#if content.flow}
-	{#each content.flow.widgets as widget}
+	{#each content.flow.widgets ?? [] as widget}
 		{#if widget?.__typename === "Form"}
-			<Form antiForgeryToken="" fragment={widget} />
+			<Form {onSubmit} {antiForgeryToken} fragment={widget} />
 		{/if}
 	{/each}
 {/if}

src/OAP/Oap.Theme.Svelte/src/lib/stores/step.ts

@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+const step = writable(0);
+
+export default step;

src/OAP/Oap.Theme.Svelte/src/main.ts

@@ -7,6 +7,7 @@ const client = new Client({
 	exchanges: [cacheExchange, fetchExchange],
 });
 
+var antiForgeryToken = document.getElementsByName("__RequestVerificationToken");
 var oapApplicationForms = document.getElementsByClassName("OapApplicationForm");
 
 let oapApplicationForm: OapApplicationForm;
@@ -15,6 +16,7 @@ if (oapApplicationForms.length === 1) {
 	oapApplicationForm = new OapApplicationForm({
 		target: oapApplicationForms[0],
 		props: {
+			antiForgeryToken: antiForgeryToken[0]?.getAttribute("value") ?? null,
 			contentItemId: oapApplicationForms[0].id,
 			client,
 		},

src/OAP/Oap.Theme/Views/Content-OapApplicationForm.cshtml

@@ -1,5 +1,4 @@
-<h1 class="mb-6 border-b-2 border-solid border-black pb-1 text-center text-2xl font-bold">
-    @Model.Header.TitlePart.Title
-</h1>
+@Html.AntiForgeryToken()
 
-<div id="@Model.ContentItem.ContentItemId" class="@Model.ContentItem.ContentType"></div>
+<div id="@Model.ContentItem.ContentItemId"
+    class="@Model.ContentItem.ContentType"></div>

src/OAP/Oap.Theme/wwwroot/.vite/manifest.json

@@ -1,11 +1,11 @@
 {
   "index.html": {
-    "file": "index-DmYf-7v-.js",
+    "file": "index-CFylyzUG.js",
     "name": "index",
     "src": "index.html",
     "isEntry": true,
     "css": [
-      "index-ClWnXPkW.css"
+      "index-CRTzDW6u.css"
     ]
   }
 }

src/OAP/Oap.Theme/wwwroot/index-CRTzDW6u.css

@@ -578,6 +578,9 @@ span.field-validation-error {
   white-space: nowrap;
   border-width: 0;
 }
+.absolute {
+  position: absolute;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -760,6 +763,9 @@ span.field-validation-error {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .placeholder\:text-gray-400::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));

src/OAP/Oap.Theme/wwwroot/index.html

@@ -1,16 +1,21 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Overseas Auto Protection - Svelte</title>
-    <script type="module" crossorigin src="/index-DmYf-7v-.js"></script>
-    <link rel="stylesheet" crossorigin href="/index-ClWnXPkW.css">
-  </head>
-  <body>
-    <div id="app"></div>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Overseas Auto Protection - Svelte</title>
+		<script type="module" crossorigin src="/index-CFylyzUG.js"></script>
+		<link rel="stylesheet" crossorigin href="/index-CRTzDW6u.css">
+	</head>
+	<body>
+		<div id="app"></div>
 
-    <div id="OapApplicationForm-1" class="OapApplicationForm"></div>
+		<main class="container mx-auto flex flex-col max-w-screen-md p-6">
+			<div
+				id="4j2b7wf1fmjdd1g2twvxhpng4h"
+				class="OapApplicationForm"
+			></div>
+		</main>
 
-  </body>
+	</body>
 </html>