feat: consistent styling and clipboard copy apikey

templates/auth/account_settings.html

@@ -5,8 +5,8 @@
     opacity: 0.5;
   }
 </style>
-<main class="grow flex flex-col prose container mx-auto mt-2 p-5 sm:mt-4">
-  <h1 class="text-center">Account Settings</h1>
+<main class="container flex-grow flex flex-col mx-auto mt-4 space-y-1">
+  <h1 class="text-3xl font-bold mb-2">Account Settings</h1>
   <div class="form-control">
     <label class="label">
       <span class="label-text">Email</span>
@@ -21,12 +21,16 @@
     </label>
     {% block api_key_section %}
     {% if user.api_key %}
-    <input type="text" name="api-key" value="{{ user.api_key }}"
-      class="input text-primary-content input-bordered w-full" disabled />
+    <div class="relative">
+      <input id="api_key_input" type="text" name="api_key" value="{{ user.api_key }}"
+        class="input text-primary-content input-bordered w-full pr-12" disabled />
+      <button type="button" id="copy_api_key_btn" onclick="copy_api_key()"
+        class="absolute inset-y-0 cursor-pointer right-0 flex items-center pr-3" title="Copy API key">
+        {% include "icons/clipboard_icon.html" %}
+      </button>
+    </div>
     <a href="https://www.icloud.com/shortcuts/66985f7b98a74aaeac6ba29c3f1f0960"
-      class="btn btn-accent mt-4 w-full">Download
-      iOS
-      shortcut</a>
+      class="btn btn-accent mt-4 w-full">Download iOS shortcut</a>
     {% else %}
     <button hx-post="/set-api-key" class="btn btn-secondary w-full" hx-swap="outerHTML">
       Create API-Key
@@ -35,6 +39,49 @@
     {% endblock %}
   </div>
 
+  <script>
+    // Using a single toast element avoids creating many timeouts when clicking repeatedly.
+    let current_toast = null;
+    let toast_timeout = null;
+
+    function show_toast(message) {
+      if (current_toast) {
+        // Update message and reset timeout if a toast is already displayed.
+        current_toast.querySelector('span').textContent = message;
+        clearTimeout(toast_timeout);
+      } else {
+        current_toast = document.createElement('div');
+        current_toast.className = 'toast';
+        current_toast.innerHTML = `<div class="alert alert-success">
+        <div>
+        <span>${message}</span>
+        </div>
+        </div>`;
+        document.body.appendChild(current_toast);
+      }
+      toast_timeout = setTimeout(() => {
+        if (current_toast) {
+          current_toast.remove();
+          current_toast = null;
+        }
+      }, 3000);
+    }
+
+    function copy_api_key() {
+      const input = document.getElementById('api_key_input');
+      if (!input) return;
+      if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(input.value).then(() => {
+          show_toast('API key copied!');
+        }).catch(() => {
+          show_toast('Copy failed');
+        });
+      } else {
+        show_toast('Copy not supported');
+      }
+    }
+  </script>
+
   <div class="form-control mt-4">
     <label class="label">
       <span class="label-text">Timezone</span>

templates/auth/admin_panel.html

@@ -1,7 +1,7 @@
 {% extends 'body_base.html' %}
 {% block main %}
-<main class="container flex-grow flex flex-col mx-auto mt-4 p-5 space-y-6">
-  <h1 class="text-3xl font-bold">Admin Dashboard</h1>
+<main class="container flex-grow flex flex-col mx-auto mt-4 space-y-6">
+  <h1 class="text-3xl font-bold mb-2">Admin Dashboard</h1>
 
   <div class="stats stats-vertical lg:stats-horizontal shadow">
     <div class="stat">