api_keys 0.2.1 → 0.3.0

data/Rakefile

@@ -16,17 +16,22 @@ RDoc::Task.new(:rdoc) do |rdoc|
   rdoc.rdoc_files.include("lib/**/*.rb")
 end
 
-APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
-load "rails/tasks/engine.rake"
+# Removed loading of engine tasks to avoid pulling in dummy app/vendor tests
+# APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+# load "rails/tasks/engine.rake"
 
-load "rails/tasks/statistics.rake"
+# Removed Rails statistics task; not needed for gem tests
+# load "rails/tasks/statistics.rake"
 
 require "rake/testtask"
 
+# Ensure any test task created by engine.rake is cleared so only this suite runs
+Rake::Task[:test].clear if Rake::Task.task_defined?(:test)
+
 Rake::TestTask.new(:test) do |t|
   t.libs << "test"
-  t.pattern = "test/**/*_test.rb"
   t.verbose = false
+  t.test_files = FileList['test/**/*_test.rb'].exclude('test/dummy/**/*')
 end
 
 task default: :test

data/app/controllers/api_keys/keys_controller.rb

@@ -4,13 +4,31 @@ module ApiKeys
   # Controller for managing API keys belonging to the current owner.
   class KeysController < ApplicationController
     before_action :set_api_key, only: [:show, :edit, :update, :revoke]
+    helper_method :key_types_feature_enabled?
 
     # GET /keys
     def index
-      # Fetch only active keys for the main list, maybe sorted by creation date
-      @api_keys = current_api_keys_owner.api_keys.active.order(created_at: :desc)
+      # Start with all keys for the owner
+      base_scope = current_api_keys_owner.api_keys
+
+      # Filter by environment if key_types feature is enabled and cross-environment is disabled
+      if key_types_feature_enabled? && !ApiKeys.configuration.dashboard_allow_cross_environment
+        current_env = resolve_current_environment
+        base_scope = base_scope.where(environment: [current_env.to_s, nil, ""])
+      end
+
+      # Fetch only active keys for the main list, sorted by creation date
+      @api_keys = base_scope.active.order(created_at: :desc)
       # Optionally, fetch inactive ones for a separate section or filter
-      @inactive_api_keys = current_api_keys_owner.api_keys.inactive.order(created_at: :desc)
+      @inactive_api_keys = base_scope.inactive.order(created_at: :desc)
+
+      # When key_types feature is enabled, separate publishable and secret keys
+      if key_types_feature_enabled?
+        @publishable_keys = @api_keys.select(&:public_key_type?)
+        @secret_keys = @api_keys.reject(&:public_key_type?)
+        @inactive_publishable_keys = @inactive_api_keys.select(&:public_key_type?)
+        @inactive_secret_keys = @inactive_api_keys.reject(&:public_key_type?)
+      end
     end
 
     # GET /keys/:id
@@ -41,7 +59,8 @@ module ApiKeys
         @api_key = current_api_keys_owner.create_api_key!(
           name: api_key_params[:name],
           scopes: api_key_params[:scopes],
-          expires_at: parse_expiration(api_key_params[:expires_at_preset])
+          expires_at: parse_expiration(api_key_params[:expires_at_preset]),
+          key_type: api_key_params[:key_type].presence&.to_sym
           # Metadata could be added here if needed
         )
 
@@ -81,12 +100,13 @@ module ApiKeys
 
     # POST /keys/:id/revoke
     def revoke
-      if @api_key.revoke!
-        redirect_to keys_path, notice: "API key revoked successfully."
-      else
-        # This shouldn't typically fail unless there's a callback issue
-        redirect_to keys_path, alert: "Failed to revoke API key."
-      end
+      @api_key.revoke!
+      redirect_to keys_path, notice: "API key revoked successfully."
+    rescue ApiKeys::Errors::KeyNotRevocableError
+      redirect_to keys_path, alert: "This API key cannot be revoked."
+    rescue => e
+      # This shouldn't typically fail unless there's a callback issue
+      redirect_to keys_path, alert: "Failed to revoke API key: #{e.message}"
     end
 
     private
