Merge pull request #14 from 3191110276/master

Added check for Destroy button

public/css/main.css

@@ -64,7 +64,7 @@ Feedback field
     height: 30px;
     line-height: 30px;
     text-align: center;
-    position: absolute;
+    position: fixed;
     bottom:0;
     right: 0;
     border-width: 1px;
@@ -85,6 +85,22 @@ Feedback field
     border-bottom-style: off;
 }
 
+#destroyoverlay {
+    text-align: center;
+    font-size: 1.25em;
+    background-color: white;
+    width: 500px;
+    height: 220px;
+    box-shadow: 5px 5px 14px grey;
+    border-radius: 25px;
+    padding: 40px 50px 0px 50px;
+    position: absolute;
+    top: 100px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: none;
+}
+
 
 #feedbackoverlay{
     width: 100%;
@@ -121,4 +137,3 @@ Feedback field
     font-weight: bold;
     font-size: 105%
 }
-

src/components/panels/deploy/index.js

@@ -61,13 +61,24 @@ var DeployPanel = ({working, keys, kubam_ip, onChange, makeBootFunc, deployFunc,
             <button onClick={(e) => destroyFunc(e)} className="btn btn-lg btn-danger" disabled>
             <i className="fa fa-cog fa-spin"></i>  Working</button>
             :
-            <button onClick={(e) => destroyFunc(e)} className="btn btn-lg btn-danger">Destroy</button>
+            <button onClick={destroycheck} className="btn btn-lg btn-danger">Destroy</button>
           }
         </div>
       </div>
     </div>
+    <div id="destroyoverlay">
+        <span>Are you sure that you want to destroy the cluster?</span><br /><br />
+        <button className="btn btn-lg btn-danger" onClick={(e) => destroyFunc(e)}>Destroy</button> <button className="btn btn-lg btn-primary" onClick={closedestroy}>No, Abort!</button>
+    </div>
   </div>
 );
 
 export default DeployPanel
 
+function destroycheck() {
+    document.getElementById('destroyoverlay').style.display = 'inline'
+}
+
+function closedestroy() {
+    document.getElementById('destroyoverlay').style.display = 'none'
+}