api_keys 0.3.0 → 0.4.0

data/app/controllers/api_keys/keys_controller.rb

@@ -39,7 +39,7 @@ module ApiKeys
       # We need to retrieve the plaintext token stored temporarily
       # after creation. This relies on how we handle creation.
       # We'll likely store it in the session flash or pass it directly.
-      @plaintext_token = session.delete(:plaintext_api_key) # Retrieve and delete from session
+      @plaintext_token = ApiKeys::TokenSession.retrieve_once(session, api_key: @api_key)
       unless @plaintext_token
         # If accessed directly without the token, redirect or show an error
         redirect_to keys_path, alert: "API key token can only be shown once immediately after creation."
@@ -53,22 +53,21 @@ module ApiKeys
 
     # POST /keys
     def create
+      submitted_params = api_key_params
+
       # Use the HasApiKeys helper method to create the key
       begin
         # create_api_key! now returns the ApiKey instance
         @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]),
-          key_type: api_key_params[:key_type].presence&.to_sym
+          name: submitted_params[:name],
+          scopes: submitted_params[:scopes],
+          expires_at: parse_expiration(submitted_params[:expires_at_preset]),
+          key_type: submitted_params[:key_type].presence
           # Metadata could be added here if needed
         )
 
-        # Get the plaintext token from the instance's attr_reader
-        plaintext_token = @api_key.token
-
         # Store the plaintext token in session to display on the show page
-        session[:plaintext_api_key] = plaintext_token
+        ApiKeys::TokenSession.store(session, @api_key)
 
         redirect_to key_path(@api_key)
       rescue ActiveRecord::RecordInvalid => e
@@ -76,11 +75,18 @@ module ApiKeys
         @api_key = e.record # Get the invalid ApiKey instance
         flash.now[:alert] = "Failed to create API key: #{e.record.errors.full_messages.join(', ')}"
         render :new, status: :unprocessable_entity
-      rescue => e # Catch other potential errors
-        flash.now[:alert] = "An unexpected error occurred: #{e.message}"
-        @api_key = current_api_keys_owner.api_keys.build(api_key_params) # Rebuild form
+      rescue ArgumentError
+        flash.now[:alert] = "Failed to create API key: invalid options."
+        @api_key = rebuild_api_key_for_form(submitted_params)
+        render :new, status: :unprocessable_entity
+      rescue StandardError => error
+        log_error "[ApiKeys Dashboard] Unexpected key creation failure (#{error.class}); request ID: #{request.uuid}"
+        flash.now[:alert] = "An unexpected error occurred while creating the API key."
+        @api_key = rebuild_api_key_for_form(submitted_params)
         render :new, status: :unprocessable_entity
       end
+    rescue ActionController::ParameterMissing
+      head :bad_request
     end
 
     # GET /keys/:id/edit
@@ -96,6 +102,8 @@ module ApiKeys
         flash.now[:alert] = "Failed to update API key: #{@api_key.errors.full_messages.join(', ')}"
         render :edit, status: :unprocessable_entity
       end
+    rescue ActionController::ParameterMissing
+      head :bad_request
     end
 
     # POST /keys/:id/revoke
@@ -104,9 +112,9 @@ module ApiKeys
       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}"
+    rescue StandardError => error
+      log_error "[ApiKeys Dashboard] Unexpected key revocation failure (#{error.class}); key ID: #{@api_key&.id}; request ID: #{request.uuid}"
+      redirect_to keys_path, alert: "Failed to revoke API key."
     end
 
     private
@@ -122,14 +130,20 @@ module ApiKeys
     # 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, :key_type, scopes: [])
+      submitted = params.require(:api_key)
+      raise ActionController::ParameterMissing, :api_key unless submitted.respond_to?(:permit)
+
+      permitted_params = submitted.permit(:name, :expires_at_preset, :key_type, scopes: [])
       permitted_params[:scopes]&.reject!(&:blank?) # Filter out blank strings
       permitted_params
     end
 
     # Only allow updating name and scopes.
     def api_key_update_params
