masks-server 0.7.0

data/app/views/masks/server/logins/_enrol.html.erb

@@ -0,0 +1,103 @@
+<% enrolment = login.as_json["enrolment"] %>
+<% otp = enrolment["otp"] %>
+<% issued = enrolment.dig("backupCodes", "issued") || [] %>
+<% remaining = enrolment.dig("backupCodes", "remaining").to_i %>
+<% signing_up = login.signing_up %>
+<% offers = enrolment["offers"] %>
+
+<div class="flow<%= " setup" if signing_up %>">
+  <% if signing_up %>
+    <%= render "masks/server/logins/signup_head", login: login, at: 2, mark: login.actor&.identifier.to_s %>
+
+    <p class="aside"><%= enrolment["required"] ? t(".lede") : t(".lede_optional") %></p>
+  <% else %>
+    <%= render "masks/server/logins/head", title: t(".title"),
+          lede: enrolment["required"] ? t(".lede") : t(".lede_optional") %>
+
+    <%= render "masks/server/logins/identified", login: login %>
+  <% end %>
+
+  <div class="slab">
+    <% if offers["otp"] %>
+    <div class="ledger-row ledger-step<%= " ledger-step-done" if otp["enabled"] %>">
+      <span class="ledger-label"><%= t(".otp") %></span>
+
+      <% if otp["enabled"] %>
+        <span class="ledger-value"><%= t(".otp_on") %></span>
+      <% else %>
+        <div class="enrol">
+          <a class="enrol-qr" href="<%= otp["uri"] %>" aria-label="<%= t(".open") %>"><%= otp["qr"].html_safe %></a>
+          <div class="enrol-key">
+            <span class="field-hint"><%= t(".scan_hint") %></span>
+            <span class="aside-mono enrol-secret"><%= otp["secret"] %></span>
+          </div>
+        </div>
+
+        <%= render "masks/server/logins/enrol_code_form", login: login, event: "enrol:otp", id: "enrol-otp" %>
+      <% end %>
+    </div>
+    <% end %>
+
+    <% (enrolment["codes"] || {}).each do |factor, row| %>
+    <div class="ledger-row ledger-step<%= " ledger-step-done" if row["enabled"] %>">
+      <span class="ledger-label"><%= t(".codes_#{factor}") %></span>
+
+      <% if row["enabled"] %>
+        <span class="ledger-value"><%= t(".otp_on") %></span>
+      <% elsif row["sent"] %>
+        <span class="field-hint"><%= t(".sent_to", to: row["to"]) %></span>
+
+        <%= render "masks/server/logins/enrol_code_form", login: login, event: "enrol:code", id: "enrol-#{factor}-code" %>
+      <% else %>
+        <span class="field-hint"><%= t(".codes_#{factor}_hint", to: row["to"]) %></span>
+
+        <%= form_with url: login_path, method: :post, id: "enrol-send-#{factor}-code", class: "flow-tight" do |form| %>
+          <%= hidden_field_tag :rid, login.rid %>
+          <%= form.hidden_field :event, value: "enrol:code-send" %>
+          <%= form.hidden_field :factor, value: factor %>
+          <button type="submit" class="action action-quiet"><%= t(".send_code") %></button>
+        <% end %>
+      <% end %>
+    </div>
+    <% end %>
+
+    <% if offers["backupCodes"] %>
+    <div class="ledger-row ledger-step<%= " ledger-step-done" if issued.any? || remaining.positive? %>">
+      <span class="ledger-label"><%= t(".backup_codes") %></span>
+
+      <% if issued.any? %>
+        <ol class="codes">
+          <% issued.each do |held| %>
+            <li class="aside-mono"><%= held %></li>
+          <% end %>
+        </ol>
+        <span class="field-hint"><%= t(".backup_codes_hint") %></span>
+        <% saved = [ t(".backup_codes_file", account: login.actor&.identifier.to_s, origin: Masks::Server::Current.origin), t(".backup_codes_hint"), "", *issued, "" ].join("\n") %>
+        <div class="codes-actions">
+          <a class="textlink" href="data:text/plain;charset=utf-8,<%= ERB::Util.url_encode(saved) %>" download="backup-codes-<%= request.host %>.txt"><%= t(".download") %></a>
+        </div>
+      <% elsif remaining.positive? %>
+        <span class="field-hint"><%= t(".backup_codes_left", count: remaining) %></span>
+      <% else %>
+        <span class="field-hint"><%= t(".backup_codes_waiting") %></span>
+      <% end %>
+    </div>
+    <% end %>
+  </div>
+
+  <%= form_with url: login_path, method: :post, id: "enrol-done", class: "flow" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+    <%= form.hidden_field :event, value: "enrol:done" %>
+
+    <% if issued.any? %>
+      <label class="check">
+        <%= check_box_tag :kept, "1", false, required: true %>
+        <span><%= t(".kept") %></span>
+      </label>
+    <% end %>
+
+    <button type="submit" class="action">
+      <%= otp["enabled"] || enrolment.dig("passkeys", "count").to_i.positive? || enrolment["required"] ? t(".done") : t(".skip") %>
+    </button>
+  <% end %>
+</div>