@@ -100,8 +120,9 @@ module ApiKeys
 
     # Only allow a list of trusted parameters through for creation.
     # Added :expires_at_preset for the dropdown selector.
+    # Added :key_type for the key types feature.
     def api_key_params
-      permitted_params = params.require(:api_key).permit(:name, :expires_at_preset, scopes: [])
+      permitted_params = params.require(:api_key).permit(:name, :expires_at_preset, :key_type, scopes: [])
       permitted_params[:scopes]&.reject!(&:blank?) # Filter out blank strings
       permitted_params
     end
@@ -125,5 +146,16 @@ module ApiKeys
       else nil # Default to no expiration if invalid preset
       end
     end
+
+    # Check if key types feature is enabled
+    def key_types_feature_enabled?
+      ApiKeys.configuration.key_types.present? && ApiKeys.configuration.key_types.any?
+    end
+
+    # Get the current environment from configuration
+    def resolve_current_environment
+      env_config = ApiKeys.configuration.current_environment
+      env_config.respond_to?(:call) ? env_config.call : env_config
+    end
   end
 end

data/app/controllers/api_keys/security_controller.rb

@@ -6,11 +6,19 @@ module ApiKeys
     # Skip the user authentication requirement for these static pages
     # as they contain general information.
     skip_before_action :authenticate_api_keys_owner!, only: [:best_practices]
+    helper_method :key_types_feature_enabled?
 
     # GET /security/best-practices
     def best_practices
       # Renders app/views/api_keys/security/best_practices.html.erb
       # The view will contain the static content.
     end
+
+    private
+
+    # Check if key types feature is enabled
+    def key_types_feature_enabled?
+      ApiKeys.configuration.key_types.present? && ApiKeys.configuration.key_types.any?
+    end
   end
 end

data/app/views/api_keys/keys/_empty_state.html.erb

@@ -0,0 +1,9 @@
+<%# Partial for displaying empty state when no keys exist %>
+<%# Locals: message (optional) - Custom message to display %>
+
+<% message ||= "You don't have any API keys yet!" %>
+
+<div class="api-keys-empty-state" style="text-align: center; padding: 2em;">
+  <h4><%= message %></h4>
+  <p>Create your first API key to get started.</p>
+</div>

data/app/views/api_keys/keys/_form.html.erb

@@ -13,6 +13,35 @@
 
   <%# Fields only available on NEW %>
   <% unless api_key.persisted? %>
+    <%# Key Type selector (only shown when key_types feature is enabled) %>
+    <% if ApiKeys.configuration.key_types.present? && ApiKeys.configuration.key_types.any? %>
+      <div>
+        <%= form.label :key_type, "Key Type" %>
+        <%= form.select :key_type,
+            options_for_select(
+              ApiKeys.configuration.key_types.map { |type, config|
+                label = type.to_s.humanize
+                label += " (#{config[:prefix]}_)" if config[:prefix]
+                [label, type.to_s]
+              },
+              api_key.key_type
+            ),
+            { prompt: "Select key type..." }
+        %>
+        <% ApiKeys.configuration.key_types.each do |type, config| %>
+          <% if config[:permissions] != :all %>
+            <small style="display: block; color: #666;">
+              <strong><%= type.to_s.humanize %>:</strong>
+              Limited to <%= config[:permissions]&.join(", ") || "no" %> permissions
+              <% unless config.fetch(:revocable, true) %>
+                <em>(cannot be revoked)</em>
+              <% end %>
+            </small>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
     <div>
       <%= form.label :name, "Name (optional)" %>
       <%= form.text_field :name, placeholder: "e.g., myproject-production-key" %>
@@ -52,7 +81,7 @@
                                scope, # Value submitted when checked
                                nil # Value submitted when unchecked (not needed here)
                                %>
