69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import { useEffect } from "react";
|
||
import { showDialog } from "./Dialog";
|
||
import useLoading from "../hooks/useLoading";
|
||
import toastHelper from "./Toast";
|
||
import { userService } from "../services";
|
||
import "../less/confirm-reset-openid-dialog.less";
|
||
|
||
interface Props extends DialogProps {}
|
||
|
||
const ConfirmResetOpenIdDialog: React.FC<Props> = ({ destroy }: Props) => {
|
||
const resetBtnClickLoadingState = useLoading(false);
|
||
|
||
useEffect(() => {
|
||
// do nth
|
||
}, []);
|
||
|
||
const handleCloseBtnClick = () => {
|
||
destroy();
|
||
};
|
||
|
||
const handleConfirmBtnClick = async () => {
|
||
if (resetBtnClickLoadingState.isLoading) {
|
||
return;
|
||
}
|
||
|
||
resetBtnClickLoadingState.setLoading();
|
||
try {
|
||
await userService.resetOpenId();
|
||
} catch (error) {
|
||
toastHelper.error("请求重置 Open API 失败");
|
||
return;
|
||
}
|
||
toastHelper.success("重置成功！");
|
||
handleCloseBtnClick();
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="dialog-header-container">
|
||
<p className="title-text">重置 Open API</p>
|
||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||
<img className="icon-img" src="/icons/close.svg" />
|
||
</button>
|
||
</div>
|
||
<div className="dialog-content-container">
|
||
<p className="warn-text">⚠️ 现有 API 将失效，并生成新的 API，确定要重置吗?</p>
|
||
<div className="btns-container">
|
||
<span className="btn cancel-btn" onClick={handleCloseBtnClick}>
|
||
取消
|
||
</span>
|
||
<span className={`btn confirm-btn ${resetBtnClickLoadingState.isLoading ? "loading" : ""}`} onClick={handleConfirmBtnClick}>
|
||
确定重置！
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
function showConfirmResetOpenIdDialog() {
|
||
showDialog(
|
||
{
|
||
className: "confirm-reset-openid-dialog",
|
||
},
|
||
ConfirmResetOpenIdDialog
|
||
);
|
||
}
|
||
|
||
export default showConfirmResetOpenIdDialog;
|