blob: a472c8922c3bc1e037a9c8c008e1869d7c6fc000 (
plain)
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
|
<script lang="ts">
let { form }: { form?: { error?: string } } = $props();
</script>
<svelte:head>
<title>Login — YAUM</title>
</svelte:head>
<div class="flex min-h-screen items-start justify-center pt-36">
<div class="w-full max-w-sm">
<div class="mb-8 text-center">
<h1 class="text-xl font-semibold tracking-tight text-white">YAUM</h1>
<p class="mt-1 text-sm text-[var(--text-muted)]">Yet Another Uptime Monitor</p>
</div>
<div class="rounded-2xl border border-[var(--border-color)] bg-[var(--bg-card)] p-6">
<form method="POST" class="space-y-4">
<div>
<label for="username" class="mb-1.5 block text-xs font-medium text-[var(--text-secondary)]">Usuário</label>
<input
id="username"
name="username"
type="text"
required
autocomplete="username"
placeholder="admin"
class="w-full rounded-xl border border-[var(--border-color)] bg-[var(--bg-secondary)] px-3.5 py-2.5 text-sm text-white outline-none transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--green)]/50 focus:ring-1 focus:ring-[var(--green)]/20"
/>
</div>
<div>
<label for="password" class="mb-1.5 block text-xs font-medium text-[var(--text-secondary)]">Senha</label>
<input
id="password"
name="password"
type="password"
required
autocomplete="current-password"
placeholder="••••••••"
class="w-full rounded-xl border border-[var(--border-color)] bg-[var(--bg-secondary)] px-3.5 py-2.5 text-sm text-white outline-none transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--green)]/50 focus:ring-1 focus:ring-[var(--green)]/20"
/>
</div>
{#if form?.error}
<p class="rounded-lg bg-[var(--red)]/5 px-3 py-2 text-xs text-[var(--red)]">{form.error}</p>
{/if}
<button
type="submit"
class="w-full rounded-xl border border-[var(--green)]/50 bg-[var(--green)]/10 px-4 py-2.5 text-sm font-medium text-[var(--green)] transition-all hover:bg-[var(--green)]/20"
>
Entrar
</button>
</form>
</div>
<p class="mt-6 text-center text-xs text-[var(--text-muted)]">
<a href="/" class="underline transition-colors hover:text-white">← Voltar ao Dashboard</a>
</p>
</div>
</div>
|
