140 lines
5.8 KiB
Plaintext
140 lines
5.8 KiB
Plaintext
<div class="space-y-6">
|
|
<!-- Page header -->
|
|
<div class="border-b border-gray-200 pb-5">
|
|
<h1 class="text-3xl font-bold leading-tight tracking-tight text-gray-900">API Key Created Successfully!</h1>
|
|
<p class="mt-2 text-sm text-gray-600">Your new API key has been generated and is ready to use.</p>
|
|
</div>
|
|
|
|
<!-- Warning alert -->
|
|
<div class="rounded-lg bg-yellow-50 px-4 py-4 ring-1 ring-yellow-600/10">
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-exclamation-triangle text-yellow-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-semibold text-yellow-800">Important: Save this key now!</h3>
|
|
<p class="mt-1 text-sm text-yellow-700">
|
|
This is the only time you'll be able to see the full API key. Make sure to copy it and store it securely.
|
|
If you lose it, you'll need to generate a new key.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Key display card -->
|
|
<div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 px-6 py-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Your New API Key</h3>
|
|
<button
|
|
onclick="copyToClipboard('<%= @raw_key %>')"
|
|
class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200">
|
|
<i class="fas fa-copy"></i>
|
|
Copy to Clipboard
|
|
</button>
|
|
</div>
|
|
|
|
<div class="relative rounded-lg bg-gray-900 px-4 py-4 overflow-x-auto">
|
|
<code class="text-sm font-mono text-green-400 break-all"><%= @raw_key %></code>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Key Details card -->
|
|
<div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 px-6 py-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">API Key Details</h3>
|
|
|
|
<dl class="divide-y divide-gray-100">
|
|
<div class="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
|
|
<dt class="text-sm font-medium text-gray-900">Name</dt>
|
|
<dd class="mt-1 text-sm text-gray-700 sm:col-span-2 sm:mt-0"><%= @api_key.name %></dd>
|
|
</div>
|
|
|
|
<div class="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
|
|
<dt class="text-sm font-medium text-gray-900">Key Prefix</dt>
|
|
<dd class="mt-1 text-sm sm:col-span-2 sm:mt-0">
|
|
<code class="rounded bg-gray-100 px-2 py-1 text-xs font-mono text-gray-800"><%= @api_key.key_prefix %>...</code>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
|
|
<dt class="text-sm font-medium text-gray-900">Permissions</dt>
|
|
<dd class="mt-1 text-sm sm:col-span-2 sm:mt-0">
|
|
<div class="flex flex-wrap gap-2">
|
|
<% perms = @api_key.permissions || {} %>
|
|
<% perms = {} unless perms.is_a?(Hash) %>
|
|
<% perms.select { |_, v| v }.keys.each do |perm| %>
|
|
<span class="inline-flex items-center gap-1 rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
|
|
<i class="fas fa-check"></i>
|
|
<%= perm.to_s.humanize %>
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
|
|
<dt class="text-sm font-medium text-gray-900">Expiration</dt>
|
|
<dd class="mt-1 text-sm text-gray-700 sm:col-span-2 sm:mt-0">
|
|
<% if @api_key.expires_at %>
|
|
<div class="flex items-center gap-2">
|
|
<i class="fas fa-calendar text-gray-400"></i>
|
|
<%= @api_key.expires_at.strftime("%B %d, %Y at %l:%M %p") %>
|
|
</div>
|
|
<% else %>
|
|
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-700/10">
|
|
<i class="fas fa-infinity"></i>
|
|
Never expires
|
|
</span>
|
|
<% end %>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
|
|
<dt class="text-sm font-medium text-gray-900">Status</dt>
|
|
<dd class="mt-1 text-sm sm:col-span-2 sm:mt-0">
|
|
<span class="inline-flex items-center gap-1.5 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-700/10">
|
|
<span class="h-1.5 w-1.5 rounded-full bg-green-500"></span>
|
|
Active
|
|
</span>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
|
|
<dt class="text-sm font-medium text-gray-900">Created</dt>
|
|
<dd class="mt-1 text-sm text-gray-700 sm:col-span-2 sm:mt-0">
|
|
<%= @api_key.created_at.strftime("%B %d, %Y at %l:%M %p") %>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<!-- Back link -->
|
|
<div class="flex items-center gap-3">
|
|
<%= link_to admin_api_keys_path,
|
|
class: "inline-flex items-center gap-2 rounded-lg bg-gray-100 px-6 py-3 text-sm font-semibold text-gray-700 hover:bg-gray-200 transition-all duration-200" do %>
|
|
<i class="fas fa-arrow-left"></i>
|
|
Back to API Keys
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text).then(function() {
|
|
// Show success feedback
|
|
const button = event.target.closest('button');
|
|
const originalHTML = button.innerHTML;
|
|
button.innerHTML = '<i class="fas fa-check"></i> Copied!';
|
|
button.classList.add('bg-green-600', 'hover:bg-green-500');
|
|
button.classList.remove('bg-blue-600', 'hover:bg-blue-500');
|
|
|
|
setTimeout(function() {
|
|
button.innerHTML = originalHTML;
|
|
button.classList.remove('bg-green-600', 'hover:bg-green-500');
|
|
button.classList.add('bg-blue-600', 'hover:bg-blue-500');
|
|
}, 2000);
|
|
}, function(err) {
|
|
alert('Failed to copy: ' + err);
|
|
});
|
|
}
|
|
</script>
|