mirror of https://github.com/embarklabs/embark.git
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.
This commit is contained in:
Pascal Precht
parent
aa4bc0fe4d
commit
daf1d7269d
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.login-form {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
@ -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() ?
|
||||
<LoginLayout>
|
||||
<Unauthenticated credentials={this.props.credentials} authenticate={this.props.authenticate} error={this.props.authenticationError} />
|
||||
</LoginLayout>
|
||||
{this.shouldRenderLogin() ?
|
||||
<Login credentials={this.props.credentials} authenticate={this.props.authenticate} error={this.props.authenticationError} />
|
||||
:
|
||||
<Layout location={this.props.location} logout={this.props.logout} credentials={this.props.credentials}>
|
||||
<React.Fragment>{routes}</React.Fragment>
|
||||
|
|
|
|||
Loading…
Reference in New Issue