oficina / home Public

Use shipped token classes for credential forms

Paul Campbell pushed by paul@keymail.dev 1 month ago 4013745c014d6f4a575da5a34b07e17ed98fcb18 parent 02c9272

6 files changed, +29 −19

internal/home/templates/layout.html +1 −1
internal/home/templates/passkey_confirm.html +10 −6
internal/home/templates/passkey_enrol.html +2 −2
internal/home/templates/recovery_codes.html +3 −3
internal/home/templates/signin.html +9 −5
internal/home/templates/signin_confirm.html +4 −2

CI passed — run details

diff --git a/internal/home/templates/layout.html b/internal/home/templates/layout.html

index 1de11fa..2275b90 100644

--- a/internal/home/templates/layout.html

+++ b/internal/home/templates/layout.html

@@ -8,7 +8,7 @@

</head>

<body{{block "bodyattrs" .}}{{end}}>

-<main rst-stack="lg">

+<main class="rst-page">

</main>

diff --git a/internal/home/templates/passkey_confirm.html b/internal/home/templates/passkey_confirm.html

index 6976287..90d6f40 100644

--- a/internal/home/templates/passkey_confirm.html

+++ b/internal/home/templates/passkey_confirm.html

@@ -3,18 +3,22 @@

<h1>Confirm it is you</h1>

-{{if .RecoveryFailed}}<p role="alert" rst-note="danger">That code did not work.</p>{{end}}

+{{if .RecoveryFailed}}<p role="alert" class="rst-callout" data-tone="negative"><span class="rst-callout__body">That code did not work.</span></p>{{end}}

-<button id="passkey-confirm" type="button" rst-btn="primary" data-passkey hidden>Use your passkey</button>

+<button id="passkey-confirm" type="button" class="rst-btn rst-btn--primary" data-passkey hidden>Use your passkey</button>

<h2>Or use a recovery code</h2>

<p>Recovery is exactly the moment a passkey is not working, so this form

needs no script and no device.</p>

-<form method="post" action="/passkey/signin/recovery" rst-stack="sm">

- <label for="code">Recovery code</label>

- <input id="code" name="code" type="text" autocomplete="one-time-code" required rst-input>

- <button type="submit" rst-btn="primary">Sign in</button>

+<form method="post" action="/passkey/signin/recovery" class="rst-form">

+ <div class="rst-field">

+ <label class="rst-field__label" for="code">Recovery code</label>

+ <input id="code" name="code" type="text" autocomplete="one-time-code" required class="rst-input">

+ </div>

+ <div class="rst-form-foot">

+ <button type="submit" class="rst-btn rst-btn--primary">Sign in</button>

+ </div>

</form>

{{define "scripts"}}<script type="module" src="/static/passkey.js"></script>{{end}}

diff --git a/internal/home/templates/passkey_enrol.html b/internal/home/templates/passkey_enrol.html

index b8be72d..a57d3df 100644

--- a/internal/home/templates/passkey_enrol.html

+++ b/internal/home/templates/passkey_enrol.html

@@ -4,8 +4,8 @@

<h1>Add a passkey</h1>

<p>A passkey is an optional second step. Without one, your email link is

the only thing standing between someone with your inbox and your account.</p>

-<button id="passkey-enrol" type="button" rst-btn="primary" data-passkey hidden>Add a passkey</button>

+<button id="passkey-enrol" type="button" class="rst-btn rst-btn--primary" data-passkey hidden>Add a passkey</button>

-<noscript><p rst-note>Adding a passkey needs JavaScript. Everything else here does not.</p></noscript>

+<noscript><p class="rst-callout"><span class="rst-callout__body">Adding a passkey needs JavaScript. Everything else here does not.</span></p></noscript>

{{define "scripts"}}<script type="module" src="/static/passkey.js"></script>{{end}}

diff --git a/internal/home/templates/recovery_codes.html b/internal/home/templates/recovery_codes.html

index a8c43be..90c7698 100644

--- a/internal/home/templates/recovery_codes.html

+++ b/internal/home/templates/recovery_codes.html

@@ -2,8 +2,8 @@

<h1>Recovery codes</h1>

-<p rst-note="warning"><strong>These are shown once.</strong> Keep them somewhere your

-passkey is not. Each one works a single time.</p>

+<p class="rst-callout" data-tone="warning"><span class="rst-callout__body"><strong>These are shown once.</strong> Keep them somewhere your

+passkey is not. Each one works a single time.</span></p>

<ul>{{range .Codes}}<li><code>{{.}}</code></li>{{end}}</ul>

<p>Losing your passkey and these codes together locks you out permanently.

There is no operator who can undo that, by design.</p>

@@ -11,7 +11,7 @@ There is no operator who can undo that, by design.</p>

<p>You have {{.Remaining}} unused recovery codes.</p>

<p>Generating a new set <strong>invalidates every code you have now</strong>.</p>

- <button type="submit" rst-btn="danger">Generate a new set</button>

+ <button type="submit" class="rst-btn rst-btn--danger">Generate a new set</button>

</form>

diff --git a/internal/home/templates/signin.html b/internal/home/templates/signin.html

index 3abf4a4..6a81536 100644

--- a/internal/home/templates/signin.html

+++ b/internal/home/templates/signin.html

@@ -1,10 +1,14 @@

{{define "title"}}Sign in · Oficina{{end}}

-{{if .Error}}<p role="alert" rst-note="danger">{{.Error}}</p>{{end}}

-<form method="post" action="/signin" rst-stack="sm">

- <label for="address">Email address</label>

- <input id="address" name="address" type="email" autocomplete="email" required autofocus rst-input>

- <button type="submit" rst-btn="primary">Continue</button>

+{{if .Error}}<p role="alert" class="rst-callout" data-tone="negative"><span class="rst-callout__body">{{.Error}}</span></p>{{end}}

+<form method="post" action="/signin" class="rst-form">

+ <div class="rst-field">

+ <label class="rst-field__label" for="address">Email address</label>

+ <input id="address" name="address" type="email" autocomplete="email" required autofocus class="rst-input">

+ </div>

+ <div class="rst-form-foot">

+ <button type="submit" class="rst-btn rst-btn--primary">Continue</button>

+ </div>

</form>

diff --git a/internal/home/templates/signin_confirm.html b/internal/home/templates/signin_confirm.html

index 685fba2..9446f4d 100644

--- a/internal/home/templates/signin_confirm.html

+++ b/internal/home/templates/signin_confirm.html

@@ -2,8 +2,10 @@

<h1>Finish signing in</h1>

<p>Press the button to sign in on this device.</p>

-<form method="post" action="/signin/verify" rst-stack="sm">

+<form method="post" action="/signin/verify" class="rst-form">

- <button type="submit" rst-btn="primary">Sign in</button>

+ <div class="rst-form-foot">

+ <button type="submit" class="rst-btn rst-btn--primary">Sign in</button>

+ </div>

</form>