CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-30 21:01:54 +08:00
Code Issues Actions 44 Packages Projects Releases Wiki Activity

Add secret key reveal controls and align copy fields with design inputs.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Developing-Gamer 2026-06-23 15:39:06 -07:00
parent 87b6eee8f7
commit 4c4e0b33ab
2 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/dashboard/src/components/ui/copy-field.tsx
View File

@ -1,8 +1,12 @@
"use client";
import React, { useState } from "react";
import { Input } from "./input";
import { Label } from "./label";
import { SimpleTooltip } from "./simple-tooltip";
import { Textarea } from "./textarea";
import { CopyButton } from "./copy-button";
import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
export function CopyField(props: {
value: string,
@ -11,12 +15,15 @@ export function CopyField(props: {
monospace?: boolean,
fixedSize?: boolean,
initialCopied?: boolean,
isSecret?: boolean,
} & ({
type: "textarea",
height?: number,
} | {
type: "input",
})) {
const [isRevealed, setIsRevealed] = useState(false);
return (
<div>
{props.label && (
@ -43,12 +50,24 @@ export function CopyField(props: {
<div className="flex items-center gap-2">
<Input
readOnly
type={props.isSecret && !isRevealed ? "password" : "text"}
value={props.value}
className={props.isSecret ? "font-mono pr-10" : undefined}
style={{
fontFamily: props.monospace ? "ui-monospace, monospace" : "inherit",
}}
/>
<CopyButton content={props.value} initialCopied={props.initialCopied} />
{props.isSecret && (
<button
type="button"
onClick={() => setIsRevealed(!isRevealed)}
className="h-9 w-9 flex items-center justify-center rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm text-muted-foreground/60 hover:text-foreground hover:bg-white dark:hover:bg-foreground/[0.06] transition-all shrink-0"
title={isRevealed ? "Hide key" : "Show key"}
>
{isRevealed ? <EyeSlashIcon className="h-4 w-4" /> : <EyeIcon className="h-4 w-4" />}
</button>
)}
<CopyButton content={props.value} initialCopied={props.initialCopied} className="h-9 w-9 p-1.5 rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm hover:bg-white dark:hover:bg-foreground/[0.06] transition-all shrink-0" />
</div>
)}
</div>

2
apps/dashboard/src/components/ui/textarea.tsx
View File

@ -10,7 +10,7 @@ const Textarea = forwardRefIfNeeded<HTMLTextAreaElement, TextareaProps>(
return (
<textarea
className={cn(
"stack-scope flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
"stack-scope flex min-h-[60px] w-full rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06] placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1] disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06] px-3 py-2 text-sm",
className
)}
ref={ref}