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

Signed-off-by: wasabi <690898835@qq.com>
This commit is contained in:
wasabi 2021-06-23 11:41:21 +08:00
parent 1e9cca02fc
commit 6ac364074a
2 changed files with 33 additions and 5 deletions

View File

@ -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") {

View File

@ -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]}