3d98261a51
Uses Tailwind v4 class-based dark mode with a Stimulus controller for toggling. Respects prefers-color-scheme as default, prevents FOUC with an inline script, and persists the user's choice in localStorage. All views updated with dark: variants for backgrounds, text, borders, badges, buttons, and form inputs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
60 lines
3.7 KiB
Plaintext
60 lines
3.7 KiB
Plaintext
<div class="max-w-2xl mx-auto" data-controller="clipboard">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">API Key Created</h1>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
|
Copy your API key now. You won't be able to see it again.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<div class="rounded-md bg-yellow-50 dark:bg-yellow-900/30 p-4 mb-6">
|
|
<div class="flex">
|
|
<svg class="h-5 w-5 text-yellow-400 mr-3 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
|
|
</svg>
|
|
<div class="text-sm text-yellow-800 dark:text-yellow-200">
|
|
<p class="font-medium">Save this key now!</p>
|
|
<p class="mt-1">This is the only time you'll see the full API key. Store it securely.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API Key</label>
|
|
<div class="flex items-center gap-2">
|
|
<input type="text" readonly value="<%= @plaintext_token %>"
|
|
data-clipboard-target="source"
|
|
class="flex-1 rounded-md border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 dark:text-gray-100 font-mono text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500" />
|
|
<button data-action="click->clipboard#copy"
|
|
data-clipboard-target="button"
|
|
class="inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 py-2 px-3 text-sm font-medium text-gray-700 dark:text-gray-200 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
|
|
<svg class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
|
|
</svg>
|
|
<span data-clipboard-target="label">Copy</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 space-y-2 text-sm text-gray-600 dark:text-gray-400">
|
|
<p><strong>Name:</strong> <%= @api_key.name %></p>
|
|
<p><strong>Application:</strong> <%= @api_key.application.name %></p>
|
|
<p><strong>Expires:</strong> <%= @api_key.expires_at ? @api_key.expires_at.strftime("%b %d, %Y %H:%M") : "Never" %></p>
|
|
</div>
|
|
|
|
<div class="mt-6 rounded-md bg-gray-50 dark:bg-gray-700 p-4">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Usage example:</p>
|
|
<pre class="text-xs text-gray-600 dark:text-gray-200 overflow-x-auto">curl -H "Authorization: Bearer <%= @plaintext_token %>" \
|
|
-H "X-Forwarded-Host: your-app.example.com" \
|
|
<%= request.base_url %>/api/verify</pre>
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
<%= link_to "Done", api_keys_path,
|
|
class: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900" %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|