From 3240e1138e8f46ea99476bef4df0d81b5be3c561 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Thu, 27 May 2021 13:36:39 +0300
Subject: [PATCH 1/3] Sketched out export config modal infrastructure

---
 .../ExportConfigModal.tsx                     | 53 +++++++++++++++++++
 .../ui/src/components/pages/ConfigurePage.js  | 17 +++++-
 2 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx

diff --git a/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx b/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx
new file mode 100644
index 000000000..1f2dedba3
--- /dev/null
+++ b/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;
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/ConfigurePage.js b/monkey/monkey_island/cc/ui/src/components/pages/ConfigurePage.js
index 4cae9b2bf..9b2251cd8 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/ConfigurePage.js
+++ b/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>

From d0f5893e41fb790c7fc6b2ad9d7839f9d87022d9 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Fri, 28 May 2021 10:57:31 +0300
Subject: [PATCH 2/3] Finished up the configuration export modal and it's
 styling.

---
 .../ExportConfigModal.tsx                     | 118 +++++++++++++-----
 .../ExportConfigModal.scss                    |  30 +++++
 2 files changed, 120 insertions(+), 28 deletions(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/styles/components/configuration-components/ExportConfigModal.scss

diff --git a/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx b/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx
index 1f2dedba3..f0ac91d52 100644
--- a/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx
@@ -1,53 +1,115 @@
 import {Button, Modal, Form} from 'react-bootstrap';
-import React from 'react';
+import React, {useState} from 'react';
+
+import AuthComponent from '../AuthComponent';
+import '../../styles/components/configuration-components/ExportConfigModal.scss';
+
 
 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) => {
+  // 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'}>
+           size={'lg'}
+           className={'config-export-modal'}>
       <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/>}
-          />
+        <div key={'config-export-option'}
+             className={`mb-3 export-type-radio-buttons`}>
+          <Form>
+            <Form.Check
+              type={'radio'}
+              className={'password-radio-button'}
+              label={<PasswordInput onChange={setPass}/>}
+              name={'export-choice'}
+              value={'password'}
+              onChange={evt => {
+                setRadioValue(evt.target.value)
+              }}
+              checked={radioValue === 'password'}
+            />
+            <ExportPlaintextChoiceField onChange={setRadioValue}
+                                        radioValue={radioValue}/>
+          </Form>
 
-          <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 variant={'info'}
+                onClick={onSubmit}
+                disabled={isExportBtnDisabled()}>
+          Export
         </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 ConfigExportModal;
diff --git a/monkey/monkey_island/cc/ui/src/styles/components/configuration-components/ExportConfigModal.scss b/monkey/monkey_island/cc/ui/src/styles/components/configuration-components/ExportConfigModal.scss
new file mode 100644
index 000000000..78add3bb3
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/styles/components/configuration-components/ExportConfigModal.scss
@@ -0,0 +1,30 @@
+.config-export-modal .config-export-password-input p {
+  display: inline-block;
+  width: auto;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-right: 10px;
+}
+
+.config-export-modal .export-type-radio-buttons
+.password-radio-button .config-export-password-input input {
+  display: inline-block;
+  width: auto;
+  top: 0;
+  transform: none;
+}
+
+.config-export-modal .export-type-radio-buttons .password-radio-button input{
+  margin-top: 0;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.config-export-modal div.config-export-plaintext p.export-warning {
+  margin-left: 20px;
+}
+
+.config-export-modal div.config-export-plaintext {
+  margin-top: 15px;
+}

From a0487f480b715bfcb04006624b6bfef32f165217 Mon Sep 17 00:00:00 2001
From: Shreya Malviya <shreya.malviya@gmail.com>
Date: Fri, 28 May 2021 14:56:44 +0530
Subject: [PATCH 3/3] Update export config modal message for plaintext export

---
 .../components/configuration-components/ExportConfigModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx b/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx
index f0ac91d52..48a4d3df5 100644
--- a/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx
@@ -104,8 +104,8 @@ const ExportPlaintextChoiceField = (props: {
         }}
       />
       <p className={`export-warning text-secondary`}>
-        Configuration might contain stolen credentials or sensitive data.<br/>
-        It is advised to use password encryption option.
+        Configuration may contain stolen credentials or sensitive data.<br/>
+        It is advised to use password encryption.
       </p>
     </div>
   )