pds.ls
atmosphere explorer
pds.ls
tool
typescript
atproto
juliet.paris
1import { createSignal } from "solid-js";
2import { GRANULAR_SCOPES } from "../auth/scope-utils";
3import { agent, setOpenManager, setPendingPermissionEdit } from "../auth/state";
4import { Button } from "./button";
5import { Modal } from "./modal";
6
7type ScopeId = "create" | "update" | "delete" | "blob";
8
9const [requestedScope, setRequestedScope] = createSignal<ScopeId | null>(null);
10
11export const showPermissionPrompt = (scope: ScopeId) => {
12 setRequestedScope(scope);
13};
14
15export const PermissionPromptContainer = () => {
16 const scopeLabel = () => {
17 const scope = GRANULAR_SCOPES.find((s) => s.id === requestedScope());
18 return scope?.label.toLowerCase() || requestedScope();
19 };
20
21 const handleEditPermissions = () => {
22 setRequestedScope(null);
23 if (agent()) {
24 setPendingPermissionEdit(agent()!.sub);
25 setOpenManager(true);
26 }
27 };
28
29 return (
30 <Modal open={requestedScope() !== null} onClose={() => setRequestedScope(null)}>
31 <div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[calc(100%-2rem)] max-w-md rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
32 <h2 class="mb-2 font-semibold">Permission required</h2>
33 <p class="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
34 You need the "{scopeLabel()}" permission to perform this action.
35 </p>
36 <div class="flex justify-end gap-2">
37 <Button onClick={() => setRequestedScope(null)}>Cancel</Button>
38 <Button
39 onClick={handleEditPermissions}
40 class="dark:shadow-dark-700 rounded-lg bg-blue-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 dark:active:bg-blue-400"
41 >
42 Edit permissions
43 </Button>
44 </div>
45 </div>
46 </Modal>
47 );
48};