Baffle-WAF/baffle-hub
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Tidy up homepage and navigation

Browse Source
This commit is contained in:
Dan Milne
2025-11-09 20:58:13 +11:00
parent c9e2992fe0
commit 1f4428348d
56 changed files with 2822 additions and 955 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
app/views/dsns/edit.html.erb Normal file
View File

@@ -0,0 +1,95 @@
<% content_for :title, "Edit DSN - #{@dsn.name}" %>
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<div class="md:flex md:items-center md:justify-between mb-8">
<div class="flex-1 min-w-0">
<h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
Edit DSN
</h2>
</div>
<div class="mt-4 flex md:mt-0 md:ml-4">
<%= link_to "Back to DSN", @dsn, class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" %>
</div>
</div>
<div class="bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<%= form_with(model: @dsn, local: true, class: "space-y-6") do |form| %>
<% if @dsn.errors.any? %>
<div class="rounded-md bg-red-50 p-4">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-red-800">
There were <%= pluralize(@dsn.errors.count, "error") %> with your submission:
</h3>
<div class="mt-2 text-sm text-red-700">
<ul role="list" class="list-disc space-y-1 pl-5">
<% @dsn.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
<% end %>
<div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div class="sm:col-span-6">
<%= form.label :name, class: "block text-sm font-medium text-gray-700" %>
<div class="mt-1">
<%= form.text_field :name, class: "shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md", placeholder: "e.g., Production DSN, Development DSN" %>
</div>
<p class="mt-2 text-sm text-gray-500">
A descriptive name to help you identify this DSN key.
</p>
</div>
<div class="sm:col-span-6">
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.check_box :enabled, class: "focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :enabled, class: "font-medium text-gray-700" %>
<p class="text-gray-500">Enable this DSN for agent authentication</p>
</div>
</div>
</div>
</div>
<!-- DSN Key Display (Read-only) -->
<div class="bg-gray-50 border border-gray-200 rounded-md p-4">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3 flex-1">
<h3 class="text-sm font-medium text-gray-800">
DSN Key
</h3>
<div class="mt-1 text-sm text-gray-600 font-mono bg-white px-3 py-2 rounded border">
<%= @dsn.key %>
</div>
<p class="mt-1 text-xs text-gray-500">DSN keys cannot be changed after creation.</p>
</div>
</div>
</div>
<div class="pt-5">
<div class="flex justify-end">
<%= link_to "Cancel", @dsn, class: "bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
<%= form.submit "Update DSN", class: "ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
</div>
</div>
<% end %>
</div>
</div>
</div>

162
app/views/dsns/index.html.erb Normal file
View File

