mirrors/beszel
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-10-21 22:02:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): match token mask length and place copy buttons beside values

Browse Source
This commit is contained in:
henrygd
2026-10-17 10:09:18 -04:00
parent 74b02cbe0d
commit cc98299a72
2 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/site/src/components/routes/settings/tokens-fingerprints.tsx
+2 -2
View File
@@ -191,7 +191,7 @@ const SectionUniversalToken = memo(() => {
<span className="text-sm text-muted-foreground whitespace-nowrap">
<Trans>Public key</Trans>
</span>
<div className="min-w-0 flex-1 truncate">
<div className="min-w-0 truncate">
<span className="text-sm text-primary font-mono">{publicKey}</span>
</div>
<Button
@@ -200,7 +200,7 @@ const SectionUniversalToken = memo(() => {
onClick={() => copyToClipboard(publicKey)}
title={t`Copy public key`}
>
<CopyIcon className="w-4" />
<CopyIcon className="size-4" />
</Button>
</div>
)}
internal/site/src/components/token-value.tsx
+31 -31
View File
@@ -12,39 +12,39 @@ export function TokenValue({ token, label, disabled = false }: { token: string;
return (
<fieldset className="flex items-center gap-2 min-w-0">
<legend className="sr-only">{label}</legend>
<span className="font-mono text-sm min-w-0 flex-1 overflow-x-auto whitespace-nowrap" aria-hidden={!revealed}>
{revealed ? token : "••••••••••••"}
<span className="font-mono text-sm min-w-0 overflow-x-auto whitespace-nowrap" aria-hidden={!revealed}>
{revealed ? token : "•".repeat(token.length)}
</span>
{!revealed && <span className="sr-only">{t`Token hidden`}</span>}
<Button
type="button"
variant="ghost"
size="icon"
className="shrink-0"
disabled={disabled}
aria-label={revealed ? t`Hide token` : t`Reveal token`}
title={revealed ? t`Hide token` : t`Reveal token`}
aria-pressed={revealed}
onClick={() => setRevealedToken(revealed ? null : token)}
>
{revealed ? (
<EyeOffIcon className="size-4" aria-hidden="true" />
) : (
<EyeIcon className="size-4" aria-hidden="true" />
)}
</Button>
<Button
type="button"
variant="ghost"
size="icon"
className="shrink-0"
disabled={disabled}
aria-label={t`Copy token`}
title={t`Copy token`}
onClick={() => copyToClipboard(token)}
>
<CopyIcon className="size-4" aria-hidden="true" />
</Button>
<div className="flex shrink-0">
<Button
type="button"
variant="ghost"
size="icon"
disabled={disabled}
aria-label={revealed ? t`Hide token` : t`Reveal token`}
title={revealed ? t`Hide token` : t`Reveal token`}
aria-pressed={revealed}
onClick={() => setRevealedToken(revealed ? null : token)}
>
{revealed ? (
<EyeOffIcon className="size-4" aria-hidden="true" />
) : (
<EyeIcon className="size-4" aria-hidden="true" />
)}
</Button>
<Button
type="button"
variant="ghost"
size="icon"
disabled={disabled}
aria-label={t`Copy token`}
title={t`Copy token`}
onClick={() => copyToClipboard(token)}
>
<CopyIcon className="size-4" aria-hidden="true" />
</Button>
</div>
</fieldset>
)
}