katalyst-koi 4.14.0 → 4.14.1

data/app/assets/javascripts/koi/controllers/webauthn_registration_controller.js

@@ -6,8 +6,11 @@ import {
 } from "@github/webauthn-json/browser-ponyfill";
 
 export default class WebauthnRegistrationController extends Controller {
-  static values = { options: Object };
-  static targets = ["response"];
+  static values = {
+    options: Object,
+    response: String,
+  };
+  static targets = ["intro", "nickname", "response"];
 
   submit(e) {
     if (this.responseTarget.value === "") {
@@ -16,12 +19,17 @@ export default class WebauthnRegistrationController extends Controller {
     }
   }
 
-  createCredential() {
-    create(this.options).then((response) => {
-      this.responseTarget.value = JSON.stringify(response);
+  async createCredential() {
+    const response = await create(this.options);
 
-      this.element.requestSubmit();
-    });
+    this.responseValue = JSON.stringify(response);
+    this.responseTarget.value = JSON.stringify(response);
+  }
+
+  responseValueChanged(response) {
+    const responsePresent = response !== "";
+    this.introTarget.toggleAttribute("hidden", responsePresent);
+    this.nicknameTarget.toggleAttribute("hidden", !responsePresent);
   }
 
   get options() {

data/app/assets/stylesheets/koi/base/_flow.scss

@@ -0,0 +1,8 @@
+/*
+FLOW COMPOSITION
+Like the Every Layout stack: https://every-layout.dev/layouts/stack/
+Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
+*/
+.flow > * + * {
+  margin-top: var(--flow-space, 1em);
+}

data/app/assets/stylesheets/koi/base/_index.scss

@@ -1,8 +1,10 @@
 @use "button";
 @use "icon";
 @use "input";
+@use "flow";
 @use "link";
 @use "list";
+@use "repel";
 @use "tables";
 @use "typography";
 

data/app/assets/stylesheets/koi/base/_repel.scss

@@ -0,0 +1,23 @@
+/*
+REPEL
+A little layout that pushes items away from each other where
+there is space in the viewport and stacks on small viewports
+
+CUSTOM PROPERTIES AND CONFIGURATION
+--gutter (var(--space-s-m)): This defines the space
+between each item.
+
+--repel-vertical-alignment How items should align vertically.
+Can be any acceptable flexbox alignment value.
+*/
+.repel {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: var(--repel-vertical-alignment, center);
+  gap: var(--gutter, var(--space-s-m));
+}
+
+.repel[data-nowrap] {
+  flex-wrap: nowrap;
+}

data/app/controllers/admin/admin_users_controller.rb

@@ -72,6 +72,8 @@ module Admin
 
     def set_admin
       @admin = Admin::User.with_archived.find(params[:id])
+
+      request.variant << :self if @admin == current_admin_user
     end
 
     def admin_user_params

data/app/controllers/admin/credentials_controller.rb

@@ -70,7 +70,11 @@ module Admin
     def set_admin_user
       @admin_user = Admin::User.find(params[:admin_user_id])
 
-      head(:forbidden) unless current_admin == @admin_user
+      if current_admin == @admin_user
+        request.variant = :self
+      else
+        head(:forbidden)
+      end
     end
   end
 end

data/app/controllers/admin/sessions_controller.rb

@@ -19,7 +19,7 @@ module Admin
 
         session[:admin_user_id] = admin_user.id
 
-        redirect_to(params[:redirect].presence || admin_dashboard_path, status: :see_other)
+        redirect_to(url_from(params[:redirect].presence) || admin_dashboard_path, status: :see_other)
       else
         admin_user = Admin::User.new(session_params.slice(:email, :password))
         admin_user.errors.add(:email, "Invalid email or password")

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

@@ -36,7 +36,8 @@ module Koi
           Admin::Credential.find_by!(external_id: credential.id)
         end
 
-        stored_credential.update!(sign_count: webauthn_credential.sign_count)
+        stored_credential.update(sign_count: webauthn_credential.sign_count)
+        stored_credential.touch
 
         stored_credential.admin
       end

data/app/views/admin/admin_users/_fields.html+self.erb

@@ -0,0 +1,3 @@
+<%= 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/_fields.html.erb

@@ -1,4 +1,3 @@
 <%= form.govuk_text_field :email %>
 <%= form.govuk_text_field :name %>
-<%= form.govuk_password_field :password, label: { text: "Password#{' (optional)' if form.object.persisted?}" } %>
 <%= form.govuk_check_box_field :archived if form.object.persisted? %>

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

@@ -15,6 +15,9 @@
   <% row.select %>
   <% row.link :name, url: :admin_admin_user_path %>
   <% row.text :email %>
+  <% row.boolean :credentials, label: "Passkey" do |cell| %>
+    <%= cell.value.any? ? "Yes" : "No" %>
+  <% end %>
 <% end %>
 
 <%= table_pagination_with(collection:) %>

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

@@ -0,0 +1,19 @@
+<%# locals: (admin:) %>
+
+<% content_for :header do %>
+  <%= render Koi::Header::ShowComponent.new(resource: admin) %>
+<% end %>
+
+<%= render Koi::SummaryListComponent.new(model: admin, class: "item-table") do |builder| %>
+  <%= builder.text :name %>
+  <%= builder.text :email %>
+  <%= builder.date :created_at %>
+  <%= builder.date :last_sign_in_at, label: { text: "Last sign in" } %>
+<% end %>
+
+<div class="repel">
+  <h3>Passkeys</h3>
+  <%= kpop_link_to "New passkey", new_admin_admin_user_credential_path(admin), class: "button button--primary" %>
+</div>
+
+<%= render "admin/credentials/credentials", admin: %>

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

@@ -1,3 +1,5 @@
+<%# locals: (admin:) %>
+
 <% content_for :header do %>
   <%= render Koi::Header::ShowComponent.new(resource: admin) %>
 <% end %>
@@ -5,11 +7,15 @@
 <%= render Koi::SummaryListComponent.new(model: admin, class: "item-table") do |builder| %>
   <%= builder.text :name %>
   <%= builder.text :email %>
-  <%= builder.datetime :created_at %>
-  <%= builder.datetime :last_sign_in_at, label: { text: "Last sign in" } %>
+  <%= builder.date :created_at %>
+  <%= builder.date :last_sign_in_at, label: { text: "Last sign in" } %>
   <%= builder.boolean :archived? %>
 <% end %>
 
+<h3>Passkeys</h3>
+
+<%= render "admin/credentials/credentials", admin: %>
+
 <div class="actions">
   <% if admin.archived? %>
     <%= button_to "Delete", admin_admin_user_path(admin),
@@ -19,13 +25,3 @@
   <% end %>
   <%= button_to "Generate login link", admin_admin_user_tokens_path(admin), class: "button button--primary", form: { id: "invite" } %>
 </div>
-
-<h2>Authentication</h2>
-
-<%= render "admin/credentials/credentials", admin: %>
-
-<% if admin == current_admin %>
-  <div class="actions-group">
-    <%= kpop_link_to "Add this device", new_admin_admin_user_credential_path(admin), class: "button button--primary" %>
-  </div>
-<% end %>

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

@@ -0,0 +1,10 @@
+<%= table_with(id: dom_id(admin, :credentials), collection: admin.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 %>
+  <% end %>
+  <% t.cell :actions, label: "" do %>
+    <%= link_to("Remove passkey", admin_admin_user_credential_path(admin, c),
+                data: { turbo_method: :delete }) %>
+  <% end %>
+<% end %>

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

@@ -1,7 +1,6 @@
 <%= table_with(id: dom_id(admin, :credentials), collection: admin.credentials) do |t, c| %>
-  <% t.text :nickname %>
-  <% t.number :sign_count %>
-  <% t.cell :actions, label: "" do %>
-    <%= button_to "Remove device", admin_admin_user_credential_path(admin, c), method: :delete, class: "button button--text" %>
-  <% end if admin == current_admin %>
+  <% t.text :nickname, label: "Name" %>
+  <% t.date :updated_at, label: "Last use" do |date| %>
+    <%= date unless c.created_at == c.updated_at %>
+  <% end %>
 <% end %>

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

@@ -1,14 +1,37 @@
-<%= render Kpop::ModalComponent.new(title: "Register device") do %>
+<%= render Kpop::ModalComponent.new(title: "New passkey") do %>
   <%= form_with model: admin.credentials.new,
                 url:   admin_admin_user_credentials_path(admin),
+                class: "flow prose",
                 data:  {
                   controller:                          "webauthn-registration",
                   action:                              "submit->webauthn-registration#submit",
                   webauthn_registration_options_value: { publicKey: options },
                 } do |form| %>
-    <%= form.govuk_text_field :nickname %>
     <%= form.hidden_field :response, data: { webauthn_registration_target: "response" } %>
-
-    <%= form.admin_save %>
+    <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>
+    <%= form.admin_save("Next") %>
   <% end %>
 <% end %>

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

@@ -9,6 +9,15 @@
            data-action="input->navigation#filter change->navigation#filter
                         keydown.enter->navigation#go keydown.esc->navigation#clear">
   </div>
+  <ul role="list">
+    <li>
+      <span><%= current_admin_user.name %></span>
+      <ul role="list">
+        <li><%= link_to("Profile", admin_admin_user_path(current_admin_user)) %></li>
+        <li><%= link_to("Log out", admin_session_path, data: { turbo_method: :delete }) %></li>
+      </ul>
+    </li>
+  </ul>
   <%= navigation_menu_with(menu: Koi::Menu.admin_menu(self)) %>
 </nav>
 <%= render "layouts/koi/navigation_collapse" %>

data/lib/koi/menu.rb

@@ -17,7 +17,6 @@ module Koi
         b.add_link(title: "View site", url: "/", target: :blank)
         b.add_link(title: "Dashboard", url: context.main_app.admin_dashboard_path)
         b.add_items(priority)
-        b.add_button(title: "Logout", url: context.main_app.admin_session_path, http_method: :delete)
       end
       builder.add_menu(title: "Modules") do |b|
         b.add_items(modules)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-koi
 version: !ruby/object:Gem::Version
-  version: 4.14.0
+  version: 4.14.1
 platform: ruby
 authors:
 - Katalyst Interactive
@@ -269,11 +269,13 @@ files:
 - app/assets/javascripts/koi/utils/transition.js
 - app/assets/stylesheets/koi/admin.scss
 - app/assets/stylesheets/koi/base/_button.scss
+- app/assets/stylesheets/koi/base/_flow.scss
 - app/assets/stylesheets/koi/base/_icon.scss
 - app/assets/stylesheets/koi/base/_index.scss
 - app/assets/stylesheets/koi/base/_input.scss
 - app/assets/stylesheets/koi/base/_link.scss
 - app/assets/stylesheets/koi/base/_list.scss
+- app/assets/stylesheets/koi/base/_repel.scss
 - app/assets/stylesheets/koi/base/_tables.scss
 - app/assets/stylesheets/koi/base/_typography.scss
 - app/assets/stylesheets/koi/components/_actions-group.scss
@@ -362,12 +364,15 @@ files:
 - app/models/application_record.rb
 - app/models/concerns/koi/model/archivable.rb
 - app/models/url_rewrite.rb
+- app/views/admin/admin_users/_fields.html+self.erb
 - app/views/admin/admin_users/_fields.html.erb
 - app/views/admin/admin_users/archived.html.erb
 - app/views/admin/admin_users/edit.html.erb
 - app/views/admin/admin_users/index.html.erb
 - app/views/admin/admin_users/new.html.erb
+- app/views/admin/admin_users/show.html+self.erb
 - app/views/admin/admin_users/show.html.erb
+- app/views/admin/credentials/_credentials.html+self.erb
 - app/views/admin/credentials/_credentials.html.erb
 - app/views/admin/credentials/create.turbo_stream.erb
 - app/views/admin/credentials/destroy.turbo_stream.erb