feat: Send-code-button-should-be-gray-out-with-empty-or-invalid-Email-or-phone

Signed-off-by: wasabi <690898835@qq.com>

web/src/Setting.js

@@ -26,6 +26,12 @@ export let ServerUrl = "";
 // export const StaticBaseUrl = "https://cdn.jsdelivr.net/gh/casbin/static";
 export const StaticBaseUrl = "https://cdn.casbin.org";
 
+// reference link: https://github.com/yiminghe/async-validator/blob/057b0b047f88fac65457bae691d6cb7c6fe48ce1/src/rule/type.ts#L9
+export const EmailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+// reference link: https://learnku.com/articles/31543, `^s*$` filter empty email individually.
+export const PhoneRegEx = /^\s*$|^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
+
 export function initServerUrl() {
   const hostname = window.location.hostname;
   if (hostname === "localhost") {

web/src/auth/SignupPage.js

@@ -66,7 +66,9 @@ class SignupPage extends React.Component {
       email: "",
       phone: "",
       emailCode: "",
-      phoneCode: ""
+      phoneCode: "",
+      validEmail: false,
+      validPhone: false,
     };
 
     this.form = React.createRef();
@@ -210,14 +212,21 @@ class SignupPage extends React.Component {
             name="email"
             label={i18next.t("general:Email")}
             rules={[
-              {
-                type: 'email',
-                message: i18next.t("signup:The input is not valid Email!"),
-              },
               {
                 required: required,
                 message: i18next.t("signup:Please input your Email!"),
               },
+              {
+                validator: (_, value) =>{
+                  if( Setting.EmailRegEx.test(this.state.email) ) {
+                    this.setState({validEmail: true})
+                    return Promise.resolve()
+                  } else {
+                    this.setState({validEmail: false})
+                    return Promise.reject(i18next.t("signup:The input is not valid Email!"))
+                  }
+                }
+              }
             ]}
           >
             <Input onChange={e => this.setState({email: e.target.value})} />
@@ -231,6 +240,7 @@ class SignupPage extends React.Component {
             }]}
           >
             <CountDownInput
+              disabled={!this.state.validEmail}
               defaultButtonText={i18next.t("code:Send code")}
               onButtonClick={UserBackend.sendCode}
               onButtonClickArgs={[this.state.email, "email", application?.organizationObj.owner + "/" + application?.organizationObj.name]}
@@ -292,6 +302,17 @@ class SignupPage extends React.Component {
                 required: required,
                 message: i18next.t("signup:Please input your phone number!"),
               },
+              {
+                validator: (_, value) =>{
+                  if ( Setting.PhoneRegEx.test(this.state.phone)) {
+                    this.setState({validPhone: true})
+                    return Promise.resolve()
+                  } else {
+                    this.setState({validPhone: false})
+                    return Promise.reject(i18next.t("signup:The input is not valid Phone!"))
+                  }
+                }
+              }
             ]}
           >
             <Input
@@ -313,6 +334,7 @@ class SignupPage extends React.Component {
             ]}
           >
             <CountDownInput
+              disabled={!this.state.validPhone}
               defaultButtonText={i18next.t("code:Send code")}
               onButtonClick={UserBackend.sendCode}
               onButtonClickArgs={[this.state.phone, "phone", application.organizationObj.owner + "/" + application.organizationObj.name]}