60 lines
1.7 KiB
Plaintext
60 lines
1.7 KiB
Plaintext
// Login page. Route: /login. Uses the centered `auth` layout.
|
|
// The form declares data-schema="login" — the framework injects the schema
|
|
// descriptor + the generic validator, which validates on submit/blur and writes
|
|
// messages into the [data-error] spans. The same schema guards POST /api/login.
|
|
page Login {
|
|
layout = "auth"
|
|
|
|
seo {
|
|
title = "Sign in"
|
|
}
|
|
|
|
view {
|
|
<form data-schema="login" method="post" action="/api/login" data-redirect="/dashboard">
|
|
<div class="auth-stack">
|
|
<h1>Sign in</h1>
|
|
|
|
<div class="wrn-alert wrn-alert--success" data-success="Signed in! The form posted JSON and was validated server-side." hidden></div>
|
|
|
|
<label class="auth-field">
|
|
<span>Email address</span>
|
|
<input type="email" name="email" autocomplete="email" placeholder="you@example.com" required />
|
|
<span class="wrn-field-error" data-error="email"></span>
|
|
</label>
|
|
|
|
<label class="auth-field">
|
|
<span>Password</span>
|
|
<input type="password" name="password" autocomplete="current-password" placeholder="Password" required />
|
|
<span class="wrn-field-error" data-error="password"></span>
|
|
</label>
|
|
|
|
<button type="submit" class="wrn-btn wrn-btn--primary wrn-btn--lg">Sign in</button>
|
|
<p><a href="/">Back home</a></p>
|
|
</div>
|
|
</form>
|
|
}
|
|
|
|
style {
|
|
form,
|
|
.auth-stack,
|
|
.auth-field {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
form,
|
|
.auth-stack {
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.auth-field input {
|
|
min-height: 2.75rem;
|
|
padding: 0.7rem 0.8rem;
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: var(--wrn-radius-md);
|
|
background: var(--wrn-color-surface);
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|