feat: check user email and phone when signing up

Signed-off-by: Kininaru <shiftregister233@outlook.com> phone prefix error Signed-off-by: Kininaru <shiftregister233@outlook.com> fix i18n Signed-off-by: Kininaru <shiftregister233@outlook.com> fix i18n error Signed-off-by: Kininaru <shiftregister233@outlook.com> removed useless file Signed-off-by: Kininaru <shiftregister233@outlook.com> move timeout to app.conf Signed-off-by: Kininaru <shiftregister233@outlook.com> i18n Signed-off-by: Kininaru <shiftregister233@outlook.com> made verification code reusable Signed-off-by: Kininaru <shiftregister233@outlook.com>
2025-07-04 05:10:19 +08:00 · 2021-05-18 20:11:03 +08:00
parent 9bc29e25ef
commit 66d953a6c1
14 changed files with 151 additions and 37 deletions
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@ -222,6 +222,18 @@ class ProviderEditPage extends React.Component {
            </React.Fragment>
          ) : null
        }
+        {this.state.provider.category === "Phone" && this.state.provider.type === "tencent" ? (
+          <Row style={{marginTop: '20px'}} >
+            <Col style={{marginTop: '5px'}} span={2}>
+              {i18next.t("provider:App ID")}:
+            </Col>
+            <Col span={22} >
+              <Input value={this.state.provider.appId} onChange={e => {
+                this.updateProviderField('appId', e.target.value);
+              }} />
+            </Col>
+          </Row>
+        ) : null}
        <Row style={{marginTop: '20px'}} >
          <Col style={{marginTop: '5px'}} span={2}>
            {i18next.t("provider:Provider URL")}:
--- a/web/src/ResetModal.js
+++ b/web/src/ResetModal.js
@ -25,7 +25,7 @@ export const ResetModal = (props) => {
  const [sendCodeCoolDown, setCoolDown] = React.useState(false);
  const [dest, setDest] = React.useState("");
  const [code, setCode] = React.useState("");
-  const {buttonText, destType, coolDownTime} = props;
+  const {buttonText, destType, coolDownTime, org} = props;

  const showModal = () => {
    setVisible(true);
@ -72,7 +72,8 @@ export const ResetModal = (props) => {
      Setting.showMessage("error", i18next.t("user:Empty " + destType));
      return;
    }
-    UserBackend.sendCode(dest, destType).then(res => {
+    let orgId = org.owner + "/" + org.name;
+    UserBackend.sendCode(dest, destType, orgId).then(res => {
      if (res.status === "ok") {
        Setting.showMessage("success", i18next.t("user:Code Sent"));
        setCoolDown(true);
--- a/web/src/UserEditPage.js
+++ b/web/src/UserEditPage.js
@ -267,7 +267,7 @@ class UserEditPage extends React.Component {
            <Input value={this.state.user.email} disabled />
          </Col>
          <Col span={11} >
-            { this.state.user.id === this.props.account.id ? (<ResetModal buttonText={i18next.t("user:Reset Email")} destType={"email"} coolDownTime={60}/>) : null}
+            { this.state.user.id === this.props.account.id ? (<ResetModal org={this.state.application?.organizationObj} buttonText={i18next.t("user:Reset Email")} destType={"email"} coolDownTime={60}/>) : null}
          </Col>
        </Row>
        <Row style={{marginTop: '20px'}} >
@ -278,7 +278,7 @@ class UserEditPage extends React.Component {
            <Input value={this.state.user.phone} addonBefore={`+${this.state.application?.organizationObj.phonePrefix}`} disabled />
          </Col>
          <Col span={11} >
-            { this.state.user.id === this.props.account.id ? (<ResetModal buttonText={i18next.t("user:Reset Phone")} destType={"phone"} coolDownTime={60}/>) : null}
+            { this.state.user.id === this.props.account.id ? (<ResetModal org={this.state.application?.organizationObj} buttonText={i18next.t("user:Reset Phone")} destType={"phone"} coolDownTime={60}/>) : null}
          </Col>
        </Row>
        <Row style={{marginTop: '20px'}} >
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@ -21,6 +21,7 @@ import i18next from "i18next";
 import * as Util from "./Util";
 import {authConfig} from "./Auth";
 import * as ApplicationBackend from "../backend/ApplicationBackend";
+import * as UserBackend from "../backend/UserBackend";

 const formItemLayout = {
  labelCol: {
@ -61,6 +62,8 @@ class SignupPage extends React.Component {
      classes: props,
      applicationName: props.match.params.applicationName !== undefined ? props.match.params.applicationName : authConfig.appName,
      application: null,
+      email: "",
+      phone: ""
    };

    this.form = React.createRef();
@ -96,12 +99,13 @@ class SignupPage extends React.Component {
  }

  onFinish(values) {
+    values.phonePrefix = this.state.application?.organizationObj.phonePrefix;
    AuthBackend.signup(values)
      .then((res) => {
        if (res.status === 'ok') {
          Setting.goToLinkSoft(this, this.getResultPath(this.state.application));
        } else {
-          Setting.showMessage("error", `Failed to sign up: ${res.msg}`);
+          Setting.showMessage("error", i18next.t(`signup:${res.msg}`));
        }
      });
  }
@ -110,6 +114,22 @@ class SignupPage extends React.Component {
    this.form.current.scrollToField(errorFields[0].name);
  }

+  sendCode(type) {
+    let dest, orgId;
+    if (type === "email") {
+      dest = this.state.email;
+    } else if (type === "phone") {
+      dest = this.state.phone;
+    } else return;
+
+    orgId = this.state.application?.organizationObj.owner + "/" + this.state.application?.organizationObj.name
+
+    UserBackend.sendCode(dest, type, orgId).then(res => {
+      if (res.status === "ok") Setting.showMessage("success", i18next.t("signup:code sent"));
+      else Setting.showMessage("error", i18next.t("signup:" + res.msg));
+    })
+  }
+
  renderForm(application) {
    if (!application.enableSignUp) {
      return (
@ -220,7 +240,17 @@ class SignupPage extends React.Component {
            },
          ]}
        >
-          <Input />
+          <Input onChange={e => this.setState({email: e.target.value})} />
+        </Form.Item>
+        <Form.Item
+          name="emailCode"
+          label={i18next.t("signup:email code")}
+          rules={[{
+            required: true,
+            message: i18next.t("signup:Please input your verification code!"),
+          }]}
+        >
+          <Input autoComplete="off" value={this.state.emailCode} addonAfter={<button onClick={() => this.sendCode("email")} style={{backgroundColor: "#fafafa", border: "none"}}>{i18next.t("signup:send code")}</button>} />
        </Form.Item>
        <Form.Item
          name="password"
@ -273,8 +303,21 @@ class SignupPage extends React.Component {
              width: '100%',
            }}
            addonBefore={`+${this.state.application?.organizationObj.phonePrefix}`}
+            onChange={e => this.setState({phone: e.target.value})}
          />
        </Form.Item>
+        <Form.Item
+          name="phoneCode"
+          label={i18next.t("signup:phone code")}
+          rules={[
+            {
+              required: true,
+              message: i18next.t("signup:Please input your phone verification code!"),
+            },
+          ]}
+        >
+          <Input autoComplete="off" value={this.state.phoneCode} addonAfter={<button onClick={() => this.sendCode("phone")} style={{border: "none", backgroundColor: "#fafafa"}}>{i18next.t("signup:send code")}</button>}/>
+        </Form.Item>
        <Form.Item name="agreement" valuePropName="checked" {...tailFormItemLayout}>
          <Checkbox>
            {i18next.t("signup:Accept")}&nbsp;
--- a/web/src/backend/UserBackend.js
+++ b/web/src/backend/UserBackend.js
@ -93,10 +93,11 @@ export function setPassword(userOwner, userName, oldPassword, newPassword) {
  }).then(res => res.json());
 }

-export function sendCode(dest, type) {
+export function sendCode(dest, type, orgId) {
  let formData = new FormData();
  formData.append("dest", dest);
  formData.append("type", type);
+  formData.append("organizationId", orgId);
  return fetch(`${Setting.ServerUrl}/api/send-verification-code`, {
    method: "POST",
    credentials: "include",
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@ -48,7 +48,18 @@
    "Have account?": "Have account?",
    "sign in now": "sign in now",
    "Your account has been created!": "Your account has been created!",
-    "Please click the below button to sign in": "Please click the below button to sign in"
+    "Please click the below button to sign in": "Please click the below button to sign in",
+    "code sent": "code sent",
+    "send code": "send code",
+    "email code": "email code",
+    "phone code": "phone code",
+    "PhoneCode has not been sent yet!": "Phone code has not been sent yet!",
+    "EmailCode has not been sent yet!": "Email code has not been sent yet!",
+    "PhoneYou should verify your code in 10 min!": "You should verify your phone verification code in 10 min!",
+    "EmailYou should verify your code in 10 min!": "You should verify your email verification code in 10 min!",
+    "PhoneWrong code!": "Wrong phone verification code!",
+    "EmailWrong code!": "Wrong email verification code!",
+    "Missing parameter.": "Missing parameter."
  },
  "login":
  {
--- a/web/src/locales/zh.json
+++ b/web/src/locales/zh.json
@ -48,7 +48,18 @@
    "Have account?": "已有账号？",
    "sign in now": "立即登录",
    "Your account has been created!": "您的账号已创建！",
-    "Please click the below button to sign in": "请点击下方按钮登录"
+    "Please click the below button to sign in": "请点击下方按钮登录",
+    "code sent": "验证码已发送",
+    "send code": "发送验证码",
+    "email code": "邮箱验证码",
+    "phone code": "手机验证码",
+    "PhoneCode has not been sent yet!": "尚未发送验证码至手机",
+    "EmailCode has not been sent yet!": "尚未发送验证码至邮箱",
+    "PhoneYou should verify your code in 10 min!": "你应该在 10 分钟之内验证手机号",
+    "EmailYou should verify your code in 10 min!": "你应该在 10 分钟之内验证邮箱",
+    "PhoneWrong code!": "手机验证码错误",
+    "EmailWrong code!": "邮箱验证码错误",
+    "Missing parameter.": "缺少参数"
  },
  "login":
  {