Merge pull request #511 from guardicore/404_page

404 page added

monkey/monkey_island/cc/ui/src/components/Main.js

@@ -14,7 +14,8 @@ import ReportPage from 'components/pages/ReportPage';
 import LicensePage from 'components/pages/LicensePage';
 import AuthComponent from 'components/AuthComponent';
 import LoginPageComponent from 'components/pages/LoginPage';
-import Notifier from 'react-desktop-notification'
+import Notifier from 'react-desktop-notification';
+import NotFoundPage from 'components/pages/NotFoundPage';
 
 
 import 'normalize.css/normalize.css';
@@ -197,6 +198,8 @@ class AppComponent extends AuthComponent {
               <VersionComponent/>
             </Col>
             <Col sm={9} md={10} smOffset={3} mdOffset={2} className='main'>
+
+              <Switch>
               <Route path='/login' render={() => (<LoginPageComponent onStatusChange={this.updateStatus}/>)}/>
               {this.renderRoute('/', <RunServerPage onStatusChange={this.updateStatus}/>, true)}
               {this.renderRoute('/configure', <ConfigurePage onStatusChange={this.updateStatus}/>)}
@@ -205,12 +208,12 @@ class AppComponent extends AuthComponent {
               {this.renderRoute('/infection/telemetry', <TelemetryPage onStatusChange={this.updateStatus}/>)}
               {this.renderRoute('/start-over', <StartOverPage onStatusChange={this.updateStatus}/>)}
               {this.redirectTo('/report', '/report/security')}
-              <Switch>
               {this.renderRoute('/report/security', <ReportPage/>)}
               {this.renderRoute('/report/attack', <ReportPage/>)}
               {this.renderRoute('/report/zeroTrust', <ReportPage/>)}
-              </Switch>
               {this.renderRoute('/license', <LicensePage onStatusChange={this.updateStatus}/>)}
+              <Route component={NotFoundPage} />
+              </Switch>
             </Col>
           </Row>
         </Grid>

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import '../../styles/NotFoundPage.scss';
+
+let monkeyDetective = require('../../images/detective-monkey.svg');
+
+class ConfigurePageComponent extends React.Component{
+  constructor(props) {
+    super(props);
+    }
+
+  render(){
+    return(
+      <div className={'not-found'}>
+        <img className={'monkey-detective'} src={monkeyDetective}/>
+        <div className={'text-block'}>
+          <h1 className={'not-found-title'}>404</h1>
+          <h2 className={'not-found-subtitle'}>Page not found</h2>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default ConfigurePageComponent;

monkey/monkey_island/cc/ui/src/images/detective-monkey.svg

@@ -0,0 +1,88 @@
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 316.946 709.655">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        mask: url(#mask);
+      }
+
+      .cls-3 {
+        fill: #333;
+      }
+
+      .cls-4, .cls-5 {
+        fill: none;
+        stroke: #333;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-4 {
+        stroke-width: 7px;
+      }
+
+      .cls-5 {
+        stroke-width: 9px;
+      }
+
+      .cls-6 {
+        filter: url(#luminosity-invert-noclip);
+      }
+    </style>
+    <filter id="luminosity-invert-noclip" x="68.823" y="76.337" width="262.529" height="119.347" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" result="invert"/>
+      <feFlood flood-color="#fff" result="bg"/>
+      <feBlend in="invert" in2="bg"/>
+    </filter>
+    <mask id="mask" x="68.823" y="76.337" width="262.529" height="119.347" maskUnits="userSpaceOnUse">
+      <g class="cls-6">
+        <g transform="translate(0 0)">
+          <rect class="cls-1" x="68.823" y="162.189" width="262.529" height="33.495"/>
+        </g>
+      </g>
+    </mask>
+  </defs>
+  <title>03bed00a-ca95-430e-aa43-12f62fe2eab4</title>
+  <g>
+    <g>
+      <path class="cls-3" d="M198.485,195.6A5,5,0,0,1,189.1,198v-.017a27.6,27.6,0,0,0,7.319-6.4A4.931,4.931,0,0,1,198.485,195.6Z" transform="translate(0 0)"/>
+      <path class="cls-3" d="M211.533,197.98V198a5,5,0,0,1-9.389-2.394,4.931,4.931,0,0,1,2.069-4.019A27.6,27.6,0,0,0,211.533,197.98Z" transform="translate(0 0)"/>
+    </g>
+    <g>
+      <path class="cls-3" d="M174.273,167.173a6.463,6.463,0,1,1-6.463,6.463,6.471,6.471,0,0,1,6.463-6.463m0-13.579a20.042,20.042,0,1,0,20.042,20.042,20.043,20.043,0,0,0-20.042-20.042Z" transform="translate(0 0)"/>
+      <path class="cls-3" d="M297.475,222.485a10.838,10.838,0,0,0-7.115-1.324c-6.245.806-10.329-.878-14.853-4.559-2.314-1.883-3.525-4.771-2.42-7.53.282-.681.549-1.371.813-2.061a28.444,28.444,0,1,0,0-56.149c-.26-.682-.524-1.363-.8-2.036-1.129-2.767-.172-5.326,2.41-7.562a18.207,18.207,0,0,1,14.85-4.564,10.984,10.984,0,0,0,7.117-1.319,10.863,10.863,0,1,0-15.567-13.316c-2.424,5.811-5.925,8.506-11.374,10.583-2.808,1.071-5.943.667-7.774-1.716l.077.132a78.726,78.726,0,0,0-125.044,0l.077-.132c-1.832,2.383-4.966,2.787-7.774,1.716-5.449-2.077-8.95-4.772-11.375-10.583a10.863,10.863,0,1,0-15.567,13.316,10.985,10.985,0,0,0,7.118,1.319,18.207,18.207,0,0,1,14.85,4.564c2.582,2.236,3.539,4.8,2.41,7.563-.279.673-.542,1.354-.8,2.036a28.444,28.444,0,1,0,0,56.149c.264.69.53,1.38.813,2.061,1.105,2.759-.105,5.647-2.42,7.53-4.524,3.681-8.608,5.365-14.853,4.559a10.863,10.863,0,1,0,3.749,20.14,10.984,10.984,0,0,0,4.7-5.5,18.207,18.207,0,0,1,11.377-10.579c3.239-1.122,5.943-.667,7.774,1.716l-.059-.1a78.724,78.724,0,0,0,125.009,0l-.059.1c1.832-2.383,4.536-2.838,7.774-1.716A18.207,18.207,0,0,1,281.911,235.8a10.985,10.985,0,0,0,4.7,5.5,10.863,10.863,0,1,0,10.863-18.815Zm-19.816-58.373c.269-.015.535-.041.808-.041a14.865,14.865,0,1,1,0,29.73c-.273,0-.539-.026-.808-.041a78.478,78.478,0,0,0,0-29.648ZM290.2,122.786a3.678,3.678,0,1,1-1.346,5.024A3.679,3.679,0,0,1,290.2,122.786Zm-178.436,5.024a3.678,3.678,0,1,1-1.346-5.024A3.678,3.678,0,0,1,111.769,127.811Zm11.2,65.95c-.269.015-.535.041-.808.041a14.865,14.865,0,1,1,0-29.73c.273,0,.539.026.808.041a78.475,78.475,0,0,0,0,29.648Zm-12.545,41.318a3.678,3.678,0,1,1,1.346-5.024A3.678,3.678,0,0,1,110.422,235.078Zm89.891,11.262a32.229,32.229,0,0,1-31.162-40.519,46.984,46.984,0,0,0,62.324,0,32.23,32.23,0,0,1-31.162,40.519ZM236.959,200.1l.008-.01a28.388,28.388,0,0,1-9.444,2,41.645,41.645,0,0,1-54.418,0,28.382,28.382,0,0,1-9.444-2l.008.01a28.513,28.513,0,1,1,36.645-38.082A28.514,28.514,0,1,1,236.959,200.1Zm58.271,33.632a3.678,3.678,0,1,1-1.346-5.025A3.678,3.678,0,0,1,295.229,233.732Z" transform="translate(0 0)"/>
+      <path class="cls-3" d="M226.354,167.173a6.463,6.463,0,1,1-6.463,6.463,6.471,6.471,0,0,1,6.463-6.463m0-13.579A20.042,20.042,0,1,0,246.4,173.636a20.043,20.043,0,0,0-20.042-20.042Z" transform="translate(0 0)"/>
+    </g>
+  </g>
+  <path class="cls-3" d="M107.852,207.6a223.827,223.827,0,0,0,44.2,13.122,223.226,223.226,0,0,0,29.439,3.511l18.561,65.9,19.511-65.9a189.816,189.816,0,0,0,20.547-1.439,193.32,193.32,0,0,0,55.943-15.885,215.083,215.083,0,0,0-29.007,38.331,144.534,144.534,0,0,1,49.9,91.137,155.237,155.237,0,0,0-15.712,5.871c-19.616,8.563-31.8,18.742-37.295,22.82-11.364,8.428-30.231,17.535-62.849,19.338l.345-81.5-14.5,76.979c-27.118,2.986-42.34-3.606-51.281-10.36-9.955-7.521-13.7-16.432-29.525-28.489a125.572,125.572,0,0,0-24.345-14.5q13.274-22.455,28.835-46.072,11.064-16.72,22.1-32.115a246.738,246.738,0,0,0-12.777-23.137C115.9,218.75,111.826,212.884,107.852,207.6Z" transform="translate(0 0)"/>
+  <g>
+    <path class="cls-3" d="M198.843,21.134A60.471,60.471,0,0,0,168.6,30.1c-42.458,26.854-30.981,107.021-30.319,111.29A150.426,150.426,0,0,0,202.9,154.011a150.1,150.1,0,0,0,58.8-13.8c7.176-52.764-6.173-96.48-30.337-110.142A70.389,70.389,0,0,0,198.843,21.134Z" transform="translate(0 0)"/>
+    <path class="cls-1" d="M199.406,14.486a54.07,54.07,0,0,1,18.012,6.969,49.8,49.8,0,0,1,14.138,13.16,62.6,62.6,0,0,1,8.614,17.033,95,95,0,0,1,4.057,18.376,172.029,172.029,0,0,1,1.182,18.554,122.059,122.059,0,0,1-.959,18.634,130.2,130.2,0,0,1-10.012,35.76,1.718,1.718,0,0,1-3.157-1.356,126.427,126.427,0,0,0,9.1-34.888,117.751,117.751,0,0,0,.6-18.016,167.548,167.548,0,0,0-1.47-18.052,90.121,90.121,0,0,0-4.15-17.353,57.367,57.367,0,0,0-8.156-15.468,44.194,44.194,0,0,0-12.771-11.479,48.17,48.17,0,0,0-16.162-5.913,3.034,3.034,0,0,1,1.064-5.974l.038.007Z" transform="translate(0 0)"/>
+    <path class="cls-1" d="M201.627,20.4a54.559,54.559,0,0,0-15.649,6.68,53.229,53.229,0,0,0-12.623,11.4,66.37,66.37,0,0,0-8.766,14.863,93.086,93.086,0,0,0-5.233,16.711,143.179,143.179,0,0,0-2.782,35.265,161.926,161.926,0,0,0,1.574,17.712,136.082,136.082,0,0,0,3.777,17.356,1.727,1.727,0,0,1-3.312.984,139.726,139.726,0,0,1-4.2-17.745q-.757-4.5-1.221-9.05c-.309-3.009-.559-6.036-.723-9.069a147.553,147.553,0,0,1,2.224-36.42,98.007,98.007,0,0,1,5.2-17.709,71.6,71.6,0,0,1,9.2-16.238,58.807,58.807,0,0,1,13.761-12.882,60.452,60.452,0,0,1,17.206-7.725,3.034,3.034,0,1,1,1.626,5.846l-.037.01Z" transform="translate(0 0)"/>
+    <path class="cls-4" d="M209.528,20.667c5.2-1.377,10.258-5.235,9.721-7.38-.435-1.738-4.536-2.306-7.2-2.161-1,.054-4.717.369-12.061,6.12-1.092.856-8.86,6.939-8.1,8.1.61.933,7.208-.551,8.638-4.261,2.493-6.47-10.808-19.523-16.067-17.345-2.537,1.051-3.736,5.867-2.292,9,.66,1.434,1.983,2.761,9.361,5.041C200.413,20.533,204.856,21.906,209.528,20.667Z" transform="translate(0 0)"/>
+    <path class="cls-1" d="M264.511,139.131c.883,4.853-29.444,24.94-65.015,24.955-35.6.015-65.9-20.075-65.016-24.955.738-4.075,22.971,3.859,66.374,3.7C242.637,142.683,263.792,135.181,264.511,139.131Z" transform="translate(0 0)"/>
+    <path class="cls-3" d="M266.921,139.964c.842,4.511-29.65,27.736-66.422,27.75-36.8.014-67.265-23.218-66.422-27.75.738-3.967,25.2,7.826,67.325,7.667C242.488,147.477,266.2,136.079,266.921,139.964Z" transform="translate(0 0)"/>
+  </g>
+  <g>
+    <path class="cls-3" d="M38.422,135.08h0a28.821,28.821,0,0,1,4.857.416,28.464,28.464,0,0,1-4.766,56.518,28.827,28.827,0,0,1-4.858-.416,28.464,28.464,0,0,1,4.767-56.518m0-10a38.5,38.5,0,1,0,6.548.56,38.472,38.472,0,0,0-6.548-.56Z" transform="translate(0 0)"/>
+    <path class="cls-3" d="M41.794,144.147a13.236,13.236,0,0,1,8.216,1.095,16.787,16.787,0,0,1,9.569,13.521,13.191,13.191,0,0,1-1.713,8.113,45.168,45.168,0,0,0-2.121-7.242,29.423,29.423,0,0,0-3.248-6.008,29.073,29.073,0,0,0-4.578-5.07A44.406,44.406,0,0,0,41.794,144.147Z" transform="translate(0 0)"/>
+    <path class="cls-3" d="M37.831,207.518l-1.732-.3,1.751-10.208-9.7-1.664L26.4,205.557l-1.733-.3a3.422,3.422,0,0,0-3.951,2.794l-8.233,48A3.422,3.422,0,0,0,15.276,260l13.165,2.258a3.422,3.422,0,0,0,3.951-2.794l8.233-48A3.423,3.423,0,0,0,37.831,207.518Z" transform="translate(0 0)"/>
+  </g>
+  <g>
+    <path class="cls-5" d="M147.564,239.714l24.913,454.461" transform="translate(0 0)"/>
+    <path class="cls-5" d="M249.867,237.9,207.651,689.326" transform="translate(0 0)"/>
+    <path class="cls-3" d="M205.579,694.549a3.553,3.553,0,1,1-3.553,3.553,3.553,3.553,0,0,1,3.553-3.553m0-8A11.553,11.553,0,1,0,217.132,698.1a11.566,11.566,0,0,0-11.553-11.553Z" transform="translate(0 0)"/>
+    <path class="cls-5" d="M153.34,236.376c-8.305,35.8-24.536,58.2-34.783,69.957-11.5,13.2-27.558,31.628-43.511,28.346-11.773-2.423-18.369-16.382-31.079-44.2a377.764,377.764,0,0,1-19.338-52.144" transform="translate(0 0)"/>
+    <path class="cls-5" d="M254.092,228.079,300.37,330.16a143.153,143.153,0,0,1-63.194,68.374" transform="translate(0 0)"/>
+    <g>
+      <circle class="cls-1" cx="172.477" cy="697.729" r="7.553"/>
+      <path class="cls-3" d="M172.477,694.175a3.553,3.553,0,1,1-3.553,3.553,3.553,3.553,0,0,1,3.553-3.553m0-8a11.553,11.553,0,1,0,11.553,11.553,11.566,11.566,0,0,0-11.553-11.553Z" transform="translate(0 0)"/>
+    </g>
+    <g>
+      <circle class="cls-1" cx="18.234" cy="231.893" r="7.553"/>
+      <path class="cls-3" d="M18.234,228.339a3.553,3.553,0,1,1-3.553,3.553,3.553,3.553,0,0,1,3.553-3.553m0-8a11.553,11.553,0,1,0,11.553,11.553,11.566,11.566,0,0,0-11.553-11.553Z" transform="translate(0 0)"/>
+    </g>
+  </g>
+</svg>

monkey/monkey_island/cc/ui/src/styles/NotFoundPage.scss

@@ -0,0 +1,28 @@
+$yellow: #ffcc00;
+
+
+.not-found .not-found-title {
+  color: $yellow;
+  font-size: 8em;
+  margin-bottom: 0 !important;
+}
+
+.not-found .monkey-detective {
+  height: 200px;
+  display: inline-block;
+}
+
+.not-found .text-block {
+  display: inline-block;
+}
+.not-found {
+  display: flex;
+  align-items: center;
+  margin-top:200px;
+  margin-left:100px;
+}
+
+.not-found .not-found-subtitle {
+  margin-top: 0 !important;
+}
+