<!-- routes/whatever/+page.svelte -->
<script lang="ts">
// this does the progressive enhancement thing
import { enhance } from "$app/forms";
import type { ActionData } from "./$types";
// this guy is what you get back from +page.server.ts
export let form: ActionData;
</script>
<form method="POST" use:enhance>
<!-- send back the value from the server, so you can repopulate it for users without js -->
<input id="email" name="email" type="email" value={form?.email ?? ''}
required/><br />
<input type="password" id="password" name="password" required /><br />
<input type="submit" value="Continue" />
</form>
<!-- your form came back from the action with a message, display it -->
{#if form?.message }
<p>{form.message}</p>
{/if}
// routes/whatever/+page.server.ts
import { fail } from "@sveltejs/kit";
import type { PageServerLoad, Actions } from "./$types";
export const actions: Actions = {
default: async ({ request, locals }) => {
const form = await request.formData();
const email = form.get("email");
const password = form.get("password");
if (typeof email !== "string" || typeof password !== "string")
return fail(400, { email, message: "Missing email or password" });
try {
// log the user in or whatever
} catch {
// don't send the password back!
return fail(400, { email, message: "Incorrect email or password" });
}
},
};
Sources