-      permitted_params = params.require(:api_key).permit(:name, scopes: [])
+      submitted = params.require(:api_key)
+      raise ActionController::ParameterMissing, :api_key unless submitted.respond_to?(:permit)
+
+      permitted_params = submitted.permit(:name, scopes: [])
       permitted_params[:scopes]&.reject!(&:blank?) # Filter out blank strings
       permitted_params
     end
@@ -143,10 +157,18 @@ module ApiKeys
       when "90_days" then 90.days.from_now
       when "365_days" then 365.days.from_now
       when "no_expiration" then nil
-      else nil # Default to no expiration if invalid preset
+      when nil, "" then nil
+      else raise ArgumentError, "Invalid expiration preset"
       end
     end
 
+    def rebuild_api_key_for_form(submitted_params)
+      current_api_keys_owner.api_keys.build(
+        name: submitted_params[:name],
+        scopes: submitted_params[:scopes]
+      )
+    end
+
     # Check if key types feature is enabled
     def key_types_feature_enabled?
       ApiKeys.configuration.key_types.present? && ApiKeys.configuration.key_types.any?

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

@@ -3,7 +3,7 @@
 
 <% message ||= "You don't have any API keys yet!" %>
 
-<div class="api-keys-empty-state" style="text-align: center; padding: 2em;">
+<div class="api-keys-empty-state">
   <h4><%= message %></h4>
   <p>Create your first API key to get started.</p>
 </div>

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

@@ -1,7 +1,7 @@
 <%# Shared form for creating and editing API Keys %>
 <%= form_with(model: [:keys, api_key], url: (api_key.persisted? ? key_path(api_key) : keys_path), local: true) do |form| %>
   <% if api_key.errors.any? %>
-    <div style="color: red;">
+    <div class="api-keys-form-errors">
       <strong><%= pluralize(api_key.errors.count, "error") %> prohibited this API key from being saved:</strong>
       <ul>
         <% api_key.errors.full_messages.each do |message| %>
@@ -30,7 +30,7 @@
         %>
         <% ApiKeys.configuration.key_types.each do |type, config| %>
           <% if config[:permissions] != :all %>
-            <small style="display: block; color: #666;">
+            <small class="api-keys-form-help">
               <strong><%= type.to_s.humanize %>:</strong>
               Limited to <%= config[:permissions]&.join(", ") || "no" %> permissions
               <% unless config.fetch(:revocable, true) %>
@@ -132,4 +132,4 @@
       <%= link_to "Cancel", keys_path %>
     <% end %>
   </div>
-<% end %> 
+<% end %>

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

@@ -2,16 +2,16 @@
 <%# 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 %>
+  <%= link_to 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 %>
+    <%= button_to 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;">
+    <span title="This key cannot be revoked" class="api-keys-action-disabled">
       <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 %>

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

@@ -4,14 +4,14 @@
 <% 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;">
+  <span class="api-keys-badge api-keys-badge-type <%= is_publishable ? 'api-keys-badge-publishable' : 'api-keys-badge-secret' %>">
     <%= 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;">
+  <span class="api-keys-badge api-keys-badge-env <%= is_live ? 'api-keys-badge-live' : 'api-keys-badge-test' %>">
     <%= key.environment.upcase %>
   </span>
 <% end %>

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

@@ -19,7 +19,7 @@
   <td class="api-keys-cell-expires">
     <% if key.expires_at? %>
       <% if key.expired? %>
-        <strong style="color: var(--api-keys-status-expired-color);" title="<%= key.expires_at.strftime('%Y-%m-%d %H:%M:%S %Z') %>">
+        <strong class="api-keys-expired-text" title="<%= key.expires_at.strftime('%Y-%m-%d %H:%M:%S %Z') %>">
           Expired <%= time_ago_in_words(key.expires_at) %> ago
         </strong>
       <% else %>

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

@@ -2,9 +2,9 @@
 <%# 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>
+  <span class="api-keys-status api-keys-status-active"></span>
 <% elsif key.revoked? %>
-  <span class="api-keys-status api-keys-status-revoked" style="color: var(--api-keys-status-revoked-color);">[Revoked]</span>
+  <span class="api-keys-status api-keys-status-revoked">[Revoked]</span>
 <% elsif key.expired? %>