@@ -0,0 +1,162 @@
<% content_for :title, "DSNs" %>
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<!-- Header -->
<div class="mb-8">
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold text-gray-900">DSN Management</h1>
<p class="mt-2 text-gray-600">Manage DSN keys for agent authentication</p>
</div>
<% if policy(Dsn).create? %>
<div class="flex space-x-3">
<%= link_to "New DSN", new_dsn_path, class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700" %>
</div>
<% end %>
</div>
</div>
<!-- Environment DSNs -->
<div class="bg-white shadow overflow-hidden sm:rounded-md mb-8">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">Environment DSNs</h3>
<p class="mt-1 max-w-2xl text-sm text-gray-500">
Default DSNs configured via environment variables for agent connectivity.
</p>
</div>
<div class="border-t border-gray-200">
<dl>
<!-- BAFFLE_HOST DSN -->
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">External DSN (BAFFLE_HOST)</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div class="flex items-center space-x-2">
<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">
<%= @external_dsn %>
</code>
<button onclick="copyToClipboard('<%= @external_dsn %>')" class="text-blue-600 hover:text-blue-800 text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
Copy
</button>
</div>
<p class="text-xs text-gray-400 mt-1">Host: <%= ENV['BAFFLE_HOST'] || 'localhost:3000' %></p>
</dd>
</div>
<% if @internal_dsn.present? %>
<!-- BAFFLE_INTERNAL_HOST DSN -->
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Internal DSN (BAFFLE_INTERNAL_HOST)</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div class="flex items-center space-x-2">
<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">
<%= @internal_dsn %>
</code>
<button onclick="copyToClipboard('<%= @internal_dsn %>')" class="text-blue-600 hover:text-blue-800 text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
Copy
</button>
</div>
<p class="text-xs text-gray-400 mt-1">Host: <%= ENV['BAFFLE_INTERNAL_HOST'] %></p>
</dd>
</div>
<% end %>
</dl>
</div>
</div>
<!-- Database DSNs -->
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<% if @dsns.any? %>
<ul role="list" class="divide-y divide-gray-200">
<% @dsns.each do |dsn| %>
<li>
<div class="px-4 py-4 flex items-center justify-between">
<div class="flex items-center">
<div class="flex-shrink-0">
<% if dsn.enabled? %>
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
<svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<% else %>
<div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
<svg class="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
<% end %>
</div>
<div class="ml-4">
<div class="flex items-center">
<p class="text-sm font-medium text-gray-900"><%= dsn.name %></p>
<span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <%= dsn.enabled? ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' %>">
<%= dsn.enabled? ? 'Enabled' : 'Disabled' %>
</span>
</div>
<p class="text-sm text-gray-500 font-mono">
Key: <%= dsn.key[0..15] + "..." %>
</p>
<p class="text-xs text-gray-400">
Created: <%= dsn.created_at.strftime('%Y-%m-%d %H:%M') %>
</p>
</div>
</div>
<div class="flex items-center space-x-2">
<%= link_to "View", dsn, class: "text-blue-600 hover:text-blue-900 text-sm font-medium" %>
<% if policy(dsn).edit? %>
<%= link_to "Edit", edit_dsn_path(dsn), class: "text-indigo-600 hover:text-indigo-900 text-sm font-medium" %>
<% end %>
<% if policy(dsn).disable? && dsn.enabled? %>
<%= link_to "Disable", disable_dsn_path(dsn), method: :post,
data: { confirm: "Are you sure you want to disable this DSN?" },
class: "text-red-600 hover:text-red-900 text-sm font-medium" %>
<% elsif policy(dsn).enable? && !dsn.enabled? %>
<%= link_to "Enable", enable_dsn_path(dsn), method: :post,
class: "text-green-600 hover:text-green-900 text-sm font-medium" %>
<% end %>
</div>
</div>
</li>
<% end %>
</ul>
<% else %>
<div class="text-center py-12">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
<h3 class="mt-2 text-sm font-medium text-gray-900">No DSNs</h3>
<p class="mt-1 text-sm text-gray-500">Get started by creating a new DSN.</p>
<% if policy(Dsn).create? %>
<div class="mt-6">
<%= link_to "New DSN", new_dsn_path, class: "inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700" %>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
<script>
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
// Show a brief confirmation
const button = event.target.closest('button');
const originalText = button.innerHTML;
button.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Copied!';
button.classList.add('text-green-600');
button.classList.remove('text-blue-600');
setTimeout(function() {
button.innerHTML = originalText;
button.classList.remove('text-green-600');
button.classList.add('text-blue-600');
}, 2000);
});
}
</script>

93
app/views/dsns/new.html.erb Normal file
View File

@@ -0,0 +1,93 @@
<% content_for :title, "New DSN" %>
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<div class="md:flex md:items-center md:justify-between mb-8">
<div class="flex-1 min-w-0">
<h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
New DSN
</h2>
</div>
<div class="mt-4 flex md:mt-0 md:ml-4">
<%= link_to "Back to DSNs", dsns_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" %>
</div>
</div>
<div class="bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<%= form_with(model: @dsn, local: true, class: "space-y-6") do |form| %>
<% if @dsn.errors.any? %>
<div class="rounded-md bg-red-50 p-4">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-red-800">
There were <%= pluralize(@dsn.errors.count, "error") %> with your submission:
</h3>
<div class="mt-2 text-sm text-red-700">
<ul role="list" class="list-disc space-y-1 pl-5">
<% @dsn.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
<% end %>
<div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div class="sm:col-span-6">
<%= form.label :name, class: "block text-sm font-medium text-gray-700" %>
<div class="mt-1">
<%= form.text_field :name, class: "shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md", placeholder: "e.g., Production DSN, Development DSN" %>
</div>
<p class="mt-2 text-sm text-gray-500">
A descriptive name to help you identify this DSN key.
</p>
</div>
<div class="sm:col-span-6">
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.check_box :enabled, class: "focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :enabled, class: "font-medium text-gray-700" %>
<p class="text-gray-500">Enable this DSN for agent authentication</p>
</div>
</div>
</div>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-md p-4">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-blue-800">
DSN Key Information
</h3>
<div class="mt-2 text-sm text-blue-700">
<p>A unique DSN key will be automatically generated when you create this DSN. This key will be used by your baffle-agents to authenticate with the hub.</p>
</div>
</div>
</div>
</div>
<div class="pt-5">
<div class="flex justify-end">
<%= link_to "Cancel", dsns_path, class: "bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
<%= form.submit "Create DSN", class: "ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
</div>
</div>
<% end %>
</div>
</div>
</div>

