From 48eb618959261bbf00edcf977496384dd7d959f3 Mon Sep 17 00:00:00 2001 From: email Date: Sun, 9 Jan 2022 12:29:02 +0800 Subject: [PATCH] feat: confirm reset openid dialog --- .../components/ConfirmResetOpenIdDialog.tsx | 69 +++++++++++++++++++ web/src/components/MyAccountSection.tsx | 26 ++----- web/src/less/confirm-reset-openid-dialog.less | 61 ++++++++++++++++ web/src/less/my-account-section.less | 9 +-- 4 files changed, 137 insertions(+), 28 deletions(-) create mode 100644 web/src/components/ConfirmResetOpenIdDialog.tsx create mode 100644 web/src/less/confirm-reset-openid-dialog.less diff --git a/web/src/components/ConfirmResetOpenIdDialog.tsx b/web/src/components/ConfirmResetOpenIdDialog.tsx new file mode 100644 index 00000000..8b3bb313 --- /dev/null +++ b/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 = ({ 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 ( + <> +
+

重置 Open API

+ +
+
+

⚠️ 现有 API 将失效，并生成新的 API，确定要重置吗?

+
+ + 取消 + + + 确定重置！ + +
+
+ + ); +}; + +function showConfirmResetOpenIdDialog() { + showDialog( + { + className: "confirm-reset-openid-dialog", + }, + ConfirmResetOpenIdDialog + ); +} + +export default showConfirmResetOpenIdDialog; diff --git a/web/src/components/MyAccountSection.tsx b/web/src/components/MyAccountSection.tsx index 617c4474..f573ae83 100644 --- a/web/src/components/MyAccountSection.tsx +++ b/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 = () => { const { userState } = useContext(appContext); const user = userState.user as Model.User; const [username, setUsername] = useState(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) => { @@ -73,22 +70,7 @@ const MyAccountSection: React.FC = () => { }; const handleResetOpenIdBtnClick = async () => { - if (!showConfirmResetAPIBtn) { - toggleConfirmResetAPIBtn(true); - return; - } - if (resetBtnClickLoadingState.isLoading) { - return; - } - - resetBtnClickLoadingState.setLoading(); - try { - await userService.resetOpenId(); - } catch (error) { - // do nth - } - resetBtnClickLoadingState.setFinish(); - toggleConfirmResetAPIBtn(false); + showConfirmResetOpenIdDialog(); }; const handlePreventDefault = (e: React.MouseEvent) => { @@ -135,8 +117,8 @@ const MyAccountSection: React.FC = () => {

Open API（实验性功能）

{openAPIRoute}

- - {showConfirmResetAPIBtn ? "⚠️ 确定重置 API" : "重置 API"} + + 重置 API

使用方法：

diff --git a/web/src/less/confirm-reset-openid-dialog.less b/web/src/less/confirm-reset-openid-dialog.less new file mode 100644 index 00000000..d99338e1 --- /dev/null +++ b/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%; + } + } +} diff --git a/web/src/less/my-account-section.less b/web/src/less/my-account-section.less index 32d13aa1..47d2aaf6 100644 --- a/web/src/less/my-account-section.less +++ b/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; } }