-            <%= form.label "scopes_#{scope.parameterize}", scope.humanize, class: "form-check-label" %>
+            <%= form.label "scopes_#{scope.parameterize}", class: "form-check-label" do %><code><%= scope %></code><% end %>
           </div>
         <% end %>
       </div>
@@ -85,7 +114,7 @@
                                nil # Value submitted when unchecked (not needed here)
                                %>
             <%# Using the scope name directly for the label's `for` attribute requires matching the checkbox ID %>
-            <%= form.label "scopes_#{scope.parameterize}_edit", scope.humanize, class: "form-check-label" %>
+            <%= form.label "scopes_#{scope.parameterize}_edit", class: "form-check-label" do %><code><%= scope %></code><% end %>
           </div>
         <% end %>
       </div>

data/app/views/api_keys/keys/_key_actions.html.erb

@@ -0,0 +1,20 @@
+<%# Partial for displaying key action buttons (edit, revoke) %>
+<%# Locals: key (required) - The ApiKey record %>
+
+<% if key.active? %>
+  <%= link_to api_keys.edit_key_path(key), title: "Edit Key", class: "api-keys-action-edit" do %>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16.793 2.793a3.121 3.121 0 1 1 4.414 4.414l-8.5 8.5A1 1 0 0 1 12 16H9a1 1 0 0 1-1-1v-3a1 1 0 0 1 .293-.707l8.5-8.5Zm3 1.414a1.121 1.121 0 0 0-1.586 0L10 12.414V14h1.586l8.207-8.207a1.121 1.121 0 0 0 0-1.586ZM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-4a1 1 0 1 1 2 0v4a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h4a1 1 0 1 1 0 2H6Z" clip-rule="evenodd"></path></svg>
+  <% end %>
+
+  <% if key.revocable? %>
+    <%= button_to api_keys.revoke_key_path(key), title: "Revoke Key", class: "api-keys-action-revoke", data: { turbo_method: :post, turbo_confirm: "Are you sure you want to revoke this key? It will stop working immediately." } do %>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.556 4a1 1 0 0 0-.97.751l-.292 1.14h5.421l-.293-1.14A1 1 0 0 0 13.453 4h-2.897Zm6.224 1.892-.421-1.639A3 3 0 0 0 13.453 2h-2.897A3 3 0 0 0 7.65 4.253l-.421 1.639H4a1 1 0 1 0 0 2h.1l1.215 11.425A3 3 0 0 0 8.3 22h7.4a3 3 0 0 0 2.984-2.683l1.214-11.425H20a1 1 0 1 0 0-2h-3.22Zm1.108 2H6.112l1.192 11.214A1 1 0 0 0 8.3 20h7.4a1 1 0 0 0 .995-.894l1.192-11.214ZM10 10a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1Z" clip-rule="evenodd"></path></svg>
+    <% end %>
+  <% else %>
+    <span title="This key cannot be revoked" class="api-keys-action-disabled" style="color: var(--api-keys-muted-color); cursor: help;">
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" clip-rule="evenodd"></path></svg>
+    </span>
+  <% end %>
+<% else %>
+  &mdash;
+<% end %>

data/app/views/api_keys/keys/_key_badges.html.erb