-  <span class="api-keys-status api-keys-status-expired" style="color: var(--api-keys-status-expired-color);">[Expired]</span>
+  <span class="api-keys-status api-keys-status-expired">[Expired]</span>
 <% end %>

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

@@ -28,9 +28,6 @@
 
           <%# Render inactive keys below, visually distinct %>
           <% if inactive_keys.any? %>
-            <%# Optional: Add a visual separator if desired %>
-            <%# <tr><td colspan="7" style="border-top: 2px solid #ccc; text-align: center; padding-top: 1em; color: #555;">Inactive Keys</td></tr> %>
-
             <% inactive_keys.each do |key| %>
               <%= render partial: 'api_keys/keys/key_row', locals: { key: key, inactive: true } %>
             <% end %>
@@ -44,4 +41,4 @@
 
 </section>
 
-<%# The separate inactive keys section is now removed as they are integrated above. %>
+<%# The separate inactive keys section is now removed as they are integrated above. %>

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

@@ -10,22 +10,22 @@
 <% end %>
 
 <p>
-  <%= link_to api_keys.security_best_practices_path, class: "text-primary api-keys-align-center" do %>
+  <%= link_to security_best_practices_path, class: "text-primary api-keys-align-center" do %>
     Learn more about API key best practices&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>
 
 
-<div style="padding: 1em; margin: 1em 0; border-radius: 4px;">
+<div class="api-keys-token-panel">
   <div class="card bd-primary">
     <div class="row">
       <div class="col-7 is-vertical-align is-center">
-        <pre id="api-key-token" style="word-wrap: break-word;"><%= plaintext_token %></pre>
+        <pre id="api-key-token" class="api-keys-token-value"><%= plaintext_token %></pre>
       </div>
 
       <div class="col is-vertical-align is-center">
-        <button id="copy-api-key-button" onclick="copyTokenToClipboard()" class="button primary api-keys-align-center">
+        <button id="copy-api-key-button" type="button" class="button primary api-keys-align-center btn-copy-new-token">
           <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M7 5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h2V5Zm2 2h5a3 3 0 0 1 3 3v5h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v2ZM5 9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1H5Z" clip-rule="evenodd"></path></svg>
           <span class="api-keys-button-text">Copy</span>
         </button>
@@ -36,7 +36,7 @@
 
 
   <% if api_key.scopes.present? %>
-    <div style="margin-top: 2em;">
+    <div class="api-keys-token-scopes">
       <p><strong>Permissions</strong></p>
 
       <% if api_key.scopes.present? %>
@@ -49,44 +49,3 @@
     </div>
   <% end %>
 </div>
-
-<%# Simple JavaScript for copy-to-clipboard functionality %>
-<%# Ensure this script is loaded only once if rendering multiple components %>
-<script>
-function copyTokenToClipboard() {
-  const tokenElement = document.getElementById('api-key-token');
-  const copyButton = document.getElementById('copy-api-key-button');
-  const buttonTextElement = copyButton.querySelector('.api-keys-button-text'); // Target the span containing the text
-  const originalButtonText = buttonTextElement.innerHTML; // Store original HTML
-
-  if (navigator.clipboard && tokenElement && copyButton && buttonTextElement) {
-    navigator.clipboard.writeText(tokenElement.textContent || '').then(() => {
-      buttonTextElement.innerHTML = 'Copied!'; // Update text
-      copyButton.classList.add('success'); // Optional: Add class for styling
-      setTimeout(() => {
-        buttonTextElement.innerHTML = originalButtonText; // Revert text
-        copyButton.classList.remove('success'); // Optional: Remove class
-      }, 2000);
-    }).catch(err => {
-      buttonTextElement.innerHTML = 'Failed'; // Update text on error
-      copyButton.classList.add('error'); // Optional: Add class for styling
-      console.error('Failed to copy text: ', err);
-      setTimeout(() => {
-        buttonTextElement.innerHTML = originalButtonText; // Revert text
-        copyButton.classList.remove('error'); // Optional: Remove class
-      }, 2000);
-    });
-  } else {
-    // Fallback or indicate unavailability more clearly if needed
-    buttonTextElement.innerHTML = 'Cannot Copy';
-    copyButton.classList.add('error'); // Optional: Add class for styling
-    console.warn('Clipboard API not available or element missing.');
-    setTimeout(() => {
-      buttonTextElement.innerHTML = originalButtonText; // Revert text
-      copyButton.classList.remove('error'); // Optional: Remove class
-    }, 2000);
-  }
-}
-// Automatically try to copy when the partial is rendered, if desired?
-// document.addEventListener('DOMContentLoaded', copyTokenToClipboard); // Example
-</script> 

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

