Improve forget page logic.

web/src/Setting.js

@@ -499,7 +499,11 @@ function maskString(s) {
   }
 }
 
-export function maskEmail(email) {
+export function getMaskedPhone(s) {
+  return s.replace(/(\d{3})\d*(\d{4})/,'$1****$2');
+}
+
+export function getMaskedEmail(email) {
   if (email === "") return;
   const tokens = email.split("@");
   let username = tokens[0];

web/src/auth/ForgetPage.js

@@ -50,7 +50,7 @@ class ForgetPage extends React.Component {
       phone: "",
       emailCode: "",
       phoneCode: "",
-      verifyType: "", // "email" or "phone"
+      verifyType: null, // "email" or "phone"
       current: 0,
     };
   }
@@ -98,23 +98,36 @@ class ForgetPage extends React.Component {
                   username: username
               }).then((res) => {
                   if (res.status === "ok") {
-                      this.setState({phone: res.data.phone, email: res.data.email, username: res.data.name});
+                    const phone = res.data.phone;
-                      switch (res.data2) {
+                    const email = res.data.email;
-                          case "email":
+                    this.setState({phone: phone, email: email, username: res.data.name});
-                              this.setState({isFixed: true, fixedContent: res.data.email, verifyType: "email"});
+
-                              break
+                    if (phone !== "" && email === "") {
-                          case "phone":
+                      this.setState({
-                              this.setState({isFixed: true, fixedContent: res.data.phone, verifyType: "phone"});
+                        verifyType: "phone",
-                              break
+                      });
-                          default:
+                    } else if (phone === "" && email !== "") {
-                              break
+                      this.setState({
-                      }
+                        verifyType: "email",
-                      if (this.state.isFixed) {
+                      });
-                          forms.step2.setFieldsValue({email: this.state.fixedContent})
+                    }
-                      }
+
-                      this.setState({current: 1})
+                    switch (res.data2) {
+                      case "email":
+                        this.setState({isFixed: true, fixedContent: email, verifyType: "email"});
+                        break
+                      case "phone":
+                        this.setState({isFixed: true, fixedContent: phone, verifyType: "phone"});
+                        break
+                      default:
+                        break
+                    }
+                    if (this.state.isFixed) {
+                      forms.step2.setFieldsValue({email: this.state.fixedContent})
+                    }
+                    this.setState({current: 1})
                   } else {
-                      Setting.showMessage("error", i18next.t(`signup:${res.msg}`));
+                    Setting.showMessage("error", i18next.t(`signup:${res.msg}`));
                   }
               });
               break;
@@ -155,6 +168,26 @@ class ForgetPage extends React.Component {
 
   onFinishFailed(values, errorFields) {}
 
+  renderOptions() {
+    let options = [];
+
+    if (this.state.phone !== "") {
+      options.push(
+        <Option key={"phone"} value={"phone"}>
+          {Setting.getMaskedPhone(this.state.phone)}
+        </Option>
+      );
+    } else if (this.state.email !== "") {
+      options.push(
+        <Option key={"email"} value={"email"}>
+          {Setting.getMaskedEmail(this.state.email)}
+        </Option>
+      );
+    }
+
+    return options;
+  }
+
   renderForm(application) {
     return (
         <Form.Provider onFormFinish={(name, {info, forms}) => {
@@ -278,27 +311,20 @@ class ForgetPage extends React.Component {
                {
                   this.state.isFixed ? <Input disabled/> :
                      <Select
-                         disabled={this.state.username === ""}
+                       key={this.state.verifyType}
-                         placeholder={i18next.t(
+                       virtual={false} style={{textAlign: 'left'}}
-                             "forget:Choose email verification or mobile verification"
+                       defaultValue={this.state.verifyType}
-                         )}
+                       disabled={this.state.username === ""}
-                         onChange={(value) => {
+                       placeholder={i18next.t("forget:Choose email or phone")}
-                           if (value === this.state.phone) {
+                       onChange={(value) => {
-                             this.setState({ verifyType: "phone" });
+                         this.setState({
-                           }
+                           verifyType: value,
-                           if (value === this.state.email) {
+                         });
-                             this.setState({ verifyType: "email" });
+                       }}
-                           }
-                         }}
-                         allowClear
-                         style={{ textAlign: "left" }}
                      >
-                       <Option key={1} value={this.state.phone}>
+                       {
-                         {this.state.phone.replace(/(\d{3})\d*(\d{4})/,'$1****$2')}
+                         this.renderOptions()
-                       </Option>
+                       }
-                       <Option key={2} value={this.state.email}>
-                         {Setting.maskEmail(this.state.email)}
-                       </Option>
                      </Select>
                }
             </Form.Item>