Improve phone number country dropdown for registration and login

This implements https://github.com/vector-im/riot-web/issues/3895

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,16 +149,15 @@ 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}
                     />
-                    <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"
@@ -170,7 +169,6 @@ class PasswordLogin extends React.Component {
                         value={this.state.phoneNumber}
                         autoFocus
                     />
-                    </div>
                 </div>;
         }
     }

src/components/views/login/RegistrationForm.js

@@ -314,11 +314,11 @@ 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}
                 />
-                <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}
@@ -332,7 +332,6 @@ module.exports = React.createClass({
                     value={self.state.phoneNumber}
                 />
             </div>
-            </div>
         );
 
         const registerButton = (