Make sure the example login page looks decent

This commit is contained in:
Mathias Biilmann Christensen 2016-12-29 18:38:16 -08:00
parent 2326e8b581
commit c60d1a71cc

View File

@ -1,29 +1,45 @@
import React from 'react'; import React from 'react';
import Input from "react-toolbox/lib/input";
import Button from "react-toolbox/lib/button";
import { Card, Icon } from "../../components/UI";
import logo from "../netlify-auth/netlify_logo.svg";
import styles from "../netlify-auth/AuthenticationPage.css";
export default class AuthenticationPage extends React.Component { export default class AuthenticationPage extends React.Component {
static propTypes = { static propTypes = {
onLogin: React.PropTypes.func.isRequired onLogin: React.PropTypes.func.isRequired,
}; };
state = { email: '' }; state = { email: '' };
handleLogin = e => { handleLogin = (e) => {
e.preventDefault(); e.preventDefault();
this.props.onLogin(this.state); this.props.onLogin(this.state);
}; };
handleEmailChange = e => { handleEmailChange = (e) => {
this.setState({ email: e.target.value }); this.setState({ email: e.target.value });
}; };
render() { render() {
return <form onSubmit={this.handleLogin}> return (<section className={styles.root}>
<p> <Card className={styles.card}>
<label>Your name or email: <input type='text' onChange={this.handleEmailChange}/></label> <img src={logo} width={100} role="presentation" />
</p> <Input
<p> type="text"
<button type='submit'>Login</button> label="Email"
</p> name="email"
</form>; value={this.state.email}
onChange={this.handleEmailChange}
/>
<Button
className={styles.button}
raised
onClick={this.handleLogin}
>
<Icon type="login" /> Login
</Button>
</Card>
</section>);
} }
} }