MySMSAPio/app/views/admin/api_keys/show.html.erb

<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>