@@ -0,0 +1,17 @@
+<%# Partial for displaying key type and environment badges %>
+<%# Locals: key (required) - The ApiKey record %>
+
+<% if key.key_type.present? %>
+  <% type_config = key.key_type_config %>
+  <% is_publishable = type_config&.dig(:revocable) == false %>
+  <span class="api-keys-badge api-keys-badge-type <%= is_publishable ? 'api-keys-badge-publishable' : 'api-keys-badge-secret' %>" style="display: inline-block; padding: 2px 6px; font-size: 0.75em; border-radius: 3px; background-color: var(<%= is_publishable ? '--api-keys-badge-publishable-bg' : '--api-keys-badge-secret-bg' %>); color: var(<%= is_publishable ? '--api-keys-badge-publishable-color' : '--api-keys-badge-secret-color' %>); margin-left: 4px;">
+    <%= key.key_type.humanize %>
+  </span>
+<% end %>
+
+<% if key.environment.present? %>
+  <% is_live = key.environment == 'live' %>
+  <span class="api-keys-badge api-keys-badge-env <%= is_live ? 'api-keys-badge-live' : 'api-keys-badge-test' %>" style="display: inline-block; padding: 2px 6px; font-size: 0.75em; border-radius: 3px; background-color: var(<%= is_live ? '--api-keys-badge-live-bg' : '--api-keys-badge-test-bg' %>); color: var(<%= is_live ? '--api-keys-badge-live-color' : '--api-keys-badge-test-color' %>); margin-left: 4px;">
+    <%= key.environment.upcase %>
+  </span>
+<% end %>

data/app/views/api_keys/keys/_key_row.html.erb

@@ -1,27 +1,25 @@
-<tr>
-  <td>
-    <%# Status indicator (no text originally, keeping it that way unless specified otherwise) %>
-    <% if key.active? %>
-      <span style="color: green;"></span>
-    <% elsif key.revoked? %>
-      <span style="color: orange;">[Revoked]</span>
-    <% elsif key.expired? %>
-      <span style="color: red;">[Expired]</span>
-    <% end %>
-    <%= key.name.presence || "Secret key" %>
+<%# Partial for displaying a single API key row in the table %>
+<%# Locals: key (required) - The ApiKey record %>
+
+<tr class="api-keys-row <%= 'api-keys-row-inactive' if defined?(inactive) && inactive %>">
+  <td class="api-keys-cell-name">
+    <%= render partial: 'api_keys/keys/key_status', locals: { key: key } %>
+    <%= key.name.presence || (key.key_type.present? ? "#{key.key_type.humanize} key" : "API key") %>
+    <%= render partial: 'api_keys/keys/key_badges', locals: { key: key } %>
   </td>
-  <td><code><%= key.masked_token %></code></td>
 
+  <td class="api-keys-cell-token api-keys-token-cell">
+    <%= render partial: 'api_keys/keys/token_display', locals: { key: key } %>
+  </td>
 
-  <td title="<%= key.created_at.strftime('%Y-%m-%d %H:%M:%S %Z') %>">
+  <td class="api-keys-cell-created" title="<%= key.created_at.strftime('%Y-%m-%d %H:%M:%S %Z') %>">
     <%= time_ago_in_words(key.created_at) %> ago
   </td>
 
-
-  <td>
+  <td class="api-keys-cell-expires">
     <% if key.expires_at? %>
       <% if key.expired? %>
-        <strong style="color: red;" title="<%= key.expires_at.strftime('%Y-%m-%d %H:%M:%S %Z') %>">
+        <strong style="color: var(--api-keys-status-expired-color);" title="<%= key.expires_at.strftime('%Y-%m-%d %H:%M:%S %Z') %>">
           Expired <%= time_ago_in_words(key.expires_at) %> ago
         </strong>
       <% else %>
@@ -34,39 +32,27 @@
     <% end %>
   </td>
 
-
-  <td>
+  <td class="api-keys-cell-last-used">
     <% if key.last_used_at? %>
       <span title="<%= key.last_used_at.strftime('%Y-%m-%d %H:%M:%S %Z') %>">
         <%= time_ago_in_words(key.last_used_at) %> ago
       </span>
-      <%# TODO: Add relative time check (e.g., "within last 3 months") %>
     <% else %>
       <em>Never used</em>
     <% end %>
   </td>
 
-
-  <td>
+  <td class="api-keys-cell-scopes">
     <% if key.scopes.present? %>
       <% key.scopes.each do |scope| %>
-        <kbd class="tag is-small"><%= scope %></kbd>
+        <kbd class="api-keys-scope-tag tag is-small"><%= scope %></kbd>
       <% end %>
     <% else %>
       &mdash;
     <% end %>
   </td>