data/app/views/masks/server/logins/_enrol_code_form.html.erb

@@ -0,0 +1,9 @@
+<%= form_with url: login_path, method: :post, id: id, class: "flow-tight" do |form| %>
+  <%= hidden_field_tag :rid, login.rid %>
+  <%= form.hidden_field :event, value: event %>
+  <%= form.text_field :code, inputmode: "numeric", pattern: "[0-9 ]*",
+        autocomplete: "one-time-code", maxlength: 7, spellcheck: "false",
+        placeholder: t("logins.shared.code"), aria: { label: t("logins.shared.code") },
+        class: "control control-code" %>
+  <button type="submit" class="action action-quiet"><%= t("logins.enrol.turn_on") %></button>
+<% end %>

data/app/views/masks/server/logins/_first_factor.html.erb

@@ -0,0 +1,41 @@
+<% auth = login.as_json %>
+<% password = auth.dig("password", "offered") %>
+<% emailing = auth.key?("emailCode") %>
+
+<%= render "masks/server/logins/head", title: password || !emailing ? t(".title") : t(".title_code") %>
+
+<%= render "masks/server/logins/identified", login: login %>
+
+<% if password %>
+  <%= form_with url: login_path, method: :post, id: "first-factor", class: "flow" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+    <%= form.hidden_field :event, value: "password" %>
+
+    <div class="field">
+      <div class="field-line">
+        <%= form.label :password, t("logins.shared.password"), class: "field-label" %>
+
+        <button type="submit" form="forgot-password" class="textlink"><%= t(".forgot") %></button>
+      </div>
+
+      <%= form.password_field :password, autocomplete: "current-password", class: "control" %>
+    </div>
+
+    <button type="submit" class="action"><%= t("logins.shared.continue") %></button>
+  <% end %>
+
+  <%= form_with url: login_path, method: :post, id: "forgot-password" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+    <%= form.hidden_field :event, value: "forgot-password" %>
+  <% end %>
+<% end %>
+
+<% if emailing %>
+  <%= form_with url: login_path, method: :post, id: "email-code", class: "flow" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+    <%= form.hidden_field :event, value: "email-code:send" %>
+    <button type="submit" class="action<%= " action-quiet" if password %>"><%= t(password ? ".email_me" : ".email_only") %></button>
+  <% end %>
+<% end %>
+
+<%= render "masks/server/logins/providers", login: login %>

data/app/views/masks/server/logins/_head.html.erb

@@ -0,0 +1,15 @@
+<div class="prompt-head">
+  <span class="pulse<%= " pulse-#{local_assigns[:tone]}" if local_assigns[:tone].present? %>" aria-hidden="true"></span>
+
+  <% if local_assigns[:cap].present? %>
+    <span class="record-cap"><%= cap %></span>
+  <% end %>
+
+  <h1 class="prompt-title">
+    <%= title %><% if local_assigns[:name].present? %> <em><%= name %></em><% end %>
+  </h1>
+
+  <% if local_assigns[:lede].present? %>
+    <p class="prompt-lede"><%= lede %></p>
+  <% end %>
+</div>

data/app/views/masks/server/logins/_header.html.erb

@@ -0,0 +1,3 @@
+<%= render "masks/server/logins/head", title: (login.client&.name ?
+      t("logins.#{key}.heading_to", client: login.client.name) :
+      t("logins.#{key}.heading")) %>

data/app/views/masks/server/logins/_hint.html.erb

