chunzhi/comfyui-deploy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add new auth_request flow for logging in with comfy deploy

Browse Source
This commit is contained in:
BennyKok
2024-01-22 14:11:14 +08:00
parent 3043093d22
commit 47168930dc
25 changed files with 2424 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/ButtonActionLoader.tsx
+66 -67
View File
@@ -4,10 +4,10 @@ import { LoadingIcon } from "@/components/LoadingIcon";
import { callServerPromise } from "@/components/callServerPromise";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useAuth, useClerk } from "@clerk/nextjs";
import { MoreVertical } from "lucide-react";
@@ -15,80 +15,79 @@ import { useRouter } from "next/navigation";
import { useState } from "react";
export function ButtonAction({
action,
children,
routerAction = "back",
...rest
action,
children,
routerAction = "back",
...rest
}: {
action: () => Promise<any>;
routerAction?: "refresh" | "back";
children: React.ReactNode;
action: () => Promise<any>;
routerAction?: "refresh" | "back" | "do-nothing";
children: React.ReactNode;
}) {
const [pending, setPending] = useState(false);
const router = useRouter();
const [pending, setPending] = useState(false);
const router = useRouter();
return (
<button
onClick={async () => {
if (pending) return;
return (
<button
onClick={async () => {
if (pending) return;
setPending(true);
await callServerPromise(action());
setPending(false);
setPending(true);
await callServerPromise(action());
setPending(false);
if (routerAction === "back") {
if (routerAction === "back") {
router.back();
router.refresh();
}
else if (routerAction === "refresh") router.refresh();
}}
{...rest}
>
{children} {pending && <LoadingIcon />}
</button>
);
} else if (routerAction === "refresh") router.refresh();
}}
{...rest}
>
{children} {pending && <LoadingIcon />}
</button>
);
}
export function ButtonActionMenu(props: {
title?: string;
actions: {
title: string;
action: () => Promise<any>;
}[];
title?: string;
actions: {
title: string;
action: () => Promise<any>;
}[];
}) {
const user = useAuth();
const [isLoading, setIsLoading] = useState(false);
const clerk = useClerk();
const user = useAuth();
const [isLoading, setIsLoading] = useState(false);
const clerk = useClerk();
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="gap-2" variant="outline" disabled={isLoading}>
{props.title}
{isLoading ? <LoadingIcon /> : <MoreVertical size={14} />}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
{props.actions.map((action) => (
<DropdownMenuItem
key={action.title}
onClick={async () => {
if (!user.isSignedIn) {
clerk.openSignIn({
redirectUrl: window.location.href,
});
return;
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="gap-2" variant="outline" disabled={isLoading}>
{props.title}
{isLoading ? <LoadingIcon /> : <MoreVertical size={14} />}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
{props.actions.map((action) => (
<DropdownMenuItem
key={action.title}
onClick={async () => {
if (!user.isSignedIn) {
clerk.openSignIn({
redirectUrl: window.location.href,
});
return;
}
setIsLoading(true);
await callServerPromise(action.action());
setIsLoading(false);
}}
>
{action.title}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
);
setIsLoading(true);
await callServerPromise(action.action());
setIsLoading(false);
}}
>
{action.title}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
);
}