feat: fix bug that signup country code is undefined (casdoor#1590)

* feat: fix signup country code is undefined

* refactor: valid phone number in CN

util/validation.go

@@ -41,7 +41,7 @@ func IsPhoneValid(phone string, countryCode string) bool {
 }
 
 func IsPhoneAllowInRegin(countryCode string, allowRegions []string) bool {
-	return !ContainsString(allowRegions, countryCode)
+	return ContainsString(allowRegions, countryCode)
 }
 
 func GetE164Number(phone string, countryCode string) (string, bool) {

web/src/OrganizationListPage.js

@@ -37,7 +37,7 @@ class OrganizationListPage extends BaseListPage {
       defaultAvatar: `${Setting.StaticBaseUrl}/img/casbin.svg`,
       defaultApplication: "",
       tags: [],
-      languages: ["en", "zh", "es", "fr", "de", "ja", "ko", "ru", "vi"],
+      languages: Setting.Countries.map(item => item.key),
       masterPassword: "",
       enableSoftDeletion: false,
       isProfilePublic: true,

web/src/Setting.js

@@ -349,13 +349,15 @@ export function isValidEmail(email) {
 }
 
 export function isValidPhone(phone, countryCode = "") {
-  if (countryCode !== "") {
+  if (countryCode !== "" && countryCode !== "CN") {
     return phoneNumber.isValidPhoneNumber(phone, countryCode);
   }
 
-  // // https://learnku.com/articles/31543, `^s*$` filter empty email individually.
+  // https://learnku.com/articles/31543, `^s*$` filter empty email individually.
+  const phoneCnRegex = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
   const phoneRegex = /[0-9]{4,15}$/;
-  return phoneRegex.test(phone);
+
+  return countryCode === "CN" ? phoneCnRegex.test(phone) : phoneRegex.test(phone);
 }
 
 export function isValidInvoiceTitle(invoiceTitle) {

web/src/UserEditPage.js

@@ -29,7 +29,7 @@ import SelectRegionBox from "./SelectRegionBox";
 import WebAuthnCredentialTable from "./WebauthnCredentialTable";
 import ManagedAccountTable from "./ManagedAccountTable";
 import PropertyTable from "./propertyTable";
-import PhoneNumberInput from "./common/PhoneNumberInput";
+import {PhoneNumberInput} from "./common/PhoneNumberInput";
 
 const {Option} = Select;
 
@@ -311,7 +311,7 @@ class UserEditPage extends React.Component {
               <PhoneNumberInput
                 style={{width: "30%"}}
                 // disabled={!Setting.isLocalAdminUser(this.props.account) ? true : disabled}
-                value={this.state.user.countryCode}
+                countryCode={this.state.user.countryCode}
                 onChange={(value) => {
                   this.updateUserField("countryCode", value);
                 }}

web/src/auth/SignupPage.js

@@ -26,7 +26,7 @@ import SelectRegionBox from "../SelectRegionBox";
 import CustomGithubCorner from "../CustomGithubCorner";
 import SelectLanguageBox from "../SelectLanguageBox";
 import {withRouter} from "react-router-dom";
-import PhoneNumberInput from "../common/PhoneNumberInput";
+import {PhoneNumberInput} from "../common/PhoneNumberInput";
 
 const formItemLayout = {
   labelCol: {
@@ -82,7 +82,7 @@ class SignupPage extends React.Component {
     this.form = React.createRef();
   }
 
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     let applicationName = this.state.applicationName;
     const oAuthParams = Util.getOAuthGetParameters();
     if (oAuthParams !== null) {
@@ -98,6 +98,10 @@ class SignupPage extends React.Component {
       } else {
         Setting.showMessage("error", `Unknown application name: ${applicationName}`);
       }
+    } else {
+      this.setState({
+        countryCode: this.getApplicationObj().organizationObj.countryCodes?.[0],
+      });
     }
   }
 
@@ -111,6 +115,7 @@ class SignupPage extends React.Component {
         this.onUpdateApplication(application);
         this.setState({
           application: application,
+          countryCode: application?.organizationObj.countryCodes?.[0],
         });
 
         if (application !== null && application !== undefined) {
@@ -390,23 +395,12 @@ class SignupPage extends React.Component {
                     required: required,
                     message: i18next.t("signup:Please select your country code!"),
                   },
-                  {
-                    validator: (_, value) => {
-                      if (this.state.phone !== "" && !Setting.isValidPhone(this.state.phone, this.state.countryCode)) {
-                        this.setState({validPhone: false});
-                        return Promise.reject(i18next.t("signup:The input is not valid Phone!"));
-                      }
-
-                      this.setState({validPhone: true});
-                      return Promise.resolve();
-                    },
-                  },
                 ]}
               >
                 <PhoneNumberInput
                   showSearsh={true}
                   style={{width: "35%"}}
-                  value={this.state.countryCode}
+                  countryCode={this.state.countryCode}
                   onChange={(value) => {this.setState({countryCode: value});}}
                   countryCodes={this.getApplicationObj().organizationObj.countryCodes}
                 />
@@ -456,6 +450,7 @@ class SignupPage extends React.Component {
               method={"signup"}
               onButtonClickArgs={[this.state.phone, "phone", Setting.getApplicationName(application)]}
               application={application}
+              countryCode={this.state.countryCode}
             />
           </Form.Item>
         </React.Fragment>

web/src/backend/UserBackend.js

@@ -109,12 +109,13 @@ export function setPassword(userOwner, userName, oldPassword, newPassword) {
   }).then(res => res.json());
 }
 
-export function sendCode(checkType, checkId, checkKey, method, dest, type, applicationId, checkUser = "") {
+export function sendCode(checkType, checkId, checkKey, method, countryCode, dest, type, applicationId, checkUser = "") {
   const formData = new FormData();
   formData.append("checkType", checkType);
   formData.append("checkId", checkId);
   formData.append("checkKey", checkKey);
   formData.append("method", method);
+  formData.append("countryCode", countryCode);
   formData.append("dest", dest);
   formData.append("type", type);
   formData.append("applicationId", applicationId);

web/src/common/PhoneNumberInput.js

@@ -16,9 +16,8 @@ import {Select} from "antd";
 import * as Setting from "../Setting";
 import React from "react";
 
-export default function PhoneNumberInput(props) {
-  const {onChange, style, disabled} = props;
-  const value = props.value ?? "CN";
+export const PhoneNumberInput = (props) => {
+  const {onChange, style, disabled, countryCode} = props;
   const countryCodes = props.countryCodes ?? [];
 
   const handleOnChange = (e) => {
@@ -31,7 +30,7 @@ export default function PhoneNumberInput(props) {
       showSearch
       style={style}
       disabled={disabled}
-      value={value}
+      value={countryCode}
       dropdownMatchSelectWidth={false}
       optionLabelProp={"label"}
       onChange={handleOnChange}
@@ -42,4 +41,4 @@ export default function PhoneNumberInput(props) {
       }
     </Select>
   );
-}
+};

web/src/common/SendCodeInput.js

@@ -22,7 +22,7 @@ import {CaptchaWidget} from "./CaptchaWidget";
 const {Search} = Input;
 
 export const SendCodeInput = (props) => {
-  const {disabled, textBefore, onChange, onButtonClickArgs, application, method} = props;
+  const {disabled, textBefore, onChange, onButtonClickArgs, application, method, countryCode} = props;
   const [visible, setVisible] = React.useState(false);
   const [key, setKey] = React.useState("");
   const [captchaImg, setCaptchaImg] = React.useState("");
@@ -53,7 +53,7 @@ export const SendCodeInput = (props) => {
   const handleOk = () => {
     setVisible(false);
     setButtonLoading(true);
-    UserBackend.sendCode(checkType, checkId, key, method, ...onButtonClickArgs).then(res => {
+    UserBackend.sendCode(checkType, checkId, key, method, countryCode, ...onButtonClickArgs).then(res => {
       setKey("");
       setButtonLoading(false);
       if (res) {
@@ -70,7 +70,7 @@ export const SendCodeInput = (props) => {
   const loadCaptcha = () => {
     UserBackend.getCaptcha(application.owner, application.name, false).then(res => {
       if (res.type === "none") {
-        UserBackend.sendCode("none", "", "", method, ...onButtonClickArgs).then(res => {
+        UserBackend.sendCode("none", "", "", method, countryCode, ...onButtonClickArgs).then(res => {
           if (res) {
             handleCountDown(60);
           }