Migrate phone number on registration to new validation

src/components/structures/auth/Registration.js

@@ -332,12 +332,6 @@ module.exports = React.createClass({
             case "RegistrationForm.ERR_PASSWORD_LENGTH":
                 errMsg = _t('Password too short (min %(MIN_PASSWORD_LENGTH)s).', {MIN_PASSWORD_LENGTH});
                 break;
-            case "RegistrationForm.ERR_PHONE_NUMBER_INVALID":
-                errMsg = _t('This doesn\'t look like a valid phone number.');
-                break;
-            case "RegistrationForm.ERR_MISSING_PHONE_NUMBER":
-                errMsg = _t('A phone number is required to register on this homeserver.');
-                break;
             default:
                 console.error("Unknown error code: %s", errCode);
                 errMsg = _t('An unknown error occurred.');

src/components/views/auth/RegistrationForm.js

@@ -90,7 +90,6 @@ module.exports = React.createClass({
         // It's not super ideal that this just calls
         // onValidationChange once for each invalid field.
         // TODO: Remove these calls once converted to new-style validation.
-        this.validateField(FIELD_PHONE_NUMBER, ev.type);
         this.validateField(FIELD_PASSWORD_CONFIRM, ev.type);
         this.validateField(FIELD_PASSWORD, ev.type);
 
@@ -212,14 +211,6 @@ module.exports = React.createClass({
         // TODO: Remove rules here as they are converted to new-style validation
 
         switch (fieldID) {
-            case FIELD_PHONE_NUMBER: {
-                const phoneNumber = this.state.phoneNumber;
-                const phoneNumberValid = phoneNumber === '' || phoneNumberLooksValid(phoneNumber);
-                if (this._authStepIsRequired('m.login.msisdn') && (!phoneNumberValid || phoneNumber === '')) {
-                    this.markFieldError(fieldID, false, "RegistrationForm.ERR_MISSING_PHONE_NUMBER");
-                } else this.markFieldError(fieldID, phoneNumberValid, "RegistrationForm.ERR_PHONE_NUMBER_INVALID");
-                break;
-            }
             case FIELD_PASSWORD:
                 if (allowEmpty && pwd1 === "") {
                     this.markFieldError(fieldID, true);
@@ -343,16 +334,36 @@ module.exports = React.createClass({
         });
     },
 
-    onPhoneNumberBlur(ev) {
-        this.validateField(FIELD_PHONE_NUMBER, ev.type);
-    },
-
     onPhoneNumberChange(ev) {
         this.setState({
             phoneNumber: ev.target.value,
         });
     },
 
+    onPhoneNumberValidate(fieldState) {
+        const result = this.validatePhoneNumberRules(fieldState);
+        this.markFieldValid(FIELD_PHONE_NUMBER, result.valid);
+        return result;
+    },
+
+    validatePhoneNumberRules: withValidation({
+        description: () => _t("Other users can invite you to rooms using your contact details"),
+        rules: [
+            {
+                key: "required",
+                test: function({ value, allowEmpty }) {
+                    return allowEmpty || !this._authStepIsRequired('m.login.msisdn') || !!value;
+                },
+                invalid: () => _t("Enter phone number (required on this homeserver)"),
+            },
+            {
+                key: "email",
+                test: ({ value }) => !value || phoneNumberLooksValid(value),
+                invalid: () => _t("Doesn't look like a valid phone number"),
+            },
+        ],
+    }),
+
     onUsernameChange(ev) {
         this.setState({
             username: ev.target.value,
@@ -425,6 +436,35 @@ module.exports = React.createClass({
         />;
     },
 
+    renderPhoneNumber() {
+        const threePidLogin = !SdkConfig.get().disable_3pid_login;
+        if (!threePidLogin || !this._authStepIsUsed('m.login.msisdn')) {
+            return null;
+        }
+        const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
+        const Field = sdk.getComponent('elements.Field');
+        const phoneLabel = this._authStepIsRequired('m.login.msisdn') ?
+            _t("Phone") :
+            _t("Phone (optional)");
+        const phoneCountry = <CountryDropdown
+            value={this.state.phoneCountry}
+            isSmall={true}
+            showPrefix={true}
+            onOptionChange={this.onPhoneCountryChange}
+        />;
+        return <Field
+            id="mx_RegistrationForm_phoneNumber"
+            ref={field => this[FIELD_PHONE_NUMBER] = field}
+            type="text"
+            label={phoneLabel}
+            defaultValue={this.props.defaultPhoneNumber}
+            value={this.state.phoneNumber}
+            prefix={phoneCountry}
+            onChange={this.onPhoneNumberChange}
+            onValidate={this.onPhoneNumberValidate}
+        />;
+    },
+
     renderUsername() {
         const Field = sdk.getComponent('elements.Field');
         return <Field
@@ -468,33 +508,6 @@ module.exports = React.createClass({
             </a>;
         }
 
-        const threePidLogin = !SdkConfig.get().disable_3pid_login;
-        const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
-        let phoneSection;
-        if (threePidLogin && this._authStepIsUsed('m.login.msisdn')) {
-            const phoneLabel = this._authStepIsRequired('m.login.msisdn') ?
-                _t("Phone") :
-                _t("Phone (optional)");
-            const phoneCountry = <CountryDropdown
-                value={this.state.phoneCountry}
-                isSmall={true}
-                showPrefix={true}
-                onOptionChange={this.onPhoneCountryChange}
-            />;
-
-            phoneSection = <Field
-                className={this._classForField(FIELD_PHONE_NUMBER)}
-                id="mx_RegistrationForm_phoneNumber"
-                type="text"
-                label={phoneLabel}
-                defaultValue={this.props.defaultPhoneNumber}
-                value={this.state.phoneNumber}
-                prefix={phoneCountry}
-                onBlur={this.onPhoneNumberBlur}
-                onChange={this.onPhoneNumberChange}
-            />;
-        }
-
         const registerButton = (
             <input className="mx_Login_submit" type="submit" value={_t("Register")} />
         );
@@ -533,7 +546,7 @@ module.exports = React.createClass({
                     </div>
                     <div className="mx_AuthBody_fieldRow">
                         {this.renderEmail()}
-                        { phoneSection }
+                        {this.renderPhoneNumber()}
                     </div>
                     {_t("Use an email address to recover your account.") + " "}
                     {_t("Other users can invite you to rooms using your contact details.")}

src/i18n/strings/en_EN.json

@@ -1325,13 +1325,16 @@
     "Use an email address to recover your account": "Use an email address to recover your account",
     "Enter email address (required on this homeserver)": "Enter email address (required on this homeserver)",
     "Doesn't look like a valid email address": "Doesn't look like a valid email address",
+    "Other users can invite you to rooms using your contact details": "Other users can invite you to rooms using your contact details",
+    "Enter phone number (required on this homeserver)": "Enter phone number (required on this homeserver)",
+    "Doesn't look like a valid phone number": "Doesn't look like a valid phone number",
     "Use letters, numbers, dashes and underscores only": "Use letters, numbers, dashes and underscores only",
     "Enter username": "Enter username",
     "Some characters not allowed": "Some characters not allowed",
     "Email (optional)": "Email (optional)",
+    "Phone (optional)": "Phone (optional)",
     "Create your Matrix account": "Create your Matrix account",
     "Create your Matrix account on %(serverName)s": "Create your Matrix account on %(serverName)s",
-    "Phone (optional)": "Phone (optional)",
     "Confirm": "Confirm",
     "Use an email address to recover your account.": "Use an email address to recover your account.",
     "Other users can invite you to rooms using your contact details.": "Other users can invite you to rooms using your contact details.",
@@ -1525,8 +1528,6 @@
     "Missing password.": "Missing password.",
     "Passwords don't match.": "Passwords don't match.",
     "Password too short (min %(MIN_PASSWORD_LENGTH)s).": "Password too short (min %(MIN_PASSWORD_LENGTH)s).",
-    "This doesn't look like a valid phone number.": "This doesn't look like a valid phone number.",
-    "A phone number is required to register on this homeserver.": "A phone number is required to register on this homeserver.",
     "An unknown error occurred.": "An unknown error occurred.",
     "Create your account": "Create your account",
     "Commands": "Commands",