pomme/frontend/src/lib/LoginForm.svelte

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

	const form = useForm();

	$: submit = async (event: Event) => {
		// @ts-ignore
		const formData = new URLSearchParams(new FormData(event.target as HTMLFormElement));

		self
			.fetch(`/api/${api_endpoint}`, {
				method: 'post',
				body: formData
			})
			.then((response) => response.json())
			.catch((err) => {
				console.error(err)
			});
	};

	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>


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