wizarr/app/templates/modals/create-api-key.html

<div class="relative modal-container"
     aria-labelledby="modal-title"
     role="dialog"
     aria-modal="true">
  <div class="fixed inset-0 modal-backdrop transition-opacity"></div>
  <div class="fixed inset-0 z-10 overflow-y-auto">
    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
      <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg dark:bg-gray-800">
        <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4 dark:bg-gray-800">
          <div class="flex justify-between items-center pb-3">
            <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
              {% if raw_key %}
                {{ _("API Key Created") }}
              {% else %}
                {{ _("Create API Key") }}
              {% endif %}
            </h1>
          </div>
          {% if raw_key %}
            <!-- Show the created API key -->
            <div class="space-y-4 md:space-y-6">
              <div class="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
                <div class="flex items-center mb-2">
                  <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2"
                       fill="currentColor"
                       viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd">
                    </path>
                  </svg>
                  <h3 class="text-lg font-medium text-green-800 dark:text-green-200">{{ _("API Key Created Successfully") }}</h3>
                </div>
                <p class="text-sm text-green-700 dark:text-green-300 mb-3">
                  {{ _("Your API key has been created. Please copy it now as it will not be shown again.") }}
                </p>
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded border relative">
                  <code class="text-sm font-mono text-gray-800 dark:text-gray-200 break-all select-all"
                        id="api-key-value">{{ raw_key }}</code>
                  <button onclick="copyToClipboard('{{ raw_key }}')"
                          class="absolute top-2 right-2 p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                          title="{{ _('Copy to clipboard') }}">
                    <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">
                      </path>
                    </svg>
                  </button>
                </div>
                <div class="mt-2 text-xs text-green-600 dark:text-green-400">
                  <strong>{{ _("Name:") }}</strong> {{ api_key.name }}
                </div>
              </div>
              <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 dark:bg-gray-800">
                <button type="button"
                        onclick="closeModal()"
                        class="inline-flex w-full justify-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-primary_hover sm:ml-3 sm:w-auto">
                  {{ _("Done") }}
                </button>
              </div>
            </div>
          {% else %}
            <!-- Show the form to create a new API key -->
            <form class="space-y-4 md:space-y-6"
                  hx-post="{{ url_for('api_keys.create_api_key') }}"
                  hx-target="#create-api-key-modal"
                  hx-swap="innerHTML">
              {{ form.hidden_tag() }}
              <div>
                <label for="name"
                       class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                  {{ _("API Key Name") }}
                </label>
                {{ form.name(class_="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white") }}
                {% for e in form.name.errors %}<p class="text-red-500 text-xs">{{ e }}</p>{% endfor %}
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                  {{ _("Enter a descriptive name to help you identify this API key later.") }}
                </p>
              </div>
              <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 dark:bg-gray-800">
                {{ form.submit(class_="inline-flex w-full justify-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-primary_hover sm:ml-3 sm:w-auto") }}
                <button type="button"
                        onclick="closeModal()"
                        class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto dark:bg-gray-700 dark:text-gray-300 dark:ring-gray-600 dark:hover:bg-gray-600">
                  {{ _("Cancel") }}
                </button>
              </div>
            </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
<script>
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(function() {
            // Show a temporary success message
            const button = event.target.closest('button');
            const originalContent = 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>';
            setTimeout(() => {
                button.innerHTML = originalContent;
            }, 2000);
        });
    }

    function closeModal() {
        // Refresh the page to show the updated API keys list
        window.location.reload();
    }
</script>