102 lines
5.7 KiB
Plaintext
102 lines
5.7 KiB
Plaintext
<div class="space-y-6">
|
|
<div class="sm:flex sm:items-center sm:justify-between">
|
|
<div>
|
|
<h1 class="text-3xl font-bold leading-tight tracking-tight text-gray-900">API Keys</h1>
|
|
<p class="mt-2 text-sm text-gray-600">Manage API keys for client access and authentication</p>
|
|
</div>
|
|
<%= link_to new_admin_api_key_path, class: "mt-4 sm:mt-0 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 transition-all" do %>
|
|
<i class="fas fa-plus"></i>
|
|
Create New API Key
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5">
|
|
<% if @api_keys.any? %>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Name</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Key Prefix</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Permissions</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Status</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Last Used</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Created</th>
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wide text-gray-500">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 bg-white">
|
|
<% @api_keys.each do |api_key| %>
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="text-sm font-medium text-gray-900"><%= api_key.name %></div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<code class="rounded bg-gray-100 px-2 py-1 text-xs font-mono text-gray-800"><%= api_key.key_prefix %>...</code>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex flex-wrap gap-1">
|
|
<% perms = api_key.permissions || {} %>
|
|
<% perms = {} unless perms.is_a?(Hash) %>
|
|
<% if perms.any? %>
|
|
<% perms.select { |_, v| v }.keys.each do |perm| %>
|
|
<span class="inline-flex rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
|
|
<%= perm.to_s.humanize %>
|
|
</span>
|
|
<% end %>
|
|
<% else %>
|
|
<span class="inline-flex rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-700/10">None</span>
|
|
<% end %>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<% if api_key.active_and_valid? %>
|
|
<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>
|
|
<% elsif !api_key.active %>
|
|
<span class="inline-flex rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-700/10">Revoked</span>
|
|
<% else %>
|
|
<span class="inline-flex rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-700/10">Expired</span>
|
|
<% end %>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">
|
|
<% if api_key.last_used_at %>
|
|
<%= time_ago_in_words(api_key.last_used_at) %> ago
|
|
<% else %>
|
|
Never
|
|
<% end %>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">
|
|
<%= api_key.created_at.strftime("%Y-%m-%d") %>
|
|
</td>
|
|
<td class="px-6 py-4 text-right text-sm font-medium">
|
|
<% if api_key.active %>
|
|
<%= button_to admin_api_key_path(api_key), method: :delete, class: "inline-flex items-center gap-1 text-red-600 hover:text-red-900", data: { confirm: "Are you sure you want to revoke this API key?" } do %>
|
|
<i class="fas fa-ban"></i>
|
|
Revoke
|
|
<% end %>
|
|
<% end %>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<% else %>
|
|
<div class="px-6 py-14 text-center">
|
|
<i class="fas fa-key text-4xl text-gray-300"></i>
|
|
<h3 class="mt-4 text-sm font-semibold text-gray-900">No API keys</h3>
|
|
<p class="mt-2 text-sm text-gray-500">Get started by creating a new API key.</p>
|
|
<div class="mt-6">
|
|
<%= link_to new_admin_api_key_path, class: "inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500" do %>
|
|
<i class="fas fa-plus"></i>
|
|
Create API Key
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|