From 5280baf33db42e098adf0cc8fa45b2f798128654 Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes-agent@bueso.me>
Date: Sat, 4 Jul 2026 14:02:32 +0000
Subject: [PATCH] Add reveal/copy buttons for API token in settings UI

The token was only shown masked (first 12 chars + bullets) with no
way to see or copy the full value. Added:
- Show/Hide toggle to reveal the full token
- Copy button that writes the token to clipboard
Both use Alpine.js (already used in the template).
---
 .../setting_html/setting_form.html.heex         | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/lib/pinchflat_web/controllers/settings/setting_html/setting_form.html.heex b/lib/pinchflat_web/controllers/settings/setting_html/setting_form.html.heex
index 275b0a4..0285864 100644
--- a/lib/pinchflat_web/controllers/settings/setting_html/setting_form.html.heex
+++ b/lib/pinchflat_web/controllers/settings/setting_html/setting_form.html.heex
@@ -36,12 +36,25 @@
       Send it as <code class="font-mono">Authorization: Bearer &lt;token&gt;</code>.
     </p>
 
-    <div class="mt-4">
+    <div class="mt-4" x-data="{ revealed: false, copied: false }">
       <%= if Settings.get!(:api_token) do %>
         <div class="flex items-center gap-3 flex-wrap">
           <code class="font-mono text-sm bg-meta-2 dark:bg-meta-4 px-3 py-2 rounded break-all">
-            {String.slice(Settings.get!(:api_token), 0, 12)}••••••••
+            <span x-show="!revealed">{String.slice(Settings.get!(:api_token), 0, 12)}••••••••</span>
+            <span x-show="revealed" x-cloak>{Settings.get!(:api_token)}</span>
           </code>
+          <button type="button" class="text-sm underline" @click="revealed = !revealed">
+            <span x-show="!revealed">Show</span>
+            <span x-show="revealed" x-cloak>Hide</span>
+          </button>
+          <button
+            type="button"
+            class="text-sm underline"
+            @click="navigator.clipboard.writeText('{Settings.get!(:api_token)}').then(() => { copied = true; setTimeout(() => copied = false, 2000) })"
+          >
+            <span x-show="!copied">Copy</span>
+            <span x-show="copied" x-cloak>Copied!</span>
+          </button>
           <.link href={~p"/settings/generate_api_token"} method="post">
             <.button rounding="rounded-lg" class="bg-warning hover:bg-warning/80">Regenerate Token</.button>
           </.link>