better handling of non-default hosts, like connecting to sandbox from localhost

src/views/settings-view.jsx

@@ -70,7 +70,7 @@ export default class SettingsView extends React.PureComponent {
         <HostSelector serverAddress={this.state.serverAddress} onServerAddressChange={this.handleServerAddressChange} />
         <div className="panel-form-row">
           <CheckBox id="secure-connection" name="secure-connection" checked={this.state.secureConnection}
-            onChange={this.handleToggleSecure} /><label>
+            className="quoted" onChange={this.handleToggleSecure} /><label htmlFor="secure-connection">
             <FormattedMessage id="label_use_secure_connection" defaultMessage="Use secure connection"
               description="Label for WS/WSS connection type in SettingsView" />
           </label>

src/views/tinode-web.jsx

@@ -185,6 +185,8 @@ class TinodeWeb extends React.Component {
       autoLogin: false,
       transport: settings.transport || null,
       serverAddress: settings.serverAddress || detectServerAddress(),
+      secureConnection: settings.secureConnection === undefined ?
+        isSecureConnection() : settings.secureConnection,
       serverVersion: "no connection",
       // "On" is the default, so saving the "off" state.
       messageSounds: !settings.messageSoundsOff,
@@ -1137,12 +1139,14 @@ class TinodeWeb extends React.Component {
   handleGlobalSettings(settings) {
     const serverAddress = settings.serverAddress || this.state.serverAddress;
     const transport = settings.transport || this.state.transport;
+    const secureConnection = settings.secureConnection === undefined ?
+      this.state.secureConnection : settings.secureConnection;
     if (this.tinode) {
       this.tinode.clearStorage();
       this.tinode.onDisconnect = undefined;
       this.tinode.disconnect();
     }
-    this.tinode = TinodeWeb.tnSetup(serverAddress, settings.secureConnection, transport,
+    this.tinode = TinodeWeb.tnSetup(serverAddress, secureConnection, transport,
       this.props.intl.locale, LocalStorageUtil.getObject('keep-logged-in'));
     this.tinode.onConnect = this.handleConnected;
     this.tinode.onDisconnect = this.handleDisconnect;
@@ -1152,11 +1156,13 @@ class TinodeWeb extends React.Component {
 
     this.setState({
       serverAddress: serverAddress,
-      transport: transport
+      transport: transport,
+      secureConnection: secureConnection,
     });
     LocalStorageUtil.setObject('settings', {
       serverAddress: serverAddress,
-      transport: transport
+      transport: transport,
+      secureConnection: secureConnection,
     });
 
     HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, ''));
@@ -1944,7 +1950,7 @@ class TinodeWeb extends React.Component {
           desktopAlertsEnabled={this.state.desktopAlertsEnabled}
           incognitoMode={this.state.incognitoMode}
           serverAddress={this.state.serverAddress}
-          secureConnection={isSecureConnection()}
+          secureConnection={this.state.secureConnection}
           serverVersion={this.state.serverVersion}
 
           onGlobalSettings={this.handleGlobalSettings}

src/widgets/checkbox.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-/* BEGIN CheckBox: styled checkbox */
+/* CheckBox: styled three-state checkbox, either clickable or static */
 export default class CheckBox extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -13,19 +13,38 @@ export default class CheckBox extends React.PureComponent {
   }
 
   render() {
-    return (
-      this.props.onChange ? (
-        this.props.checked === true ?
-          <i className="material-icons blue clickable" onClick={this.handleChange}>check_box</i> :
-        this.props.checked === false ?
-          <i className="material-icons blue clickable" onClick={this.handleChange}>check_box_outline_blank</i> :
-          <i className="material-icons lt-blue">indeterminate_check_box</i>
-        ) : (
-          this.props.checked ?
-            <i className="material-icons">check_box</i> :
-            <i className="material-icons">check_box_outline_blank</i>
-        )
-    );
+    let classList = ['material-icons'];
+    let iconName;
+    if (Array.isArray(this.props.className)) {
+      classList.push(...this.props.className);
+    } else if (this.props.className) {
+      classList.push(this.props.className);
+    }
+    if (this.props.onChange) {
+      if (this.props.checked) {
+        classList.push('blue', 'clickable');
+        iconName = 'check_box';
+      } else if (this.props.checked === false) {
+        classList.push('blue', 'clickable');
+        iconName = 'check_box_outline_blank';
+      } else {
+        classList.push('lt-blue');
+        iconName = 'indeterminate_check_box';
+      }
+    } else {
+        if (this.props.checked) {
+          iconName = 'check_box';
+        } else {
+          iconName = 'check_box_outline_blank';
+        }
+    }
+    let attrs = {
+      className: classList.join(' '),
+      id: this.props.id,
+    };
+    if (this.props.onChange) {
+      attrs.onClick = this.handleChange;
+    }
+    return React.createElement('i', attrs, iconName);
   }
 }
-/* END CheckBox */