Rework `ServerConfig` to approach design

The public server search box is left out for now, so this restyles the existing
custom server inputs to more closely approximate the design.

res/css/views/auth/_ServerConfig.scss

@@ -14,23 +14,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ServerConfig {
+.mx_ServerConfig_fields {
-    margin-top: 7px;
+    display: flex;
+    margin: 1em 0;
 }
 
-.mx_ServerConfig .mx_Login_field {
+.mx_ServerConfig_fields .mx_Field {
-    margin-top: 4px;
+    margin: 0 5px;
-    margin-bottom: 5px;
+}
+
+.mx_ServerConfig_fields .mx_Field:first-child {
+    margin-left: 0;
+}
+
+.mx_ServerConfig_fields .mx_Field:last-child {
+    margin-right: 0;
 }
 
 .mx_ServerConfig_help:link {
     opacity: 0.8;
-    font-size: 13px;
-    font-weight: 300;
-    color: $primary-fg-color;
-}
-
-.mx_ServerConfig_selector {
-    text-align: center;
-    width: 302px; // for fr i18n
 }

src/components/views/auth/ServerConfig.js

@@ -60,23 +60,18 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            hs_url: this.props.customHsUrl,
+            hsUrl: this.props.customHsUrl,
-            is_url: this.props.customIsUrl,
+            isUrl: this.props.customIsUrl,
-            configVisible: (this.props.customHsUrl !== this.props.defaultHsUrl) ||
-                           (this.props.customIsUrl !== this.props.defaultIsUrl),
         };
     },
 
     componentWillReceiveProps: function(newProps) {
-        if (newProps.customHsUrl === this.state.hs_url &&
+        if (newProps.customHsUrl === this.state.hsUrl &&
-            newProps.customIsUrl === this.state.is_url) return;
+            newProps.customIsUrl === this.state.isUrl) return;
 
         this.setState({
-            hs_url: newProps.customHsUrl,
+            hsUrl: newProps.customHsUrl,
-            is_url: newProps.customIsUrl,
+            isUrl: newProps.customIsUrl,
-            configVisible:
-                (newProps.customHsUrl !== newProps.defaultHsUrl) ||
-                (newProps.customIsUrl !== newProps.defaultIsUrl),
         });
         this.props.onServerConfigChange({
             hsUrl: newProps.customHsUrl,
@@ -85,26 +80,26 @@ module.exports = React.createClass({
     },
 
     onHomeserverChanged: function(ev) {
-        this.setState({hs_url: ev.target.value}, () => {
+        this.setState({hsUrl: ev.target.value}, () => {
             this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
-                let hsUrl = this.state.hs_url.trim().replace(/\/$/, "");
+                let hsUrl = this.state.hsUrl.trim().replace(/\/$/, "");
                 if (hsUrl === "") hsUrl = this.props.defaultHsUrl;
                 this.props.onServerConfigChange({
-                    hsUrl: this.state.hs_url,
+                    hsUrl: this.state.hsUrl,
-                    isUrl: this.state.is_url,
+                    isUrl: this.state.isUrl,
                 });
             });
         });
     },
 
     onIdentityServerChanged: function(ev) {
-        this.setState({is_url: ev.target.value}, () => {
+        this.setState({isUrl: ev.target.value}, () => {
             this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, () => {
-                let isUrl = this.state.is_url.trim().replace(/\/$/, "");
+                let isUrl = this.state.isUrl.trim().replace(/\/$/, "");
                 if (isUrl === "") isUrl = this.props.defaultIsUrl;
                 this.props.onServerConfigChange({
-                    hsUrl: this.state.hs_url,
+                    hsUrl: this.state.hsUrl,
-                    isUrl: this.state.is_url,
+                    isUrl: this.state.isUrl,
                 });
             });
         });
@@ -117,73 +112,35 @@ module.exports = React.createClass({
         return setTimeout(fn.bind(this), this.props.delayTimeMs);
     },
 
-    onServerConfigVisibleChange: function(visible, ev) {
-        this.setState({
-            configVisible: visible,
-        });
-        if (!visible) {
-            this.props.onServerConfigChange({
-                hsUrl: this.props.defaultHsUrl,
-                isUrl: this.props.defaultIsUrl,
-            });
-        } else {
-            this.props.onServerConfigChange({
-                hsUrl: this.state.hs_url,
-                isUrl: this.state.is_url,
-            });
-        }
-    },
-
     showHelpPopup: function() {
         const CustomServerDialog = sdk.getComponent('auth.CustomServerDialog');
         Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog);
     },
 
     render: function() {
-        const serverConfigStyle = {};
+        const Field = sdk.getComponent('elements.Field');
-        serverConfigStyle.display = this.state.configVisible ? 'block' : 'none';
-
-        const toggleButton = (
-            <div className="mx_ServerConfig_selector">
-                <input className="mx_Login_radio" id="basic" name="configVisible" type="radio"
-                    checked={!this.state.configVisible}
-                    onChange={this.onServerConfigVisibleChange.bind(this, false)} />
-                <label className="mx_Login_label" htmlFor="basic">
-                    { _t("Default server") }
-                </label>
-                &nbsp;&nbsp;
-                <input className="mx_Login_radio" id="advanced" name="configVisible" type="radio"
-                    checked={this.state.configVisible}
-                    onChange={this.onServerConfigVisibleChange.bind(this, true)} />
-                <label className="mx_Login_label" htmlFor="advanced">
-                    { _t("Custom server") }
-                </label>
-            </div>
-        );
 
         return (
-        <div>
-            { toggleButton }
-            <div style={serverConfigStyle}>
             <div className="mx_ServerConfig">
-                    <label className="mx_Login_label mx_ServerConfig_hslabel" htmlFor="hsurl">
+                <h3>{_t("Other servers")}</h3>
-                        { _t("Home server URL") }
+                {_t("Enter custom server URLs <a>What does this mean?</a>", {}, {
-                    </label>
+                    a: sub => <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
-                    <input className="mx_Login_field" id="hsurl" type="text"
+                        { sub }
+                    </a>,
+                })}
+                <div className="mx_ServerConfig_fields">
+                    <Field id="mx_ServerConfig_hsUrl"
+                        label={_t("Homeserver URL")}
                         placeholder={this.props.defaultHsUrl}
-                        value={this.state.hs_url}
+                        value={this.state.hsUrl}
-                        onChange={this.onHomeserverChanged} />
+                        onChange={this.onHomeserverChanged}
-                    <label className="mx_Login_label mx_ServerConfig_islabel" htmlFor="isurl">
+                    />
-                        { _t("Identity server URL") }
+                    <Field id="mx_ServerConfig_isUrl"
-                    </label>
+                        label={_t("Identity Server URL")}
-                    <input className="mx_Login_field" id="isurl" type="text"
                         placeholder={this.props.defaultIsUrl}
-                        value={this.state.is_url}
+                        value={this.state.isUrl}
-                        onChange={this.onIdentityServerChanged} />
+                        onChange={this.onIdentityServerChanged}
-                    <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
+                    />
-                        { _t("What does this mean?") }
-                    </a>
-                </div>
                 </div>
             </div>
         );

src/i18n/strings/en_EN.json

@@ -1194,11 +1194,10 @@
     "If you don't specify an email address, you won't be able to reset your password. Are you sure?": "If you don't specify an email address, you won't be able to reset your password. Are you sure?",
     "Email address (optional)": "Email address (optional)",
     "Mobile phone number (optional)": "Mobile phone number (optional)",
-    "Default server": "Default server",
+    "Other servers": "Other servers",
-    "Custom server": "Custom server",
+    "Enter custom server URLs <a>What does this mean?</a>": "Enter custom server URLs <a>What does this mean?</a>",
     "Homeserver URL": "Homeserver URL",
-    "Identity server URL": "Identity server URL",
+    "Identity Server URL": "Identity Server URL",
-    "What does this mean?": "What does this mean?",
     "Free": "Free",
     "Join millions for free on the largest public server": "Join millions for free on the largest public server",
     "Premium": "Premium",