rails_api_keys-ui 0.2.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: ab6d1ec68b766d9b9fd979711ff740f3210cdb11e986828c5c83b165112e2046
+  data.tar.gz: 59550b7f9f41957e5e3ec1bc6505661bed631430b6f4a248fddc1f1522f8004f
+SHA512:
+  metadata.gz: 0af47fee8d5d4207d3890291075b7792b79e503190a4e0f7d50459756828a10a94411a1bac68cff8b293bf9404baf3a87bd8db02ecc41ff47521b80cd57557af
+  data.tar.gz: 6c66545baa6c3bf38f43ecb68feb53bd8a607d92c83fc4bc52f98832b695b821cc98abf0cbb886b254402b148cb1b8694cf0b61ee5411299d35222294e449645

data/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0/).
+
+## [Unreleased]
+
+## [0.2.0] - 2026-08-11
+
+### Added
+
+- Mountable `rails_api_keys_ui` draw helper (nested or flat mounts, explicit owner vs context)
+- `RailsApiKeys::UI::ApiKeysController` — HTML + JSON `index` / `create` / `destroy`
+- Tailwind-compatible markup + Stimulus defaults (`modal` / `clipboard`) with reveal-once + copy UX
+- Shipped scoped stylesheet (`rails_api_keys/ui.css`) inlined by the panel; `config.include_stylesheet` to opt out
+- CSS variables `--rak-ui-primary-600` / `--rak-ui-primary-700` for brand overrides
+- Embeddable panel helper/partial
+- Generators: `install`, `controllers`, `views`, `locales`
+- Soft Pundit integration (default owner policy; no-op authorize when Pundit is absent)
+- Configurable `current_owner`, `parent_controller`, flash key, `include_stylesheet`
+- HTML redirects via `redirect_back` (fallback: mount index)
+
+[Unreleased]: https://github.com/rubyroidlabs/rails_api_keys_ui/compare/v0.1.0...HEAD
+[0.1.0]: https://github.com/rubyroidlabs/rails_api_keys_ui/releases/tag/v0.1.0

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rubyroid Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,130 @@
+# rails_api_keys-ui
+
+[![CI](https://github.com/rubyroidlabs/rails_api_keys-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/rubyroidlabs/rails_api_keys_ui/actions/workflows/ci.yml)
+[![Gem Version](https://badge.fury.io/rb/rails_api_keys-ui.svg?icon=si%3Arubygems&icon_color=%23ee3f2d)](https://badge.fury.io/rb/rails_api_keys-ui)
+
+Optional HTML/JSON UI for [rails_api_keys](https://github.com/rubyroidlabs/rails_api_keys): create (reveal once + copy), list active keys, revoke. Host apps draw routes for each owner mount.
+
+## What this gem includes
+
+- `rails_api_keys_ui` draw helper — nested or flat mounts, explicit owner resolution
+- `RailsApiKeys::UI::ApiKeysController` — HTML + JSON `index` / `create` / `destroy`
+- Tailwind-compatible markup + shipped scoped stylesheet (no host Tailwind required)
+- Embeddable panel partial/helper
+- Generators for install, controllers, views, and locales
+
+Depends on `rails_api_keys` for the model/auth layer.
+
+## Installation
+
+```ruby
+# Gemfile
+gem "rails_api_keys"
+gem "rails_api_keys-ui"
+```
+
+```bash
+bundle install
+bin/rails generate rails_api_keys:install   # if not already
+bin/rails generate rails_api_keys_ui:install
+bin/rails db:migrate
+```
+
+Views expect host Stimulus controllers named `modal` and `clipboard` (install generator can copy examples if missing). The panel inlines a scoped stylesheet by default (`config.include_stylesheet`). Then draw routes.
+
+## Routes
+
+```ruby
+# Keys owned by current_user; nested URL is UI context only
+resources :employees do
+  rails_api_keys_ui owner: :current_user, controller: "api_keys"
+end
+
+# Keys owned by the Company from params[:company_id]
+resources :companies do
+  rails_api_keys_ui owner: :company
+end
+
+# Flat mount
+rails_api_keys_ui owner: :current_user, path: "account/api_keys", as: :account_api_keys
+```
+
+Per-mount options: `owner`, `authorize`, `controller`, `path`, `name`, `as`.
+
+## Customization
+
+```bash
+bin/rails generate rails_api_keys_ui:controllers
+bin/rails generate rails_api_keys_ui:views
+bin/rails generate rails_api_keys_ui:locales
+```
+
+Generated controllers subclass `RailsApiKeys::UI::ApiKeysController`. Until you generate views/locales, the gem defaults are used.
+
+## Configuration
+
+```ruby
+# config/initializers/rails_api_keys_ui.rb
+RailsApiKeys::UI.configure do |config|
+  # config.parent_controller = "ApplicationController"
+  # config.current_owner = ->(controller) { controller.current_user }
+  # config.policy_class = "RailsApiKeys::UI::ApiKeyPolicy"
+  # config.raw_token_flash_key = :rails_api_keys_raw_token
+  # config.include_stylesheet = true
+  # config.authorize = ->(controller, action, record) { ... }
+end
+```
+
+Defaults assume Devise `current_user` and Pundit when present. Without Pundit, authorization soft-allows.
+
+Brand colors for the shipped stylesheet: set `--rak-ui-primary-600` / `--rak-ui-primary-700` on `.rails-api-keys-ui`, or disable the stylesheet and style the Tailwind-compatible classes yourself.
+
+## Embed in a host page
+
+```erb
+<%= rails_api_keys_ui_panel(
+      api_keys: current_user.api_keys.active.order(created_at: :desc),
+      create_path: employee_api_keys_path(@employee),
+      destroy_path: ->(key) { employee_api_key_path(@employee, key) }
+    ) %>
+```
+
+## JSON
+
+- `GET …/api_keys.json` — active keys (no raw tokens)
+- `POST …/api_keys.json` — creates key; response includes `raw_token` once
+- `DELETE …/api_keys/:id.json` — revokes; `204`
+
+## Development
+
+```bash
+bundle install
+bundle exec rspec
+bin/rubocop
+```
+
+See [CHANGELOG.md](./CHANGELOG.md). Agent notes: [`AGENTS.md`](./AGENTS.md).
+
+## Contributing
+
+Bug reports and pull requests are welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) and the [Code of Conduct](./CODE_OF_CONDUCT.md).
+
+To report a security vulnerability privately, see [SECURITY.md](./SECURITY.md).
+
+## License
+
+This project is licensed under the [MIT License](./LICENSE).
+
+---
+
+<p align="center">
+  <a href="https://rubyroidlabs.com">
+    <img src="./docs/logo.svg" alt="Rubyroid Labs" width="100%" />
+  </a>
+</p>
+
+**[Rubyroid Labs](https://rubyroidlabs.com)** — full-cycle software development company for businesses delivering scalable web and mobile apps, dedicated developers, and full-cycle teams in Ruby on Rails, React Native, and UX/UI. 98% on-time delivery.
+
+- Website: [rubyroidlabs.com](https://rubyroidlabs.com)
+- Email: [hi@rubyroidlabs.com](mailto:hi@rubyroidlabs.com)
+- References: [Clutch](https://clutch.co/profile/rubyroid-labs)

data/app/assets/stylesheets/rails_api_keys/ui.css

@@ -0,0 +1,138 @@
+/* Prebuilt styles for rails_api_keys-ui views (Tailwind-compatible class names).
+   Scoped under .rails-api-keys-ui. Override brand via --rak-ui-primary-*. */
+
+.rails-api-keys-ui {
+  --rak-ui-primary-600: #2563eb;
+  --rak-ui-primary-700: #1d4ed8;
+  --rak-ui-gray-50: #f9fafb;
+  --rak-ui-gray-200: #e5e7eb;
+  --rak-ui-gray-300: #d1d5db;
+  --rak-ui-gray-400: #9ca3af;
+  --rak-ui-gray-500: #6b7280;
+  --rak-ui-gray-700: #374151;
+  --rak-ui-gray-900: #111827;
+  --rak-ui-red-50: #fef2f2;
+  --rak-ui-red-300: #fca5a5;
+  --rak-ui-red-700: #b91c1c;
+  --rak-ui-amber-50: #fffbeb;
+  --rak-ui-amber-200: #fde68a;
+  --rak-ui-amber-700: #b45309;
+  box-sizing: border-box;
+  color: var(--rak-ui-gray-900);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.rails-api-keys-ui *,
+.rails-api-keys-ui *::before,
+.rails-api-keys-ui *::after {
+  box-sizing: inherit;
+}
+
+.rails-api-keys-ui .hidden { display: none; }
+.rails-api-keys-ui .block { display: block; }
+.rails-api-keys-ui .flex { display: flex; }
+.rails-api-keys-ui .inline-flex { display: inline-flex; }
+.rails-api-keys-ui .flex-col { flex-direction: column; }
+.rails-api-keys-ui .flex-1 { flex: 1 1 0%; }
+.rails-api-keys-ui .items-center { align-items: center; }
+.rails-api-keys-ui .justify-center { justify-content: center; }
+.rails-api-keys-ui .justify-between { justify-content: space-between; }
+.rails-api-keys-ui .justify-end { justify-content: flex-end; }
+.rails-api-keys-ui .gap-2 { gap: 0.5rem; }
+.rails-api-keys-ui .gap-3 { gap: 0.75rem; }
+.rails-api-keys-ui .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
+.rails-api-keys-ui .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
+.rails-api-keys-ui .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
+
+.rails-api-keys-ui .fixed { position: fixed; }
+.rails-api-keys-ui .relative { position: relative; }
+.rails-api-keys-ui .inset-0 { inset: 0; }
+.rails-api-keys-ui .z-10 { z-index: 10; }
+.rails-api-keys-ui .z-50 { z-index: 50; }
+.rails-api-keys-ui .overflow-y-auto { overflow-y: auto; }
+.rails-api-keys-ui .min-h-screen { min-height: 100vh; }
+.rails-api-keys-ui .w-full { width: 100%; }
+.rails-api-keys-ui .max-w-md { max-width: 28rem; }
+
+.rails-api-keys-ui .m-0 { margin: 0; }
+.rails-api-keys-ui .mt-1 { margin-top: 0.25rem; }
+.rails-api-keys-ui .mb-2 { margin-bottom: 0.5rem; }
+.rails-api-keys-ui .mb-4 { margin-bottom: 1rem; }
+.rails-api-keys-ui .mb-6 { margin-bottom: 1.5rem; }
+.rails-api-keys-ui .p-3 { padding: 0.75rem; }
+.rails-api-keys-ui .p-4 { padding: 1rem; }
+.rails-api-keys-ui .p-6 { padding: 1.5rem; }
+.rails-api-keys-ui .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.rails-api-keys-ui .px-4 { padding-left: 1rem; padding-right: 1rem; }
+.rails-api-keys-ui .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.rails-api-keys-ui .pt-4 { padding-top: 1rem; }
+.rails-api-keys-ui .pt-6 { padding-top: 1.5rem; }
+
+.rails-api-keys-ui .rounded-md { border-radius: 0.375rem; }
+.rails-api-keys-ui .rounded-lg { border-radius: 0.5rem; }
+.rails-api-keys-ui .border { border-width: 1px; border-style: solid; }
+.rails-api-keys-ui .border-transparent { border-color: transparent; }
+.rails-api-keys-ui .border-gray-200 { border-color: var(--rak-ui-gray-200); }
+.rails-api-keys-ui .border-gray-300 { border-color: var(--rak-ui-gray-300); }
+.rails-api-keys-ui .border-red-300 { border-color: var(--rak-ui-red-300); }
+.rails-api-keys-ui .border-amber-200 { border-color: var(--rak-ui-amber-200); }
+
+.rails-api-keys-ui .bg-white { background-color: #fff; }
+.rails-api-keys-ui .bg-gray-500 { background-color: rgb(107 114 128 / var(--rak-ui-bg-opacity, 1)); }
+.rails-api-keys-ui .bg-opacity-75 { --rak-ui-bg-opacity: 0.75; }
+.rails-api-keys-ui .bg-primary-600 { background-color: var(--rak-ui-primary-600); }
+.rails-api-keys-ui .bg-amber-50 { background-color: var(--rak-ui-amber-50); }
+.rails-api-keys-ui .hover\:bg-primary-700:hover { background-color: var(--rak-ui-primary-700); }
+.rails-api-keys-ui .hover\:bg-gray-50:hover { background-color: var(--rak-ui-gray-50); }
+.rails-api-keys-ui .hover\:bg-red-50:hover { background-color: var(--rak-ui-red-50); }
+
+.rails-api-keys-ui .shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
+.rails-api-keys-ui .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
+.rails-api-keys-ui .shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
+.rails-api-keys-ui .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+
+.rails-api-keys-ui .text-xs { font-size: 0.75rem; line-height: 1rem; }
+.rails-api-keys-ui .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+.rails-api-keys-ui .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
+.rails-api-keys-ui .font-medium { font-weight: 500; }
+.rails-api-keys-ui .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+.rails-api-keys-ui .text-white { color: #fff; }
+.rails-api-keys-ui .text-gray-400 { color: var(--rak-ui-gray-400); }
+.rails-api-keys-ui .text-gray-500 { color: var(--rak-ui-gray-500); }
+.rails-api-keys-ui .text-gray-700 { color: var(--rak-ui-gray-700); }
+.rails-api-keys-ui .text-gray-900 { color: var(--rak-ui-gray-900); }
+.rails-api-keys-ui .text-red-700 { color: var(--rak-ui-red-700); }
+.rails-api-keys-ui .text-amber-700 { color: var(--rak-ui-amber-700); }
+.rails-api-keys-ui .text-primary-600 { color: var(--rak-ui-primary-600); }
+.rails-api-keys-ui .hover\:text-gray-500:hover { color: var(--rak-ui-gray-500); }
+
+.rails-api-keys-ui .cursor-pointer { cursor: pointer; }
+
+.rails-api-keys-ui .form-input {
+  appearance: none;
+  background-color: #fff;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--rak-ui-gray-300);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--rak-ui-gray-900);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.rails-api-keys-ui .form-input:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  border-color: var(--rak-ui-primary-600);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rak-ui-primary-600) 25%, transparent);
+}
+
+@media (min-width: 640px) {
+  .rails-api-keys-ui .sm\:flex-row { flex-direction: row; }
+  .rails-api-keys-ui .sm\:items-start { align-items: flex-start; }
+  .rails-api-keys-ui .sm\:items-center { align-items: center; }
+  .rails-api-keys-ui .sm\:justify-between { justify-content: space-between; }
+}

data/app/controllers/rails_api_keys/ui/api_keys_controller.rb

@@ -0,0 +1,152 @@
+# frozen_string_literal: true
+
+module RailsApiKeys
+  module UI
+    # HTML + JSON API key management (index / create / destroy).
+    class ApiKeysController < ApplicationController
+      before_action :set_api_key_owner
+      before_action :set_api_key, only: :destroy
+
+      def index
+        authorize_api_key!(:index, RailsApiKeys::ApiKey)
+        @api_keys = api_keys_scope.order(created_at: :desc)
+
+        respond_to do |format|
+          format.html
+          format.json { render json: @api_keys.map { |key| serialize_key(key) } }
+        end
+      end
+
+      def create
+        authorize_api_key!(:create, RailsApiKeys::ApiKey.new(owner: @api_key_owner))
+
+        api_key, raw_token = @api_key_owner.create_api_key!(
+          name: api_key_params[:name],
+          permission: api_key_params[:permission]
+        )
+
+        respond_to do |format|
+          format.html do
+            flash[raw_token_flash_key] = raw_token
+            redirect_back_after_change notice: t(".created")
+          end
+          format.json do
+            render json: serialize_key(api_key).merge(raw_token: raw_token), status: :created
+          end
+        end
+      rescue ActiveRecord::RecordInvalid => e
+        respond_to do |format|
+          format.html do
+            redirect_back_after_change alert: e.record.errors.full_messages.join(", ")
+          end
+          format.json do
+            render json: { errors: e.record.errors.full_messages }, status: :unprocessable_content
+          end
+        end
+      end
+
+      def destroy
+        authorize_api_key!(:destroy, @api_key)
+        @api_key.revoke!
+
+        respond_to do |format|
+          format.html do
+            redirect_back_after_change notice: t(".revoked")
+          end
+          format.json { head :no_content }
+        end
+      end
+
+      private
+
+      def mount_options
+        @mount_options ||= RailsApiKeys::UI.mounts.fetch(params[:rails_api_keys_ui_mount])
+      end
+
+      def set_api_key_owner
+        @api_key_owner = resolve_owner(mount_options[:owner])
+      end
+
+      def resolve_owner(owner_option)
+        case owner_option
+        when nil, :current_user, "current_user"
+          RailsApiKeys::UI.configuration.current_owner.call(self)
+        when Proc
+          owner_option.call(self)
+        when Symbol, String
+          resolve_named_owner(owner_option.to_s)
+        else
+          raise ArgumentError, "Unsupported rails_api_keys_ui owner: #{owner_option.inspect}"
+        end
+      end
+
+      def resolve_named_owner(name)
+        param_key = "#{name}_id"
+        if params[param_key].present?
+          name.camelize.constantize.find(params[param_key])
+        elsif respond_to?(name, true)
+          send(name)
+        else
+          raise ArgumentError,
+                "Cannot resolve owner #{name.inspect}: missing params[#{param_key}] " \
+                "and ##{name}"
+        end
+      end
+
+      def set_api_key
+        @api_key = api_keys_scope.find(params[:id])
+      end
+
+      def api_keys_scope
+        @api_key_owner.api_keys.active
+      end
+
+      def api_key_params
+        params.require(:api_key).permit(:name, :permission)
+      end
+
+      def raw_token_flash_key
+        RailsApiKeys::UI.configuration.raw_token_flash_key
+      end
+
+      def redirect_back_after_change(**flash_options)
+        redirect_back fallback_location: mount_index_path, allow_other_host: false, **flash_options
+      end
+
+      def mount_index_path
+        path = request.path
+        path = path.sub(%r{/[^/]+\z}, "") if action_name == "destroy"
+        path
+      end
+
+      def authorize_api_key!(action, record)
+        mount_auth = mount_options[:authorize]
+        return mount_auth.call(self, action, record) if mount_auth
+
+        config_auth = RailsApiKeys::UI.configuration.authorize
+        return config_auth.call(self, action, record) if config_auth
+
+        if defined?(Pundit)
+          policy_class = RailsApiKeys::UI.configuration.policy_class.constantize
+          query = :"#{action}?"
+          user = respond_to?(:pundit_user, true) ? pundit_user : current_user
+          Pundit.authorize(user, record, query, policy_class: policy_class)
+        else
+          true
+        end
+      end
+
+      def serialize_key(api_key)
+        {
+          id: api_key.id,
+          name: api_key.name,
+          permission: api_key.permission,
+          token_display_prefix: api_key.token_display_prefix,
+          last_used_at: api_key.last_used_at,
+          created_at: api_key.created_at,
+          revoked_at: api_key.revoked_at
+        }
+      end
+    end
+  end
+end

data/app/controllers/rails_api_keys/ui/application_controller.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module RailsApiKeys
+  module UI
+    # Inherits the host ApplicationController (Devise session, layout, CSRF).
+    # Override via +config.parent_controller+ only when generating a host controller.
+    class ApplicationController < ::ApplicationController
+    end
+  end
+end

data/app/helpers/rails_api_keys/ui/api_keys_helper.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module RailsApiKeys
+  module UI
+    module ApiKeysHelper
+      # Renders the embeddable API keys panel (list + create/reveal modals).
+      #
+      # Reads the reveal-once raw token from flash when +raw_token+ is omitted.
+      #
+      # @param api_keys [Enumerable]
+      # @param create_path [String]
+      # @param destroy_path [Proc, #call] receives an api_key, returns path
+      # @param raw_token [String, nil]
+      def rails_api_keys_ui_panel(api_keys:, create_path:, destroy_path:, raw_token: nil)
+        render partial: "rails_api_keys/ui/api_keys/panel",
+               locals: {
+                 api_keys: api_keys,
+                 create_path: create_path,
+                 destroy_path: destroy_path,
+                 raw_token: raw_token.nil? ? flash[RailsApiKeys::UI.configuration.raw_token_flash_key] : raw_token
+               }
+      end
+
+      # Inlines the gem stylesheet once per render (no asset pipeline required).
+      # Disable with +config.include_stylesheet = false+ when the host supplies styles.
+      def rails_api_keys_ui_stylesheet
+        return "".html_safe unless RailsApiKeys::UI.configuration.include_stylesheet
+        return "".html_safe if @_rails_api_keys_ui_stylesheet_rendered
+
+        @_rails_api_keys_ui_stylesheet_rendered = true
+        content_tag(:style, ApiKeysHelper.stylesheet_contents, type: "text/css")
+      end
+
+      def self.stylesheet_path
+        Engine.root.join("app/assets/stylesheets/rails_api_keys/ui.css")
+      end
+
+      def self.stylesheet_contents
+        @stylesheet_contents ||= File.read(stylesheet_path).html_safe
+      end
+    end
+  end
+end

data/app/javascript/rails_api_keys/ui/controllers/clipboard_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["source", "feedback"]
+
+  async copy() {
+    const value = this.sourceTarget.value
+    try {
+      await navigator.clipboard.writeText(value)
+    } catch (_error) {
+      this.sourceTarget.select()
+      document.execCommand("copy")
+    }
+
+    if (this.hasFeedbackTarget) {
+      this.feedbackTarget.classList.remove("hidden")
+    }
+  }
+}

data/app/javascript/rails_api_keys/ui/controllers/modal_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["modal", "backdrop", "panel"]
+  static values = { openOnConnect: Boolean }
+
+  connect() {
+    if (this.openOnConnectValue) {
+      this.open()
+      return
+    }
+
+    if (this.hasModalTarget) {
+      this.modalTarget.classList.add("hidden")
+    }
+  }
+
+  open() {
+    if (this.hasModalTarget) {
+      this.modalTarget.classList.remove("hidden")
+      document.body.classList.add("overflow-hidden")
+    }
+  }
+
+  close() {
+    if (this.hasModalTarget) {
+      this.modalTarget.classList.add("hidden")
+      document.body.classList.remove("overflow-hidden")
+    }
+  }
+
+  closeOnBackdropClick(event) {
+    if (event.target === this.backdropTarget) {
+      this.close()
+    }
+  }
+
+  closeOnEscape(event) {
+    if (event.key === "Escape") {
+      this.close()
+    }
+  }
+}

data/app/policies/rails_api_keys/ui/api_key_policy.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module RailsApiKeys
+  module UI
+    # Default Pundit policy: Devise +current_user+ may manage their own keys.
+    class ApiKeyPolicy
+      attr_reader :user, :record
+
+      def initialize(user, record)
+        @user = user
+        @record = record
+      end
+
+      def index?
+        user.present?
+      end
+
+      def create?
+        user.present? && owner_matches_user?
+      end
+
+      def destroy?
+        user.present? && owner_matches_user?
+      end
+
+      class Scope
+        def initialize(user, scope)
+          @user = user
+          @scope = scope
+        end
+
+        def resolve
+          return @scope.none unless @user
+
+          @scope.where(owner: @user)
+        end
+      end
+
+      private
+
+      def owner_matches_user?
+        owner = record.respond_to?(:owner) ? record.owner : nil
+        return true if owner.nil?
+
+        owner == user
+      end
+    end
+  end
+end