pomme/frontend/src/lib/LoginForm.svelte

<script lang="ts">
	import { goto } from '$app/navigation';
	import { useForm, validators, HintGroup, Hint, required } from 'svelte-use-form';

	let promise: Promise<void>;

	const form = useForm();
	$: submit = async (event: Event) => {
		// @ts-expect-error FormData makes tsc sad
		const formData = new URLSearchParams(new FormData(event.target as HTMLFormElement));

		promise = self
			.fetch(`/api/${api_endpoint}`, {
				method: 'post',
				body: formData
			})
			.then(async (response) => {
				if (response.ok) {
					goto('/');
				} else {
					const res = await response.json();
					throw new Error(res.message);
				}
			});
	};

	export let api_endpoint: string, description: string;
</script>

<form use:form on:submit|preventDefault={submit}>
	<h1>{description}</h1>

	<a href="/">Home</a>
	<br /> <br />

	<input type="username" name="username" use:validators={[required]} />
	<HintGroup for="username">
		<Hint on="required">Username is mandatory!</Hint>
	</HintGroup>

	<input type="password" name="password" use:validators={[required]} />
	<HintGroup for="password">
		<Hint on="required">Password is mandatory!</Hint>
	</HintGroup>

	<button disabled={!$form.valid}>Login</button>
</form>

{#await promise}
	<p>Logging in...</p>
{:then}
	<p />
{:catch error}
	<p style="color: red">{error}</p>
{/await}

<style>
	:global(.touched:invalid) {
		border-color: red;
		outline-color: red;
	}
</style>