diff --git a/monkey/monkey_island/cc/ui/src/components/Main.js b/monkey/monkey_island/cc/ui/src/components/Main.js index 7ef373f05..46f5e20bc 100644 --- a/monkey/monkey_island/cc/ui/src/components/Main.js +++ b/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 ; default: - return page_component; + return ; } default: - return page_component; + return ; } }; diff --git a/monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js b/monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js index df8aa08d0..cbe3867ee 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js +++ b/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 ( - + diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js b/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js index e051010c9..657e8645a 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js +++ b/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 ( - + diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/LoadingScreen.js b/monkey/monkey_island/cc/ui/src/components/ui-components/LoadingScreen.js new file mode 100644 index 000000000..a57aa2b5a --- /dev/null +++ b/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 ( + + + + + {props.text.toUpperCase()} + + ); +} diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/ParticleBackground.js b/monkey/monkey_island/cc/ui/src/components/ui-components/ParticleBackground.js new file mode 100644 index 000000000..23d607311 --- /dev/null +++ b/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 (); +} diff --git a/monkey/monkey_island/cc/ui/src/images/monkey_loading.gif b/monkey/monkey_island/cc/ui/src/images/monkey_loading.gif new file mode 100644 index 000000000..eeac1725f Binary files /dev/null and b/monkey/monkey_island/cc/ui/src/images/monkey_loading.gif differ diff --git a/monkey/monkey_island/cc/ui/src/styles/Main.scss b/monkey/monkey_island/cc/ui/src/styles/Main.scss index 6b6096a3f..e26220d0d 100644 --- a/monkey/monkey_island/cc/ui/src/styles/Main.scss +++ b/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 diff --git a/monkey/monkey_island/cc/ui/src/styles/components/LoadingScreen.scss b/monkey/monkey_island/cc/ui/src/styles/components/LoadingScreen.scss new file mode 100644 index 000000000..70b07525c --- /dev/null +++ b/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; +} diff --git a/monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackground.scss b/monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackground.scss new file mode 100644 index 000000000..0aeec94b2 --- /dev/null +++ b/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; +} diff --git a/monkey/monkey_island/cc/ui/src/styles/components/particle-component/AuthPageParams.js b/monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackgroundParams.js similarity index 100% rename from monkey/monkey_island/cc/ui/src/styles/components/particle-component/AuthPageParams.js rename to monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackgroundParams.js diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/AuthPage.scss b/monkey/monkey_island/cc/ui/src/styles/pages/AuthPage.scss index edca2cfb1..8b1b10502 100644 --- a/monkey/monkey_island/cc/ui/src/styles/pages/AuthPage.scss +++ b/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);