From 43ae707ac4267afdf709d14867d12a1b5e443d77 Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Fri, 24 May 2024 12:56:37 +0700
Subject: [PATCH] Add MaybeProtectedForm to optionally skip turnstile

Using `<svelte:component>` for this purpose caused a warning about an
unknown `turnstileToken` property when the component was Form rather
than ProtectedForm. To avoid this warning, we create a new component
that selects between Form and ProtectedForm, and sends turnstileToken
only to ProtectedForm.
---
 .../lib/components/Users/CreateUser.svelte    |  6 +++---
 .../src/lib/forms/MaybeProtectedForm.svelte   | 19 +++++++++++++++++++
 frontend/src/lib/forms/index.ts               |  2 ++
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/lib/forms/MaybeProtectedForm.svelte

diff --git a/frontend/src/lib/components/Users/CreateUser.svelte b/frontend/src/lib/components/Users/CreateUser.svelte
index 9009bc3e0..f07b89155 100644
--- a/frontend/src/lib/components/Users/CreateUser.svelte
+++ b/frontend/src/lib/components/Users/CreateUser.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import PasswordStrengthMeter from '$lib/components/PasswordStrengthMeter.svelte';
-  import { SubmitButton, FormError, Input, Form, ProtectedForm, isEmail, lexSuperForm, passwordFormRules, DisplayLanguageSelect } from '$lib/forms';
+  import { SubmitButton, FormError, Input, MaybeProtectedForm, isEmail, lexSuperForm, passwordFormRules, DisplayLanguageSelect } from '$lib/forms';
   import t, { getLanguageCodeFromNavigator, locale } from '$lib/i18n';
   import { type RegisterResponse } from '$lib/user';
   import { getSearchParamValues } from '$lib/util/query-params';
@@ -69,7 +69,7 @@
   });
 </script>
 
-<svelte:component this={skipTurnstile ? Form : ProtectedForm} {enhance} bind:turnstileToken>
+<MaybeProtectedForm {skipTurnstile} {enhance} bind:turnstileToken>
   <Input autofocus id="name" label={$t('register.label_name')} bind:value={$form.name} error={$errors.name} />
   <div class="contents email">
     <Input
@@ -95,7 +95,7 @@
   />
   <FormError error={$message} />
   <SubmitButton loading={$submitting}>{submitButtonText}</SubmitButton>
-</svelte:component>
+</MaybeProtectedForm>
 
 <style lang="postcss">
   .email :global(.description) {
diff --git a/frontend/src/lib/forms/MaybeProtectedForm.svelte b/frontend/src/lib/forms/MaybeProtectedForm.svelte
new file mode 100644
index 000000000..26df2cddd
--- /dev/null
+++ b/frontend/src/lib/forms/MaybeProtectedForm.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Form from './Form.svelte';
+  import ProtectedForm from './ProtectedForm.svelte';
+  import type { AnySuperForm } from './types';
+
+  export let enhance: AnySuperForm['enhance'] | undefined = undefined;
+  export let turnstileToken = '';
+  export let skipTurnstile = false;
+</script>
+
+{#if skipTurnstile}
+<Form {enhance} on:submit>
+  <slot />
+</Form>
+{:else}
+<ProtectedForm {enhance} on:submit bind:turnstileToken>
+  <slot />
+</ProtectedForm>
+{/if}
diff --git a/frontend/src/lib/forms/index.ts b/frontend/src/lib/forms/index.ts
index 3b72374b5..9564bc1cc 100644
--- a/frontend/src/lib/forms/index.ts
+++ b/frontend/src/lib/forms/index.ts
@@ -7,6 +7,7 @@ import Input from './Input.svelte';
 import PlainInput from './PlainInput.svelte';
 import Checkbox from './Checkbox.svelte';
 import ProtectedForm, { type Token } from './ProtectedForm.svelte';
+import MaybeProtectedForm from './MaybeProtectedForm.svelte';
 import Select from './Select.svelte';
 import TextArea from './TextArea.svelte';
 import { lexSuperForm } from './superforms';
@@ -27,6 +28,7 @@ export {
   Input,
   PlainInput,
   ProtectedForm,
+  MaybeProtectedForm,
   Select,
   TextArea,
   lexSuperForm,