Work with us
PagesStable

Login Page

Sourcecomponents/sections/LoginSection.astro

The page

A full-bleed login page on a washed background image — magic-link first, with a password fallback. Composed from Input, Password, Button and Inline Link. Nothing here is bespoke.

Switch viewport — the page renders at each breakpoint's true size, scaled to fit. Live size shown top-right.

Login page

States

The state prop switches screens: request a magic link, sign in with a password, the "check your email" confirmation, forgot-password, and the error state.

state="magic"

state="error"

state="password"

state="password-error"

state="forgot"

state="sent"

Built from

  • Input — the email field
  • Password — the password field (on the password state)
  • Button — the full-width primary CTA
  • Inline Link — the "password", "forgot" and sign-up links

Props

PropTypeDefaultNotes
state 'magic' | 'sent' | 'password' | 'forgot' | 'error' | 'password-error' 'magic' Which screen to show.
image string '/img/hero.jpg' Full-bleed background image (always present).
action string '#' Form action / endpoint.
error string — Email error shown on state="error".
passwordError string — Password error shown on state="password-error".
sentTo string — Email echoed on state="sent".
passwordHref string '#' "Sign in with password" destination.
magicHref string '#' Magic-link / resend destination.
forgotHref string '#' "Forgot password?" destination.
signupHref string '#' Sign-up destination.

Usage

Drop it on a route and point the form and links at your endpoints.

---
import LoginSection from '../components/sections/LoginSection.astro';
---
<LoginSection
  state="magic"
  action="/api/magic-link"
  passwordHref="/login/password"
  signupHref="/signup"
/>

Rules

Do

Reuse the DS components as-is — never restyle fields or buttons here.

Keep it to the essentials: email, password, remember, submit.

Don't

Add fields that belong on sign-up (name, company) — link out to it instead.

Hard-code copy — pass it via props.