automatically fix remote cliUrl protocol for onion

app/containers/InitPage.js

@@ -14,9 +14,11 @@ import utils from '../services/utils';
 import guiConfig from '../mainProcess/guiConfig';
 
 const STEP_LAST = 3
-const DEFAULT_CLIHOSTPORT = 'https://myRemoteCLI:'+DEFAULT_CLIPORT
+const DEFAULT_CLIHOSTPORT = 'https://my-cli-host:'+DEFAULT_CLIPORT
+const TOR_CLIHISTPORT = 'http://my-hiddenservice.onion:'+DEFAULT_CLIPORT
 const DEFAULT_APIKEY = ''
 const DEFAUT_GUI_PROXY = 'socks5://127.0.0.1:9050'
+const TORBROWSER_PROXY = 'socks5://127.0.0.1:9150'
 
 const CLILOCAL_URL = 'https://localhost:'+DEFAULT_CLIPORT
 class InitPage extends Component<Props> {
@@ -174,9 +176,9 @@ class InitPage extends Component<Props> {
       currentCliHostPort: cliHostPort,
       currentApiKey: apiKey
     }
-    const showGuiProxy = cliHostPort && cliHostPort.indexOf('.onion')!==-1
-    if (showGuiProxy) {
-      newState.showGuiProxy = showGuiProxy
+    const isHiddenService = cliHostPort && cliHostPort.indexOf('.onion')!==-1
+    if (isHiddenService) {
+      newState.showGuiProxy = isHiddenService
       if (!guiConfig.getGuiProxy()) {
         // set default GUI proxy
         guiConfig.setGuiProxy(DEFAUT_GUI_PROXY)
@@ -192,6 +194,25 @@ class InitPage extends Component<Props> {
     if (cliUrl.substr(-1,1) === '/') {
       cliUrl = cliUrl.substr(0, cliUrl.length-1);
     }
+
+    const isHiddenService = cliUrl.indexOf('.onion')!==-1
+    if (isHiddenService) {
+      // adapt url for hidden service
+      const spl = cliUrl.split('://')
+      const protocol = spl[0]
+
+      // https://onion -> http://onion
+      if (spl.length >= 2 && protocol !== 'http') {
+        console.log('replacing http protocol for onion')
+        cliUrl = 'http://' + spl[1]
+      }
+      // onion -> http://onion
+      else if (spl.length == 1) {
+        console.log('adding http protocol for onion')
+        cliUrl = 'http://' + spl[0]
+      }
+    }
+    console.log('computeCliUrl', cliUrl)
     return cliUrl
   }
 
@@ -273,24 +294,30 @@ class InitPage extends Component<Props> {
               <div className="row">
                 <label htmlFor="cliHostPort" className="col-sm-2 col-form-label">CLI address</label>
                 <input type="text" id="cliHostPort" className="form-control col-sm-4" placeholder={DEFAULT_CLIHOSTPORT} defaultValue={this.state.currentCliHostPort} ref={this.inputCliHostPort} onChange={this.onChangeInputCliHostPort} required/>
-                &nbsp;
-                {this.state.currentCliHostPort
-                && !this.state.cliUrl && <button type='button' className='btn btn-primary col-sm-2' onClick={this.connectCli}>Connect</button>}
+                <label className='col-form-label col-sm-6 text-muted' style={{'padding-top':0,'padding-bottom':0}}>
+                  <code>{DEFAULT_CLIHOSTPORT}</code> for standard usage<br/>
+                  <code>{TOR_CLIHISTPORT}</code> for Hidden Service
+                </label>
               </div>
+              {this.state.currentCliHostPort
+              && !this.state.cliUrl && <div className="row">
+                <div className='col-sm-2'></div>
+                <button type='button' className='btn btn-primary col-sm-4' onClick={this.connectCli}>Connect</button>
+              </div>}
               &nbsp;
               {this.state.showGuiProxy && <div className="row">
                 <label htmlFor="guiProxy" className="col-sm-2 col-form-label">Tor proxy</label>
                 <input type="text" id="guiProxy" className="form-control col-sm-4" defaultValue={guiConfig.getGuiProxy()} onChange={this.onChangeGuiProxy}/>
-                <label className='col-form-label col-sm-6 text-muted'>
-                  Only required when CLI behind a Hidden Service.<br/>
-                  <code>{DEFAUT_GUI_PROXY}</code>
+                <label className='col-form-label col-sm-6 text-muted' style={{'padding-top':0}}>
+                  Required when CLI is behind a Hidden Service.<br/>
+                  <code>{DEFAUT_GUI_PROXY}</code> with Tor,<br/><code>{TORBROWSER_PROXY}</code> with Tor Browser
                 </label>
               </div>}
               {this.state.showApiKey && <div className="row">
                 <label htmlFor="apiKey" className="col-sm-2 col-form-label">API Key</label>
                 <input type="password" id="apiKey" className="form-control col-sm-4" defaultValue={this.state.currentApiKey} ref={this.inputApiKey} onChange={this.onChangeInputCliHostPort} />
-                <label className='col-form-label col-sm-6 text-muted'>
-                  Only required when CLI already initialized<br/>(<code>cli.apiKey</code> in <code>whirlpool-cli-config.properties</code>)
+                <label className='col-form-label col-sm-6 text-muted' style={{'padding-top':0}}>
+                  Required when CLI was already initialized<br/>(<code>cli.apiKey</code> in <code>whirlpool-cli-config.properties</code>)
                 </label>
               </div>}
               <div className="row">