katalyst-koi 5.3.0 → 5.4.0

data/app/controllers/concerns/koi/controller/has_webauthn.rb

@@ -6,7 +6,7 @@ module Koi
       extend ActiveSupport::Concern
 
       included do
-        helper_method :webauthn_auth_options
+        helper Helper
       end
 
       def webauthn_relying_party
@@ -17,20 +17,41 @@ module Koi
           )
       end
 
-      def webauthn_auth_options
-        options = webauthn_relying_party.options_for_authentication
+      module Helper
+        def webauthn_authentication_options_value
+          options = controller.webauthn_relying_party.options_for_authentication
 
-        session[:authentication_challenge] = options.challenge
+          session[:authentication_challenge] = options.challenge
 
-        options
+          options
+        end
+
+        def webauthn_registration_options_value
+          user = current_admin_user.tap do |u|
+            u.update!(webauthn_id: WebAuthn.generate_user_id) unless u.webauthn_id
+          end
+
+          options = controller.webauthn_relying_party.options_for_registration(
+            user:    {
+              id:           user.webauthn_id,
+              name:         user.email,
+              display_name: user.name,
+            },
+            exclude: user.credentials.pluck(:external_id),
+          )
+
+          session[:registration_challenge] = options.challenge
+
+          options
+        end
       end
 
-      def webauthn_authenticate!
-        return if session_params[:response].blank?
+      def webauthn_authenticate!(response)
+        return if response.blank?
 
         webauthn_credential, stored_credential = webauthn_relying_party.verify_authentication(
-          JSON.parse(session_params[:response]),
-          session[:authentication_challenge],
+          JSON.parse(response),
+          session.delete(:authentication_challenge),
         ) do |credential|
           Admin::Credential.find_by!(external_id: credential.id)
         end
@@ -44,6 +65,29 @@ module Koi
       rescue ActiveRecord::RecordNotFound, WebAuthn::VerificationError
         false
       end
+
+      def webauthn_register!(response)
+        return if response.blank?
+
+        webauthn_credential = webauthn_relying_party.verify_registration(
+          JSON.parse(response),
+          session.delete(:registration_challenge),
+        )
+
+        current_admin_user
+          .credentials
+          .create_with(nickname:   webauthn_nickname,
+                       public_key: webauthn_credential.public_key,
+                       sign_count: webauthn_credential.sign_count)
+          .create_or_find_by!(
+            external_id: webauthn_credential.id,
+          )
+      end
+
+      def webauthn_nickname
+        user_agent = UserAgent.parse(request.user_agent)
+        "#{user_agent.browser} (#{user_agent.platform})"
+      end
     end
   end
 end

data/app/javascript/koi/controllers/webauthn_authentication_controller.js

