ui: show warning when unsafe ATT&CK configuration is submitted

monkey/monkey_island/cc/ui/src/components/configuration-components/UnsafeOptionsWarningModal.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Modal, Button} from 'react-bootstrap';
+
+function UnsafeOptionsConfirmationModal(props) {
+  return (
+    <Modal show={props.show}>
+      <Modal.Body>
+        <h2>
+          <div className='text-center'>Warning</div>
+        </h2>
+        <p className='text-center' style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
+          Some of the selected options could cause systems to become unstable or malfunction.
+        </p>
+        <div className='text-center'>
+          <Button type='button'
+                  className='btn btn-danger'
+                  size='lg'
+                  style={{margin: '5px'}}
+                  onClick={props.onContinueClick}>
+            Continue
+          </Button>
+        </div>
+      </Modal.Body>
+    </Modal>
+  )
+}
+
+export default UnsafeOptionsConfirmationModal;

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

@@ -12,6 +12,7 @@ import {formValidationFormats} from '../configuration-components/ValidationForma
 import transformErrors from '../configuration-components/ValidationErrorMessages';
 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';
 
 const ATTACK_URL = '/api/attack';
@@ -38,7 +39,8 @@ class ConfigurePageComponent extends AuthComponent {
       sections: [],
       selectedSection: 'attack',
       showAttackAlert: false,
-      showUnsafeOptionsConfirmation: false
+      showUnsafeOptionsConfirmation: false,
+      showUnsafeAttackOptionsWarning: false
     };
   }
 
@@ -92,12 +94,17 @@ class ConfigurePageComponent extends AuthComponent {
     }
   }
 
-  updateConfig = () => {
+  onUnsafeAttackContinueClick = () => {
+    this.setState({showUnsafeAttackOptionsWarning: false});
+  }
+
+
+  updateConfig = (callback=null) => {
     this.authFetch(CONFIG_URL)
       .then(res => res.json())
       .then(data => {
         this.setInitialConfig(data.configuration);
-        this.setState({configuration: data.configuration});
+        this.setState({configuration: data.configuration}, callback);
       })
   };
 
@@ -130,7 +137,7 @@ class ConfigurePageComponent extends AuthComponent {
       .then(() => {
         this.setInitialAttackConfig(this.state.attackConfig);
       })
-      .then(() => this.updateConfig())
+      .then(() => this.updateConfig(this.checkAndShowUnsafeAttackWarning))
       .then(() => this.setState({lastAction: 'saved'}))
       .catch(error => {
         console.log('Bad configuration: ' + error.toString());
@@ -138,6 +145,12 @@ class ConfigurePageComponent extends AuthComponent {
       });
   };
 
+  checkAndShowUnsafeAttackWarning = () => {
+    if (isUnsafeOptionSelected(this.state.schema, this.state.configuration)) {
+      this.setState({showUnsafeAttackOptionsWarning: true});
+    }
+  }
+
   attemptConfigSubmit() {
     this.updateConfigSection();
     this.setState({lastAction: 'submit_attempt'}, () => {
@@ -243,6 +256,15 @@ class ConfigurePageComponent extends AuthComponent {
     );
   }
 
+  renderUnsafeAttackOptionsWarningModal() {
+    return (
+      <UnsafeOptionsWarningModal
+        show={this.state.showUnsafeAttackOptionsWarning}
+        onContinueClick={this.onUnsafeAttackContinueClick}
+      />
+    );
+  }
+
   userChangedConfig() {
     if (JSON.stringify(this.state.configuration) === JSON.stringify(this.initialConfig)) {
       if (Object.keys(this.currentFormData).length === 0 ||
@@ -468,6 +490,7 @@ class ConfigurePageComponent extends AuthComponent {
            className={'main'}>
         {this.renderAttackAlertModal()}
         {this.renderUnsafeOptionsConfirmationModal()}
+        {this.renderUnsafeAttackOptionsWarningModal()}
         <h1 className='page-title'>Monkey Configuration</h1>
         {this.renderNav()}
         {content}