Add remote mount

src/App.js

@@ -162,15 +162,6 @@ class App extends IPCContainer {
 
     return (
       <div className={'App'}>
-        {selectAppPlatformDisplay}
-        {dependencyDisplay}
-        {upgradeDisplay}
-        {configDisplay}
-        {infoDisplay}
-        {confirmDisplay}
-        {downloadDisplay}
-        {rebootDisplay}
-        {errorDisplay}
         <div className={'AppContainer'}>
           <div className={'AppHeader'}>
             <Box>
@@ -198,6 +189,15 @@ class App extends IPCContainer {
             </Box>
           </div>
         </div>
+        {selectAppPlatformDisplay}
+        {dependencyDisplay}
+        {upgradeDisplay}
+        {configDisplay}
+        {infoDisplay}
+        {confirmDisplay}
+        {downloadDisplay}
+        {rebootDisplay}
+        {errorDisplay}
       </div>
     );
   }

src/components/AddRemoteMount/AddRemoteMount.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import './AddRemoteMount.css';
-import {connect} from 'react-redux';
-import Button from '../UI/Button/Button';
-
-const mapDispatchToProps = dispatch => {
-  return {
-  }
-};
-
-export default connect(null, mapDispatchToProps)(props => {
-  return (
-    <div className={'AddRemoteMount'}>
-      <Button>Add Remote Mount</Button>
-    </div>
-  );
-});

src/containers/AddRemoteMount/AddRemoteMount.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import {Component} from 'react';
+import './AddRemoteMount.css';
+import {connect} from 'react-redux';
+import Button from '../../components/UI/Button/Button';
+import Modal from '../../components/UI/Modal/Modal';
+import Box from '../../components/UI/Box/Box';
+import Text from '../../components/UI/Text/Text';
+import {notifyError} from '../../redux/actions/error_actions';
+import {addRemoteMount} from '../../redux/actions/mount_actions';
+
+const mapDispatchToProps = dispatch => {
+  return {
+    addRemoteMount: (hostNameOrIp, port, token) => dispatch(addRemoteMount(hostNameOrIp, port, token)),
+    notifyError: (msg, critical, callback) => dispatch(notifyError(msg, critical, callback)),
+  }
+};
+
+export default connect(null, mapDispatchToProps)(class extends Component {
+  state = {
+    Display: false,
+    HostNameOrIp: '',
+    Port: 20000,
+    Token: '',
+  };
+
+  addRemoteMount = () => {
+    if (this.state.HostNameOrIp.length === 0) {
+      this.props.notifyError('Hostname or IP cannot be empty.');
+    } else {
+      this.setState({
+        Display: false
+      }, () => {
+        this.props.addRemoteMount(this.state.HostNameOrIp, this.state.Port, this.state.Token);
+        this.setState({
+          HostNameOrIp: '',
+          Port: 20000,
+          Token: '',
+        });
+      });
+    }
+  };
+
+  createModalConditionally = (condition, jsx, critical) => {
+    const modalProps = {critical: critical};
+    return condition ? (<Modal {...modalProps}>{jsx}</Modal>) : null;
+  };
+
+  handleAddRemoteMount = () => {
+    this.setState({
+      Display: true,
+    });
+  };
+
+  render() {
+    const displayAdd = this.createModalConditionally(this.state.Display, (
+      <Box dxDark
+           dxStyle={{width: 'auto', height: 'auto', padding: '8px'}}>
+        <h1 style={{color: 'var(--text_color_error)', textAlign: 'center', paddingBottom: '8px'}}>Add Remote Mount</h1>
+        <Text text={'Hostname or IP'}
+              textAlign={'left'}
+              type={'Heading1'}/>
+        <input onChange={e => this.setState({HostNameOrIp: e.target.value.trim()})}
+               className={'ConfigurationItemInput'}
+               type={'text'}
+               value={this.state.HostNameOrIp}/>
+        <div style={{paddingTop: '8px'}}/>
+        <Text text={'Port'}
+              textAlign={'left'}
+              type={'Heading1'}/>
+        <input max={65535}
+               min={1025}
+               onChange={e => this.setState({Port: e.target.value})}
+               className={'ConfigurationItemInput'}
+               type={'number'}
+               value={this.state.Port}/>
+        <div style={{paddingTop: '8px'}}/>
+        <Text text={'Remote Token'}
+              textAlign={'left'}
+              type={'Heading1'}/>
+        <input onChange={e => this.setState({Token: e.target.value})}
+               className={'ConfigurationItemInput'}
+               type={'text'}
+               value={this.state.Token}/>
+        <div style={{paddingTop: '8px'}}/>
+        <table cellSpacing={1}
+               width="100%">
+          <tbody>
+          <tr>
+            <td width="50%">
+              <Button buttonStyles={{width: '100%'}}
+                      clicked={() => this.addRemoteMount()}>OK</Button>
+            </td>
+            <td width="50%">
+              <Button buttonStyles={{width: '100%'}}
+                      clicked={() => this.setState({Display: false})}>Cancel</Button>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </Box>
+    ));
+
+    return (
+      <div className={'AddRemoteMount'}>
+        {displayAdd}
+        <Button clicked={this.handleAddRemoteMount}>Add Remote Mount</Button>
+      </div>
+    );
+  }
+});

src/containers/Configuration/Configuration.js

@@ -216,13 +216,15 @@ class Configuration extends IPCContainer {
       item.remote &&
       this.props.remoteSupported &&
       (item.label !== 'IsRemoteMount')) {
-      const isRemoteMount = JSON.parse(itemList.find(s=>s.label === 'IsRemoteMount').value);
+      const isRemoteMount = JSON.parse(itemList.find(s => s.label === 'IsRemoteMount').value);
-      const enableRemoteMount = JSON.parse(itemList.find(s=>s.label === 'EnableRemoteMount').value);
+      const enableRemoteMount = JSON.parse(itemList.find(s => s.label === 'EnableRemoteMount').value);
-      return (item.label === 'RemoteHostNameOrIp') || (item.label === 'RemotePort') || (item.label === 'RemoteToken') ?
+      return (item.label === 'RemoteHostNameOrIp') ?
         isRemoteMount :
-        (item.label === 'EnableRemoteMount') ?
+        (item.label === 'RemotePort') || (item.label === 'RemoteToken') ?
-          !isRemoteMount :
+          isRemoteMount || enableRemoteMount :
-          enableRemoteMount;
+          (item.label === 'EnableRemoteMount') ?
+            !isRemoteMount :
+            enableRemoteMount;
     }
     return false;
   };

