api_keys 0.1.0

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

@@ -0,0 +1,106 @@
+<%# 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;">
+      <strong><%= pluralize(api_key.errors.count, "error") %> prohibited this API key from being saved:</strong>
+      <ul>
+        <% api_key.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <%# Fields only available on NEW %>
+  <% unless api_key.persisted? %>
+    <div>
+      <%= form.label :name, "Name (optional)" %>
+      <%= form.text_field :name, placeholder: "e.g., myproject-production-key" %>
+    </div>
+
+    <div>
+      <%= form.label :expires_at_preset, "Expiration" %>
+      <%= form.select :expires_at_preset,
+          options_for_select([
+            ["No Expiration", "no_expiration"],
+            ["7 days", "7_days"],
+            ["30 days", "30_days"],
+            ["60 days", "60_days"],
+            ["90 days", "90_days"],
+            ["365 days", "365_days"] # Common presets
+          ], api_key.expires_at.present? ? nil : "no_expiration"), # Default selection
+          {}, # html options
+          {} # data attributes
+      %>
+    </div>
+
+    <%# This assumes a variable `@available_scopes` is passed to the view, %>
+    <%# containing an array of scope strings allowed for this context. %>
+    <%# This list might come from global configuration or owner-specific settings. %>
+    <%# Example: @available_scopes = ["read", "write", "admin"] %>
+    <% @available_scopes = current_api_keys_user.class.api_keys_settings.dig(:default_scopes) %>
+    <% if defined?(@available_scopes) && @available_scopes.present? %>
+      <div>
+        <%= form.label :scopes, "Permissions" %>
+        <% @available_scopes.each do |scope| %>
+          <div class="form-check">
+            <%= form.check_box :scopes,
+                               { multiple: true, # Submits as an array
+                                 class: "form-check-input",
+                                 checked: true,
+                                 id: "api_key_scopes_#{scope.parameterize}" }, # Unique ID
+                               scope, # Value submitted when checked
+                               nil # Value submitted when unchecked (not needed here)
+                               %>
+            <%= form.label "scopes_#{scope.parameterize}", scope.humanize, class: "form-check-label" %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+  <% end %>
+
+  <%# Fields editable on EDIT %>
+  <% if api_key.persisted? %>
+    <div>
+      <%= form.label :name, "Key Name (optional)" %>
+      <%= form.text_field :name %>
+    </div>
+
+    <%# Define available scopes for the edit form context %>
+    <%# This assumes the available scopes are the same as the default ones. %>
+    <%# Consider passing @available_scopes from the controller if logic is more complex. %>
+    <% @available_scopes = current_api_keys_user.class.api_keys_settings.dig(:default_scopes) %>
+    <% if defined?(@available_scopes) && @available_scopes.present? %>
+      <div>
+        <%= form.label :scopes, "Permissions / Scopes" %>
+        <% @available_scopes.each do |scope| %>
+          <div class="form-check">
+            <%= form.check_box :scopes,
+                               { multiple: true, # Submits as an array
+                                 class: "form-check-input",
+                                 checked: api_key.scopes&.include?(scope), # Check if scope is already assigned
+                                 id: "api_key_scopes_#{scope.parameterize}_edit" }, # Unique ID for edit form
+                               scope, # Value submitted when checked
+                               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" %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+
+  <div>
+    <% if api_key.persisted? %>
+      <%= form.submit "Update Key" %>
+      <%= link_to "Cancel", keys_path %>
+    <% else %>
+      <h4><strong>Keep it safe</strong></h4>
+      <p>Your API key will only be shown once after creation. <strong>Your key cannot be recovered:</strong> copy it immediately and store it securely.</p>
+      <%= form.submit "Create API Key" %>
+      <%= link_to "Cancel", keys_path %>
+    <% end %>
+  </div>
+<% end %> 

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

