72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import { Button, Input, Textarea } from "@mui/joy";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useUserStore } from "@/store/module";
|
|
import { showCommonDialog } from "../Dialog/CommonDialog";
|
|
import showChangePasswordDialog from "../ChangePasswordDialog";
|
|
import Icon from "../Icon";
|
|
import showUpdateAccountDialog from "../UpdateAccountDialog";
|
|
import UserAvatar from "../UserAvatar";
|
|
|
|
const MyAccountSection = () => {
|
|
const { t } = useTranslation();
|
|
const userStore = useUserStore();
|
|
const user = userStore.state.user as User;
|
|
const openAPIRoute = `${window.location.origin}/api/memo?openId=${user.openId}`;
|
|
|
|
const handleResetOpenIdBtnClick = async () => {
|
|
showCommonDialog({
|
|
title: t("setting.account-section.openapi-reset"),
|
|
content: t("setting.account-section.openapi-reset-warning"),
|
|
style: "warning",
|
|
dialogName: "reset-openid-dialog",
|
|
onConfirm: async () => {
|
|
await userStore.patchUser({
|
|
id: user.id,
|
|
resetOpenId: true,
|
|
});
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="section-container account-section-container">
|
|
<p className="title-text">{t("setting.account-section.title")}</p>
|
|
<div className="flex flex-row justify-start items-center">
|
|
<UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
|
|
<span className="text-2xl leading-10 font-medium">{user.nickname}</span>
|
|
<span className="text-base ml-1 text-gray-500 leading-10 dark:text-gray-400">({user.username})</span>
|
|
</div>
|
|
<div className="flex flex-row justify-start items-center text-base text-gray-600 dark:text-gray-400">{user.email}</div>
|
|
<div className="w-full flex flex-row justify-start items-center mt-2 space-x-2">
|
|
<Button variant="outlined" onClick={showUpdateAccountDialog}>
|
|
{t("common.edit")}
|
|
</Button>
|
|
<Button variant="outlined" onClick={showChangePasswordDialog}>
|
|
{t("setting.account-section.change-password")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="section-container openapi-section-container mt-6">
|
|
<p className="title-text">{t("setting.account-section.openapi-title")}</p>
|
|
<Input className="w-full mb-3" value={openAPIRoute} readOnly />
|
|
<Button color="warning" className="mb-4" onClick={handleResetOpenIdBtnClick}>
|
|
{t("setting.account-section.reset-api")} <Icon.RefreshCw className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
<Textarea
|
|
className="w-full !font-mono !text-sm mt-4"
|
|
value={`POST ${openAPIRoute}\nContent-type: application/json\n{\n "content": "${t(
|
|
"setting.account-section.openapi-sample-post",
|
|
{
|
|
url: window.location.origin,
|
|
interpolation: { escapeValue: false },
|
|
}
|
|
)}"\n}`}
|
|
readOnly
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MyAccountSection;
|