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 (
+    let classList = ['material-icons'];
-      this.props.onChange ? (
+    let iconName;
-        this.props.checked === true ?
+    if (Array.isArray(this.props.className)) {
-          <i className="material-icons blue clickable" onClick={this.handleChange}>check_box</i> :
+      classList.push(...this.props.className);
-        this.props.checked === false ?
+    } else if (this.props.className) {
-          <i className="material-icons blue clickable" onClick={this.handleChange}>check_box_outline_blank</i> :
+      classList.push(this.props.className);
-          <i className="material-icons lt-blue">indeterminate_check_box</i>
+    }
-        ) : (
+    if (this.props.onChange) {
-          this.props.checked ?
+      if (this.props.checked) {
-            <i className="material-icons">check_box</i> :
+        classList.push('blue', 'clickable');
-            <i className="material-icons">check_box_outline_blank</i>
+        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 */

umd/index.dev.js

@@ -7274,8 +7274,11 @@ class SettingsView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
       id: "secure-connection",
       name: "secure-connection",
       checked: this.state.secureConnection,
+      className: "quoted",
       onChange: this.handleToggleSecure
-    }), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+    }), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+      htmlFor: "secure-connection"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
       id: "label_use_secure_connection",
       defaultMessage: [{
         "type": 0,
@@ -7824,6 +7827,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       autoLogin: false,
       transport: settings.transport || null,
       serverAddress: settings.serverAddress || (0,_lib_host_name_js__WEBPACK_IMPORTED_MODULE_16__.detectServerAddress)(),
+      secureConnection: settings.secureConnection === undefined ? (0,_lib_host_name_js__WEBPACK_IMPORTED_MODULE_16__.isSecureConnection)() : settings.secureConnection,
       serverVersion: "no connection",
       messageSounds: !settings.messageSoundsOff,
       incognitoMode: false,
@@ -8763,6 +8767,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().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();
@@ -8770,7 +8775,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       this.tinode.disconnect();
     }
 
-    this.tinode = TinodeWeb.tnSetup(serverAddress, settings.secureConnection, transport, this.props.intl.locale, _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_17__["default"].getObject('keep-logged-in'));
+    this.tinode = TinodeWeb.tnSetup(serverAddress, secureConnection, transport, this.props.intl.locale, _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_17__["default"].getObject('keep-logged-in'));
     this.tinode.onConnect = this.handleConnected;
     this.tinode.onDisconnect = this.handleDisconnect;
     this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;
@@ -8778,11 +8783,13 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     this.tinode.onDataMessage = this.handleDataMessage;
     this.setState({
       serverAddress: serverAddress,
-      transport: transport
+      transport: transport,
+      secureConnection: secureConnection
     });
     _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_17__["default"].setObject('settings', {
       serverAddress: serverAddress,
-      transport: transport
+      transport: transport,
+      secureConnection: secureConnection
     });
     _lib_navigation_js__WEBPACK_IMPORTED_MODULE_18__["default"].navigateTo(_lib_navigation_js__WEBPACK_IMPORTED_MODULE_18__["default"].setUrlSidePanel(window.location.hash, ''));
   }
@@ -9633,7 +9640,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       desktopAlertsEnabled: this.state.desktopAlertsEnabled,
       incognitoMode: this.state.incognitoMode,
       serverAddress: this.state.serverAddress,
-      secureConnection: (0,_lib_host_name_js__WEBPACK_IMPORTED_MODULE_16__.isSecureConnection)(),
+      secureConnection: this.state.secureConnection,
       serverVersion: this.state.serverVersion,
       onGlobalSettings: this.handleGlobalSettings,
       onSignUp: this.handleNewAccount,
@@ -12110,19 +12117,44 @@ class CheckBox extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompone
   }
 
   render() {
-    return this.props.onChange ? this.props.checked === true ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+    let classList = ['material-icons'];
-      className: "material-icons blue clickable",
+    let iconName;
-      onClick: this.handleChange
+
-    }, "check_box") : this.props.checked === false ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+    if (Array.isArray(this.props.className)) {
-      className: "material-icons blue clickable",
+      classList.push(...this.props.className);
-      onClick: this.handleChange
+    } else if (this.props.className) {
-    }, "check_box_outline_blank") : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+      classList.push(this.props.className);
-      className: "material-icons lt-blue"
+    }
-    }, "indeterminate_check_box") : this.props.checked ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+
-      className: "material-icons"
+    if (this.props.onChange) {
-    }, "check_box") : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+      if (this.props.checked) {
-      className: "material-icons"
+        classList.push('blue', 'clickable');
-    }, "check_box_outline_blank");
+        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__WEBPACK_IMPORTED_MODULE_0___default().createElement('i', attrs, iconName);
   }
 
 }