Adopt the handoff design system: navy-slate surfaces with indigo-violet accent (#6366F1 dark / #5458E3 light), Inter as the UI font, hairline 1px borders, softer corner radii. Add propagation-scale and amateur-band CSS vars so JS hooks can pull theme-aware colors via getComputedStyle. Polish: drop table zebra striping for hover-on-base-200 rows with uppercase small-caps headers, bump .header to text-2xl, tighten nav spacing with a hairline divider, fix broken text-brand -> text-primary on the auth screens. Wire --band-* into contacts_map_hook: resolve once at mount, re-resolve on data-theme mutation so polylines recolor when the theme toggles.
64 lines
1.6 KiB
Text
64 lines
1.6 KiB
Text
<Layouts.app flash={@flash} current_scope={@current_scope}>
|
|
<div class="mx-auto max-w-sm">
|
|
<div class="text-center">
|
|
<.header>
|
|
Register for an account
|
|
<:subtitle>
|
|
Already registered?
|
|
<.link navigate={~p"/users/log-in"} class="font-semibold text-primary hover:underline">
|
|
Log in
|
|
</.link>
|
|
to your account now.
|
|
</:subtitle>
|
|
</.header>
|
|
</div>
|
|
|
|
<.form :let={f} for={@changeset} action={~p"/users/register"}>
|
|
<.input
|
|
field={f[:callsign]}
|
|
type="text"
|
|
label="Callsign"
|
|
autocomplete="off"
|
|
autocapitalize="characters"
|
|
spellcheck="false"
|
|
required
|
|
phx-mounted={JS.focus()}
|
|
/>
|
|
<.input
|
|
field={f[:name]}
|
|
type="text"
|
|
label="Name"
|
|
autocomplete="name"
|
|
required
|
|
/>
|
|
<.input
|
|
field={f[:email]}
|
|
type="email"
|
|
label="Email"
|
|
autocomplete="username"
|
|
spellcheck="false"
|
|
required
|
|
/>
|
|
<.input
|
|
field={f[:password]}
|
|
type="password"
|
|
label="Password"
|
|
autocomplete="new-password"
|
|
spellcheck="false"
|
|
required
|
|
/>
|
|
<.input
|
|
field={f[:password_confirmation]}
|
|
type="password"
|
|
label="Confirm password"
|
|
autocomplete="new-password"
|
|
spellcheck="false"
|
|
required
|
|
/>
|
|
|
|
<.button phx-disable-with="Creating account..." class="btn btn-primary w-full">
|
|
Create an account
|
|
</.button>
|
|
</.form>
|
|
</div>
|
|
</Layouts.app>
|