Improve phone number country dropdown for registration and login

This implements element-hq/element-web#3895

Author: Luke Barnard

src/components/views/login/CountryDropdown.js

@@ -38,6 +38,7 @@ export default class CountryDropdown extends React.Component {
         super(props);
         this._onSearchChange = this._onSearchChange.bind(this);
         this._onOptionChange = this._onOptionChange.bind(this);
+        this._getShortOption = this._getShortOption.bind(this);
 
         this.state = {
             searchQuery: '',
@@ -73,6 +74,20 @@ export default class CountryDropdown extends React.Component {
         );
     }
 
+    _getShortOption(iso2) {
+        if (!this.props.isSmall) {
+            return undefined;
+        }
+        let countryPrefix;
+        if (this.props.showPrefix) {
+            countryPrefix = '+' + COUNTRIES_BY_ISO2[iso2].prefix;
+        }
+        return <span>
+            { this._flagImgForIso2(iso2) }
+            { countryPrefix }
+        </span>;
+    }
+
     render() {
         const Dropdown = sdk.getComponent('elements.Dropdown');
 
@@ -107,11 +122,9 @@ export default class CountryDropdown extends React.Component {
         // values between mounting and the initial value propgating
         const value = this.props.value || COUNTRIES[0].iso2;
 
-        const getShortOption = this.props.isSmall ? this._flagImgForIso2 : undefined;
-
         return <Dropdown className={this.props.className}
             onOptionChange={this._onOptionChange} onSearchChange={this._onSearchChange}
-            menuWidth={298} getShortOption={getShortOption}
+            menuWidth={298} getShortOption={this._getShortOption}
             value={value} searchEnabled={true}
         >
             {options}
@@ -122,6 +135,8 @@ export default class CountryDropdown extends React.Component {
 CountryDropdown.propTypes = {
     className: React.PropTypes.string,
     isSmall: React.PropTypes.bool,
+    // if isSmall, show +44 in the selected value
+    showPrefix: React.PropTypes.bool,
     onOptionChange: React.PropTypes.func.isRequired,
     value: React.PropTypes.string,
 };

src/components/views/login/PasswordLogin.js

@@ -149,28 +149,26 @@ class PasswordLogin extends React.Component {
                 </div>;
             case PasswordLogin.LOGIN_FIELD_PHONE:
                 const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
-                const prefix = this.state.phonePrefix;
                 return <div className="mx_Login_phoneSection">
                     <CountryDropdown
-                        className="mx_Login_phoneCountry"
+                        className="mx_Login_phoneCountry mx_Login_field_prefix"
                         ref="phone_country"
                         onOptionChange={this.onPhoneCountryChanged}
                         value={this.state.phoneCountry}
+                        isSmall={true}
+                        showPrefix={true}
+                    />
+                    <input
+                        className="mx_Login_phoneNumberField mx_Login_field mx_Login_field_has_prefix"
+                        ref="phoneNumber"
+                        key="phone_input"
+                        type="text"
+                        name="phoneNumber"
+                        onChange={this.onPhoneNumberChanged}
+                        placeholder="Mobile phone number"
+                        value={this.state.phoneNumber}
+                        autoFocus
                     />
-                    <div className="mx_Login_field_group">
-                        <div className="mx_Login_field_prefix">+{prefix}</div>
-                        <input
-                            className="mx_Login_phoneNumberField mx_Login_field mx_Login_field_has_prefix"
-                            ref="phoneNumber"
-                            key="phone_input"
-                            type="text"
-                            name="phoneNumber"
-                            onChange={this.onPhoneNumberChanged}
-                            placeholder="Mobile phone number"
-                            value={this.state.phoneNumber}
-                            autoFocus
-                        />
-                    </div>
                 </div>;
         }
     }

src/components/views/login/RegistrationForm.js

@@ -314,24 +314,23 @@ module.exports = React.createClass({
         const phoneSection = (
             <div className="mx_Login_phoneSection">
                 <CountryDropdown ref="phone_country" onOptionChange={this._onPhoneCountryChange}
-                    className="mx_Login_phoneCountry"
+                    className="mx_Login_phoneCountry mx_Login_field_prefix"
                     value={this.state.phoneCountry}
+                    isSmall={true}
+                    showPrefix={true}
+                />
+                <input type="text" ref="phoneNumber"
+                    placeholder="Mobile phone number (optional)"
+                    defaultValue={this.props.defaultPhoneNumber}
+                    className={this._classForField(
+                        FIELD_PHONE_NUMBER,
+                        'mx_Login_phoneNumberField',
+                        'mx_Login_field',
+                        'mx_Login_field_has_prefix'
+                    )}
+                    onBlur={function() {self.validateField(FIELD_PHONE_NUMBER);}}
+                    value={self.state.phoneNumber}
                 />
-                <div className="mx_Login_field_group">
-                    <div className="mx_Login_field_prefix">+{this.state.phonePrefix}</div>
-                    <input type="text" ref="phoneNumber"
-                        placeholder="Mobile phone number (optional)"
-                        defaultValue={this.props.defaultPhoneNumber}
-                        className={this._classForField(
-                            FIELD_PHONE_NUMBER,
-                            'mx_Login_phoneNumberField',
-                            'mx_Login_field',
-                            'mx_Login_field_has_prefix'
-                        )}
-                        onBlur={function() {self.validateField(FIELD_PHONE_NUMBER);}}
-                        value={self.state.phoneNumber}
-                    />
-                </div>
             </div>
         );