feat: confirm reset openid dialog

web/src/components/ConfirmResetOpenIdDialog.tsx

@@ -0,0 +1,69 @@
+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;

web/src/components/MyAccountSection.tsx

@@ -3,10 +3,9 @@ import appContext from "../stores/appContext";
 import { userService } from "../services";
 import utils from "../helpers/utils";
 import { validate, ValidatorConfig } from "../helpers/validator";
-import useLoading from "../hooks/useLoading";
-import useToggle from "../hooks/useToggle";
 import toastHelper from "./Toast";
 import showChangePasswordDialog from "./ChangePasswordDialog";
+import showConfirmResetOpenIdDialog from "./ConfirmResetOpenIdDialog";
 import "../less/my-account-section.less";
 
 const validateConfig: ValidatorConfig = {
@@ -22,8 +21,6 @@ const MyAccountSection: React.FC<Props> = () => {
   const { userState } = useContext(appContext);
   const user = userState.user as Model.User;
   const [username, setUsername] = useState<string>(user.username);
-  const resetBtnClickLoadingState = useLoading(false);
-  const [showConfirmResetAPIBtn, toggleConfirmResetAPIBtn] = useToggle(false);
   const openAPIRoute = `${window.location.origin}/api/whs/memo/${user.openId}`;
 
   const handleUsernameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -73,22 +70,7 @@ const MyAccountSection: React.FC<Props> = () => {
   };
 
   const handleResetOpenIdBtnClick = async () => {
-    if (!showConfirmResetAPIBtn) {
+    showConfirmResetOpenIdDialog();
-      toggleConfirmResetAPIBtn(true);
-      return;
-    }
-    if (resetBtnClickLoadingState.isLoading) {
-      return;
-    }
-
-    resetBtnClickLoadingState.setLoading();
-    try {
-      await userService.resetOpenId();
-    } catch (error) {
-      // do nth
-    }
-    resetBtnClickLoadingState.setFinish();
-    toggleConfirmResetAPIBtn(false);
   };
 
   const handlePreventDefault = (e: React.MouseEvent) => {
@@ -135,8 +117,8 @@ const MyAccountSection: React.FC<Props> = () => {
       <div className="section-container openapi-section-container">
         <p className="title-text">Open API（实验性功能）</p>
         <p className="value-text">{openAPIRoute}</p>
-        <span className={`reset-btn ${resetBtnClickLoadingState.isLoading ? "loading" : ""}`} onClick={handleResetOpenIdBtnClick}>
+        <span className="reset-btn" onClick={handleResetOpenIdBtnClick}>
-          {showConfirmResetAPIBtn ? "⚠️ 确定重置 API" : "重置 API"}
+          重置 API
         </span>
         <div className="usage-guide-container">
           <p className="title-text">使用方法：</p>

web/src/less/confirm-reset-openid-dialog.less

@@ -0,0 +1,61 @@
+@import "./mixin.less";
+
+.confirm-reset-openid-dialog {
+  > .dialog-container {
+    width: 300px;
+    border-radius: 8px;
+
+    > .dialog-content-container {
+      .flex(column, flex-start, flex-start);
+      width: 100%;
+
+      > .warn-text {
+        padding: 8px 0;
+      }
+
+      > .btns-container {
+        .flex(row, flex-end, center);
+        margin-top: 8px;
+        width: 100%;
+
+        > .btn {
+          font-size: 14px;
+          padding: 6px 12px;
+          border-radius: 4px;
+          margin-right: 8px;
+          background-color: lightgray;
+
+          &:hover {
+            opacity: 0.8;
+          }
+
+          &.cancel-btn {
+            background-color: unset;
+          }
+
+          &.confirm-btn {
+            background-color: @bg-red;
+            border: 1px solid red;
+            color: red;
+
+            &.loading {
+              opacity: 0.8;
+              cursor: wait;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .dialog-wrapper.confirm-reset-openid-dialog {
+    padding: 24px 16px;
+    padding-top: 64px;
+
+    > .dialog-container {
+      width: 100%;
+    }
+  }
+}

web/src/less/my-account-section.less

@@ -69,6 +69,8 @@
     padding: 4px 6px;
     border-radius: 4px;
     line-height: 1.6;
+    word-break: break-all;
+    white-space: pre-wrap;
   }
 
   > .reset-btn {
@@ -81,15 +83,11 @@
     line-height: 1.6;
     cursor: pointer;
     user-select: none;
+    font-size: 12px;
 
     &:hover {
       opacity: 0.8;
     }
-
-    &.loading {
-      opacity: 0.6;
-      cursor: wait;
-    }
   }
 
   > .usage-guide-container {
@@ -106,7 +104,6 @@
       border-radius: 4px;
       line-height: 1.4;
       word-break: break-all;
-      word-wrap: break-word;
       white-space: pre-wrap;
     }
   }