blob: 3da15298aa39c82ebae4a0963be2e751e9e2a688 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<script lang="ts">
import Button from '$lib/components/Button.svelte';
let { data, form } = $props();
</script>
<svelte:head>
<title>Connexion - Courses</title>
</svelte:head>
<main class="login">
<div class="login-card">
<h1>Courses</h1>
<p>Entrez le mot de passe familial pour continuer.</p>
<form method="POST">
<label>
<span class="form-label">Mot de passe</span>
<input
class="form-input"
type="password"
name="password"
autocomplete="current-password"
required
/>
</label>
<input type="hidden" name="next" value={data.next} />
<Button block>Entrer</Button>
</form>
{#if form?.error}
<p class="error">{form.error}</p>
{/if}
</div>
</main>
<style>
.login {
display: grid;
min-height: 100dvh;
place-items: center;
padding: 1rem;
}
.login-card {
width: min(100%, 24rem);
padding: 1.5rem;
background: var(--surface);
border-radius: 0.75rem;
box-shadow: 0 2px 8px var(--shadow);
}
.login-card h1 {
margin-bottom: 0.25rem;
}
.login-card > p {
margin-bottom: 1.5rem;
color: var(--text-secondary);
}
.login-card label {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.login-card .form-input {
width: 100%;
}
form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.error {
margin-top: 1rem;
}
</style>
|
