refactor: rename Unauthenticated to Login

This also removes the previously introduced `LoginLayout` component as
chances are very low that we'll need the layout for anything else then the
login.

embark-ui/src/components/Login.css

@@ -0,0 +1,33 @@
+.login-container {
+  width: 80%;
+  max-width: 900px;
+}
+
+.login-layout-container-section {
+  padding: 0.8em;
+  background: #20a8d8;
+}
+
+.login-layout-container-section:first-child {
+  background: white;
+  padding: 3em;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto;
+  max-height: 40px;
+}
+
+@media only screen and (min-width: 768px) {
+
+  .login-layout-container-section {
+    padding: 3em;
+  }
+
+  .logo {
+    max-height: 180px;
+    margin-top: 3em;
+  }
+}
+

embark-ui/src/components/Login.js

@@ -0,0 +1,70 @@
+import PropTypes from "prop-types";
+import React from 'react';
+import logo from '../images/logo.png';
+import './Login.css';
+
+class Login extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = props.credentials;
+  }
+
+  handleChange(event){
+    this.setState({[event.target.name]: event.target.value});
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+    this.props.authenticate(this.state.host, this.state.token);
+  }
+
+  render() {
+    return (
+      <div className="app d-flex justify-content-center align-items-center">
+        <div className="login-container d-flex flex-column-reverse flex-md-row">
+          <div className="login-layout-container-section flex-fill">
+            <h2>Login</h2>
+            <div className="mt-4">
+              <form  onSubmit={(e) => this.handleSubmit(e)}>
+                <div className="form-group">
+                  <label htmlFor="host">Host</label>
+                  <input type="text"
+                        className="form-control form-control-lg"
+                        id="host"
+                        name="host"
+                        placeholder="Enter Embark host"
+                        onChange={(e) => this.handleChange(e)}
+                        value={this.state.host}/>
+                </div>
+                <div className="form-group">
+                  <label htmlFor="token">Token</label>
+                  <input type="text"
+                        className="form-control form-control-lg"
+                        id="token"
+                        name="token"
+                        placeholder="Enter token"
+                        onChange={(e) => this.handleChange(e)}
+                        value={this.state.token}/>
+                  <small className="form-text text-muted">Execute <code>embark run</code> in the command line to get your token.</small>
+                </div>
+                <button type="submit" className="btn btn-pill btn-dark">Enter Cockpit</button>
+              </form>
+            </div>
+          </div>
+          <div className="login-layout-container-section flex-fill">
+            <img src={logo} className="logo" alt="Embark Logo"/>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Login.propTypes = {
+  authenticate: PropTypes.func,
+  credentials: PropTypes.object,
+  error: PropTypes.string
+};
+
+export default Login;
+

embark-ui/src/components/LoginLayout.css

@@ -1,54 +0,0 @@
-.login-layout {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.login-layout-container {
-  width: 80%;
-  max-width: 900px;
-  display: flex;
-  flex-direction: column;
-}
-
-.login-layout-container-section {
-  flex: 1;
-  padding: 0.8em;
-  background: #20a8d8;
-  align-items: center;
-  justify-content: center;
-  order: 1;
-}
-
-.login-layout-container-section:first-child {
-  background: white;
-  padding: 3em;
-  order: 2;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto;
-  max-height: 40px;
-}
-
-@media only screen and (min-width: 700px) {
-
-  .login-layout-container {
-    flex-direction: row;
-  }
-
-  .login-layout-container-section {
-    padding: 3em;
-  }
-
-  .login-layout-container-section:first-child {
-    order: 1;
-  }
-
-  .logo {
-    max-height: 180px;
-    margin-top: 3em;
-  }
-}
-

embark-ui/src/components/LoginLayout.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import logo from '../images/logo.png';
-import './LoginLayout.css';
-
-const LoginLayout = ({children}) => (
-  <div className="app login-layout">
-    <div className="login-layout-container">
-      <div className="login-layout-container-section">
-        {children}
-      </div>
-      <div className="login-layout-container-section">
-        <img src={logo} className="logo" alt="Embark Logo"/>
-      </div>
-    </div>
-  </div>
-);
-
-export default LoginLayout;

embark-ui/src/components/Unauthenticated.css

@@ -1,3 +0,0 @@
-.login-form {
-  margin-top: 1em;
-}

embark-ui/src/components/Unauthenticated.js

@@ -1,62 +0,0 @@
-import PropTypes from "prop-types";
-import React from 'react';
-import './Unauthenticated.css';
-
-class Unauthenticated extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = props.credentials;
-  }
-
-  handleChange(event){
-    this.setState({[event.target.name]: event.target.value});
-  }
-
-  handleSubmit(event) {
-    event.preventDefault();
-    this.props.authenticate(this.state.host, this.state.token);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <h2>Login</h2>
-        <div className="login-form">
-          <form  onSubmit={(e) => this.handleSubmit(e)}>
-            <div className="form-group">
-              <label htmlFor="host">Host</label>
-              <input type="text"
-                    className="form-control form-control-lg"
-                    id="host"
-                    name="host"
-                    placeholder="Enter Embark host"
-                    onChange={(e) => this.handleChange(e)}
-                    value={this.state.host}/>
-            </div>
-            <div className="form-group">
-              <label htmlFor="token">Token</label>
-              <input type="text"
-                    className="form-control form-control-lg"
-                    id="token"
-                    name="token"
-                    placeholder="Enter token"
-                    onChange={(e) => this.handleChange(e)}
-                    value={this.state.token}/>
-              <small className="form-text text-muted">Execute <code>embark run</code> in the command line to get your token.</small>
-            </div>
-            <button type="submit" className="btn btn-pill btn-dark">Enter Cockpit</button>
-          </form>
-        </div>
-      </React.Fragment>
-    );
-  }
-}
-
-Unauthenticated.propTypes = {
-  authenticate: PropTypes.func,
-  credentials: PropTypes.object,
-  error: PropTypes.string
-};
-
-export default Unauthenticated;
-

embark-ui/src/containers/AppContainer.js

@@ -3,9 +3,8 @@ import {connect} from 'react-redux';
 import React, {Component} from 'react';
 import {withRouter} from "react-router-dom";
 import routes from '../routes';
-import Unauthenticated from '../components/Unauthenticated';
+import Login from '../components/Login';
 import Layout from "../components/Layout";
-import LoginLayout from '../components/LoginLayout';
 
 import {
   authenticate, fetchCredentials, logout,
@@ -57,17 +56,15 @@ class AppContainer extends Component {
     }
   }
 
-  shouldRenderUnauthenticated() {
+  shouldRenderLogin() {
     return this.props.authenticationError || !this.props.credentials.authenticated;
   }
 
   render() {
     return (
       <React.Fragment>
-        {this.shouldRenderUnauthenticated() ?
+        {this.shouldRenderLogin() ?
-          <LoginLayout>
+          <Login credentials={this.props.credentials} authenticate={this.props.authenticate} error={this.props.authenticationError} />
-            <Unauthenticated credentials={this.props.credentials} authenticate={this.props.authenticate} error={this.props.authenticationError} />
-          </LoginLayout>
           :
           <Layout location={this.props.location} logout={this.props.logout} credentials={this.props.credentials}>
             <React.Fragment>{routes}</React.Fragment>