Migration to bootstrap v4 started, Registration UI finished

monkey/monkey_island/cc/ui/package.json

@@ -63,7 +63,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.7",
     "@kunukn/react-collapse": "^1.2.7",
-    "bootstrap": "^3.4.1",
+    "bootstrap": "^4.5.0",
     "classnames": "^2.2.6",
     "core-js": "^2.6.10",
     "d3": "^5.14.1",
@@ -80,19 +80,20 @@
     "rainge": "^1.0.1",
     "rc-progress": "^2.5.2",
     "react": "^16.12.0",
-    "react-bootstrap": "^0.32.4",
+    "react-bootstrap": "^1.0.1",
     "react-copy-to-clipboard": "^5.0.2",
     "react-data-components": "^1.2.0",
     "react-desktop-notification": "^1.0.9",
     "react-dimensions": "^1.3.0",
-    "react-event-timeline": "^1.6.3",
-    "react-hot-loader": "^4.12.20",
     "react-dom": "^16.12.0",
+    "react-event-timeline": "^1.6.3",
     "react-fa": "^5.0.0",
     "react-filepond": "^7.0.1",
     "react-graph-vis": "^1.0.5",
+    "react-hot-loader": "^4.12.20",
     "react-json-tree": "^0.11.2",
     "react-jsonschema-form": "^1.8.0",
+    "react-particles-js": "^3.2.1",
     "react-redux": "^5.1.2",
     "react-router-dom": "^4.3.1",
     "react-spinners": "^0.5.13",

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom';
-import {Col, Grid, Row} from 'react-bootstrap';
+import {Container, Row} from 'react-bootstrap';
 
-import SideNavComponent from 'components/SideNavComponent';
 import RunServerPage from 'components/pages/RunServerPage';
 import ConfigurePage from 'components/pages/ConfigurePage';
 import RunMonkeyPage from 'components/pages/RunMonkeyPage';