@@ -0,0 +1,6 @@
+<% message = login.message_for(field) %>
+<% if message %>
+  <span class="field-hint field-hint-bad" role="alert"><%= message["text"] %></span>
+<% elsif local_assigns[:hint].present? %>
+  <span class="field-hint"><%= hint %></span>
+<% end %>

data/app/views/masks/server/logins/_identified.html.erb

@@ -0,0 +1,6 @@
+<div class="whom">
+  <span class="whom-name"><%= login.identifier %></span>
+
+  <%= button_to t("logins.shared.not_you"), login_path, method: :delete, params: { rid: login.rid },
+        form_class: "contents", class: "textlink" %>
+</div>

data/app/views/masks/server/logins/_identify.html.erb

@@ -0,0 +1,24 @@
+<%= render "masks/server/logins/header", key: "identify", login: login %>
+
+<% identifies = login.as_json["identifies"] != false %>
+
+<% if identifies %>
+  <%= form_with url: login_path, method: :post, id: "identify", class: "flow" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+    <%= form.hidden_field :event, value: "identify" %>
+
+    <label class="field">
+      <span class="field-label"><%= t(".identifier") %></span>
+      <%= form.text_field :identifier, value: login.identifier,
+            autocomplete: "username", autocapitalize: "none", autocorrect: "off",
+            spellcheck: "false", class: "control" %>
+      <% if login.as_json["signupOpen"] %>
+        <span class="field-hint"><%= t(".signup_hint") %></span>
+      <% end %>
+    </label>
+
+    <button type="submit" class="action"><%= t("logins.shared.continue") %></button>
+  <% end %>
+<% end %>
+
+<%= render "masks/server/logins/providers", login: login, bare: !identifies %>

data/app/views/masks/server/logins/_prove_email.html.erb

@@ -0,0 +1,12 @@
+<% inbox = login.as_json["inbox"] %>
+
+<%= render "masks/server/logins/head", title: t(".title"), lede: (t(".lede", email: inbox["email"]) if inbox["mails"]) %>
+
+<%= render "masks/server/logins/identified", login: login %>
+
+<% if inbox["mails"] %>
+  <%= render "masks/server/logins/code_form", login: login, event: "inbox:verify" %>
+  <%= render "masks/server/logins/resend", login: login, event: "inbox:resend" %>
+<% else %>
+  <p class="note note-warn" role="alert"><%= t(".no_mailer") %></p>
+<% end %>

data/app/views/masks/server/logins/_providers.html.erb

@@ -0,0 +1,21 @@
+<% offered = login.as_json["providers"] || [] %>
+
+<% if offered.any? %>
+  <div class="providers">
+    <% unless local_assigns[:bare] %>
+      <span class="providers-rule"><%= t("logins.shared.or") %></span>
+    <% end %>
+
+    <% offered.each do |provider| %>
+      <%= form_with url: login_path, method: :post, class: "contents" do |form| %>
+        <%= hidden_field_tag :rid, login.rid %>
+        <%= form.hidden_field :event, value: "provider" %>
+        <%= form.hidden_field :provider, value: provider["key"] %>
+
+        <button type="submit" class="action action-quiet">
+          <%= t("logins.shared.continue_with", provider: provider["name"]) %>
+        </button>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/app/views/masks/server/logins/_resend.html.erb

@@ -0,0 +1,5 @@
+<%= form_with url: login_path, method: :post, class: "flow" do |form| %>
+  <%= hidden_field_tag :rid, login.rid %>
+  <%= form.hidden_field :event, value: local_assigns.fetch(:event, "confirm:resend") %>
+  <button type="submit" class="action action-plain"><%= local_assigns.fetch(:label) { t("logins.signing_up.send_again") } %></button>
+<% end %>

data/app/views/masks/server/logins/_reset_password.html.erb

