66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { clipboard } from '@/utils/clipboard';
|
|
import { Copy, RocketIcon } from 'lucide-react';
|
|
|
|
import type { IServiceClient } from '@openpanel/db';
|
|
|
|
import { Label } from '../ui/label';
|
|
|
|
type Props = IServiceClient;
|
|
|
|
export function CreateClientSuccess({ id, secret, cors }: Props) {
|
|
return (
|
|
<div className="grid gap-4">
|
|
<button className="text-left" onClick={() => clipboard(id)}>
|
|
<Label>Client ID</Label>
|
|
<div className="flex items-center justify-between rounded border-input bg-background p-2 px-3 font-mono text-sm">
|
|
{id}
|
|
<Copy size={16} />
|
|
</div>
|
|
</button>
|
|
{secret && (
|
|
<div className="w-full">
|
|
<button
|
|
className="w-full text-left"
|
|
onClick={() => clipboard(secret)}
|
|
>
|
|
<Label>Client secret</Label>
|
|
<div className="flex items-center justify-between rounded border-input bg-background p-2 px-3 font-mono text-sm">
|
|
{secret}
|
|
<Copy size={16} />
|
|
</div>
|
|
</button>
|
|
{cors && (
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
You will only need the secret if you want to send server events.
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
{cors && (
|
|
<div className="text-left">
|
|
<Label>CORS settings</Label>
|
|
<div className="flex items-center justify-between rounded border-input bg-background p-2 px-3 font-mono text-sm">
|
|
{cors}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<Alert>
|
|
<RocketIcon className="h-4 w-4" />
|
|
<AlertTitle>Get started!</AlertTitle>
|
|
<AlertDescription>
|
|
Read our{' '}
|
|
<a
|
|
target="_blank"
|
|
href="https://docs.openpanel.dev"
|
|
className="underline"
|
|
>
|
|
documentation
|
|
</a>{' '}
|
|
to get started. Easy peasy!
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
);
|
|
}
|