@@ -3,9 +3,9 @@
 
 <% 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>
+  <span class="token-full" hidden><code class="api-keys-token-break"><%= key.viewable_token %></code></span>
+  <button type="button" class="btn-show-token" title="Show full token">Show</button>
+  <button type="button" class="btn-copy-token" title="Copy to clipboard" data-token="<%= key.viewable_token %>" hidden>Copy</button>
 <% else %>
   <code><%= key.masked_token %></code>
 <% end %>

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

@@ -25,7 +25,7 @@
       <% 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 %>
+      <%= link_to 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 %>
@@ -46,7 +46,7 @@
     <% 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 %>
+    <p>Do not share your API key with others or expose it in the browser or other client-side code. <%= link_to 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 %>

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

@@ -4,9 +4,9 @@
   <%= render partial: 'show_token', locals: { api_key: @api_key, plaintext_token: @plaintext_token } %>
 
   <%# Add navigation links %>
-  <p style="margin-top: 2em;">
+  <p class="api-keys-show-footer">
     <%= link_to ApiKeys.configuration.return_text, ApiKeys.configuration.return_url, class: "button outline" %>
     <%= link_to "All API Keys", keys_path, class: "button" %>
   </p>
 
-</div>
+</div>

data/app/views/api_keys/security/best_practices.html.erb

@@ -10,7 +10,7 @@
       <h2>Understanding Key Types</h2>
 
       <h3>Secret Keys</h3>
-      <p>Secret keys provide full access to your account and should be treated like passwords.</p>
+      <p>Secret keys may grant sensitive or broad access, depending on their configured permissions, and must be treated like passwords.</p>
       <ul>
         <li><strong>Never expose</strong> in client-side code (browsers, mobile apps, desktop apps)</li>
         <li><strong>Never commit</strong> to version control (Git, etc.)</li>
@@ -19,12 +19,12 @@
       </ul>
 
       <h3>Publishable Keys</h3>
-      <p>Publishable keys are designed for client-side use with limited, safe permissions.</p>
+      <p>Publishable keys are intentionally exposed identifiers. They are suitable for client-side use <strong>only when every configured permission is safe for an untrusted public client</strong>.</p>
       <ul>
-        <li><strong>Safe to embed</strong> in browser JavaScript, mobile apps, and public code</li>
-        <li><strong>Limited access</strong> &mdash; cannot perform sensitive operations</li>
+        <li><strong>Assume anyone can copy and abuse them</strong> from browser JavaScript, mobile apps, or public code</li>
+        <li><strong>Grant only public-safe operations</strong> and enforce authorization server-side for every permission</li>
         <li><strong>Always visible</strong> &mdash; you can view the full key anytime in your dashboard</li>
-        <li><strong>Cannot be revoked</strong> &mdash; designed to be long-lived identifiers</li>
+        <li><strong>Cannot be revoked individually</strong> &mdash; maintain an application-level disable/replacement procedure</li>
       </ul>
     </section>
   <% end %>
@@ -76,7 +76,7 @@ Rails.application.credentials.your_service_api_key</code></pre>
     <h3>Monitor Usage</h3>
     <p>Regularly check for unexpected activity spikes or requests from unusual locations, which could indicate a compromised key.</p>
 
-    <h3>Rotate Keys Periodically</h3>
+    <h3>Rotate Secret Keys Periodically</h3>
     <p>Generate new keys and revoke old ones on a regular schedule (e.g., every 90 days). This limits exposure if a key is leaked undetected.</p>
     <p><em>Tip:</em> Create a new key first, update your application, verify it works, then revoke the old key.</p>
 
