From 95a42232bbc410053530ab2fb02f5e5a855e6d84 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Mon, 6 Jan 2020 11:02:36 +0200
Subject: [PATCH 1/4] Copied modal into a separate react component

---
 .../ui-components/StartOverModal.js           | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js

diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js b/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js
new file mode 100644
index 000000000..057d45779
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js
@@ -0,0 +1,45 @@
+import {Modal} from "react-bootstrap";
+import Modal from "react-bootstrap/es/Modal";
+import ReactComponent from "react";
+import AuthComponent from "../AuthComponent";
+
+
+class StartOverModal extends ReactComponent {
+  render = () => {
+    return (
+      <Modal show={this.state.showCleanDialog} onHide={() => this.setState({showCleanDialog: false})}>
+        <Modal.Body>
+          <h2>
+            <div className="text-center">Reset environment</div>
+          </h2>
+          <p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
+            Are you sure you want to reset the environment?
+          </p>
+          {
+            !this.state.allMonkeysAreDead ?
+              <div className="alert alert-warning">
+                <i className="glyphicon glyphicon-warning-sign" style={{'marginRight': '5px'}}/>
+                Some monkeys are still running. It's advised to kill all monkeys before resetting.
+              </div>
+              :
+              <div/>
+          }
+          <div className="text-center">
+            <button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
+                    onClick={() => {
+                      this.cleanup();
+                      this.setState({showCleanDialog: false});
+                    }}>
+              Reset environment
+            </button>
+            <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
+                    onClick={() => this.setState({showCleanDialog: false})}>
+              Cancel
+            </button>
+          </div>
+        </Modal.Body>
+      </Modal>
+    )
+
+  };
+}

From 18731a430bf2e431623d66a499a6cd3f1692aabc Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Tue, 7 Jan 2020 16:06:50 +0200
Subject: [PATCH 2/4] Fixed start over modal and start over page, added
 stylesheet

---
 .../ui/src/components/pages/StartOverPage.js  | 63 ++++++-----------
 .../ui-components/StartOverModal.js           | 67 +++++++++++++------
 .../cc/ui/src/styles/StartOverPage.scss       |  9 +++
 3 files changed, 77 insertions(+), 62 deletions(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/styles/StartOverPage.scss

diff --git a/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js b/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js
index eca159133..2aaeddec7 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js
@@ -1,7 +1,9 @@
 import React from 'react';
-import {Col, Modal} from 'react-bootstrap';
+import {Col} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
 import AuthComponent from '../AuthComponent';
+import StartOverModal from '../ui-components/StartOverModal';
+import '../../styles/StartOverPage.scss';
 
 class StartOverPageComponent extends AuthComponent {
   constructor(props) {
@@ -12,6 +14,9 @@ class StartOverPageComponent extends AuthComponent {
       showCleanDialog: false,
       allMonkeysAreDead: false
     };
+
+    this.cleanup = this.cleanup.bind(this);
+    this.closeModal = this.closeModal.bind(this);
   }
 
   updateMonkeysRunning = () => {
@@ -25,48 +30,14 @@ class StartOverPageComponent extends AuthComponent {
       });
   };
 
-  renderCleanDialogModal = () => {
-    return (
-      <Modal show={this.state.showCleanDialog} onHide={() => this.setState({showCleanDialog: false})}>
-        <Modal.Body>
-          <h2>
-            <div className="text-center">Reset environment</div>
-          </h2>
-          <p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
-            Are you sure you want to reset the environment?
-          </p>
-          {
-            !this.state.allMonkeysAreDead ?
-              <div className="alert alert-warning">
-                <i className="glyphicon glyphicon-warning-sign" style={{'marginRight': '5px'}}/>
-                Some monkeys are still running. It's advised to kill all monkeys before resetting.
-              </div>
-              :
-              <div/>
-          }
-          <div className="text-center">
-            <button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
-                    onClick={() => {
-                      this.cleanup();
-                      this.setState({showCleanDialog: false});
-                    }}>
-              Reset environment
-            </button>
-            <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
-                    onClick={() => this.setState({showCleanDialog: false})}>
-              Cancel
-            </button>
-          </div>
-        </Modal.Body>
-      </Modal>
-    )
-
-  };
-
   render() {
     return (
       <Col xs={12} lg={8}>
-        {this.renderCleanDialogModal()}
+        <StartOverModal cleaned = {this.state.cleaned}
+                        showCleanDialog = {this.state.showCleanDialog}
+                        allMonkeysAreDead = {this.state.allMonkeysAreDead}
+                        onVerify = {this.cleanup}
+                        onClose = {this.closeModal}/>
         <h1 className="page-title">Start Over</h1>
         <div style={{'fontSize': '1.2em'}}>
           <p>
@@ -104,7 +75,7 @@ class StartOverPageComponent extends AuthComponent {
     this.setState({
       cleaned: false
     });
-    this.authFetch('/api?action=reset')
+    return this.authFetch('/api?action=reset')
       .then(res => res.json())
       .then(res => {
         if (res['status'] === 'OK') {
@@ -112,8 +83,14 @@ class StartOverPageComponent extends AuthComponent {
             cleaned: true
           });
         }
-      });
-  }
+      }).then(this.updateMonkeysRunning());
+  };
+
+  closeModal = () => {
+    this.setState({
+      showCleanDialog: false,
+    })
+  };
 }
 
 export default StartOverPageComponent;
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js b/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js
index 057d45779..5c0ae1cb2 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js
@@ -1,13 +1,30 @@
 import {Modal} from "react-bootstrap";
