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).
This commit is contained in:
@@ -36,12 +36,25 @@
|
||||
Send it as <code class="font-mono">Authorization: Bearer <token></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>
|
||||
|
||||
Reference in New Issue
Block a user