@@ -91,6 +91,6 @@ Rails.application.credentials.your_service_api_key</code></pre>
 
   <hr>
 
-  <p><%= link_to "Back to API Keys", api_keys.keys_path, class: "text-primary" %></p>
+  <p><%= link_to "Back to API Keys", keys_path, class: "text-primary" %></p>
 
 </article>

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

@@ -4,14 +4,12 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>🔑 API Keys</title>
-  <%# Note: No CSS included here to keep it CSS-framework-agnostic %>
-  <link rel="stylesheet" href="https://unpkg.com/chota@latest">
-  <%# Host application is expected to provide styling %>
+  <%# Self-contained styles: do not load mutable third-party assets on secret-bearing pages. %>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
 </head>
 <body>
-  <style>
+  <style nonce="<%= content_security_policy_nonce %>">
     /*
      * API Keys CSS Variables
      * Override these in your host application to customize the dashboard appearance.
@@ -56,6 +54,92 @@
 
     body {
       font-family: var(--api-keys-font-family);
+      margin: 0;
+      color: var(--font-color, #222);
+      background: var(--bg-color, #fff);
+      line-height: 1.5;
+    }
+
+    .container {
+      width: min(94%, 1080px);
+      margin-inline: auto;
+    }
+
+    .nav, .row {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .nav {
+      justify-content: space-between;
+      min-height: 4rem;
+    }
+
+    .nav-left, .nav-right {
+      display: flex;
+      gap: 1rem;
+    }
+
+    .col { flex: 1; }
+    .col-5 { width: min(100%, 42rem); }
+    .col-7 { flex: 0 0 58%; }
+    .col-8 { width: min(100%, 54rem); }
+    .is-right { justify-content: flex-end; }
+    .is-center { justify-content: center; }
+    .text-center { text-align: center; }
+
+    input, select, button, .button {
+      box-sizing: border-box;
+      font: inherit;
+    }
+
+    input[type="text"], select {
+      width: 100%;
+      padding: 0.65rem;
+      border: 1px solid var(--color-grey, #bbb);
+      border-radius: 4px;
+      background: var(--bg-color, #fff);
+      color: inherit;
+    }
+
+    button, .button {
+      display: inline-block;
+      padding: 0.55rem 0.85rem;
+      border: 1px solid currentColor;
+      border-radius: 4px;
+      cursor: pointer;
+      text-decoration: none;
+    }
+
+    .primary {
+      color: #fff;
+      background: var(--api-keys-primary-color);
+    }
+
+    .card {
+      padding: 1rem;
+      border: 1px solid var(--color-grey, #ccc);
+      border-radius: var(--api-keys-border-radius);
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    th, td {
+      padding: 0.65rem;
+      border-bottom: 1px solid var(--color-grey, #ddd);
+      text-align: left;
+    }
+
+    .api-keys-table-wrapper { overflow-x: auto; }
+    .tag, .api-keys-badge {
+      display: inline-block;
+      padding: 0.15rem 0.4rem;
+      border-radius: 999px;
+      background: var(--bg-secondary-color, #eee);
     }
 
     @media (prefers-color-scheme: dark) {
@@ -107,6 +191,50 @@
       color: var(--api-keys-danger-color);
     }
 
+    [hidden] { display: none !important; }
+    .api-keys-form-errors { color: var(--api-keys-danger-color); }
+    .api-keys-form-help { display: block; color: var(--color-darkGrey, #666); }
+    .api-keys-empty-state { text-align: center; padding: 2em; }
+    .api-keys-expired-text { color: var(--api-keys-status-expired-color); }
+    .api-keys-token-panel { padding: 1em; margin: 1em 0; border-radius: 4px; }
+    .api-keys-token-value { overflow-wrap: anywhere; }
+    .api-keys-token-scopes, .api-keys-show-footer { margin-top: 2em; }
+    .api-keys-token-break { overflow-wrap: anywhere; }
+    .btn-show-token, .btn-copy-token {
+      margin-left: 0.5rem;
+      padding: 0.15rem 0.4rem;
+      font-size: 0.75em;
+    }
+    .api-keys-action-disabled {
+      color: var(--api-keys-muted-color);
+      cursor: help;
+    }
+    .api-keys-status-active { color: var(--api-keys-status-active-color); }
+    .api-keys-status-revoked { color: var(--api-keys-status-revoked-color); }
+    .api-keys-status-expired { color: var(--api-keys-status-expired-color); }
+    .api-keys-badge-type, .api-keys-badge-env {
+      margin-left: 0.25rem;
+      padding: 0.15rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.75em;
+    }
+    .api-keys-badge-publishable {
+      color: var(--api-keys-badge-publishable-color);
+      background-color: var(--api-keys-badge-publishable-bg);
+    }
+    .api-keys-badge-secret {
+      color: var(--api-keys-badge-secret-color);
+      background-color: var(--api-keys-badge-secret-bg);
+    }
+    .api-keys-badge-live {
+      color: var(--api-keys-badge-live-color);
+      background-color: var(--api-keys-badge-live-bg);
+    }
+    .api-keys-badge-test {
+      color: var(--api-keys-badge-test-color);
+      background-color: var(--api-keys-badge-test-bg);
+    }
+
     .api-keys-button-text {
       padding-left: 0.2em;
     }
@@ -114,7 +242,7 @@
     #api-keys-flash-container {
       margin-top: 1em;
     }
-    
+
     .api-keys-flash-message {
       background-color: rgba(255, 255, 255, 0.15);
       padding: 0.8em 0;
@@ -168,7 +296,7 @@
       <%# Use configured return URL and text %>
       <%= link_to ApiKeys.configuration.return_text, ApiKeys.configuration.return_url %>
       <%# Link to keys index using engine's path helper %>
-      <%= link_to "My API Keys", api_keys.keys_path, class: "active" %>
+      <%= link_to "My API Keys", keys_path, class: "active" %>
     </div>
     <div class="nav-center">
     </div>
@@ -193,16 +321,16 @@
     <%# Footer content %>
   </footer>
 
-  <script>
+  <script nonce="<%= content_security_policy_nonce %>">
     // Minimal JS for API Keys dashboard - event delegation for show/copy tokens
     document.addEventListener('click', function(e) {
       // Show token (one-way: masked -> full, no hiding back)
       if (e.target.matches('.btn-show-token')) {
         var cell = e.target.closest('td');
-        cell.querySelector('.token-masked').style.display = 'none';
-        cell.querySelector('.token-full').style.display = 'inline';
-        e.target.style.display = 'none';
-        cell.querySelector('.btn-copy-token').style.display = 'inline';
+        cell.querySelector('.token-masked').hidden = true;
+        cell.querySelector('.token-full').hidden = false;
+        e.target.hidden = true;
+        cell.querySelector('.btn-copy-token').hidden = false;
       }
 
       // Copy token to clipboard
@@ -212,10 +340,29 @@
           var originalText = e.target.textContent;
           e.target.textContent = 'Copied!';
           setTimeout(function() { e.target.textContent = originalText; }, 2000);
+        }).catch(function() {
+          e.target.textContent = 'Copy failed';
+          setTimeout(function() { e.target.textContent = 'Copy'; }, 2000);
+        });
+      }
+
+      // Copy a newly issued secret without duplicating it into an HTML attribute.
+      if (e.target.closest('.btn-copy-new-token')) {
+        var button = e.target.closest('.btn-copy-new-token');
+        var tokenElement = document.getElementById('api-key-token');
+        var buttonText = button.querySelector('.api-keys-button-text');
+        if (!navigator.clipboard || !tokenElement || !buttonText) return;
+
+        navigator.clipboard.writeText(tokenElement.textContent || '').then(function() {
+          buttonText.textContent = 'Copied!';
+          setTimeout(function() { buttonText.textContent = 'Copy'; }, 2000);
+        }).catch(function() {
+          buttonText.textContent = 'Copy failed';
+          setTimeout(function() { buttonText.textContent = 'Copy'; }, 2000);
         });
       }
     });
   </script>
 
 </body>
-</html> 
+</html>