pippinmole/ghost

public

Source code of Ghost - On Ghost

allow orgs to create oauth apps1afc6343 days ago160 lines · 5.0 KB

1	import { AppWindow, Plus } from "lucide-react";
2	import Link from "next/link
3	import { Fragment }
4
5	import { Badge }
6	import { Button }
7	import { Card }
8	import {
9	Empty,
10	EmptyContent,
11	EmptyDescription,
12	EmptyHeader,
13	EmptyMedia,
14	EmptyTitle,
15	} from "@/components/ui/empty";
16	import {
17	Item,
18	ItemActions,
19	ItemContent,
20	ItemDescription,
21	ItemGroup,
22	ItemMedia,
23	ItemSeparator,
24	ItemTitle,
25	} from "@/components/ui/item";
26	import { Skeleton }
27	import { ProfileAvatar }
28	import type { components
29	import { DOCS_URL }
30
31	import { oauthAppsPath }
32
33	function NewAppButton({ organization
34	return (
35	<Button size="
36	<Link href={
37	<Plus />
38	New OAuth app
39	</Link>
40	</Button>
41	);
42	}
43
44	/** The OAuth apps this account or `organization` registered, each a link to its own settings. */
45	export function OauthAppList({
46	apps,
47	organization,
48	}: {
49	apps: components
50	organization?: string
51	}) {
52	return (
53	<section className="flex flex-col gap-4
54	<div className="flex items-start justify-between gap-4
55	<div className="flex flex-col gap-1
56	<h2 className="text-sm font-semibold
57	OAuth apps
58	<span className="ml-2 font-normal text-muted-foreground tabular-nums
59	{apps.length}
60	</span>
61	</h2>
62	<p className="text-sm text-muted-foreground
63	Let your own tools sign people in with their Ghost account, the way
64	they sign in with GitHub. People choose what each app may do, and
65	can revoke it at any time.{" "}
66	<a
67	className="underline underline-offset-2"
68	href={`${DOCS_URL
69	target="_blank"
70	rel="noreferrer"
71	>
72	How it works
73	</a>
74	</p>
75	</div>
76	{apps.length >
77	</div>
78
79	<Card className="
80	{apps.length ===
81	<Empty className="
82	<EmptyHeader>
83	<EmptyMedia variant="
84	<AppWindow />
85	</EmptyMedia>
86	<EmptyTitle>No OAuth apps yet</EmptyTitle
87	<EmptyDescription>
88	Register an app to get a client ID and secret it can use to ask
89	people for access.
90	</EmptyDescription>
91	</EmptyHeader>
92	<EmptyContent>
93	<NewAppButton organization={
94	</EmptyContent>
95	</Empty>
96	) : (
97	<ItemGroup className="
98	{apps.map((
99	<Fragment key={
100	{index > 0
101	<Item className="
102	<ItemMedia>
103	<ProfileAvatar
104	name={app.name
105	image={app.logoUrl
106	className="size-10 rounded-lg"
107	/>
108	</ItemMedia>
109	<ItemContent className="
110	<ItemTitle>
111	{app.name}
112	{app.deviceFlowEnabled &&
113	<Badge variant="
114	)}
115	</ItemTitle>
116	<ItemDescription className="
117	{app.description \|\|
118	</ItemDescription>
119	</ItemContent>
120	<ItemActions>
121	<Button size="
122	<Link
123	href={`${oauthAppsPath
124	>
125	Manage
126	</Link>
127	</Button>
128	</ItemActions>
129	</Item>
130	</Fragment>
131	))}
132	</ItemGroup>
133	)}
134	</Card>
135	</section>
136	);
137	}
138
139	export function OauthAppListSkeleton()
140	return (
141	<section className="flex flex-col gap-4
142	<div className="flex flex-col gap-2
143	<Skeleton className="
144	<Skeleton className="
145	</div>
146	<ul className="divide-y rounded-lg border
147	{Array.from({
148	<li key={index
149	<Skeleton className="
150	<div className="flex flex-1 flex-col gap-1.5
151	<Skeleton className="
152	<Skeleton className="
153	</div>
154	<Skeleton className="
155	</li>
156	))}
157	</ul>
158	</section>
159	);
160	}