Add reveal/copy buttons for API token in settings UI
Nix Flake Check / Nix Flake Check (push) Successful in 1m51s
Build and Test / Build and Test (push) Successful in 8m30s

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).
This commit is contained in:
2026-07-04 14:02:32 +00:00
parent 0e0fd20da7
commit 5280baf33d
@@ -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>