From c9d644f88ac5ed7b737e9960ad87b6b3afbc4802 Mon Sep 17 00:00:00 2001 From: Itay Mizeretz Date: Thu, 22 Feb 2018 15:23:47 +0200 Subject: [PATCH] Add login page, and auto redirection to/from login page --- monkey_island/cc/ui/src/components/Main.js | 73 ++++++++++------- .../cc/ui/src/components/pages/LoginPage.js | 78 +++++++++++++++++++ .../ui/src/components/pages/RunServerPage.js | 11 +-- 3 files changed, 128 insertions(+), 34 deletions(-) create mode 100644 monkey_island/cc/ui/src/components/pages/LoginPage.js diff --git a/monkey_island/cc/ui/src/components/Main.js b/monkey_island/cc/ui/src/components/Main.js index 881c3a2ec..d80d70c24 100644 --- a/monkey_island/cc/ui/src/components/Main.js +++ b/monkey_island/cc/ui/src/components/Main.js @@ -1,5 +1,5 @@ import React from 'react'; -import {NavLink, Route, BrowserRouter as Router} from 'react-router-dom'; +import {BrowserRouter as Router, NavLink, Redirect, Route} from 'react-router-dom'; import {Col, Grid, Row} from 'react-bootstrap'; import {Icon} from 'react-fa'; @@ -11,6 +11,8 @@ import TelemetryPage from 'components/pages/TelemetryPage'; import StartOverPage from 'components/pages/StartOverPage'; import ReportPage from 'components/pages/ReportPage'; import LicensePage from 'components/pages/LicensePage'; +import AuthComponent from 'components/AuthComponent'; +import LoginPageComponent from 'components/pages/LoginPage'; require('normalize.css/normalize.css'); require('react-data-components/css/table-twbs.css'); @@ -22,21 +24,9 @@ let logoImage = require('../images/monkey-icon.svg'); let infectionMonkeyImage = require('../images/infection-monkey.svg'); let guardicoreLogoImage = require('../images/guardicore-logo.png'); -class AppComponent extends React.Component { - constructor(props) { - super(props); - this.state = { - completedSteps: { - run_server: true, - run_monkey: false, - infection_done: false, - report_done: false - } - }; - } - +class AppComponent extends AuthComponent { updateStatus = () => { - fetch('/api') + this.authFetch('/api') .then(res => res.json()) .then(res => { // This check is used to prevent unnecessary re-rendering @@ -53,6 +43,34 @@ class AppComponent extends React.Component { }); }; + renderRoute = (route_path, page_component, is_exact_path = false) => { + let render_func = (props) => { + if (this.auth.loggedIn()) { + return page_component; + } else { + return ; + } + }; + + if (is_exact_path) { + return ; + } else { + return ; + } + }; + + constructor(props) { + super(props); + this.state = { + completedSteps: { + run_server: true, + run_monkey: false, + infection_done: false, + report_done: false + } + }; + } + componentDidMount() { this.updateStatus(); this.interval = setInterval(this.updateStatus, 2000); @@ -78,7 +96,7 @@ class AppComponent extends React.Component { 1. Run C&C Server - { this.state.completedSteps.run_server ? + {this.state.completedSteps.run_server ? : ''} @@ -87,7 +105,7 @@ class AppComponent extends React.Component { 2. Run Monkey - { this.state.completedSteps.run_monkey ? + {this.state.completedSteps.run_monkey ? : ''} @@ -96,7 +114,7 @@ class AppComponent extends React.Component { 3. Infection Map - { this.state.completedSteps.infection_done ? + {this.state.completedSteps.infection_done ? : ''} @@ -105,7 +123,7 @@ class AppComponent extends React.Component { 4. Security Report - { this.state.completedSteps.report_done ? + {this.state.completedSteps.report_done ? : ''} @@ -136,14 +154,15 @@ class AppComponent extends React.Component { - ( )} /> - ( )} /> - ( )} /> - ( )} /> - ( )} /> - ( )} /> - ( )} /> - ( )} /> + ()}/> + {this.renderRoute('/', , true)} + {this.renderRoute('/configure', )} + {this.renderRoute('/run-monkey', )} + {this.renderRoute('/infection/map', )} + {this.renderRoute('/infection/telemetry', )} + {this.renderRoute('/start-over', )} + {this.renderRoute('/report', )} + {this.renderRoute('/license', )} diff --git a/monkey_island/cc/ui/src/components/pages/LoginPage.js b/monkey_island/cc/ui/src/components/pages/LoginPage.js new file mode 100644 index 000000000..cc1eefecd --- /dev/null +++ b/monkey_island/cc/ui/src/components/pages/LoginPage.js @@ -0,0 +1,78 @@ +import React from 'react'; +import {Col} from 'react-bootstrap'; + +import AuthService from '../../services/AuthService' + +class LoginPageComponent extends React.Component { + login = () => { + this.auth.login(this.username, this.password).then(res => { + if (res['result']) { + this.redirectToHome(); + } else { + this.setState({failed: true}); + } + }); + }; + + updateUsername = (evt) => { + this.username = evt.target.value; + }; + + updatePassword = (evt) => { + this.password = evt.target.value; + }; + + redirectToHome = () => { + window.location.href = '/'; + }; + + constructor(props) { + super(props); + this.username = ''; + this.password = ''; + this.auth = new AuthService(); + this.state = { + failed: false + }; + if (this.auth.loggedIn()) { + this.redirectToHome(); + } + } + + render() { + return ( + +

Login

+
+
+
+ Login +
+
+
+ this.updateUsername(evt)}/> + this.updatePassword(evt)}/> + + { + this.state.failed ? +
Login failed. Bad credentials.
+ : + '' + } +
+
+
+
+ + ); + } +} + +export default LoginPageComponent; diff --git a/monkey_island/cc/ui/src/components/pages/RunServerPage.js b/monkey_island/cc/ui/src/components/pages/RunServerPage.js index c6d72a0cb..65949532f 100644 --- a/monkey_island/cc/ui/src/components/pages/RunServerPage.js +++ b/monkey_island/cc/ui/src/components/pages/RunServerPage.js @@ -2,22 +2,18 @@ import React from 'react'; import {Col} from 'react-bootstrap'; import {Link} from 'react-router-dom'; -import AuthService from '../../services/AuthService' - class RunServerPageComponent extends React.Component { constructor(props) { super(props); } render() { - // TODO: something real - let auth = new AuthService(); - auth.login('monkey', 'infectio1n'); return (

1. Monkey Island C&C Server

-

Congrats! You have successfully set up the Monkey Island server. 👏 👏

+

Congrats! You have successfully set up the Monkey Island + server. 👏 👏

The Infection Monkey is an open source security tool for testing a data center's resiliency to perimeter breaches and internal server infections. @@ -25,7 +21,8 @@ class RunServerPageComponent extends React.Component { center and reports to this Command and Control (C&C) server.

- To read more about the Monkey, visit infectionmonkey.com + To read more about the Monkey, visit infectionmonkey.com

Go ahead and run the monkey.