51 lines
1.6 KiB
Svelte
51 lines
1.6 KiB
Svelte
<!-- src/lib/components/machines/SignIn.svelte -->
|
|
<script lang="ts">
|
|
import { useMachine } from '@xstate/svelte';
|
|
import { SignInMachine } from './signInMachine';
|
|
import { superForm } from 'sveltekit-superforms/client';
|
|
import { HelloUserSchema } from '$lib/types/HelloUserSchema';
|
|
|
|
const { state, send } = useMachine(SignInMachine);
|
|
|
|
const initialFormData = {
|
|
email: '',
|
|
name: ''
|
|
};
|
|
|
|
const { form, errors, validate, constraints } = superForm(initialFormData, {
|
|
validators: HelloUserSchema,
|
|
warnings: {
|
|
noValidationAndConstraints: false
|
|
},
|
|
validationMethod: 'oninput',
|
|
clearOnSubmit: 'errors-and-message'
|
|
});
|
|
|
|
async function handleNext(field) {
|
|
const validationResult = await validate(field);
|
|
if (validationResult.valid) {
|
|
send({ type: 'NEXT', value: form[field] });
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#if $state.matches('notSignedIn')}
|
|
<button on:click={() => send('START')}>Start Sign In</button>
|
|
{:else if $state.matches('email')}
|
|
<div>
|
|
<label for="email">Email:</label>
|
|
<input id="email" type="email" bind:value={form.email} {...constraints.email} />
|
|
{#if errors.email}<span>{$errors.email}</span>{/if}
|
|
<button on:click={() => handleNext('email')}>Next</button>
|
|
</div>
|
|
{:else if $state.matches('name')}
|
|
<div>
|
|
<label for="name">Name:</label>
|
|
<input id="name" type="text" bind:value={form.name} {...constraints.name} />
|
|
{#if errors.name}<span>{$errors.name}</span>{/if}
|
|
<button on:click={() => handleNext('name')}>Next</button>
|
|
</div>
|
|
{:else if $state.matches('signedIn')}
|
|
<!-- <Composite id="account" component="Account" /> -->account signed in
|
|
{/if}
|