@@ -0,0 +1,23 @@
+<% reset = login.state("password-reset").reset %>
+
+<%= render "masks/server/logins/head", title: t(".title") %>
+
+<%= form_with url: login_path, method: :post, id: "reset-password", class: "flow" do |form| %>
+  <%= hidden_field_tag :rid, login.rid %>
+  <%= form.hidden_field :event, value: "reset-password" %>
+
+  <label class="field">
+    <span class="field-label"><%= t("logins.shared.account") %></span>
+    <input type="text" value="<%= reset.actor.identifier %>" readonly
+           autocomplete="username" class="control" />
+  </label>
+
+  <label class="field">
+    <span class="field-label"><%= t(".password") %></span>
+    <%= form.password_field :password, autocomplete: "new-password", class: "control" %>
+    <%= render "masks/server/logins/hint", login: login, field: "password",
+                              hint: t(".hint", minimum: login.policy.password_minimum) %>
+  </label>
+
+  <button type="submit" class="action"><%= t("logins.shared.continue") %></button>
+<% end %>

data/app/views/masks/server/logins/_second_factor.html.erb

@@ -0,0 +1,102 @@
+<% otp = login.actor&.otp? %>
+<% backup_codes = login.actor&.backup_codes? %>
+<% json = login.as_json %>
+<% usable = json.fetch("codeFactors", {}) %>
+<% sent = json["codeSent"] %>
+<% trusted = json.dig("secondFactors", "trustedDevice") %>
+<% approval = json["approval"] %>
+<% approving = approval&.dig("state") == "waiting" %>
+
+<% if otp || backup_codes || usable.any? || trusted %>
+  <%= render "masks/server/logins/head", title: t(otp || sent ? ".title" : ".title_passkey"),
+                                         lede: sent && t(".sent_to", to: sent["to"]) %>
+<% else %>
+  <% why = if json["codesWithheld"].present? then ".stuck_inbox"
+           elsif login.actor&.verified_passkeys? then ".stuck_no_script"
+           else ".stuck_nothing" end %>
+  <noscript>
+    <%= render "masks/server/logins/head", tone: "bad", title: t("logins.shared.halted"), lede: t(why) %>
+  </noscript>
+<% end %>
+
+<%= render "masks/server/logins/identified", login: login %>
+
+<% if otp || sent %>
+  <%= form_with url: login_path, method: :post, id: "second-factor", class: "flow" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+    <%= form.hidden_field :event, value: sent ? "code:verify" : "otp" %>
+
+    <label class="field">
+      <span class="field-label"><%= t(".code") %></span>
+      <%= form.text_field :code, inputmode: "numeric", pattern: "[0-9]*",
+            autocomplete: "one-time-code", maxlength: 6, spellcheck: "false",
+            class: "control control-code" %>
+    </label>
+
+    <% if login.device %>
+      <label class="check">
+        <%= form.check_box :remember %>
+        <span><%= t(".trust", duration: distance_of_time_in_words(Masks::Server::DeviceFactor::LIFETIME)) %></span>
+      </label>
+    <% end %>
+
+    <button type="submit" class="action"><%= t("logins.shared.continue") %></button>
+  <% end %>
+<% end %>
+
+<% if approving %>
+  <div class="slab flow-tight">
+    <span class="aside-mono approval-code"><%= approval["code"] %></span>
+    <span class="field-hint"><%= t(".approval_code") %></span>
+  </div>
+
+  <%= form_with url: login_path, method: :post, id: "approval-check", class: "flow" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+    <%= form.hidden_field :event, value: "approval:check" %>
+    <% if login.device %>
+      <label class="check">
+        <%= form.check_box :remember %>
+        <span><%= t(".trust", duration: distance_of_time_in_words(Masks::Server::DeviceFactor::LIFETIME)) %></span>
+      </label>
+    <% end %>
+    <button type="submit" class="action"><%= t(".approval_checked") %></button>
+  <% end %>
+<% elsif trusted %>
+  <%= form_with url: login_path, method: :post, id: "approval-request", class: "flow" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+    <%= form.hidden_field :event, value: "approval:request" %>
+    <button type="submit" class="action action-plain">
+      <%= approval ? t(".approval_again") : t(".use_trusted_device") %>
+    </button>
+  <% end %>
+<% end %>
+
+<% usable.each do |factor, to| %>
+  <% next if sent && sent["factor"] == factor && !sent["resendable"] %>
+  <%= form_with url: login_path, method: :post, id: "send-#{factor}-code", class: "flow" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+    <%= form.hidden_field :event, value: "code:send" %>
+    <%= form.hidden_field :factor, value: factor %>
+    <button type="submit" class="action action-plain">
+      <%= sent && sent["factor"] == factor ? t(".send_again") : t(".send_#{factor}", to: to) %>
+    </button>
+  <% end %>
+<% end %>
+
+<% if backup_codes %>
+  <%= form_with url: login_path, method: :post, id: "use-backup-code", class: "flow" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+    <%= form.hidden_field :event, value: "use-backup-code" %>
+    <button type="submit" class="action action-plain"><%= t(".use_backup_code") %></button>
+  <% end %>
+<% end %>
+
+<% if json.dig("recovery", "requested") %>
+  <p class="aside" role="status"><%= t(".recovery_requested") %></p>
+<% else %>
+  <%= form_with url: login_path, method: :post, id: "recovery-request", class: "flow" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+    <%= form.hidden_field :event, value: "recovery:request" %>
+    <button type="submit" class="action action-plain"><%= t(".recovery_request") %></button>
+  <% end %>
+<% end %>

