Matt
0e8feb1073
Auto-format all files modified during the documents-hub-split feature branch that were not yet aligned with the project's Prettier config (single quotes, semicolons, trailing commas). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
|
|
interface WebhookSecretDisplayProps {
|
|
/** Plaintext secret (shown once on creation). If undefined, shows masked. */
|
|
plaintext?: string;
|
|
/** Masked preview (always shown on view). */
|
|
masked: string;
|
|
}
|
|
|
|
export function WebhookSecretDisplay({ plaintext, masked }: WebhookSecretDisplayProps) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
async function copySecret() {
|
|
if (!plaintext) return;
|
|
await navigator.clipboard.writeText(plaintext);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
}
|
|
|
|
if (plaintext) {
|
|
return (
|
|
<div className="space-y-2">
|
|
<div className="rounded-md bg-amber-50 border border-amber-200 p-3 text-sm text-amber-800">
|
|
<strong>Copy this secret now.</strong> It will not be shown again.
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Input readOnly value={plaintext} className="font-mono text-sm" />
|
|
<Button type="button" variant="outline" size="sm" onClick={copySecret}>
|
|
{copied ? 'Copied!' : 'Copy'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<Input readOnly value={masked} className="font-mono text-sm text-muted-foreground" />
|
|
<span className="text-xs text-muted-foreground">
|
|
Use "Regenerate" to get a new secret
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|