feat(onboarding): Allow HTTPS in self-hosted sync engine onboarding

internal_packages/onboarding/lib/page-self-hosting-config.jsx

@@ -14,6 +14,7 @@ class SelfHostingConfigPage extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
+      usesHTTPS: false,
       url: "",
       port: "",
       error: null,
@@ -32,6 +33,12 @@ class SelfHostingConfigPage extends React.Component {
     })
   }
 
+  _onChangeProtocol = (event) => {
+    this.setState({
+      usesHTTPS: !this.state.usesHTTPS,
+    })
+  }
+
   _addAccountJSON = () => {
     // Connect to local sync engine's /accounts endpoint and add accounts to N1
     const xmlHttp = new XMLHttpRequest()
@@ -57,7 +64,7 @@ class SelfHostingConfigPage extends React.Component {
       return
     }
     NylasEnv.config.set('env', 'custom')
-    NylasEnv.config.set('syncEngine.APIRoot', `http://${this.state.url}:${this.state.port}`)
+    NylasEnv.config.set('syncEngine.APIRoot', `http${this.state.usesHTTPS ? "s" : ""}://${this.state.url}:${this.state.port}`)
     Actions.setNylasIdentity({
       token: "SELFHOSTEDSYNCENGINE",
       firstname: "",
@@ -116,7 +123,7 @@ class SelfHostingConfigPage extends React.Component {
         <div className="self-hosting-container">
           <Flexbox direction="horizontal">
             <div className="api-root">
-              <h4>{`http://`}</h4>
+              <h4>{`http${this.state.usesHTTPS ? "s" : ""}://`}</h4>
             </div>
             <div>
               <label>Sync Engine URL:</label>
@@ -142,6 +149,15 @@ class SelfHostingConfigPage extends React.Component {
               />
             </div>
           </Flexbox>
+          <div className="item">
+            <input
+              id="https"
+              type="checkbox"
+              onChange={this._onChangeProtocol}
+              checked={this.state.usesHTTPS}
+            />
+            <label htmlFor="https">Use HTTPS</label>
+          </div>
         </div>
         <button
           className="btn btn-large btn-gradient"

internal_packages/onboarding/stylesheets/onboarding.less

@@ -575,6 +575,13 @@
     margin-top: 20px;
   }
 
+  .item {
+    input, label {
+      display: inline;
+      width: 10px;
+    }
+  }
+
   .self-hosting-container {
     width: 400px;
     display: block;