NewOAuthAppBanner.tsx58 lines · main

1	import type { OAuthClient } from '@supabase/supabase-js'
2	import { X } from 'lucide-react'
3	import { toast } from 'sonner'
4	import { Button } from 'ui'
5	import { Admonition } from 'ui-patterns/admonition'
6	import { Input } from 'ui-patterns/DataInputs/Input'
7
8	interface NewOAuthAppBannerProps {
9	oauthApp: OAuthClient
10	onClose: () => void
11	}
12
13	export const NewOAuthAppBanner = ({ oauthApp, onClose }: NewOAuthAppBannerProps) => {
14	return (
15	<Admonition
16	type="default"
17	className="relative mb-6"
18	title={`Successfully generated credentials for your ${oauthApp.client_name} OAuth app!`}
19	description={
20	<div className="w-full space-y-2">
21	<p className="text-sm">
22	Do copy this client id and client secret and store it in a secure place - you will not
23	be able to see it again.
24	</p>
25	<div className="">
26	<Input
27	copy
28	readOnly
29	size="small"
30	className="input-mono"
31	value={oauthApp?.client_id}
32	onChange={() => {}}
33	onCopy={() => toast.success('Client Id copied to clipboard')}
34	/>
35	</div>
36	<div className="">
37	<Input
38	copy
39	readOnly
40	size="small"
41	className=" input-mono"
42	value={oauthApp?.client_secret}
43	onChange={() => {}}
44	onCopy={() => toast.success('Client secret copied to clipboard')}
45	/>
46	</div>
47	</div>
48	}
49	>
50	<Button
51	type="text"
52	icon={<X />}
53	className="w-7 h-7 absolute top-0 right-0"
54	onClick={onClose}
55	/>
56	</Admonition>
57	)
58	}