data/app/views/masks/server/logins/_setup_configure.html.erb

@@ -0,0 +1,32 @@
+<% configure = login.state("configure").as_json["configure"] %>
+
+<div class="setup flow">
+  <%= render "masks/server/logins/signup_head", login: login, at: 3, mark: login.actor&.identifier.to_s %>
+
+  <%= form_with url: login_path, method: :post, id: "setup-configure", class: "flow" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+
+    <div class="slab">
+      <label class="ledger-row ledger-step<%= " ledger-step-done" if configure["called"].present? %>">
+        <span class="ledger-label"><%= t(".called") %></span>
+        <%= form.text_field :called, value: configure["called"], class: "control" %>
+        <span class="field-hint"><%= t(".called_hint") %></span>
+      </label>
+
+      <div class="ledger-row">
+        <span class="ledger-label"><%= t("logins.signing_up.origin") %></span>
+        <span class="ledger-value aside-mono"><%= Masks::Server::Current.origin %></span>
+      </div>
+    </div>
+
+    <button type="submit" name="event" value="setup-configure" class="action">
+      <%= t(".submit") %>
+    </button>
+  <% end %>
+
+  <p class="aside">
+    <%= t("logins.signing_up.once") %>
+    <%= link_to t("logins.signing_up.docs"), Rails.configuration.masks.docs_url,
+          class: "textlink", rel: "noopener", target: "_blank" %>
+  </p>
+</div>

data/app/views/masks/server/logins/_signup.html.erb