@@ -0,0 +1,72 @@
+<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" %>
+  </td>
+  <td><code><%= key.masked_token %></code></td>
+
+
+  <td title="<%= key.created_at.strftime('%Y-%m-%d %H:%M:%S %Z') %>">
+    <%= time_ago_in_words(key.created_at) %> ago
+  </td>
+
+
+  <td>
+    <% if key.expires_at? %>
+      <% if key.expired? %>
+        <strong style="color: red;" title="<%= key.expires_at.strftime('%Y-%m-%d %H:%M:%S %Z') %>">
+          Expired <%= time_ago_in_words(key.expires_at) %> ago
+        </strong>
+      <% else %>
+        <span title="<%= key.expires_at.strftime('%Y-%m-%d %H:%M:%S %Z') %>">
+          Expires in <%= time_ago_in_words(key.expires_at) %>
+        </span>
+      <% end %>
+    <% else %>
+      <em>Never expires</em>
+    <% end %>
+  </td>
+
+
+  <td>
+    <% 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>
+    <% if key.scopes.present? %>
+      <% key.scopes.each do |scope| %>
+        <kbd class="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>
+</tr>

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

@@ -0,0 +1,52 @@
+<%# Partial for displaying the API keys table %>
+<%# Locals: active_keys (Active keys collection), inactive_keys (Inactive keys collection) %>
+
+<%# Combine active and inactive keys for a unified table view %>
+<% all_keys = active_keys + inactive_keys %>
+
+<section aria-labelledby="api-keys-heading">
+
+  <div class="api-keys-table-wrapper">
+    <% if all_keys.any? %>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Secret Key</th>
+            <th>Created</th>
+            <th>Expires</th>
+            <th>Last Used</th>
+            <th>Permissions</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <%# Render active keys first %>
+          <% active_keys.each do |key| %>
+            <%= render partial: 'api_keys/keys/key_row', locals: { key: key } %>
+          <% end %>
+
+          <%# 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 %>
+          <% end %>
+        </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>
+    <% end %>
+  </div>
+
+</section>
+
+<%# The separate inactive keys section is now removed as they are integrated above. %>

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

@@ -0,0 +1,88 @@
+<%# Partial for displaying the newly created API key token %>
+<%# Locals: api_key (ApiKey instance), plaintext_token (String) %>
+
+<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>
+
+<p>
+  <%= link_to api_keys.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="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>
+      </div>
+
+      <div class="col is-vertical-align is-center">
+        <button id="copy-api-key-button" onclick="copyTokenToClipboard()" class="button primary api-keys-align-center">
+          <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>
+      </div>
+
+    </div>
+  </div>
+
+
+  <% if api_key.scopes.present? %>
+    <div style="margin-top: 2em;">
+      <p><strong>Permissions</strong></p>
+
+      <% if api_key.scopes.present? %>
+        <% api_key.scopes.each do |scope| %>
+          <kbd class="tag is-small"><%= scope %></kbd>
+        <% end %>
+      <% else %>
+        &mdash;
+      <% end %>
+    </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/edit.html.erb

@@ -0,0 +1,5 @@
+<div class="col-5">
+  <h2>Edit API Key: <%= @api_key.name.presence || @api_key.masked_token %></h2>
+
+  <%= render 'form', api_key: @api_key %> 
+</div>

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

@@ -0,0 +1,26 @@
+<header>
+  <div class="row">
+    <div class="col">
+      <h1>API Keys</h1>
+    </div>
+
+    <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>
+      <% end %>
+    </div>
+
+</header>
+
+<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 %>
+
+  <%# Render the reusable table partial %>
+  <%= render partial: 'keys_table', locals: { active_keys: @api_keys, inactive_keys: @inactive_api_keys } %>
+
+</div>

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

@@ -0,0 +1,5 @@
+<div class="col-5">
+  <h2>Create New API Key</h2>
+
+  <%= render 'form', api_key: @api_key %> 
+</div>

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