@@ -17,7 +17,7 @@ export default class WebauthnAuthenticationController extends Controller {
   get options() {
     return {
       publicKey: PublicKeyCredential.parseRequestOptionsFromJSON(
-        this.optionsValue.publicKey,
+        this.optionsValue,
       ),
     };
   }

data/app/javascript/koi/controllers/webauthn_registration_controller.js

@@ -1,39 +1,29 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class WebauthnRegistrationController extends Controller {
+  static targets = ["response"];
   static values = {
     options: Object,
-    response: Object,
   };
-  static targets = ["intro", "nickname", "response"];
 
   submit(e) {
-    if (
-      this.responseTarget.value === "" &&
-      e.submitter.formMethod !== "dialog"
-    ) {
-      e.preventDefault();
-      this.createCredential().then();
-    }
+    if (this.responseTarget.value) return;
+
+    e.preventDefault();
+    this.createCredential().then(() => {
+      e.target.submit();
+    });
   }
 
   async createCredential() {
     const credential = await navigator.credentials.create(this.options);
-
-    this.responseValue = credential.toJSON();
     this.responseTarget.value = JSON.stringify(credential.toJSON());
   }
 
-  responseValueChanged(response) {
-    const responsePresent = response !== "";
-    this.introTarget.toggleAttribute("hidden", responsePresent);
-    this.nicknameTarget.toggleAttribute("hidden", !responsePresent);
-  }
-
   get options() {
     return {
       publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(
-        this.optionsValue.publicKey,
+        this.optionsValue,
       ),
     };
   }

data/app/models/admin/credential.rb

@@ -10,5 +10,9 @@ module Admin
     validates :external_id, uniqueness: true
     validates :sign_count,
               numericality: { only_integer: true, greater_than_or_equal_to: 0 }
+
+    def to_s
+      nickname
+    end
   end
 end

data/app/views/admin/admin_users/edit.html.erb

@@ -9,7 +9,9 @@
   <h1>Edit admin user</h1>
 
   <%= actions_list do %>
-    <li><%= link_to_archive_or_delete(admin_user) %></li>
+    <% unless admin_user == current_admin %>
+      <li><%= link_to_archive_or_delete(admin_user) %></li>
+    <% end %>
   <% end %>
 <% end %>
 

data/app/views/admin/admin_users/show.html.erb

@@ -8,6 +8,9 @@
   <h1><%= admin_user %></h1>
 
   <%= actions_list do %>
+    <% if admin_user == current_admin %>
+      <li><%= link_to("Profile", admin_profile_path) %></li>
+    <% end %>
     <li><%= link_to("Edit", edit_admin_admin_user_path(admin_user)) %></li>
   <% end %>
 <% end %>

data/app/views/admin/credentials/_credentials.html.erb

@@ -1,8 +1,11 @@
-<%# locals: (admin_user:) %>
+<%# locals: (admin_user:, collection: admin_user.credentials) %>
 
-<%= table_with(id: dom_id(admin_user, :credentials), collection: admin_user.credentials) do |t, c| %>
-  <% t.text :nickname, label: "Name" %>
-  <% t.date :updated_at, label: "Last use" do |date| %>
-    <%= date unless c.created_at == c.updated_at %>
+<%= table_with(id: dom_id(admin_user, :credentials), collection:) do |row, credential| %>
+  <% row.text(:nickname, label: "Name") do |cell| %>
+    <%= link_to(cell, admin_credential_path(credential)) %>
+  <% end %>
+  <% row.date(:created_at, label: "Created") %>
+  <% row.date(:updated_at, label: "Last use") do |date| %>
+    <%= date unless credential.created_at == credential.updated_at %>
   <% end %>
 <% end %>

data/app/views/admin/credentials/new.html.erb

@@ -1,43 +1,34 @@
-<%# locals: (admin_user:, credential:, options:) %>
+<%# locals: (admin_user:) %>
 
-<%= koi_modal_tag("edit", title: "New passkey") do %>
-  <%= koi_modal_header(title: "New passkey", form_id: dom_id(credential, :form)) %>
-  <main>
-    <%= form_with(model: credential,
-                  url:   admin_admin_user_credentials_path(admin_user),
-                  id:    dom_id(credential, :form),
-                  class: "flow prose",
-                  data:  {
-                    controller:                          "webauthn-registration",
-                    action:                              "submit->webauthn-registration#submit",
-                    webauthn_registration_options_value: { publicKey: options },
-                  }) do |form| %>
-      <%= form.hidden_field :response, data: { webauthn_registration_target: "response" } %>
-      <section class="flow prose" data-webauthn-registration-target="intro">
-        <p>
-          Passkeys are secure secrets that are stored by your device.
-          You will need the device where your passkey is stored to log in.
-        </p>
-        <p>
-          Unlike a password, your password doesn't get sent to the server when you log
-          in and can't be stolen in a data breach. When you log in with a passkey,
-          your operating system will prompt you for permission to use the passkey
-          secret to authenticate the login attempt.
-        </p>
-        <p>
-          We recommend that you store your passkey on your phone or cloud account.
-          Depending on your browser, you may need to choose "more options" to see
-          a QR code that you can scan with your phone.
-        </p>
-      </section>
-      <section class="flow" data-webauthn-registration-target="nickname" hidden>
-        <%= form.govuk_text_field :nickname, label: { text: "Passkey name" } do %>
-          Enter a name for this passkey to help you distinguish it from other passkeys you may have for this site.
-          <br>
-          Example: My Phone, Chrome, iCloud, 1Password
-        <% end %>
-      </section>
-    <% end %>
-  </main>
-  <%= koi_modal_footer("Next", nil, form_id: dom_id(credential, :form)) %>
+<%= content_for(:roadblock) do %>
+  <header>
+    <icon aria-hidden="true" class="icon" data-icon="fingerprint"></icon>
+    <h1>Create a passkey</h1>
+  </header>
+  <p>
+    Passkeys are secure secrets that are stored by your device.
+    You will need the device where your passkey is stored to log in.
+  </p>
+  <p>
+    Unlike a password, your password doesn't get sent to the server when you log
+    in and can't be stolen in a data breach. When you log in with a passkey,
+    your operating system will prompt you for permission to use the passkey
+    secret to authenticate the login attempt.
+  </p>
+  <p>
+    We recommend that you store your passkey on your phone or cloud account.
+    Depending on your browser, you may need to choose "more options" to see
+    a QR code that you can scan with your phone.
+  </p>
+
+  <%= form_with(model: Admin::Credential.new,
+                url:   admin_profile_credentials_path,
+                data:  {
+                  controller:                          "webauthn-registration",
+                  action:                              "submit->webauthn-registration#submit",
+                  webauthn_registration_options_value:,
+                }) do |form| %>
+    <%= form.hidden_field :response, data: { webauthn_registration_target: "response" } %>
+    <%= form.button("Next", type: :submit, class: "button") %>
+  <% end %>
 <% end %>

data/app/views/admin/credentials/show.html.erb

@@ -0,0 +1,19 @@
+<%# locals: (credential:) %>
+
+<% content_for(:header) do %>
+  <%= breadcrumb_list do %>
+    <li><%= link_to(credential.admin, admin_profile_path) %></li>
+  <% end %>
+
+  <h1>Passkey</h1>
+
+  <%= actions_list do %>
+    <li><%= link_to_delete(credential, url: admin_credential_path(credential)) %></li>
+  <% end %>
+<% end %>
+
+<%= form_with(model: credential, url: admin_credential_path(credential)) do |form| %>
+  <%= form.govuk_text_field(:nickname) %>
+
+  <%= form.button(type: :submit, class: "button") %>
+<% end %>

data/app/views/admin/otps/_form.html.erb

@@ -2,7 +2,7 @@
 
 <%= form_with(id:     dom_id(admin_user, :otp),
               model:  admin_user,
-              url:    admin_admin_user_otp_path(admin_user),
+              url:    admin_profile_otp_path,
               method: :post,
               class:  "flow") do |form| %>
   <section class="flow prose">

data/app/views/admin/{admin_users/_form.html+self.erb → profiles/_form.html.erb}

@@ -1,6 +1,6 @@
 <%# locals: (admin_user:) %>
 
-<%= form_with(model: admin_user) do |form| %>
+<%= form_with(model: admin_user, url: admin_profile_path) do |form| %>
   <%= form.govuk_text_field :email %>
   <%= form.govuk_text_field :name %>
   <%= form.govuk_password_field :password, label: { text: "Password (optional)" } %>

data/app/views/admin/{admin_users/edit.html+self.erb → profiles/edit.html.erb}

@@ -2,7 +2,6 @@
 
 <% content_for(:header) do %>
   <%= breadcrumb_list do %>
-    <li><%= link_to("Admin users", admin_admin_users_path) %></li>
     <li><%= link_to(admin_user, admin_admin_user_path(admin_user)) %></li>
   <% end %>
 

data/app/views/admin/{admin_users/show.html+self.erb → profiles/show.html.erb}

@@ -1,14 +1,10 @@
 <%# locals: (admin_user:) %>
 
 <% content_for(:header) do %>
-  <%= breadcrumb_list do %>
-    <li><%= link_to("Admin users", admin_admin_users_path) %></li>
-  <% end %>
-
   <h1><%= admin_user %></h1>
 
   <%= actions_list do %>
-    <li><%= link_to("Edit", edit_admin_admin_user_path(admin_user)) %></li>
+    <li><%= link_to("Edit", edit_admin_profile_path) %></li>
   <% end %>
 <% end %>
 
@@ -22,12 +18,12 @@
     <span class="repel">
       <%= otp %>
       <% if otp.value %>
-        <%= button_to("Remove", admin_admin_user_otp_path(admin_user),
+        <%= button_to("Remove", admin_profile_otp_path,
                       class:  "button button--text",
                       method: :delete,
                       form:   { data: { turbo_confirm: "Are you sure?" } }) %>
       <% else %>
-        <%= link_to("Add", new_admin_admin_user_otp_path(admin_user),
+        <%= link_to("Add", new_admin_profile_otp_path,
                     class: "button", data: { turbo_frame: "edit" }) %>
       <% end %>
     </span>
@@ -36,10 +32,19 @@
 
 <div class="repel">
   <h3>Passkeys</h3>
-  <%= link_to("New passkey", new_admin_admin_user_credential_path(admin_user),
-              class: "button", data: { turbo_frame: "edit" }) %>
+
+  <%= form_with(model: Admin::Credential.new,
+                url:   admin_profile_credentials_path,
+                data:  {
+                  controller:                          "webauthn-registration",
+                  action:                              "submit->webauthn-registration#submit",
+                  webauthn_registration_options_value:,
+                }) do |form| %>
+    <%= form.hidden_field :response, data: { webauthn_registration_target: "response" } %>
+    <%= form.button("Add passkey", type: :submit, class: "button") %>
+  <% end %>
 </div>
 
-<%= render "admin/credentials/credentials", admin_user: %>
+<%= render("admin/credentials/credentials", admin_user:) %>
 
 <%= koi_modal_tag("edit") %>

data/app/views/admin/sessions/new.html.erb

@@ -1,32 +1,31 @@
 <%# locals: (admin_user:) %>
 
-<%= form_with(
-      model: admin_user,
-      scope: :admin,
-      url:   admin_session_path,
-      data:  {
-        controller:                            "webauthn-authentication",
-        webauthn_authentication_options_value: { publicKey: webauthn_auth_options },
-      },
-    ) do |form| %>
-  <% (redirect = flash[:redirect] || params[:redirect]) && flash.delete(:redirect) %>
-  <% unless flash.empty? %>
-    <div class="govuk-error-summary">
-      <ul class="govuk-error-summary__list">
-        <% flash.each do |type, message| %>
-          <%= tag.li message %>
-        <% end %>
-      </ul>
+<%= content_for(:roadblock) do %>
+  <header>
+    <icon aria-hidden="true" class="icon" data-icon="koi">&nbsp;</icon>
+    <h1>Koi</h1>
+    <h2><%= Koi.config.site_name || URI.parse(root_url).host %></h2>
+  </header>
+
+  <%= form_with(
+        model: admin_user,
+        scope: :admin,
+        url:   admin_session_path,
+        data:  {
+          controller:                            "webauthn-authentication",
+          webauthn_authentication_options_value:,
+        },
+      ) do |form| %>
+    <%# note, autocomplete off is ignored by browsers but required by PCI-DSS %>
+    <%= form.govuk_email_field :email, autofocus: true, autocomplete: "off" %>
+    <%= form.hidden_field :response, data: { webauthn_authentication_target: "response" } %>
+    <% (redirect = flash[:redirect] || params[:redirect]) && flash.delete(:redirect) %>
+    <%= hidden_field_tag(:redirect, redirect) %>
+    <div class="actions">
+      <%= form.button("Next", type: :submit, class: "button") %>
+      <%= form.button(type: :button, class: "button button--secondary", data: { action: "webauthn-authentication#authenticate" }) do %>
+        <icon class="icon" data-icon="fingerprint" aria-label="Passkey">&nbsp;</icon>
+      <% end %>
     </div>
   <% end %>
-  <%# note, autocomplete off is ignored by browsers but required by PCI-DSS %>
-  <%= form.govuk_email_field :email, autofocus: true, autocomplete: "off" %>
-  <%= form.hidden_field :response, data: { webauthn_authentication_target: "response" } %>
-  <%= hidden_field_tag(:redirect, redirect) %>
-  <div class="actions">
-    <%= form.admin_save "Next" %>
-    <%= form.button(type: :button, class: "button button--secondary", data: { action: "webauthn-authentication#authenticate" }) do %>
-      <icon class="icon" data-icon="fingerprint" aria-label="Passkey">&nbsp;</icon>
-    <% end %>
-  </div>
 <% end %>

data/app/views/admin/sessions/otp.html.erb

@@ -1,8 +1,16 @@
 <%# locals: (admin_user:) %>
 
-<%= form_with(model: admin_user, scope: :admin, url: admin_session_path, method: :post) do |form| %>
-  <%# note, autocomplete off is ignored by browsers but required by PCI-DSS %>
-  <%= form.govuk_text_field :token, autofocus: true, autocomplete: "off" %>
-  <%= hidden_field_tag(:redirect, params[:redirect]) %>
-  <%= form.admin_save "Next" %>
+<%= content_for(:roadblock) do %>
+  <header>
+    <icon aria-hidden="true" class="icon" data-icon="koi">&nbsp;</icon>
+    <h1>Koi</h1>
+    <h2><%= Koi.config.site_name || URI.parse(root_url).host %></h2>
+  </header>
+
+  <%= form_with(model: admin_user, scope: :admin, url: admin_session_path, method: :post) do |form| %>
+    <%# note, autocomplete off is ignored by browsers but required by PCI-DSS %>
+    <%= form.govuk_text_field :token, autofocus: true, autocomplete: "off" %>
+    <%= hidden_field_tag(:redirect, params[:redirect]) %>
+    <%= form.button("Next", type: :submit, class: "button") %>
+  <% end %>
 <% end %>

data/app/views/admin/sessions/password.html.erb

@@ -1,12 +1,20 @@
 <%# locals: (admin_user:) %>
 
-<%= form_with(model: admin_user, scope: :admin, url: admin_session_path) do |form| %>
-  <%= form.hidden_field(:email) %>
-  <%# note, autocomplete off is ignored by browsers but required by PCI-DSS %>
-  <%= form.govuk_password_field :password, autofocus: true, autocomplete: "off" %>
-  <%= hidden_field_tag(:redirect, params[:redirect]) %>
-  <%= form.admin_save "Next" %>
+<%= content_for(:roadblock) do %>
+  <header>
+    <icon aria-hidden="true" class="icon" data-icon="koi">&nbsp;</icon>
+    <h1>Koi</h1>
+    <h2><%= Koi.config.site_name || URI.parse(root_url).host %></h2>
+  </header>
 
-  <%# init govuk js to provide the show/hide button %>
-  <%= govuk_formbuilder_init %>
+  <%= form_with(model: admin_user, scope: :admin, url: admin_session_path) do |form| %>
+    <%= form.hidden_field(:email) %>
+    <%# note, autocomplete off is ignored by browsers but required by PCI-DSS %>
+    <%= form.govuk_password_field :password, autofocus: true, autocomplete: "off" %>
+    <%= hidden_field_tag(:redirect, params[:redirect]) %>
+    <%= form.button("Next", type: :submit, class: "button") %>
+
+    <%# init govuk js to provide the show/hide button %>
+    <%= govuk_formbuilder_init %>
+  <% end %>
 <% end %>

data/app/views/admin/tokens/show.html.erb

@@ -1,12 +1,16 @@
 <%# locals: (admin_user:, token:) %>
 
-<%= form_with(url: admin_session_token_path(token), method: :patch) do |form| %>
-  <p>Welcome to Koi Admin</p>
-  <%= summary_table_with(model: admin_user) do |row| %>
-    <%= row.text :name %>
-    <%= row.text :email %>
+<%= content_for(:roadblock) do %>
+  <header>
+    <icon aria-hidden="true" class="icon" data-icon="koi">&nbsp;</icon>
+    <h1>Koi</h1>
+    <h2><%= Koi.config.site_name || URI.parse(root_url).host %></h2>
+  </header>
+
+  <p>Welcome, <%= admin_user %>.</p>
+  <p>Please sign in to continue.</p>
+
+  <%= form_with(url: admin_session_token_path(token), method: :patch) do |form| %>
+    <%= form.button("Sign in", type: :submit, class: "button") %>
   <% end %>
-  <div class="actions">
-    <%= form.admin_save "Sign in" %>
-  </div>
 <% end %>

data/app/views/layouts/koi/_application_navigation.html.erb

@@ -13,15 +13,19 @@
              data-action="input->navigation#filter change->navigation#filter
                         keydown.enter->navigation#go keydown.esc->navigation#clear">
     </div>
-    <ul class="navigation-group | flow" role="list">
-      <li>
-        <span><%= current_admin_user.name %></span>
-        <ul class="navigation-list | flow" role="list">
-          <li><%= link_to("Profile", main_app.admin_admin_user_path(current_admin_user)) %></li>
-          <li><%= link_to("Log out", main_app.admin_session_path, data: { turbo_method: :delete }) %></li>
-        </ul>
-      </li>
-    </ul>
+
+    <% if current_admin_user %>
+      <ul class="navigation-group | flow" role="list">
+        <li>
+          <span><%= current_admin_user.name %></span>
+          <ul class="navigation-list | flow" role="list">
+            <li><%= link_to("Profile", main_app.admin_profile_path) %></li>
+            <li><%= link_to("Log out", main_app.admin_session_path, data: { turbo_method: :delete }) %></li>
+          </ul>
+        </li>
+      </ul>
+    <% end %>
+
     <%= navigation_menu_with(
           menu:  Koi::Menu.admin_menu(self),
           list:  {

data/app/views/layouts/koi/application.html.erb

@@ -42,7 +42,7 @@
           ArrowRight->shortcut:page-next
         ">
 <!-- application header -->
-<%= render "layouts/koi/application_header" %>
+<%= render "layouts/koi/application_header" unless content_for(:roadblock) %>
 
 <!-- header -->
 <% if content_for?(:header) %>
@@ -53,18 +53,27 @@
   </header>
 <% end %>
 
-<main class="flow wrapper">
-  <% unless flash.empty? %>
-    <!-- flash -->
-    <%= render "layouts/koi/flash" %>
-  <% end %>
+<!-- main -->
+<% if content_for(:roadblock) %>
+  <main class="cover">
+    <div class="roadblock | flow wrapper">
+      <%= yield(:roadblock) %>
+    </div>
+  </main>
+<% else %>
+  <main class="flow wrapper">
+    <% unless flash.empty? %>
+      <!-- flash -->
+      <%= render("layouts/koi/flash") %>
+    <% end %>
 
-  <!-- content -->
-  <%= yield %>
-</main>
+    <!-- content -->
+    <%= yield %>
+  </main>
+<% end %>
 
 <!-- application navigation -->
-<%= render "layouts/koi/application_navigation" %>
+<%= render("layouts/koi/application_navigation") unless content_for(:roadblock) %>
 
 </body>
 </html>

data/config/locales/koi.en.yml

@@ -11,7 +11,6 @@ en:
     auth:
       otp_app_name: "%{host}/admin"
       token_invalid: "Token invalid or consumed already"
-      token_consumed: "Please create a password or passkey"
     labels:
       new: New
       search: Search

data/config/routes.rb

@@ -2,24 +2,29 @@
 
 Rails.application.routes.draw do
   namespace :admin do
-    resource :session, only: %i[new create destroy] do
-      # JWT tokens contain periods
-      resources :tokens, param: :token, only: %i[show update], token: /[^\/]+/
-    end
-
     resources :admin_users do
-      resources :credentials, only: %i[new create destroy]
-      resource :otp, only: %i[new create destroy]
-      resources :tokens, only: %i[create]
       get :archived, on: :collection
       put :archive, on: :collection
       put :restore, on: :collection
+
+      resources :tokens, only: %i[create]
     end
 
     resource :cache, only: %i[destroy]
     resource :dashboard, only: %i[show]
-    resources :well_knowns
+
+    resource :profile, only: %i[show edit update], shallow: true do
+      resources :credentials, only: %i[show new create update destroy]
+      resource :otp, only: %i[new create destroy]
+    end
+
+    resource :session, only: %i[new create destroy] do
+      # JWT tokens contain periods
+      resources :tokens, param: :token, only: %i[show update], token: /[^\/]+/
+    end
+
     resources :url_rewrites
+    resources :well_knowns
 
     root to: redirect("admin/dashboard")
   end