-  <td class="api-keys-action-buttons">
-    <% if key.active? %>
-      <%= link_to api_keys.edit_key_path(key), title: "Edit Key" do %>
-        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16.793 2.793a3.121 3.121 0 1 1 4.414 4.414l-8.5 8.5A1 1 0 0 1 12 16H9a1 1 0 0 1-1-1v-3a1 1 0 0 1 .293-.707l8.5-8.5Zm3 1.414a1.121 1.121 0 0 0-1.586 0L10 12.414V14h1.586l8.207-8.207a1.121 1.121 0 0 0 0-1.586ZM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-4a1 1 0 1 1 2 0v4a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h4a1 1 0 1 1 0 2H6Z" clip-rule="evenodd"></path></svg>
-      <% end %>
-      <%= button_to api_keys.revoke_key_path(key), title: "Revoke Key", data: { turbo_method: :post, turbo_confirm: "Are you sure you want to revoke this key? It will stop working immediately." } do %>
-        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.556 4a1 1 0 0 0-.97.751l-.292 1.14h5.421l-.293-1.14A1 1 0 0 0 13.453 4h-2.897Zm6.224 1.892-.421-1.639A3 3 0 0 0 13.453 2h-2.897A3 3 0 0 0 7.65 4.253l-.421 1.639H4a1 1 0 1 0 0 2h.1l1.215 11.425A3 3 0 0 0 8.3 22h7.4a3 3 0 0 0 2.984-2.683l1.214-11.425H20a1 1 0 1 0 0-2h-3.22Zm1.108 2H6.112l1.192 11.214A1 1 0 0 0 8.3 20h7.4a1 1 0 0 0 .995-.894l1.192-11.214ZM10 10a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1Z" clip-rule="evenodd"></path></svg>
-      <% end %>
-    <% else %>
-      <%# No actions available for inactive/revoked/expired keys %>
-      &mdash;
-    <% end %>
+
+  <td class="api-keys-cell-actions api-keys-action-buttons">
+    <%= render partial: 'api_keys/keys/key_actions', locals: { key: key } %>
   </td>
-</tr>
+</tr>

data/app/views/api_keys/keys/_key_status.html.erb

@@ -0,0 +1,10 @@
+<%# Partial for displaying key status indicator %>
+<%# Locals: key (required) - The ApiKey record %>
+
+<% if key.active? %>
+  <span class="api-keys-status api-keys-status-active" style="color: var(--api-keys-status-active-color);"></span>
+<% elsif key.revoked? %>
+  <span class="api-keys-status api-keys-status-revoked" style="color: var(--api-keys-status-revoked-color);">[Revoked]</span>
+<% elsif key.expired? %>
+  <span class="api-keys-status api-keys-status-expired" style="color: var(--api-keys-status-expired-color);">[Expired]</span>
+<% end %>

data/app/views/api_keys/keys/_keys_table.html.erb

@@ -12,7 +12,7 @@
         <thead>
           <tr>
             <th>Name</th>
-            <th>Secret Key</th>
+            <th>API Key</th>
             <th>Created</th>
             <th>Expires</th>
             <th>Last Used</th>
@@ -38,12 +38,7 @@
         </tbody>
       </table>
     <% else %>
-      <div style="text-align: center; padding: 2em;">
-        <h4>You don't have any API keys yet!</h4>
-        <p>Create your first API key to get started.</p>
-        <%# Consider adding a primary "Create Key" button here %>
-        <%#= link_to "Create New API Key", new_key_path, class: "button primary" %>
-      </div>
+      <%= render partial: 'api_keys/keys/empty_state' %>
     <% end %>
   </div>
 

data/app/views/api_keys/keys/_publishable_keys.html.erb