@@ -127,57 +126,55 @@ class AppComponent extends AuthComponent {
   render() {
     return (
       <Router>
-        <Grid fluid={true}>
+        <Container fluid>
           <Row>
-            <Col sm={9} md={10} smOffset={3} mdOffset={2} className='main'>
-              <Switch>
-                <Route path='/login' render={() => (<LoginPageComponent onStatusChange={this.updateStatus}/>)}/>
-                <Route path='/register' render={() => (<RegisterPageComponent onStatusChange={this.updateStatus}/>)}/>
-                {this.renderRoute('/',
-                  <StandardLayoutComponent component={RunServerPage}
-                                           completedSteps={this.state.completedSteps}
-                                           onStatusChange={this.updateStatus}
-                                           />,
-                  true)}
-                {this.renderRoute('/configure',
-                  <StandardLayoutComponent component={ConfigurePage}
-                                           onStatusChange={this.updateStatus}
-                                           completedSteps={this.state.completedSteps}/>)}
-                {this.renderRoute('/run-monkey',
-                  <StandardLayoutComponent component={RunMonkeyPage}
-                                           onStatusChange={this.updateStatus}
-                                           completedSteps={this.state.completedSteps}/>)}
-                {this.renderRoute('/infection/map',
-                  <StandardLayoutComponent component={MapPage}
-                                           onStatusChange={this.updateStatus}
-                                           completedSteps={this.state.completedSteps}/>)}
-                {this.renderRoute('/infection/telemetry',
-                  <StandardLayoutComponent component={TelemetryPage}
-                                           onStatusChange={this.updateStatus}
-                                           completedSteps={this.state.completedSteps}/>)}
-                {this.renderRoute('/start-over',
-                  <StandardLayoutComponent component={StartOverPage}
-                                           onStatusChange={this.updateStatus}
-                                           completedSteps={this.state.completedSteps}/>)}
-                {this.redirectTo('/report', '/report/security')}
-                {this.renderRoute('/report/security',
-                  <StandardLayoutComponent component={ReportPage}
-                                           completedSteps={this.state.completedSteps}/>)}
-                {this.renderRoute('/report/attack',
-                  <StandardLayoutComponent component={ReportPage}
-                                           completedSteps={this.state.completedSteps}/>)}
-                {this.renderRoute('/report/zeroTrust',
-                  <StandardLayoutComponent component={ReportPage}
-                                           completedSteps={this.state.completedSteps}/>)}
-                {this.renderRoute('/license',
-                  <StandardLayoutComponent component={LicensePage}
-                                           onStatusChange={this.updateStatus}
-                                           completedSteps={this.state.completedSteps}/>)}
-                <Route component={NotFoundPage}/>
-              </Switch>
-            </Col>
+            <Switch>
+              <Route path='/login' render={() => (<LoginPageComponent onStatusChange={this.updateStatus}/>)}/>
+              <Route path='/register' render={() => (<RegisterPageComponent onStatusChange={this.updateStatus}/>)}/>
+              {this.renderRoute('/',
+                <StandardLayoutComponent component={RunServerPage}
+                                         completedSteps={this.state.completedSteps}
+                                         onStatusChange={this.updateStatus}
+                />,
+                true)}
+              {this.renderRoute('/configure',
+                <StandardLayoutComponent component={ConfigurePage}
+                                         onStatusChange={this.updateStatus}
+                                         completedSteps={this.state.completedSteps}/>)}
+              {this.renderRoute('/run-monkey',
+                <StandardLayoutComponent component={RunMonkeyPage}
+                                         onStatusChange={this.updateStatus}
+                                         completedSteps={this.state.completedSteps}/>)}
+              {this.renderRoute('/infection/map',
+                <StandardLayoutComponent component={MapPage}
+                                         onStatusChange={this.updateStatus}
+                                         completedSteps={this.state.completedSteps}/>)}
+              {this.renderRoute('/infection/telemetry',
+                <StandardLayoutComponent component={TelemetryPage}
+                                         onStatusChange={this.updateStatus}
+                                         completedSteps={this.state.completedSteps}/>)}
+              {this.renderRoute('/start-over',
+                <StandardLayoutComponent component={StartOverPage}
+                                         onStatusChange={this.updateStatus}
+                                         completedSteps={this.state.completedSteps}/>)}
+              {this.redirectTo('/report', '/report/security')}
+              {this.renderRoute('/report/security',
+                <StandardLayoutComponent component={ReportPage}
+                                         completedSteps={this.state.completedSteps}/>)}
+              {this.renderRoute('/report/attack',
+                <StandardLayoutComponent component={ReportPage}
+                                         completedSteps={this.state.completedSteps}/>)}
+              {this.renderRoute('/report/zeroTrust',
+                <StandardLayoutComponent component={ReportPage}
+                                         completedSteps={this.state.completedSteps}/>)}
+              {this.renderRoute('/license',
+                <StandardLayoutComponent component={LicensePage}
+                                         onStatusChange={this.updateStatus}
+                                         completedSteps={this.state.completedSteps}/>)}
+              <Route component={NotFoundPage}/>
+            </Switch>
           </Row>
-        </Grid>
+        </Container>
       </Router>
     );
   }

monkey/monkey_island/cc/ui/src/components/layouts/StandardLayoutComponent.js

@@ -1,12 +1,13 @@
-import React from "react"
-import {Route} from "react-router-dom"
-import SideNavComponent from "../SideNavComponent"
+import React from 'react'
+import {Route} from 'react-router-dom'
+import SideNavComponent from '../SideNavComponent'
+import {Col} from 'react-bootstrap';
 
 export const StandardLayoutComponent = ({component: Component, ...rest}) => (
   <Route {...rest} render={() => (
-    <>
+    <Col sm={9} md={10} smOffset={3} mdOffset={2} className='main'>
       <SideNavComponent completedSteps={rest['completedSteps']}/>
       <Component {...rest} />
-    </>
+    </Col>
   )}/>
 )

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

@@ -1,21 +1,28 @@
 import React from 'react';
-import {Col} from 'react-bootstrap';
+import {Row, Col, Container, Form, Button} from 'react-bootstrap';
+import Particles from 'react-particles-js';
 
 import AuthService from '../../services/AuthService';
+import '../../styles/RegisterPage.scss';
+import {particleParams} from '../../styles/particle-component/RegistrationPageParams';
+import monkeyDetective from '../../images/detective-monkey.svg';
 
 class RegisterPageComponent extends React.Component {
 
   register = () => {
     this.auth.register(this.username, this.password).then(res => {
-      this.setState({failed: false, error: ""});
+      this.setState({failed: false, error: ''});
       if (res['result']) {
         this.redirectToHome();
       } else {
-        this.setState({failed: true,
-                            error: res['error']});
+        this.setState({
+          failed: true,
+          error: res['error']
+        });
       }
     });
   };
+
   updateUsername = (evt) => {
     this.username = evt.target.value;
   };
@@ -23,6 +30,7 @@ class RegisterPageComponent extends React.Component {
   updatePassword = (evt) => {
     this.password = evt.target.value;
   };
+
   redirectToHome = () => {
     window.location.href = '/';
   };
@@ -39,7 +47,7 @@ class RegisterPageComponent extends React.Component {
 
     this.auth.needsRegistration()
       .then(result => {
-        if(!result){
+        if (!result) {
           this.redirectToHome()
         }
       })
@@ -47,37 +55,39 @@ class RegisterPageComponent extends React.Component {
 
   render() {
     return (
-      <Col xs={12} lg={8}>
-        <h1 className="page-title">First time?</h1>
-        <h3 className="page-title">Let's secure your island</h3>
-        <div className="col-sm-6 col-sm-offset-3" style={{'fontSize': '1.2em'}}>
-          <div className="panel panel-default">
-            <div className="panel-heading text-center">
-              <b>Register</b>
-            </div>
-            <div className="panel-body">
-              <div className="input-group center-block text-center">
-                <input type="text" className="form-control" placeholder="Username"
-                       onChange={evt => this.updateUsername(evt)}/>
-                <input type="password" className="form-control" placeholder="Password"
-                       onChange={evt => this.updatePassword(evt)}/>
-                <button type="button" className="btn btn-primary btn-lg" style={{margin: '5px'}}
-                        onClick={() => {
-                          this.register()
-                        }}>
-                  Lets Go!
-                </button>
-                {
-                  this.state.failed ?
-                    <div className="alert alert-danger" role="alert">{this.state.error}</div>
-                    :
-                    ''
-                }
-              </div>
-            </div>
-          </div>
-        </div>
-      </Col>
+      <Container fluid className={'registration-container'}>
+        <Particles className={'particle-background'} params={particleParams}/>
+        <Row>
+          <Col xs={12} lg={{span: 6, offset: 3}} md={{span: 7, offset: 3}} className={'registration-block'}>
+            <Row>
+              <Col lg={8} md={8} sm={8}>
+                <h1 className='reg-title'>First time?</h1>
+                <h3 className='reg-subtitle'>Let's secure your island!</h3>
+                <div>
+                  <Form className={'registration-form'}>
+                    <Form.Control type='text' placeholder='Username'/>
+                    <Form.Control type='password' placeholder='Password'/>
+                    <Button id={'registration-button'} onClick={() => {
+                      this.register()
+                    }}>
+                      Lets Go!
+                    </Button>
+                    {
+                      this.state.failed ?
+                        <div className='alert alert-danger' role='alert'>{this.state.error}</div>
+                        :
+                        ''
+                    }
+                  </Form>
+                </div>
+              </Col>
+              <Col lg={4} md={4} sm={4}>
+                <img alt="infection monkey" className={'monkey-detective'} src={monkeyDetective}/>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+      </Container>
     );
   }
 }

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

@@ -0,0 +1,62 @@
+.registration-container {
+  margin-top: 1em;
+}
+
+.registration-form input {
+  margin-bottom: 1em;
+}
+
+.registration-form input:focus {
+  border-color: #ffcc00;
+  box-shadow: 0 0 0 0.2rem rgba(255, 230, 0, 0.25);
+}
+
+.registration-form .alert {
+  margin-top: 20px;
+}
+
+#registration-button {
+  border-color: #3f3f3f;
+  font-size: 1.3em;
+  width: 100%;
+  background-color: #3f3f3f;
+  color: #ffde00;
+}
+
+#registration-button:hover {
+  border-color: #ffde00;
+  font-size: 1.3em;
+  font-weight: bold;
+  width: 100%;
+  background-color: #ffde00;
+  color: #000000;
+}
+
+.monkey-detective {
+  max-height: 500px;
+}
+
+.particle-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -100;
+  width: 100%;
+  height: 100%;
+  background-color: #1a1a1a;
+}
+
+.registration-block {
+  padding: 10px;
+  background-color: rgba(255, 255, 255, 0.89);
+  border-radius: 10px;
+}
+
+.registration-block h1 {
+  font-size: 4.5em;
+  margin-bottom: 0;
+}
+
+.registration-block h3 {
+  margin-bottom: 20px;
+}

monkey/monkey_island/cc/ui/src/styles/particle-component/RegistrationPageParams.js

@@ -0,0 +1,18 @@
+export const particleParams = {
+    particles: {
+      color: {
+        value: "#ffcc00"
+      },
+      line_linked: {
+        color: {
+          value: "#a08100"
+        }
+      },
+      number: {
+        value: 150
+      },
+      size: {
+        value: 3
+      }
+    }
+  }