Changed login page to match the style of registration page

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>)
   }
 }
 

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!

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;
 }

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