Merge pull request #779 from guardicore/feature/bugfix_and_loading_screen

UI router bugfix and loading screen

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

@@ -24,6 +24,7 @@ import 'react-toggle/style.css';
 import 'react-table/react-table.css';
 import notificationIcon from '../images/notification-logo-512x512.png';
 import {StandardLayoutComponent} from './layouts/StandardLayoutComponent';
+import LoadingScreen from './ui-components/LoadingScreen';
 
 const reportZeroTrustRoute = '/report/zeroTrust';
 
@@ -82,10 +83,10 @@ class AppComponent extends AuthComponent {
             case false:
               return <Redirect to={{pathname: '/login'}}/>;
             default:
-              return page_component;
+              return <LoadingScreen text={'Loading page...'}/>;
           }
         default:
-          return page_component;
+          return <LoadingScreen text={'Loading page...'}/>;
       }
     };
 

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

@@ -2,9 +2,8 @@ import React from 'react';
 import {Button, Col, Container, Form, Row} from 'react-bootstrap';
 
 import AuthService from '../../services/AuthService';
-import Particles from 'react-particles-js';
-import {particleParams} from '../../styles/components/particle-component/AuthPageParams';
 import monkeyGeneral from '../../images/militant-monkey.svg';
+import ParticleBackground from '../ui-components/ParticleBackground';
 
 class LoginPageComponent extends React.Component {
   login = (event) => {
@@ -60,7 +59,7 @@ class LoginPageComponent extends React.Component {
   render() {
     return (
       <Container fluid className={'auth-container'}>
-        <Particles className={'particle-background'} params={particleParams}/>
+        <ParticleBackground/>
         <Row>
           <Col xs={12} lg={{span: 6, offset: 3}} md={{span: 7, offset: 3}} className={'auth-block'}>
             <Row>

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import {Row, Col, Container, Form, Button} from 'react-bootstrap';
-import Particles from 'react-particles-js';
 
 import AuthService from '../../services/AuthService';
-import {particleParams} from '../../styles/components/particle-component/AuthPageParams';
 import monkeyDetective from '../../images/detective-monkey.svg';
+import ParticleBackground from "../ui-components/ParticleBackground";
 
 class RegisterPageComponent extends React.Component {
 
@@ -81,7 +80,7 @@ class RegisterPageComponent extends React.Component {
   render() {
     return (
       <Container fluid className={'auth-container'}>
-        <Particles className={'particle-background'} params={particleParams}/>
+        <ParticleBackground />
         <Row>
           <Col xs={12} lg={{span: 6, offset: 3}} md={{span: 7, offset: 3}}
                className={'auth-block'}>

monkey/monkey_island/cc/ui/src/components/ui-components/LoadingScreen.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import monkeyLoader from '../../images/monkey_loading.gif';
+import '../../styles/components/LoadingScreen.scss';
+import ParticleBackground from './ParticleBackground';
+
+export default function LoadingScreen(props) {
+  return (
+    <div className={'loading-screen'}>
+      <ParticleBackground/>
+      <div className={'loading-component'}>
+        <div className={'loading-image'}><img src={monkeyLoader}/></div>
+        <div className={'loading-text'}>{props.text.toUpperCase()}</div>
+      </div>
+    </div>);
+}

monkey/monkey_island/cc/ui/src/components/ui-components/ParticleBackground.js

@@ -0,0 +1,7 @@
+import Particles from 'react-particles-js';
+import {particleParams} from '../../styles/components/particle-component/ParticleBackgroundParams';
+import React from 'react';
+
+export default function ParticleBackground() {
+  return (<Particles className={'particle-background'} params={particleParams}/>);
+}

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

@@ -11,6 +11,7 @@
 @import 'components/InfoPane';
 @import 'components/PreviewPane';
 @import 'components/AdvancedMultiSelect';
+@import 'components/particle-component/ParticleBackground';
 
 
 // Define custom elements after bootstrap import

monkey/monkey_island/cc/ui/src/styles/components/LoadingScreen.scss

@@ -0,0 +1,29 @@
+.loading-screen {
+  height: 100%;
+}
+
+.loading-screen div.loading-component {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  padding: 10px;
+  text-align: center;
+  border-radius: 5px;
+}
+
+.loading-screen div.loading-component .loading-image img {
+  border: 5px solid #363536;
+  border-radius: 70px;
+}
+
+.loading-screen div.loading-component .loading-text {
+  margin-top: 15px;
+  text-align: center;
+  font-weight: bold;
+  background: #ffcc00;
+  padding: 0 5px 0 5px;
+  border-radius: 5px;
+  font-size: 1.2em;
+}

monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackground.scss

@@ -0,0 +1,9 @@
+.particle-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -100;
+  width: 100%;
+  height: 100%;
+  background-color: $gray-300;
+}

monkey/monkey_island/cc/ui/src/styles/pages/AuthPage.scss

@@ -36,16 +36,6 @@
   max-height: 500px;
 }
 
-.particle-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -100;
-  width: 100%;
-  height: 100%;
-  background-color: $gray-300;
-}
-
 .auth-block {
   padding: 10px;
   background-color: rgba(255, 255, 255, 0.89);