@@ -0,0 +1,40 @@
+<%# Partial for displaying publishable keys section %>
+<%# Locals: active_keys (Active publishable keys), inactive_keys (Inactive publishable keys) %>
+
+<section class="api-keys-section api-keys-publishable-section" aria-labelledby="publishable-keys-heading">
+  <h2 id="publishable-keys-heading">Publishable Keys</h2>
+  <p class="api-keys-section-description">
+    These keys are safe to embed in client-side applications and browser code.
+    You can view them anytime.
+  </p>
+
+  <div class="api-keys-table-wrapper">
+    <% all_keys = active_keys + inactive_keys %>
+    <% if all_keys.any? %>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>API Key</th>
+            <th>Created</th>
+            <th>Expires</th>
+            <th>Last Used</th>
+            <th>Permissions</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% active_keys.each do |key| %>
+            <%= render partial: 'api_keys/keys/key_row', locals: { key: key } %>
+          <% end %>
+
+          <% inactive_keys.each do |key| %>
+            <%= render partial: 'api_keys/keys/key_row', locals: { key: key, inactive: true } %>
+          <% end %>
+        </tbody>
+      </table>
+    <% else %>
+      <%= render partial: 'api_keys/keys/empty_state', locals: { message: "No publishable keys yet." } %>
+    <% end %>
+  </div>
+</section>

data/app/views/api_keys/keys/_secret_keys.html.erb

@@ -0,0 +1,39 @@
+<%# Partial for displaying secret keys section %>
+<%# Locals: active_keys (Active secret keys), inactive_keys (Inactive secret keys) %>
+
+<section class="api-keys-section api-keys-secret-section" aria-labelledby="secret-keys-heading">
+  <h2 id="secret-keys-heading">Secret Keys</h2>
+  <p class="api-keys-section-description">
+    Keep these private. Never expose in client-side code or share publicly.
+  </p>
+
+  <div class="api-keys-table-wrapper">
+    <% all_keys = active_keys + inactive_keys %>
+    <% if all_keys.any? %>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>API Key</th>
+            <th>Created</th>
+            <th>Expires</th>
+            <th>Last Used</th>
+            <th>Permissions</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% active_keys.each do |key| %>
+            <%= render partial: 'api_keys/keys/key_row', locals: { key: key } %>
+          <% end %>
+
+          <% inactive_keys.each do |key| %>
+            <%= render partial: 'api_keys/keys/key_row', locals: { key: key, inactive: true } %>
+          <% end %>
+        </tbody>
+      </table>
+    <% else %>
+      <%= render partial: 'api_keys/keys/empty_state', locals: { message: "No secret keys yet." } %>
+    <% end %>
+  </div>
+</section>

data/app/views/api_keys/keys/_show_token.html.erb

@@ -3,7 +3,11 @@
 
 <h2>Save your key</h2>
 
-<p>Please save your secret key in a safe place since <strong>you won't be able to view it again</strong>. Keep it secure, as anyone with your API key can make requests on your behalf. If you do lose it, you'll need to generate a new one.</p>
+<% if api_key.public_key_type? %>
+  <p>Here's your <%= api_key.key_type.humanize.downcase %> key. This key is designed to be embedded in client-side applications. You can view it again anytime from your dashboard.</p>
+<% else %>
+  <p>Please save your API key in a safe place since <strong>you won't be able to view it again</strong>. Keep it secure, as anyone with your API key can make requests on your behalf. If you lose it, you'll need to generate a new one.</p>
+<% end %>
 
 <p>
   <%= link_to api_keys.security_best_practices_path, class: "text-primary api-keys-align-center" do %>

data/app/views/api_keys/keys/_token_display.html.erb

