Sketched out the infrastructure of configuration import modal window

monkey/monkey_island/cc/ui/src/components/configuration-components/ImportConfigModal.tsx

@@ -0,0 +1,104 @@
+import {Button, Modal, Form} from 'react-bootstrap';
+import React, {useState} from 'react';
+
+import AuthComponent from '../AuthComponent';
+import '../../styles/components/configuration-components/ExportConfigModal.scss';
+
+
+type Props = {
+  show: boolean,
+  onClick: () => void
+}
+
+const ConfigImportModal = (props: Props) => {
+  // TODO implement the back end
+  const configExportEndpoint = '/api/configuration/export';
+
+  const [pass, setPass] = useState('');
+  const [radioValue, setRadioValue] = useState('password');
+  const authComponent = new AuthComponent({});
+
+  function isExportBtnDisabled() {
+    return pass === '' && radioValue === 'password';
+  }
+
+  function onSubmit() {
+    authComponent.authFetch(configExportEndpoint,
+      {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({
+          should_encrypt: (radioValue === 'password'),
+          password: pass
+        })
+      }
+    )
+  }
+
+  return (
+    <Modal show={props.show}
+           onHide={props.onClick}
+           size={'lg'}
+           className={'config-export-modal'}>
+      <Modal.Header closeButton>
+        <Modal.Title>Configuration import</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <div key={'config-export-option'}
+             className={`mb-3 export-type-radio-buttons`}>
+          <Form>
+            <Form.File id="exampleFormControlFile1"
+                       label="Example file input" />
+          </Form>
+
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant={'info'}
+                onClick={onSubmit}
+                disabled={isExportBtnDisabled()}>
+          Import
+        </Button>
+      </Modal.Footer>
+    </Modal>)
+}
+
+const PasswordInput = (props: {
+  onChange: (passValue) => void
+}) => {
+  return (
+    <div className={'config-export-password-input'}>
+      <p>Encrypt with a password:</p>
+      <Form.Control type='password'
+                    placeholder='Password'
+                    onChange={evt => (props.onChange(evt.target.value))}/>
+    </div>
+  )
+}
+
+const ExportPlaintextChoiceField = (props: {
+  radioValue: string,
+  onChange: (radioValue) => void
+}) => {
+  return (
+    <div className={'config-export-plaintext'}>
+      <Form.Check
+        type={'radio'}
+        label={'Skip encryption (export as plaintext)'}
+        name={'export-choice'}
+        value={'plaintext'}
+        checked={props.radioValue === 'plaintext'}
+        onChange={evt => {
+          props.onChange(evt.target.value);
+        }}
+      />
+      <p className={`export-warning text-secondary`}>
+        Configuration might contain stolen credentials or sensitive data.<br/>
+        It is advised to use password encryption option.
+      </p>
+    </div>
+  )
+}
+
+
+export default ConfigImportModal;

monkey/monkey_island/cc/ui/src/components/pages/ConfigurePage.js

@@ -15,6 +15,7 @@ import UnsafeOptionsConfirmationModal from '../configuration-components/UnsafeOp
 import UnsafeOptionsWarningModal from '../configuration-components/UnsafeOptionsWarningModal.js';
 import isUnsafeOptionSelected from '../utils/SafeOptionValidator.js';
 import ConfigExportModal from '../configuration-components/ExportConfigModal';
+import ConfigImportModal from '../configuration-components/ImportConfigModal';
 
 const ATTACK_URL = '/api/attack';
 const CONFIG_URL = '/api/configuration/island';
@@ -42,7 +43,8 @@ class ConfigurePageComponent extends AuthComponent {
       showAttackAlert: false,
       showUnsafeOptionsConfirmation: false,
       showUnsafeAttackOptionsWarning: false,
-      showConfigExportModal: false
+      showConfigExportModal: false,
+      showConfigImportModal: false
     };
   }
 
@@ -230,6 +232,14 @@ class ConfigurePageComponent extends AuthComponent {
     this.setState({showConfigExportModal: false})
   }
 
+  renderConfigImportModal = () => {
+    return (<ConfigImportModal show={this.state.showConfigImportModal}
+                               onClick={this.onImport} />)}
+
+  onImport = () => {
+    this.setState({showConfigImportModal: false})
+  }
+
   renderAttackAlertModal = () => {
     return (<Modal show={this.state.showAttackAlert} onHide={() => {
       this.setState({showAttackAlert: false})
@@ -499,6 +509,7 @@ class ConfigurePageComponent extends AuthComponent {
            lg={{offset: 3, span: 8}} xl={{offset: 2, span: 8}}
            className={'main'}>
         {this.renderConfigExportModal()}
+        {this.renderConfigImportModal()}
         {this.renderAttackAlertModal()}
         {this.renderUnsafeOptionsConfirmationModal()}
         {this.renderUnsafeAttackOptionsWarningModal()}
@@ -514,12 +525,10 @@ class ConfigurePageComponent extends AuthComponent {
           </button>
         </div>
         <div className='text-center'>
-          <button onClick={() => document.getElementById('uploadInputInternal').click()}
+          <button onClick={()=> {this.setState({showConfigImportModal: true})}}
                   className='btn btn-info btn-lg' style={{margin: '5px'}}>
             Import config
           </button>
-          <input id='uploadInputInternal' type='file' accept='.conf' onChange={this.importConfig}
-                 style={{display: 'none'}}/>
           <button type='button'
                   onClick={() => {this.setState({showConfigExportModal: true})}}
                   className='btn btn-info btn-lg' style={{margin: '5px'}}>