src/containers/MountItems/MountItems.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import AddRemoteMount from '../../components/AddRemoteMount/AddRemoteMount';
+import AddRemoteMount from '../AddRemoteMount/AddRemoteMount';
 import Box from '../../components/UI/Box/Box';
 import Button from '../../components/UI/Button/Button';
 import {connect} from 'react-redux';

src/redux/actions/mount_actions.js

@@ -5,6 +5,43 @@ import {
   confirmYesNo,
   saveState
 } from './common_actions';
+import {notifyError} from './error_actions';
+
+export const addRemoteMount = (hostNameOrIp, port, token) => {
+  return (dispatch, getState) => {
+    const ipcRenderer = getIPCRenderer();
+
+    const provider = 'Remote' + hostNameOrIp + ':' + port;
+    dispatch(addRemoteMount2(provider));
+    dispatch(setBusy(true));
+
+    ipcRenderer.once(Constants.IPC_Set_Config_Values_Reply, (_, arg) => {
+      if (arg.data.Success) {
+        ipcRenderer.send(Constants.IPC_Detect_Mounts, {
+          RemoteMounts: getState().mounts.RemoteMounts,
+          Version: getState().relver.InstalledVersion,
+        });
+      } else {
+        dispatch(notifyError('Failed to set \'RemoteToken\': ' + arg.data.Error));
+        dispatch(setBusy(false));
+      }
+    });
+
+    ipcRenderer.send(Constants.IPC_Set_Config_Values, {
+      Items: [
+        {Name: 'RemoteMount.RemoteHostNameOrIp', Value: hostNameOrIp},
+        {Name: 'RemoteMount.RemoteToken', Value: token},
+        {Name: 'RemoteMount.RemotePort', Value: port},
+        {Name: 'RemoteMount.IsRemoteMount', Value: 'true'},
+      ],
+      Provider: provider,
+      Remote: true,
+      Version: getState().relver.InstalledVersion,
+    });
+  };
+};
+
+export const addRemoteMount2 = createAction('mounts/addRemoteMount2');
 
 export const DISPLAY_CONFIGURATION = 'mounts/displayConfiguration';
 export const displayConfiguration = (provider, remote) => {

src/redux/reducers/mount_reducer.js

@@ -1,6 +1,7 @@
 import * as Constants from '../../constants';
 import {createReducer} from 'redux-starter-kit';
 import {
+  addRemoteMount2,
   DISPLAY_CONFIGURATION,
   removeRemoteMount3,
   RESET_MOUNTS_STATE,
@@ -56,6 +57,27 @@ export const createMountReducer = state => {
     ProviderState: providerState,
     RemoteMounts: state.RemoteMounts ? state.RemoteMounts : ['Remotelocalhost:20000'],
   }, {
+    [addRemoteMount2]: (state, action) => {
+      let mountState = {...state.MountState};
+      mountState[action.payload] = {
+        AllowMount: false,
+        DriveLetters: [],
+        Mounted: false,
+      };
+
+      let providerState = {...state.ProviderState};
+      providerState[action.payload] = {
+        AutoMount: false,
+        AutoRestart: false,
+        MountLocation: '',
+      };
+      return {
+        ...state,
+        MountState: mountState,
+        ProviderState: providerState,
+        RemoteMounts: [...state.RemoteMounts, action.payload],
+      }
+    },
     [DISPLAY_CONFIGURATION]: (state, action) => {
       return {
         ...state,