Sketched out export config modal infrastructure

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

@@ -0,0 +1,53 @@
+import {Button, Modal, Form} from 'react-bootstrap';
+import React from 'react';
+
+type Props = {
+  show: boolean,
+  onClick: () => void
+}
+
+
+const PasswordInput = (props) => {
+  return (
+    <div className={'config-export-password-input'}>
+      <p>Encrypt with a password:</p>
+      <Form.Control type='password' placeholder='Password' />
+    </div>
+  )
+}
+
+
+const ConfigExportModal = (props: Props) => {
+  return (
+    <Modal show={props.show}
+           onHide={props.onClick}
+           size={'lg'}>
+      <Modal.Header closeButton>
+        <Modal.Title>Configuration export</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <div key={'config-export-option'} className='mb-3'>
+          <Form.Check
+            type={'radio'}
+            id={'password'}
+            label={<PasswordInput/>}
+          />
+
+          <Form.Check
+            type={'radio'}
+            label={'Skip encryption (export as plaintext)'}
+          />
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant='secondary' onClick={props.onClick}>
+          Close
+        </Button>
+        <Button variant='primary' onClick={props.onClick}>
+          Save Changes
+        </Button>
+      </Modal.Footer>
+    </Modal>)
+}
+
+export default ConfigExportModal;

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

@@ -14,6 +14,7 @@ import InternalConfig from '../configuration-components/InternalConfig';
 import UnsafeOptionsConfirmationModal from '../configuration-components/UnsafeOptionsConfirmationModal.js';
 import UnsafeOptionsWarningModal from '../configuration-components/UnsafeOptionsWarningModal.js';
 import isUnsafeOptionSelected from '../utils/SafeOptionValidator.js';
+import ConfigExportModal from '../configuration-components/ExportConfigModal';
 
 const ATTACK_URL = '/api/attack';
 const CONFIG_URL = '/api/configuration/island';
@@ -40,7 +41,8 @@ class ConfigurePageComponent extends AuthComponent {
       selectedSection: 'attack',
       showAttackAlert: false,
       showUnsafeOptionsConfirmation: false,
-      showUnsafeAttackOptionsWarning: false
+      showUnsafeAttackOptionsWarning: false,
+      showConfigExportModal: false
     };
   }
 
@@ -220,6 +222,14 @@ class ConfigurePageComponent extends AuthComponent {
     this.setState({configuration: newConfig, lastAction: 'none'});
   };
 
+  renderConfigExportModal = () => {
+    return (<ConfigExportModal show={this.state.showConfigExportModal}
+                               onClick={this.onExport} />)}
+
+  onExport = () => {
+    this.setState({showConfigExportModal: false})
+  }
+
   renderAttackAlertModal = () => {
     return (<Modal show={this.state.showAttackAlert} onHide={() => {
       this.setState({showAttackAlert: false})
@@ -488,6 +498,7 @@ class ConfigurePageComponent extends AuthComponent {
       <Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
            lg={{offset: 3, span: 8}} xl={{offset: 2, span: 8}}
            className={'main'}>
+        {this.renderConfigExportModal()}
         {this.renderAttackAlertModal()}
         {this.renderUnsafeOptionsConfirmationModal()}
         {this.renderUnsafeAttackOptionsWarningModal()}
@@ -509,7 +520,9 @@ class ConfigurePageComponent extends AuthComponent {
           </button>
           <input id='uploadInputInternal' type='file' accept='.conf' onChange={this.importConfig}
                  style={{display: 'none'}}/>
-          <button type='button' onClick={this.exportConfig} className='btn btn-info btn-lg' style={{margin: '5px'}}>
+          <button type='button'
+                  onClick={() => {this.setState({showConfigExportModal: true})}}
+                  className='btn btn-info btn-lg' style={{margin: '5px'}}>
             Export config
           </button>
         </div>