-import Modal from "react-bootstrap/es/Modal";
-import ReactComponent from "react";
-import AuthComponent from "../AuthComponent";
+import React from "react";
+import {GridLoader} from 'react-spinners';
 
 
-class StartOverModal extends ReactComponent {
+class StartOverModal extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showCleanDialog: this.props.showCleanDialog,
+      allMonkeysAreDead: this.props.allMonkeysAreDead,
+      loading: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props !== prevProps) {
+      this.setState({ showCleanDialog: this.props.showCleanDialog,
+                      allMonkeysAreDead: this.props.allMonkeysAreDead})
+    }
+  }
+
   render = () => {
     return (
-      <Modal show={this.state.showCleanDialog} onHide={() => this.setState({showCleanDialog: false})}>
+      <Modal show={this.state.showCleanDialog} onHide={() => this.props.onClose()}>
         <Modal.Body>
           <h2>
             <div className="text-center">Reset environment</div>
@@ -24,22 +41,34 @@ class StartOverModal extends ReactComponent {
               :
               <div/>
           }
-          <div className="text-center">
-            <button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
-                    onClick={() => {
-                      this.cleanup();
-                      this.setState({showCleanDialog: false});
-                    }}>
-              Reset environment
-            </button>
-            <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
-                    onClick={() => this.setState({showCleanDialog: false})}>
-              Cancel
-            </button>
-          </div>
+          {
+            this.state.loading ? <div className={"modalLoader"}><GridLoader/></div> : this.showModalButtons()
+          }
         </Modal.Body>
       </Modal>
     )
-
   };
+
+  showModalButtons() {
+    return (<div className="text-center">
+              <button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
+                      onClick={this.modalVerificationOnClick}>
+                Reset environment
+              </button>
+              <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
+                      onClick={() => this.setState({showCleanDialog: false})}>
+                Cancel
+              </button>
+            </div>)
+  }
+
+  modalVerificationOnClick = async () => {
+    this.setState({loading: true});
+    this.props.onVerify()
+      .then(() => {this.setState({loading: false});
+                   this.props.onClose();})
+
+  }
 }
+
+export default StartOverModal;
diff --git a/monkey/monkey_island/cc/ui/src/styles/StartOverPage.scss b/monkey/monkey_island/cc/ui/src/styles/StartOverPage.scss
new file mode 100644
index 000000000..ee4ab65ea
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/styles/StartOverPage.scss
@@ -0,0 +1,9 @@
+$yellow: #ffcc00;
+
+.modalLoader div{
+  margin-left: auto;
+  margin-right: auto;
+}
+.modalLoader div>div{
+  background-color: $yellow;
+}

From b130dd35ec8456f6c4870ee12af0c4312cefc547 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Wed, 8 Jan 2020 08:57:25 +0200
Subject: [PATCH 3/4] double quotes to single quotes in StartOverModal

---
 .../components/ui-components/StartOverModal.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js b/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js
index 5c0ae1cb2..5694d463a 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js
@@ -1,5 +1,5 @@
-import {Modal} from "react-bootstrap";
-import React from "react";
+import {Modal} from 'react-bootstrap';
+import React from 'react';
 import {GridLoader} from 'react-spinners';
 
 
@@ -27,22 +27,22 @@ class StartOverModal extends React.PureComponent {
       <Modal show={this.state.showCleanDialog} onHide={() => this.props.onClose()}>
         <Modal.Body>
           <h2>
-            <div className="text-center">Reset environment</div>
+            <div className='text-center'>Reset environment</div>
           </h2>
           <p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
             Are you sure you want to reset the environment?
           </p>
           {
             !this.state.allMonkeysAreDead ?
-              <div className="alert alert-warning">
-                <i className="glyphicon glyphicon-warning-sign" style={{'marginRight': '5px'}}/>
+              <div className='alert alert-warning'>
+                <i className='glyphicon glyphicon-warning-sign' style={{'marginRight': '5px'}}/>
                 Some monkeys are still running. It's advised to kill all monkeys before resetting.
               </div>
               :
               <div/>
           }
           {
-            this.state.loading ? <div className={"modalLoader"}><GridLoader/></div> : this.showModalButtons()
+            this.state.loading ? <div className={'modalLoader'}><GridLoader/></div> : this.showModalButtons()
           }
         </Modal.Body>
       </Modal>
@@ -50,12 +50,12 @@ class StartOverModal extends React.PureComponent {
   };
 
   showModalButtons() {
-    return (<div className="text-center">
-              <button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
+    return (<div className='text-center'>
+              <button type='button' className='btn btn-danger btn-lg' style={{margin: '5px'}}
                       onClick={this.modalVerificationOnClick}>
                 Reset environment
               </button>
-              <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
+              <button type='button' className='btn btn-success btn-lg' style={{margin: '5px'}}
                       onClick={() => this.setState({showCleanDialog: false})}>
                 Cancel
               </button>

From 91c05ae0f4651ef133b3912d8de34f125fa38461 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Wed, 8 Jan 2020 09:19:29 +0200
Subject: [PATCH 4/4] dangling comma removed from StartOverPage

---
 .../monkey_island/cc/ui/src/components/pages/StartOverPage.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js b/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js
index 2aaeddec7..a57c81ca5 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js
@@ -88,7 +88,7 @@ class StartOverPageComponent extends AuthComponent {
 
   closeModal = () => {
     this.setState({
-      showCleanDialog: false,
+      showCleanDialog: false
     })
   };
 }