@@ -0,0 +1,85 @@
+<% signup = login.state("signup").as_json["signup"] %>
+<% asks = signup["asks"] %>
+<% value = ->(field) { login.updates[field].presence || signup[field].to_s } %>
+<% done = ->(field) { " ledger-step-done" if value.(field).present? } %>
+
+<div class="setup flow">
+  <%= render "masks/server/logins/signup_head", login: login, at: 1,
+                                   mark: value.("nickname").presence || value.("email") %>
+
+  <%= form_with url: login_path, method: :post, id: "signup", class: "flow" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+
+    <div class="slab">
+      <% if signup["token"] %>
+        <label class="ledger-row ledger-step">
+          <span class="ledger-label"><%= t("logins.signing_up.token") %></span>
+          <%= form.password_field :token, autocomplete: "off", autofocus: true, class: "control" %>
+          <%= render "masks/server/logins/hint", login: login, field: "token", hint: t("logins.signing_up.token_hint") %>
+        </label>
+      <% end %>
+
+      <label class="ledger-row ledger-step<%= done.("name") %>">
+        <span class="ledger-label"><%= t("logins.shared.name") %></span>
+        <%= form.text_field :name, value: value.("name"), autocomplete: "name", class: "control" %>
+      </label>
+
+      <% if asks["nickname"] != "off" %>
+        <label class="ledger-row ledger-step<%= done.("nickname") %>">
+          <span class="ledger-label"><%= t("logins.shared.nickname") %></span>
+          <%= form.text_field :nickname, value: value.("nickname"),
+                autocomplete: "username", autocapitalize: "none", autocorrect: "off",
+                spellcheck: "false", class: "control" %>
+          <%= render "masks/server/logins/hint", login: login, field: "nickname" %>
+        </label>
+      <% end %>
+
+      <% if asks["email"] != "off" %>
+        <label class="ledger-row ledger-step<%= done.("email") %>">
+          <span class="ledger-label"><%= t("logins.shared.email") %></span>
+          <%= form.email_field :email, value: value.("email"), autocomplete: "email", class: "control",
+                readonly: signup["fixed"].include?("email") %>
+          <%= render "masks/server/logins/hint", login: login, field: "email" %>
+        </label>
+      <% end %>
+
+      <% if asks["phone"] != "off" %>
+        <label class="ledger-row ledger-step<%= done.("phone") %>">
+          <span class="ledger-label"><%= t("logins.shared.phone") %></span>
+          <%= form.telephone_field :phone, value: value.("phone"), autocomplete: "tel",
+                placeholder: "+15551234567", class: "control" %>
+          <%= render "masks/server/logins/hint", login: login, field: "phone" %>
+        </label>
+      <% end %>
+
+      <% if login.signing_up["firstRun"] %>
+        <div class="ledger-row">
+          <span class="ledger-label"><%= t("logins.signing_up.origin") %></span>
+          <span class="ledger-value aside-mono"><%= Masks::Server::Current.origin %></span>
+        </div>
+      <% end %>
+    </div>
+
+    <% if signup["work"] %>
+      <p class="note note-warn" role="alert"><%= t("logins.signing_up.needs_script") %></p>
+    <% else %>
+      <button type="submit" name="event" value="signup" class="action">
+        <%= t("logins.shared.continue") %>
+      </button>
+    <% end %>
+  <% end %>
+
+  <% if login.signing_up["firstRun"] %>
+    <p class="aside">
+      <%= t("logins.signing_up.once") %>
+      <%= link_to t("logins.signing_up.docs"), Rails.configuration.masks.docs_url,
+            class: "textlink", rel: "noopener", target: "_blank" %>
+    </p>
+  <% else %>
+    <%= form_with url: login_path, method: :delete, class: "aside" do %>
+      <%= hidden_field_tag :rid, login.rid %>
+      <%= t("logins.signing_up.have_account") %>
+      <button type="submit" class="textlink"><%= t("logins.signing_up.sign_in_instead") %></button>
+    <% end %>
+  <% end %>
+</div>

data/app/views/masks/server/logins/_signup_credentials.html.erb

@@ -0,0 +1,54 @@
+<% signup = login.state("signup").as_json["signup"] %>
+<% rows = %w[name nickname email phone].filter_map { |field| [ field, signup[field] ] if signup[field].present? } %>
+
+<div class="setup flow">
+  <%= render "masks/server/logins/signup_head", login: login, at: 2,
+                                   mark: signup["nickname"].presence || signup["email"] %>
+
+  <%= form_with url: login_path, method: :post, id: "signup-credentials", class: "flow" do |form| %>
+    <%= hidden_field_tag :rid, login.rid %>
+
+    <div class="slab">
+      <% rows.each do |field, value| %>
+        <div class="ledger-row ledger-row-aside">
+          <span class="ledger-label"><%= t("logins.shared.#{field}") %></span>
+          <span class="ledger-value"><%= value %></span>
+          <button type="submit" name="event" value="signup-edit" class="textlink ledger-aside">
+            <%= t("logins.signing_up.edit") %>
+          </button>
+        </div>
+      <% end %>
+
+      <% if signup.dig("credentials", "password") %>
+        <label class="ledger-row ledger-step">
+          <span class="ledger-label"><%= t("logins.shared.password") %></span>
+          <%= form.password_field :password, autocomplete: "new-password", class: "control" %>
+          <%= render "masks/server/logins/hint", login: login, field: "password",
+                                    hint: t("logins.signing_up.password_hint", minimum: signup["minimum"]) %>
+        </label>
+
+        <label class="ledger-row ledger-step">
+          <span class="ledger-label"><%= t("logins.signing_up.confirm") %></span>
+          <%= form.password_field :password_confirmation, autocomplete: "new-password", class: "control" %>
+          <%= render "masks/server/logins/hint", login: login, field: "password_confirmation" %>
+        </label>
+      <% end %>
+    </div>
+
+    <% if signup.dig("credentials", "password") %>
+      <button type="submit" name="event" value="signup" class="action">
+        <%= login.signing_up["firstRun"] ? t("logins.signing_up.submit_first_run") : t("logins.signing_up.submit_signup") %>
+      </button>
+    <% else %>
+      <p class="note note-warn" role="alert"><%= t("logins.signup_credentials.no_passkeys") %></p>
+    <% end %>
+  <% end %>
+
+  <% if login.signing_up["firstRun"] %>
+    <p class="aside">
+      <%= t("logins.signing_up.once") %>
+      <%= link_to t("logins.signing_up.docs"), Rails.configuration.masks.docs_url,
+            class: "textlink", rel: "noopener", target: "_blank" %>
+    </p>
+  <% end %>
+</div>

