feat: add reset email by verification code

Signed-off-by: Kininaru <shiftregister233@outlook.com>

web/src/ResetModal.js

@@ -0,0 +1,118 @@
+// Copyright 2021 The casbin Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {Button, Col, Modal, Row, Input,} from "antd";
+import i18next from "i18next";
+import React from "react";
+import * as Setting from "./Setting"
+import * as UserBackend from "./backend/UserBackend"
+
+export const ResetModal = (props) => {
+  const [visible, setVisible] = React.useState(false);
+  const [confirmLoading, setConfirmLoading] = React.useState(false);
+  const [sendButtonText, setSendButtonText] = React.useState(i18next.t("user:Send Code"));
+  const [sendCodeCoolDown, setCoolDown] = React.useState(false);
+  const {buttonText, destType, coolDownTime} = props;
+
+  const showModal = () => {
+    setVisible(true);
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+  };
+
+  const handleOk = () => {
+    let dest = document.getElementById("dest").value;
+    let code = document.getElementById("code").value;
+    if (dest === "") {
+      Setting.showMessage("error", i18next.t("user:Empty ") + destType);
+      return;
+    }
+    if (code === "") {
+      Setting.showMessage("error", i18next.t("user:Empty Code"));
+      return;
+    }
+    setConfirmLoading(true);
+    UserBackend.resetEmailOrPhone(dest, destType, code).then(res => {
+      if (res.status === "ok") {
+        Setting.showMessage("success", i18next.t(destType + " reset"));
+        window.location.reload();
+      } else {
+        Setting.showMessage("error", i18next.t(res.msg));
+        setConfirmLoading(false);
+      }
+    })
+  }
+
+  const countDown = (second) => {
+    if (second <= 0) {
+      setSendButtonText(i18next.t("user:Send Code"));
+      setCoolDown(false);
+      return;
+    }
+    setSendButtonText(second);
+    setTimeout(() => countDown(second - 1), 1000);
+  }
+
+  const sendCode = () => {
+    if (sendCodeCoolDown) return;
+    let dest = document.getElementById("dest").value;
+    if (dest === "") {
+      Setting.showMessage("error", i18next.t("user:Empty ") + destType);
+      return;
+    }
+    UserBackend.sendCode(dest, destType).then(res => {
+      if (res.status === "ok") {
+        Setting.showMessage("success", i18next.t("user:Code Sent"));
+        setCoolDown(true);
+        countDown(coolDownTime);
+      } else {
+        Setting.showMessage("error", i18next.t("user:" + res.msg));
+      }
+    })
+  }
+
+  return (
+    <Row>
+      <Button style={{marginTop: '22px'}} type="default" onClick={showModal}>
+        {buttonText}
+      </Button>
+      <Modal
+        title={buttonText}
+        visible={visible}
+        okText={buttonText}
+        cancelText={i18next.t("user:Cancel")}
+        confirmLoading={confirmLoading}
+        onCancel={handleCancel}
+        onOk={handleOk}
+        width={600}
+      >
+        <Col style={{margin: "0px auto 40px auto", width: 1000, height: 300}}>
+          <Row style={{width: "100%", marginBottom: "20px"}}>
+            <Input addonBefore={i18next.t("user:New " + destType)} id="dest"
+                            addonAfter={<button style={{width: "90px", border: "none", backgroundColor: "#fff"}} onClick={sendCode}>{" " + sendButtonText + " "}</button>}
+            />
+
+          </Row>
+          <Row style={{width: "100%", marginBottom: "20px"}}>
+            <Input addonBefore={i18next.t("user:Code You Received")} placeholder={i18next.t("user:Enter your code")} id="code"/>
+          </Row>
+        </Col>
+      </Modal>
+    </Row>
+  )
+}
+
+export default ResetModal;

web/src/UserEditPage.js

@@ -25,6 +25,7 @@ import * as ApplicationBackend from "./backend/ApplicationBackend";
 import * as ProviderBackend from "./backend/ProviderBackend";
 import * as Provider from "./auth/Provider";
 import PasswordModal from "./PasswordModal";
+import ResetModal from "./ResetModal";
 
 const { Option } = Select;
 
@@ -275,9 +276,8 @@ class UserEditPage extends React.Component {
             {i18next.t("general:Email")}:
           </Col>
           <Col span={22} >
-            <Input value={this.state.user.email} onChange={e => {
-              this.updateUserField('email', e.target.value);
-            }} />
+            <Input value={this.state.user.email} disabled />
+            { this.state.user.id === this.props.account.id ? (<ResetModal buttonText={i18next.t("user:Reset Email")} destType={"email"} coolDownTime={60}/>) : null}
           </Col>
         </Row>
         <Row style={{marginTop: '20px'}} >

web/src/backend/UserBackend.js

@@ -92,3 +92,26 @@ export function setPassword(userOwner, userName, oldPassword, newPassword) {
     body: formData
   }).then(res => res.json());
 }
+
+export function sendCode(dest, type) {
+  let formData = new FormData();
+  formData.append("dest", dest);
+  formData.append("type", type);
+  return fetch(`${Setting.ServerUrl}/api/send-verification-code`, {
+    method: "POST",
+    credentials: "include",
+    body: formData
+  }).then(res => res.json());
+}
+
+export function resetEmailOrPhone(dest, type, code) {
+  let formData = new FormData();
+  formData.append("dest", dest);
+  formData.append("type", type);
+  formData.append("code", code);
+  return fetch(`${Setting.ServerUrl}/api/reset-email-or-phone`, {
+    method: "POST",
+    credentials: "include",
+    body: formData
+  }).then(res => res.json());
+}