138
app/views/dsns/show.html.erb Normal file
View File

@@ -0,0 +1,138 @@
<% content_for :title, "DSN - #{@dsn.name}" %>
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<div class="md:flex md:items-center md:justify-between mb-8">
<div class="flex-1 min-w-0">
<div class="flex items-center">
<h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
<%= @dsn.name %>
</h2>
<span class="ml-3 inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium <%= @dsn.enabled? ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' %>">
<%= @dsn.enabled? ? 'Enabled' : 'Disabled' %>
</span>
</div>
</div>
<div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
<%= link_to "Back to DSNs", dsns_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" %>
<% if policy(@dsn).edit? %>
<%= link_to "Edit", edit_dsn_path(@dsn), class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700" %>
<% end %>
</div>
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">DSN Information</h3>
<p class="mt-1 max-w-2xl text-sm text-gray-500">
DSN key details and usage information.
</p>
</div>
<div class="border-t border-gray-200">
<dl>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Name</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"><%= @dsn.name %></dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">DSN Key</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div class="flex items-center space-x-2">
<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono"><%= @dsn.key %></code>
<button onclick="copyToClipboard('<%= @dsn.key %>')" class="text-blue-600 hover:text-blue-800 text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
Copy
</button>
</div>
</dd>
</div>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Status</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <%= @dsn.enabled? ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' %>">
<%= @dsn.enabled? ? 'Enabled' : 'Disabled' %>
</span>
</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Created</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<%= @dsn.created_at.strftime('%B %d, %Y at %I:%M %p') %>
</dd>
</div>
<% if @dsn.updated_at != @dsn.created_at %>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Last Updated</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<%= @dsn.updated_at.strftime('%B %d, %Y at %I:%M %p') %>
</dd>
</div>
<% end %>
</dl>
</div>
</div>
<!-- Actions -->
<% if policy(@dsn).disable? || policy(@dsn).enable? %>
<div class="mt-6 bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">Actions</h3>
<div class="mt-5 space-x-3">
<% if @dsn.enabled? && policy(@dsn).disable? %>
<%= link_to "Disable DSN", disable_dsn_path(@dsn), method: :post,
data: { confirm: "Are you sure you want to disable this DSN? Agents will no longer be able to authenticate with this key." },
class: "inline-flex items-center px-4 py-2 border border-red-300 rounded-md shadow-sm text-sm font-medium text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
<% elsif !@dsn.enabled? && policy(@dsn).enable? %>
<%= link_to "Enable DSN", enable_dsn_path(@dsn), method: :post,
class: "inline-flex items-center px-4 py-2 border border-green-300 rounded-md shadow-sm text-sm font-medium text-green-700 bg-white hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" %>
<% end %>
</div>
</div>
</div>
<% end %>
<!-- Usage Instructions -->
<div class="mt-6 bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">Usage Instructions</h3>
<p class="mt-1 max-w-2xl text-sm text-gray-500">
How to use this DSN key with your baffle-agents.
</p>
</div>
<div class="border-t border-gray-200 px-4 py-5 sm:px-6">
<div class="prose max-w-none">
<h4>HTTP Header Authentication</h4>
<p>Include the DSN key in the <code>Authorization</code> header:</p>
<pre class="bg-gray-100 p-3 rounded text-sm"><code>Authorization: Bearer <%= @dsn.key %></code></pre>
<h4 class="mt-4">Query Parameter Authentication</h4>
<p>Include the DSN key as a query parameter:</p>
<pre class="bg-gray-100 p-3 rounded text-sm"><code>/api/events?baffle_key=<%= @dsn.key %></code></pre>
<h4 class="mt-4">X-Baffle-Auth Header</h4>
<p>Use the custom Baffle authentication header:</p>
<pre class="bg-gray-100 p-3 rounded text-sm"><code>X-Baffle-Auth: Baffle baffle_key=<%= @dsn.key %>, baffle_version=1</code></pre>
</div>
</div>
</div>
</div>
<script>
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
// Show a brief confirmation
const button = event.target.closest('button');
const originalText = button.innerHTML;
button.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Copied!';
button.classList.add('text-green-600');
button.classList.remove('text-blue-600');
setTimeout(function() {
button.innerHTML = originalText;
button.classList.remove('text-green-600');
button.classList.add('text-blue-600');
}, 2000);
});
}
</script>