enable connections to sandbox from localhost

src/views/settings-view.jsx

@@ -2,6 +2,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import CheckBox from '../widgets/checkbox.jsx';
+
 import HostSelector from '../widgets/host-selector.jsx';
 
 export default class SettingsView extends React.PureComponent {
@@ -11,18 +13,21 @@ export default class SettingsView extends React.PureComponent {
     this.state = {
       transport: props.transport || 'def',
       serverAddress: props.serverAddress,
+      secureConnection: props.secureConnection,
     };
 
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleTransportSelected = this.handleTransportSelected.bind(this);
     this.handleServerAddressChange = this.handleServerAddressChange.bind(this);
+    this.handleToggleSecure = this.handleToggleSecure.bind(this);
   }
 
   handleSubmit(e) {
     e.preventDefault();
     this.props.onUpdate({
       transport: this.state.transport,
-      serverAddress: this.state.serverAddress
+      serverAddress: this.state.serverAddress,
+      secureConnection: this.state.secureConnection,
     });
   }
 
@@ -34,6 +39,10 @@ export default class SettingsView extends React.PureComponent {
     this.setState({serverAddress: name});
   }
 
+  handleToggleSecure(e) {
+    this.setState({secureConnection: !this.state.secureConnection});
+  }
+
   render() {
     const names = {def: "default", ws: "websocket", lp: "long polling"};
     const transportOptions = [];
@@ -58,8 +67,14 @@ export default class SettingsView extends React.PureComponent {
               description="Label for server selector in SettingsView" />
           </label>
         </div>
-        <HostSelector serverAddress={this.state.serverAddress}
-          onServerAddressChange={this.handleServerAddressChange} />
+        <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>
+            <FormattedMessage id="label_use_secure_connection" defaultMessage="Use secure connection"
+              description="Label for WS/WSS connection type in SettingsView" />
+          </label>
+        </div>
         <div className="panel-form-row">
           <label className="small">
             <FormattedMessage id="label_wire_transport" defaultMessage="Wire transport:"