@@ -0,0 +1,11 @@
+<%# Partial for displaying an API key token with optional show/copy functionality %>
+<%# Locals: key (required) - The ApiKey record %>
+
+<% if key.public_key_type? && key.viewable_token.present? %>
+  <span class="token-masked"><code><%= key.masked_token %></code></span>
+  <span class="token-full" style="display: none;"><code style="word-break: break-all;"><%= key.viewable_token %></code></span>
+  <button type="button" class="btn-show-token" style="margin-left: 8px; font-size: 0.75em; padding: 2px 6px; cursor: pointer;" title="Show full token">Show</button>
+  <button type="button" class="btn-copy-token" style="display: none; margin-left: 4px; font-size: 0.75em; padding: 2px 6px; cursor: pointer;" title="Copy to clipboard" data-token="<%= key.viewable_token %>">Copy</button>
+<% else %>
+  <code><%= key.masked_token %></code>
+<% end %>

data/app/views/api_keys/keys/index.html.erb

@@ -7,7 +7,7 @@
     <div class="col api-keys-align-center is-right">
       <%= link_to new_key_path, class: "button primary api-keys-align-center", role: "button" do %>
         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 5a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H6a1 1 0 1 1 0-2h5V6a1 1 0 0 1 1-1Z" clip-rule="evenodd"></path></svg>
-        <span>&nbsp;Create new secret key</span>
+        <span>&nbsp;Create new API key</span>
       <% end %>
     </div>
 
@@ -15,12 +15,44 @@
 
 <div>
 
-  <p>Do not share your API key with others or expose it in the browser or other client-side code. <%= link_to api_keys.security_best_practices_path, class: "text-primary api-keys-align-center" do %>
-    Learn more&nbsp;
-    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M15 5a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L17.586 5H15ZM4 7a3 3 0 0 1 3-3h3a1 1 0 1 1 0 2H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3a1 1 0 1 1 2 0v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7Z" clip-rule="evenodd"></path></svg>
-  <% end %>
+  <% if key_types_feature_enabled? %>
+    <% has_publishable_keys = @publishable_keys.any? || @inactive_publishable_keys.any? %>
+
+    <p class="api-keys-info-text">
+      <% if has_publishable_keys %>
+        <strong>Secret keys</strong> should never be shared or exposed publicly.
+        <strong>Publishable keys</strong> can be safely embedded in client applications.
+      <% else %>
+        Do not share your API key with others or expose it in the browser or other client-side code.
+      <% end %>
+      <%= link_to api_keys.security_best_practices_path, class: "text-primary api-keys-align-center" do %>
+        Learn more&nbsp;
+        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M15 5a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L17.586 5H15ZM4 7a3 3 0 0 1 3-3h3a1 1 0 1 1 0 2H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3a1 1 0 1 1 2 0v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7Z" clip-rule="evenodd"></path></svg>
+      <% end %>
+    </p>
 
-  <%# Render the reusable table partial %>
-  <%= render partial: 'keys_table', locals: { active_keys: @api_keys, inactive_keys: @inactive_api_keys } %>
+    <%# Render secret keys section first (primary use case) %>
+    <%= render partial: 'secret_keys', locals: {
+      active_keys: @secret_keys,
+      inactive_keys: @inactive_secret_keys
+    } %>
+
+    <%# Only render publishable keys section if there are any %>
+    <% if has_publishable_keys %>
+      <%= render partial: 'publishable_keys', locals: {
+        active_keys: @publishable_keys,
+        inactive_keys: @inactive_publishable_keys
+      } %>
+    <% end %>
+
+  <% else %>
+    <p>Do not share your API key with others or expose it in the browser or other client-side code. <%= link_to api_keys.security_best_practices_path, class: "text-primary api-keys-align-center" do %>
+      Learn more&nbsp;
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M15 5a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L17.586 5H15ZM4 7a3 3 0 0 1 3-3h3a1 1 0 1 1 0 2H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3a1 1 0 1 1 2 0v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7Z" clip-rule="evenodd"></path></svg>
+    <% end %>
+
+    <%# Render the reusable table partial (legacy mode - single table) %>
+    <%= render partial: 'keys_table', locals: { active_keys: @api_keys, inactive_keys: @inactive_api_keys } %>
+  <% end %>
 
-</div>
+</div>