refactor(components/Unauthenticated): use CoreUI instead of Tabler

This commit is contained in:
Pascal Precht 2018-10-10 16:58:07 +02:00
parent cef60b56e8
commit c1b9760502
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
2 changed files with 34 additions and 22 deletions

View File

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

View File

@ -1,6 +1,6 @@
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import React from 'react'; import React from 'react';
import {Page, Alert, Form, Button} from "tabler-react"; import './Unauthenticated.css';
class Unauthenticated extends React.Component { class Unauthenticated extends React.Component {
constructor(props){ constructor(props){
@ -19,28 +19,37 @@ class Unauthenticated extends React.Component {
render() { render() {
return ( return (
<Page.Content> <React.Fragment>
{this.props.error && <Alert type="danger"> <h2>Login</h2>
{this.props.error} <div className="login-form">
</Alert>} <form onSubmit={(e) => this.handleSubmit(e)}>
<Form onSubmit={(e) => this.handleSubmit(e)}> <div className="form-group">
<Form.Input name="host" <label htmlFor="host">Host</label>
label="Embark Host" <input type="text"
value={this.state.host} className="form-control form-control-lg"
onChange={(e) => this.handleChange(e)} id="host"
placeholder="Enter Embark Host"/> name="host"
<Form.Input name="token" placeholder="Enter Embark host"
label="Token" onChange={(e) => this.handleChange(e)}
value={this.state.token} value={this.state.host}/>
onChange={(e) => this.handleChange(e)} </div>
placeholder="Enter Token"/> <div className="form-group">
<Button type="submit" color="primary"> <label htmlFor="token">Token</label>
Authenticate <input type="text"
</Button> className="form-control form-control-lg"
</Form> id="token"
</Page.Content> 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 = { Unauthenticated.propTypes = {