Convert registration phone number to Field component

Now that we have prefix support in the Field component, we can also convert the
phone number with country dropdown on registration.

res/css/structures/auth/_Login.scss

@@ -95,6 +95,7 @@ limitations under the License.
     flex: 1 1 auto;
 }
 
+// TODO-START: Remove up to TODO-END when all the country dropdowns are in Fields
 .mx_Login_field_prefix {
     height: 38px;
     padding: 0px 5px;
@@ -141,3 +142,4 @@ limitations under the License.
     margin: 3px;
     vertical-align: top;
 }
+// TODO-END: Remove from TODO-START when all the country dropdowns are in Fields

res/css/views/elements/_Field.scss

@@ -140,3 +140,14 @@ limitations under the License.
     background-color: $field-focused-label-bg-color;
     color: $greyed-fg-color;
 }
+
+// Customise other components when placed inside a Field
+
+.mx_Field .mx_Dropdown_input {
+    border: initial;
+    border-radius: initial;
+}
+
+.mx_Field .mx_CountryDropdown {
+    width: 67px;
+}

src/components/views/auth/RegistrationForm.js

@@ -357,32 +357,27 @@ module.exports = React.createClass({
         const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
         let phoneSection;
         if (threePidLogin && this._authStepIsUsed('m.login.msisdn')) {
-            const phonePlaceholder = this._authStepIsRequired('m.login.msisdn') ?
+            const phoneLabel = this._authStepIsRequired('m.login.msisdn') ?
                 _t("Phone") :
                 _t("Phone (optional)");
-            phoneSection = (
-                <div className="mx_Login_phoneSection">
-                    <CountryDropdown ref="phone_country"
-                        className="mx_Login_phoneCountry mx_Login_field_prefix"
-                        value={this.state.phoneCountry}
-                        isSmall={true}
-                        showPrefix={true}
-                        onOptionChange={this.onPhoneCountryChange}
-                    />
-                    <input type="text" ref="phoneNumber"
-                        placeholder={phonePlaceholder}
-                        defaultValue={this.props.defaultPhoneNumber}
-                        className={this._classForField(
-                            FIELD_PHONE_NUMBER,
-                            'mx_Login_phoneNumberField',
-                            'mx_Login_field',
-                            'mx_Login_field_has_prefix',
-                        )}
-                        onBlur={this.onPhoneNumberBlur}
-                        value={this.state.phoneNumber}
-                    />
-                </div>
-            );
+            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"
+                ref="phoneNumber"
+                type="text"
+                label={phoneLabel}
+                defaultValue={this.props.defaultPhoneNumber}
+                value={this.state.phoneNumber}
+                prefix={phoneCountry}
+                onBlur={this.onPhoneNumberBlur}
+            />;
         }
 
         const registerButton = (