data/app/views/masks/server/logins/_signup_head.html.erb

@@ -0,0 +1,20 @@
+<% tenant = Masks::Server::Current.tenant&.name.to_s %>
+<% signing_up = login.signing_up %>
+
+<div class="auth-pair">
+  <span class="auth-mark auth-mark-client<%= " auth-mark-pending" if mark.blank? %>" aria-hidden="true"><%= mark.to_s.first&.upcase %></span>
+  <span class="auth-wire"></span>
+  <% if signing_up["firstRun"] %>
+    <img src="/masks-public/icon.svg" alt="" class="auth-mark auth-mark-rose">
+  <% else %>
+    <%= tenant_mark(Masks::Server::Current.tenant) %>
+  <% end %>
+</div>
+
+<% if signing_up["firstRun"] %>
+  <%= render "masks/server/logins/head", cap: t("logins.signing_up.setup_cap"), title: t("logins.signing_up.setup_title"), name: tenant %>
+<% else %>
+  <%= render "masks/server/logins/head", title: t("logins.signing_up.signup_title"), name: tenant %>
+<% end %>
+
+<%= render "masks/server/logins/steps", steps: signing_up["steps"], at: local_assigns[:at] || signing_up["steps"].length %>

data/app/views/masks/server/logins/_steps.html.erb

@@ -0,0 +1,7 @@
+<nav class="tabset" aria-label="<%= t("logins.signing_up.tabs") %>">
+  <% steps.each_with_index do |step, index| %>
+    <% place = index + 1 %>
+    <span class="tabset-tab<%= " tabset-done" if place < at %><%= " tabset-now" if place == at %>"
+          <%= tag.attributes(aria: { current: place == at ? "step" : nil }) %>><%= t("logins.signing_up.tab_#{step}") %></span>
+  <% end %>
+</nav>

data/app/views/masks/server/logins/_warnings.html.erb

@@ -0,0 +1,3 @@
+<% login.messages.reject { |message| message["field"] }.each do |message| %>
+  <div class="<%= message["tone"] %>" role="alert"><%= message["text"] %></div>
+<% end %>

data/app/views/masks/server/logins/show.html.erb

@@ -0,0 +1,14 @@
+<% content_for :title, Masks::Server::Current.tenant&.name ?
+     t("logins.page.title_to", tenant: Masks::Server::Current.tenant.name) : t("logins.page.title") %>
+
+<% content_for :surface, "grant" if @login.surface == "grant" %>
+
+<% content_for :scripts do %>
+  <%= vite_client_tag %>
+  <%= vite_javascript_tag "login" %>
+<% end %>
+
+<div id="login" class="flow" data-auth="<%= @login.as_json.to_json %>">
+  <%= render "masks/server/logins/warnings", login: @login %>
+  <%= render "masks/server/logins/#{@login.prompt.tr("-", "_")}", login: @login %>
+</div>

data/app/views/masks/server/manage/index.html.erb

@@ -0,0 +1 @@
+<div id="manage" data-boot="<%= @boot.to_json %>"></div>

data/app/views/masks/server/refusals/show.html.erb

@@ -0,0 +1,16 @@
+<% content_for :title, t(".#{@refusal}.page_title") %>
+<% content_for :surface, "terminus" %>
+
+<div id="refused" class="flow" data-refusal="<%= @refusal %>">
+  <span class="state state-bad"><%= t(".#{@refusal}.state") %></span>
+
+  <h1 class="prompt-title"><%= t(".#{@refusal}.heading") %></h1>
+
+  <p class="prompt-lede"><%= t(".#{@refusal}.lede", tenant: current_tenant&.name) %></p>
+
+  <% if @device_label %>
+    <p class="said"><%= t(".browser", label: @device_label) %></p>
+  <% end %>
+
+  <p class="prompt-lede"><%= t(".#{@refusal}.next", tenant: current_tenant&.name) %></p>
+</div>