From c60d1a71ccafadb5057eb2e21f5cb439320b7de8 Mon Sep 17 00:00:00 2001
From: Mathias Biilmann Christensen <info@mathias-biilmann.net>
Date: Thu, 29 Dec 2016 18:38:16 -0800
Subject: [PATCH] Make sure the example login page looks decent

---
 src/backends/test-repo/AuthenticationPage.js | 38 ++++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/backends/test-repo/AuthenticationPage.js b/src/backends/test-repo/AuthenticationPage.js
index a6f2e130..6d2535d9 100644
--- a/src/backends/test-repo/AuthenticationPage.js
+++ b/src/backends/test-repo/AuthenticationPage.js
@@ -1,29 +1,45 @@
 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 {
   static propTypes = {
-    onLogin: React.PropTypes.func.isRequired
+    onLogin: React.PropTypes.func.isRequired,
   };
 
   state = { email: '' };
 
-  handleLogin = e => {
+  handleLogin = (e) => {
     e.preventDefault();
     this.props.onLogin(this.state);
   };
 
-  handleEmailChange = e => {
+  handleEmailChange = (e) => {
     this.setState({ email: e.target.value });
   };
 
   render() {
-    return <form onSubmit={this.handleLogin}>
-      <p>
-        <label>Your name or email: <input type='text' onChange={this.handleEmailChange}/></label>
-      </p>
-      <p>
-        <button type='submit'>Login</button>
-      </p>
-    </form>;
+    return (<section className={styles.root}>
+      <Card className={styles.card}>
+        <img src={logo} width={100} role="presentation" />
+        <Input
+          type="text"
+          label="Email"
+          name="email"
+          value={this.state.email}
+          onChange={this.handleEmailChange}
+        />
+        <Button
+          className={styles.button}
+          raised
+          onClick={this.handleLogin}
+        >
+          <Icon type="login" /> Login
+        </Button>
+      </Card>
+    </section>);
   }
 }