67 lines
2.0 KiB
Svelte
67 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import { page } from '$app/state';
|
|
import { api, ApiError } from '$lib/api';
|
|
import { auth } from '$lib/auth.svelte';
|
|
|
|
let email = $state('');
|
|
let password = $state('');
|
|
let error = $state('');
|
|
let busy = $state(false);
|
|
|
|
// Only follow same-origin internal paths, never an absolute/external URL.
|
|
const next = $derived.by(() => {
|
|
const n = page.url.searchParams.get('next');
|
|
return n && n.startsWith('/') && !n.startsWith('//') ? n : '/';
|
|
});
|
|
const registerHref = $derived(
|
|
next === '/' ? '/register' : `/register?next=${encodeURIComponent(next)}`
|
|
);
|
|
|
|
async function submit(e: SubmitEvent) {
|
|
e.preventDefault();
|
|
error = '';
|
|
busy = true;
|
|
try {
|
|
await api.post('/auth/login', { email, password });
|
|
await auth.refresh();
|
|
goto(next);
|
|
} catch (err) {
|
|
error = err instanceof ApiError ? err.message : 'something broke';
|
|
} finally {
|
|
busy = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:head><title>log in · consume·rs</title></svelte:head>
|
|
|
|
<div class="mx-auto max-w-md">
|
|
<div class="panel p-8">
|
|
<p class="label">welcome back</p>
|
|
<h1 class="mb-6 font-display text-3xl font-bold">WELCOME BACK</h1>
|
|
|
|
<form class="space-y-4" onsubmit={submit}>
|
|
<div>
|
|
<label class="label" for="em">email</label>
|
|
<input id="em" class="field mt-1" type="email" bind:value={email} required autocomplete="email" />
|
|
</div>
|
|
<div>
|
|
<label class="label" for="pw">password</label>
|
|
<input id="pw" class="field mt-1" type="password" bind:value={password} required autocomplete="current-password" />
|
|
</div>
|
|
|
|
{#if error}
|
|
<p class="border-2 border-rose bg-rose/10 px-3 py-2 text-sm text-rose">{error}</p>
|
|
{/if}
|
|
|
|
<button class="btn w-full" disabled={busy}>{busy ? 'entering…' : 'log in'}</button>
|
|
</form>
|
|
|
|
<div class="mt-5 flex justify-between text-sm text-mute">
|
|
<a href={registerHref}>need an account?</a>
|
|
<a href="/forgot">forgot password?</a>
|
|
</div>
|
|
</div>
|
|
</div>
|