96 lines
2.1 KiB
Svelte
96 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { enhance } from '$app/forms'
|
|
import AuthCard from '$lib/components/auth/AuthCard.svelte'
|
|
import Input from '$lib/components/ui/Input.svelte'
|
|
import Button from '$lib/components/ui/Button.svelte'
|
|
import PageMeta from '$lib/components/PageMeta.svelte'
|
|
import * as m from '$lib/paraglide/messages'
|
|
|
|
interface Props {
|
|
form: { error?: string; email?: string } | null
|
|
}
|
|
|
|
let { form }: Props = $props()
|
|
|
|
let email = $state(form?.email ?? '')
|
|
let password = $state('')
|
|
let isSubmitting = $state(false)
|
|
|
|
const placeholders = ['gran@grancypher.com', 'djeeta@grancypher.com']
|
|
const randomPlaceholder = placeholders[Math.floor(Math.random() * placeholders.length)]
|
|
</script>
|
|
|
|
<PageMeta title={m.page_title_login()} description={m.page_desc_home()} />
|
|
|
|
<AuthCard title={m.auth_login_title()}>
|
|
<form
|
|
method="post"
|
|
use:enhance={() => {
|
|
isSubmitting = true
|
|
return async ({ update }) => {
|
|
isSubmitting = false
|
|
await update()
|
|
}
|
|
}}
|
|
>
|
|
<Input
|
|
type="email"
|
|
name="email"
|
|
placeholder={m.auth_login_email()}
|
|
bind:value={email}
|
|
autocomplete="email"
|
|
required
|
|
fullWidth
|
|
contained
|
|
/>
|
|
|
|
<Input
|
|
type="password"
|
|
name="password"
|
|
placeholder={m.auth_login_password()}
|
|
bind:value={password}
|
|
autocomplete="current-password"
|
|
minlength={8}
|
|
required
|
|
fullWidth
|
|
contained
|
|
/>
|
|
|
|
{#if form?.error}
|
|
<p class="error">{form.error}</p>
|
|
{/if}
|
|
|
|
<Button type="submit" variant="primary" fullWidth disabled={isSubmitting}>
|
|
{isSubmitting ? m.auth_login_submitting() : m.auth_login_submit()}
|
|
</Button>
|
|
</form>
|
|
|
|
{#snippet footer()}
|
|
<p>
|
|
{m.auth_login_noAccount()}
|
|
<a href="/auth/register">{m.auth_login_register()}</a>
|
|
</p>
|
|
{/snippet}
|
|
</AuthCard>
|
|
|
|
<style lang="scss">
|
|
@use '$src/themes/spacing' as *;
|
|
@use '$src/themes/colors' as *;
|
|
@use '$src/themes/typography' as *;
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $unit-2x;
|
|
}
|
|
|
|
.error {
|
|
color: $error;
|
|
font-size: $font-small;
|
|
text-align: center;
|
|
margin: 0;
|
|
padding: $unit $unit-2x;
|
|
background: var(--danger-bg);
|
|
border-radius: $unit;
|
|
}
|
|
</style>
|