47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
"use client";
|
||
|
||
import { FilledButton } from "@/components/ui/Buttons/FilledButton";
|
||
import { Dialog, DialogButton, DialogButtonGroup, DialogHeadline, DialogSupportingText } from "@/components/ui/Dialog";
|
||
import { Portal } from "@/components/utils/Portal";
|
||
import { useRouter } from "@/i18n/navigation";
|
||
import { useState } from "react";
|
||
|
||
export const LogoutButton: React.FC = () => {
|
||
const [showDialog, setShowDialog] = useState(false);
|
||
const router = useRouter();
|
||
return (
|
||
<>
|
||
<FilledButton
|
||
shape="square"
|
||
className="mt-5 !text-on-error dark:!text-dark-on-error !bg-error dark:!bg-dark-error font-medium"
|
||
onClick={() => setShowDialog(true)}
|
||
>
|
||
登出
|
||
</FilledButton>
|
||
<Portal>
|
||
<Dialog show={showDialog}>
|
||
<DialogHeadline>确认登出</DialogHeadline>
|
||
<DialogSupportingText>确认要退出登录吗？</DialogSupportingText>
|
||
<DialogButtonGroup close={() => setShowDialog(false)}>
|
||
<DialogButton onClick={() => setShowDialog(false)}>取消</DialogButton>
|
||
<DialogButton
|
||
onClick={async () => {
|
||
try {
|
||
await fetch("/logout", {
|
||
method: "POST"
|
||
});
|
||
router.push("/");
|
||
} finally {
|
||
setShowDialog(false);
|
||
}
|
||
}}
|
||
>
|
||
确认
|
||
</DialogButton>
|
||
</DialogButtonGroup>
|
||
</Dialog>
|
||
</Portal>
|
||
</>
|
||
);
|
||
};
|