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.

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) {

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}

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,