Tristan Yang
63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { ChangeEvent, FC, useEffect, useState } from "react";
|
|
import toast from "react-hot-toast";
|
|
import Modal from "../../common/component/Modal";
|
|
import StyledModal from "../../common/component/styled/Modal";
|
|
import Button from "../../common/component/styled/Button";
|
|
import Checkbox from "../../common/component/styled/Checkbox";
|
|
import useLogout from "../../common/hook/useLogout";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
|
|
interface Props {
|
|
closeModal: () => void;
|
|
}
|
|
|
|
const LogoutConfirmModal: FC<Props> = ({ closeModal }) => {
|
|
const { t } = useTranslation("auth");
|
|
const { t: ct } = useTranslation();
|
|
const [clearLocal, setClearLocal] = useState(false);
|
|
const { logout, exited, exiting, clearLocalData } = useLogout();
|
|
const handleLogout = () => {
|
|
logout();
|
|
};
|
|
|
|
const handleCheck = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
setClearLocal(evt.target.checked);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (exited) {
|
|
if (clearLocal) {
|
|
clearLocalData();
|
|
}
|
|
toast.success(ct("tip.logout"));
|
|
}
|
|
}, [exited, clearLocal]);
|
|
|
|
return (
|
|
<Modal id="modal-modal">
|
|
<StyledModal
|
|
title={t("logout.title")}
|
|
description={t("logout.desc")}
|
|
buttons={
|
|
<>
|
|
<Button onClick={closeModal}>{ct("action.cancel")}</Button>
|
|
<Button onClick={handleLogout} className="danger">
|
|
{exiting ? "Logging out" : ct("action.logout")}
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
<div className="text-sm text-gray-400 flex justify-end items-center">
|
|
<label htmlFor="clear_cb" className="cursor-pointer text-orange-500 mr-3">
|
|
{t("logout.clear_local")}
|
|
</label>
|
|
<Checkbox className=" cursor-pointer" name="clear_cb" checked={clearLocal} onChange={handleCheck} />
|
|
</div>
|
|
</StyledModal>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default LogoutConfirmModal;
|