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 c37f5d92a..bd045d271 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js
@@ -1,7 +1,10 @@
import React from 'react';
-import {Col} from 'react-bootstrap';
+import {Button, Col, Container, Form, Row} from 'react-bootstrap';
import AuthService from '../../services/AuthService';
+import Particles from "react-particles-js";
+import {particleParams} from "../../styles/particle-component/RegistrationPageParams";
+import monkeyDetective from "../../images/militant-monkey.svg";
class LoginPageComponent extends React.Component {
login = () => {
@@ -41,7 +44,7 @@ class LoginPageComponent extends React.Component {
this.auth.needsRegistration()
.then(result => {
- if(result){
+ if (result) {
this.redirectToRegistration()
}
})
@@ -55,39 +58,38 @@ class LoginPageComponent extends React.Component {
render() {
return (
- <Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
- lg={{offset: 3, span: 9}} xl={{offset: 2, span: 7}}
- className={'main'}>
- <h1 className="page-title">Login</h1>
- <div style={{'fontSize': '1.2em'}}>
- <div className="panel panel-default">
- <div className="panel-heading text-center">
- <b>Login</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.login()
- }}>
- Login
- </button>
- {
- this.state.failed ?
- <div className="alert alert-danger" role="alert">Login failed. Bad credentials.</div>
- :
- ''
- }
- </div>
- </div>
- </div>
- </div>
- </Col>
- );
+ <Container fluid className={'auth-container'}>
+ <Particles className={'particle-background'} params={particleParams}/>
+ <Row>
+ <Col xs={12} lg={{span: 6, offset: 3}} md={{span: 7, offset: 3}} className={'auth-block'}>
+ <Row>
+ <Col lg={8} md={8} sm={8}>
+ <h1 className='auth-title'>Login</h1>
+ <div>
+ <Form className={'auth-form'}>
+ <Form.Control onChange={evt => this.updateUsername(evt)} type='text' placeholder='Username'/>
+ <Form.Control onChange={evt => this.updatePassword(evt)} type='password' placeholder='Password'/>
+ <Button id={'auth-button'} onClick={() => {
+ this.login()
+ }}>
+ Login
+ </Button>
+ {
+ this.state.failed ?
+ <div className="alert alert-danger" role="alert">Login failed. Bad credentials.</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>)
}
}
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 b74846081..8b6738433 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js
@@ -3,7 +3,6 @@ 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';
@@ -80,19 +79,20 @@ class RegisterPageComponent extends React.Component {
render() {
return (
- <Container fluid className={'registration-container'}>
+ <Container fluid className={'auth-container'}>
<Particles className={'particle-background'} params={particleParams}/>
<Row>
- <Col xs={12} lg={{span: 6, offset: 3}} md={{span: 7, offset: 3}} className={'registration-block'}>
+ <Col xs={12} lg={{span: 6, offset: 3}} md={{span: 7, offset: 3}}
+ className={'auth-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 className={'auth-form'}>
<Form.Control onChange={evt => this.updateUsername(evt)} type='text' placeholder='Username'/>
<Form.Control onChange={evt => this.updatePassword(evt)} type='password' placeholder='Password'/>
- <Button id={'registration-button'} onClick={() => {
+ <Button id={'auth-button'} onClick={() => {
this.register()
}}>
Lets Go!
diff --git a/monkey/monkey_island/cc/ui/src/styles/RegisterPage.scss b/monkey/monkey_island/cc/ui/src/styles/AuthPage.scss
similarity index 62%
rename from monkey/monkey_island/cc/ui/src/styles/RegisterPage.scss
rename to monkey/monkey_island/cc/ui/src/styles/AuthPage.scss
index a29f99437..16a202599 100644
--- a/monkey/monkey_island/cc/ui/src/styles/RegisterPage.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/AuthPage.scss
@@ -1,34 +1,34 @@
-.registration-container {
+.auth-container {
margin-top: 1em;
}
-.registration-form input {
+.auth-form input {
margin-bottom: 1em;
}
-.registration-form input:focus {
- border-color: #ffcc00;
+.auth-form input:focus {
+ border-color: $monkey-yellow;
box-shadow: 0 0 0 0.2rem rgba(255, 230, 0, 0.25);
}
-.registration-form .alert {
+.auth-form .alert {
margin-top: 20px;
}
-#registration-button {
+#auth-button {
border-color: #3f3f3f;
font-size: 1.3em;
width: 100%;
background-color: #3f3f3f;
- color: #ffde00;
+ color: $monkey-yellow;
}
-#registration-button:hover {
- border-color: #ffde00;
+#auth-button:hover {
+ border-color: $monkey-yellow;
font-size: 1.3em;
font-weight: bold;
width: 100%;
- background-color: #ffde00;
+ background-color: $monkey-yellow;
color: #000000;
}
@@ -46,27 +46,29 @@
background-color: #1a1a1a;
}
-.registration-block {
+.auth-block {
padding: 10px;
background-color: rgba(255, 255, 255, 0.89);
border-radius: 10px;
}
-.registration-block h1 {
+.auth-block h1 {
font-size: 4.5em;
- margin-bottom: 0;
+ margin-bottom: 10px;
}
-.registration-block h3 {
+.auth-block h3 {
margin-bottom: 20px;
}
.no-auth-link {
+ margin-top: 10px;
float: right;
- color: #6a5b00;
+ color: $monkey-black;
+ text-decoration: underline;
}
.no-auth-link:hover {
float: right;
- color: #796900;
+ color: $monkey-yellow;
}
diff --git a/monkey/monkey_island/cc/ui/src/styles/Main.scss b/monkey/monkey_island/cc/ui/src/styles/Main.scss
index 871215d49..77e1138f2 100644
--- a/monkey/monkey_island/cc/ui/src/styles/Main.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/Main.scss
@@ -7,6 +7,7 @@
@import './report/AttackReport.scss';
@import './PreviewPane.scss';
@import './ConfigurationPage';
+@import './AuthPage';
// Define custom elements after bootstrap import