@@ -0,0 +1,12 @@
+<div class="col-5">
+
+  <%# Renders the block showing the newly created token %>
+  <%= render partial: 'show_token', locals: { api_key: @api_key, plaintext_token: @plaintext_token } %>
+
+  <%# Add navigation links %>
+  <p style="margin-top: 2em;">
+    <%= link_to ApiKeys.configuration.return_text, ApiKeys.configuration.return_url, class: "button outline" %>
+    <%= link_to "All API Keys", keys_path, class: "button" %>
+  </p>
+
+</div>

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

@@ -0,0 +1,70 @@
+<header>
+  <h1>API Key Security Best Practices</h1>
+  <p>Protecting your API keys is crucial for maintaining the security and integrity of your account and data.</p>
+</header>
+
+<article class="col-5">
+
+  <section>
+    <h3>1. Treat API Keys Like Passwords</h3>
+    <p>Your API keys grant access to your account and potentially sensitive operations. Handle them with the same level of security you would apply to your account password or other critical credentials.</p>
+  </section>
+
+  <section>
+    <h3>2. Use Unique Keys for Different Applications & Environments</h3>
+    <p>Generate distinct API keys for different applications, services, or integrations that need access. If a key for one application is compromised, you can revoke it without disrupting others. Use separate keys for development, staging, and production environments.</p>
+    <p><em>Tip:</em> Use the "Name" field when creating keys to easily identify their purpose (e.g., "Production Zapier Integration", "Staging iOS App").</p>
+  </section>
+
+  <section>
+    <h3>3. Never Expose Keys in Client-Side Code</h3>
+    <p><strong>Never</strong> embed API keys directly in mobile apps (iOS, Android), browser-side JavaScript, desktop applications, or any code that resides on a user's device. Exposed keys can be easily extracted by malicious actors.</p>
+    <p><strong>Solution:</strong> Route API requests through your own backend server. Your server can securely store and use the API key to communicate with the target API on behalf of the client.</p>
+  </section>
+
+  <section>
+    <h3>4. Never Commit Keys to Version Control (e.g., Git)</h3>
+    <p>Committing keys to your source code repository (like Git, Mercurial, etc.) is a common and dangerous mistake. Even in private repositories, accidental pushes or repository breaches can leak your keys.</p>
+    <p><strong>Solution:</strong> Store keys in environment variables or use a dedicated secrets management system. Access the key in your code via these secure methods.</p>
+  </section>
+
+  <section>
+    <h3>5. Securely Store Keys on Your Backend</h3>
+    <ul>
+      <li><strong>Environment Variables:</strong> The simplest secure method for many applications. Set an environment variable (e.g., `YOUR_SERVICE_API_KEY`) on your server and access it in your code (e.g., `ENV['YOUR_SERVICE_API_KEY']` in Ruby/Rails).</li>
+      <li><strong>Secrets Management Services:</strong> For more robust needs, especially in production or team environments, use dedicated services like HashiCorp Vault, AWS Secrets Manager, Google Secret Manager, Doppler, etc. These provide encrypted storage, access control, auditing, and often automated rotation capabilities.</li>
+      <li><strong>Encrypted Configuration Files:</strong> If using configuration files, ensure they are encrypted (e.g., Rails encrypted credentials `config/credentials.yml.enc` and `Rails.application.credentials`). <%= link_to "More info here", "https://guides.rubyonrails.org/security.html#custom-credentials", target: "_blank", rel: "noopener noreferrer", class: "text-primary" %>.</li>
+    </ul>
+  </section>
+
+  <section>
+    <h3>6. Implement the Principle of Least Privilege (Scopes)</h3>
+    <p>If the API service supports it (and this `api_keys` gem allows for scopes), create keys with only the minimum permissions (scopes) required for their specific task. Avoid using a key with full access if only read access is needed.</p>
+    <p><em>Note:</em> Scope availability and enforcement depend on how the host application integrates and utilizes the `scopes` attribute provided by this gem.</p>
+  </section>
+
+  <section>
+    <h3>7. Monitor Usage and Rotate Keys Regularly</h3>
+    <ul>
+      <li><strong>Monitor Usage:</strong> Regularly check API usage logs or dashboards (if provided by the service or your monitoring tools). Look for unexpected spikes in activity or requests from unusual locations, which could indicate a compromised key.</li>
+      <li><strong>Rotate Keys:</strong> Periodically generate new keys and revoke old ones (key rotation). This limits the window of opportunity for attackers if a key is ever leaked undetected. How often you rotate depends on your security requirements (e.g., every 90 days, annually).
+        <br><em>Tip:</em> This dashboard allows creating multiple keys, facilitating rotation. Create a new key, update your application(s), verify they work, and then revoke the old key.</li>
+      <li><strong>Revoke Immediately if Compromised:</strong> If you suspect a key has been leaked or compromised, revoke it immediately using the "Revoke" button on your keys dashboard.</li>
+    </ul>
+  </section>
+
+  <section>
+    <h3>8. Use HTTPS Exclusively</h3>
+    <p>Ensure all API requests are made over HTTPS to encrypt the connection and prevent eavesdropping. Transmitting keys over unencrypted HTTP is highly insecure.</p>
+  </section>
+
+  <hr>
+
+  <p>By following these best practices, you significantly reduce the risk associated with API key management.</p>
+
+  <%# Link back to the keys index if appropriate %>
+  <% if defined?(api_keys.keys_path) %>
+    <p><%= link_to "Back to API Keys", api_keys.keys_path, class: "text-primary" %></p>
+  <% end %>
+
+</article>

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

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <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 %>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+</head>
+<body>
+  <style>
+    body {
+      /* grid-template-columns: 1fr min(100rem, 90%) 1fr !important; */
+    }
+
+    @media (prefers-color-scheme: dark) {
+      body {
+        /* Define dark mode variables directly */
+        --bg-color:rgb(14, 14, 14);
+        --bg-secondary-color:rgb(34, 34, 34);
+        --font-color: #f5f5f5;
+        --color-grey: #ccc;
+        --color-darkGrey: #777;
+      }
+    }
+
+    code, pre {
+      color: var(--font-color);
+      font-size: 0.8em;
+    }
+
+    .api-keys-align-center {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    form > div {
+      margin-top: 2.5em;
+    }
+
+    a {
+      color: var(--font-color);
+    }
+
+    .api-keys-action-buttons form {
+      display: inline;
+    }
+
+    .api-keys-action-buttons button {
+      background: none;
+      padding: 0;
+      color: #c23539
+    }
+
+    .api-keys-button-text {
+      padding-left: 0.2em;
+    }
+
+    #api-keys-flash-container {
+      margin-top: 1em;
+    }
+    
+    .api-keys-flash-message {
+      background-color: rgba(255, 255, 255, 0.15);
+      padding: 0.8em 0;
+      height: 100;
+    }
+
+    article h2, article li {
+      margin-top: 1.5em;
+    }
+
+    article h3 {
+      margin-top: 2.4em;
+    }
+
+  </style>
+
+  <nav class="nav container">
+    <div class="nav-left">
+      <%# 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" %>
+    </div>
+    <div class="nav-center">
+    </div>
+    <div class="nav-right">
+    </div>
+  </nav>
+
+  <aside id="api-keys-flash-container" class="container text-center">
+    <%# Flash Messages %>
+    <% flash.each do |type, msg| %>
+      <div class="api-keys-flash-message api-keys-flash-<%= type %>">
+        <%= msg %>
+      </div>
+    <% end %>
+  </aside>
+
+  <main class="container">
+    <%= yield %>
+  </main>
+
+  <footer>
+    <%# Footer content %>
+  </footer>
+
+  <%# Add any necessary JS includes if needed later %>
+
+</body>
+</html> 

data/config/routes.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+ApiKeys::Engine.routes.draw do
+  # User-facing API Key management
+  resources :keys, only: [:index, :new, :create, :show, :edit, :update] do
+    member do
+      post :revoke # Using POST for actions that change state
+    end
+  end
+
+  # Static pages
+  namespace :security do
+    get :best_practices
+  end
+
+  # Root of the engine could point to the keys index
+  root to: "keys#index"
+end