Finished up the configuration export modal and it's styling.

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'>
+        <div key={'config-export-option'}
-          <Form.Check
+             className={`mb-3 export-type-radio-buttons`}>
-            type={'radio'}
+          <Form>
-            id={'password'}
+            <Form.Check
-            label={<PasswordInput/>}
+              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}>
+        <Button variant={'info'}
-          Close
+                onClick={onSubmit}
-        </Button>
+                disabled={isExportBtnDisabled()}>
-        <Button variant='primary' onClick={props.onClick}>
+          Export
-          Save Changes
         </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;

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;
+}