Added import config modal.

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

@@ -1,44 +1,24 @@
-import {Button, Modal, Form} from 'react-bootstrap';
+import {Button, Modal, Form, Alert} from 'react-bootstrap';
 import React, {useEffect, useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-
 
 import AuthComponent from '../AuthComponent';
 import '../../styles/components/configuration-components/ImportConfigModal.scss';
-import {faCheck, faCross} from '@fortawesome/free-solid-svg-icons';
+import UploadStatusIcon, {UploadStatuses} from '../ui-components/UploadStatusIcon';
+import {faExclamationCircle} from '@fortawesome/free-solid-svg-icons/faExclamationCircle';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 
 
 type Props = {
   show: boolean,
-  onClick: () => void
+  onClose: (importSuccessful: boolean) => void
 }
 
 
-const UploadStatuses = {
-  clean: 'clean',
-  success: 'success',
-  error: 'error'
-}
-
-
-const UploadStatusIcon = (props: { status: string }) => {
-  switch (props.status) {
-    case UploadStatuses.success:
-      return (<FontAwesomeIcon icon={faCheck} className={'success'}/>);
-    case UploadStatuses.error:
-      return (<FontAwesomeIcon icon={faCross} className={'error'}/>);
-    default:
-      return null;
-  }
-}
-
-// TODO add types
 const ConfigImportModal = (props: Props) => {
   // TODO implement the back end
   const configImportEndpoint = '/api/temp_configuration';
 
   const [uploadStatus, setUploadStatus] = useState(UploadStatuses.clean);
-  const [importDisabled, setImportDisabled] = useState(true);
   const [configContents, setConfigContents] = useState('');
   const [password, setPassword] = useState('');
   const [showPassword, setShowPassword] = useState(false);
@@ -52,8 +32,8 @@ const ConfigImportModal = (props: Props) => {
   }, [configContents])
 
 
-  function sendConfigToServer() {
+  function sendConfigToServer(): Promise<string> {
-    authComponent.authFetch(configImportEndpoint,
+    return authComponent.authFetch(configImportEndpoint,
       {
         method: 'POST',
         headers: {'Content-Type': 'application/json'},
@@ -75,12 +55,22 @@ const ConfigImportModal = (props: Props) => {
         } else {
           setUploadStatus(UploadStatuses.success);
         }
-        if (res.status == 200) {
+        console.log(res['import_status']);
-          setImportDisabled(false);
+        return res['import_status'];
-        }
       })
   }
 
+  function isImportDisabled(): boolean {
+    return uploadStatus !== UploadStatuses.success
+  }
+
+  function resetState() {
+    setUploadStatus(UploadStatuses.clean);
+    setPassword('');
+    setConfigContents('');
+    setErrorMessage('');
+    setShowPassword(false);
+  }
 
   function uploadFile(event) {
     let reader = new FileReader();
@@ -88,38 +78,51 @@ const ConfigImportModal = (props: Props) => {
       setConfigContents(JSON.stringify(event.target.result))
     };
     reader.readAsText(event.target.files[0]);
-    event.target.value = null;
+
   }
 
   function onImportClick() {
+    sendConfigToServer().then((importStatus) => {
+      if(importStatus === 'imported'){
+        resetState();
+        props.onClose(true);
+      }
+    });
   }
 
   return (
     <Modal show={props.show}
-           onHide={props.onClick}
+           onHide={()=> {resetState(); props.onClose(false)}}
            size={'lg'}
-           className={'config-export-modal'}>
+           className={'config-import-modal'}>
       <Modal.Header closeButton>
         <Modal.Title>Configuration import</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <div key={'config-export-option'}
+        <div className={`mb-3 config-import-option`}>
-             className={`mb-3 export-type-radio-buttons`}>
           <Form>
             <Form.File id='exampleFormControlFile1'
                        label='Please choose a configuration file'
                        accept='.conf'
-                       onChange={uploadFile}/>
+                       onChange={uploadFile}
+                        className={'file-input'}/>
             <UploadStatusIcon status={uploadStatus}/>
-            {showPassword && <PasswordInput onChange={setPassword} />}
-          </Form>
 
+            {showPassword && <PasswordInput onChange={setPassword} />}
+
+            { errorMessage &&
+              <Alert variant={'danger'} className={'import-error'}>
+                <FontAwesomeIcon icon={faExclamationCircle} style={{'marginRight': '5px'}}/>
+                {errorMessage}
+              </Alert>
+            }
+          </Form>
         </div>
       </Modal.Body>
       <Modal.Footer>
         <Button variant={'info'}
                 onClick={onImportClick}
-                disabled={importDisabled}>
+                disabled={isImportDisabled()}>
           Import
         </Button>
       </Modal.Footer>
@@ -130,8 +133,8 @@ const PasswordInput = (props: {
   onChange: (passValue) => void,
 }) => {
   return (
-    <div className={'config-export-password-input'}>
+    <div className={'config-import-password-input'}>
-      <p>Encrypt with a password:</p>
+      <p>File is protected. Enter password:</p>
       <Form.Control type='password'
                     placeholder='Password'
                     onChange={evt => (props.onChange(evt.target.value))}/>

monkey/monkey_island/cc/ui/src/styles/components/configuration-components/ImportConfigModal.scss

@@ -1,30 +1,21 @@
-.config-export-modal .config-export-password-input p {
+.config-import-modal .config-import-option .file-input {
+  display: inline-block;
+}
+
+.config-import-modal .config-import-option .import-error {
+  margin-top: 10px;
+}
+.config-import-modal .config-import-option .config-import-password-input {
+  margin-top: 20px;
+}
+
+.config-import-modal .config-import-option .config-import-password-input p{
+  margin-right: 5px;
   display: inline-block;
   width: auto;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-right: 10px;
 }
 
-.config-export-modal .export-type-radio-buttons
+.config-import-modal .config-import-option .config-import-password-input input{
-.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;
 }