From 328e6623d53e252a43fdaab05a313db8e7e837b8 Mon Sep 17 00:00:00 2001
From: tyrsensei <tyrsensei@gmail.com>
Date: Sat, 5 Aug 2017 23:42:38 +0200
Subject: [PATCH 01/12] Add react-router

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 2f679bd..aebb5ee 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.5",
+    "react-router": "^4.1.2",
     "react-scripts": "1.0.10",
     "redux": "^3.7.2"
   },

From 879eef157bc4f603cf7ff18cf994188ab51fc533 Mon Sep 17 00:00:00 2001
From: tyrsensei <tyrsensei@gmail.com>
Date: Sun, 6 Aug 2017 00:43:28 +0200
Subject: [PATCH 02/12] Playing with react-router

---
 package.json             |  2 +-
 src/App.js               | 13 +++++--------
 src/components/Header.js | 18 ++++++++++++++++++
 src/components/Main.js   | 18 ++++++++++++++++++
 src/index.js             | 22 +++++++++++++++-------
 src/pages/Login.js       | 12 ++++++++++++
 src/pages/Register.js    | 12 ++++++++++++
 7 files changed, 81 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Header.js
 create mode 100644 src/components/Main.js
 create mode 100644 src/pages/Login.js
 create mode 100644 src/pages/Register.js

diff --git a/package.json b/package.json
index aebb5ee..feb6b4b 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.5",
-    "react-router": "^4.1.2",
+    "react-router-dom": "^4.1.2",
     "react-scripts": "1.0.10",
     "redux": "^3.7.2"
   },
diff --git a/src/App.js b/src/App.js
index d7d52a7..d0cdebb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,15 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Header from './components/Header'
+import Main from './components/Main'
 
 class App extends Component {
   render() {
     return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
-        </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+      <div>
+        <Header />
+        <Main />
       </div>
     );
   }
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..bdf5115
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export default class Header extends React.Component {
+  render() {
+    return (
+      <header>
+        <nav>
+          <ul>
+            <li><Link to="/">Home</Link></li>
+            <li><Link to="/login">Login</Link></li>
+            <li><Link to="/register">Register</Link></li>
+          </ul>
+        </nav>
+      </header>
+    )
+  }
+}
diff --git a/src/components/Main.js b/src/components/Main.js
new file mode 100644
index 0000000..69bb2f2
--- /dev/null
+++ b/src/components/Main.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Switch, Route } from 'react-router-dom'
+import Login from '../pages/Login'
+import Register from '../pages/Register'
+
+export default class Main extends React.Component {
+  render() {
+    return (
+      <main>
+        <Switch>
+          <Route exact path='/' component={Login}/>
+          <Route exact path='/login' component={Login}/>
+          <Route exact path='/register' component={Register}/>
+        </Switch>
+      </main>
+    )
+  }
+}
diff --git a/src/index.js b/src/index.js
index fae3e35..ffad67f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,16 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { BrowserRouter } from 'react-router-dom'
+import './index.css'
+import Login from "./pages/Login"
+import Register from "./pages/Register"
+import App from './App'
+// import registerServiceWorker from './registerServiceWorker'
 
-ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+  document.getElementById('root')
+)
+// registerServiceWorker()
diff --git a/src/pages/Login.js b/src/pages/Login.js
new file mode 100644
index 0000000..259d93c
--- /dev/null
+++ b/src/pages/Login.js
@@ -0,0 +1,12 @@
+import React from "react"
+
+export default class Login extends React.Component {
+  render () {
+    console.log('Login')
+    return (
+      <div>
+        Login Page
+      </div>
+    )
+  }
+}
diff --git a/src/pages/Register.js b/src/pages/Register.js
new file mode 100644
index 0000000..79ae05f
--- /dev/null
+++ b/src/pages/Register.js
@@ -0,0 +1,12 @@
+import React from "react"
+
+export default class Register extends React.Component {
+  render () {
+    console.log('Register')
+    return (
+      <div>
+        Register Page
+      </div>
+    )
+  }
+}

From b44116313f6b80704e4a0cfc137ac527dae3bc31 Mon Sep 17 00:00:00 2001
From: tyrsensei <tyrsensei@gmail.com>
Date: Sun, 6 Aug 2017 17:40:31 +0200
Subject: [PATCH 03/12] Playing with material-ui Much time figuring out how to
 use <Link> with <Button>'s...

---
 package.json             |  2 +-
 src/App.js               |  1 -
 src/components/Header.js | 29 ++++++++++++++++++++++-------
 src/components/Main.js   |  4 ++--
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index feb6b4b..2625546 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "material-ui": "^1.0.0-beta.3",
+    "material-ui": "^1.0.0-beta.4",
     "material-ui-icons": "^1.0.0-alpha.19",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
diff --git a/src/App.js b/src/App.js
index d0cdebb..c0ab290 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
 import Header from './components/Header'
 import Main from './components/Main'
diff --git a/src/components/Header.js b/src/components/Header.js
index bdf5115..bf61a9d 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,17 +1,32 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import AppBar from 'material-ui/AppBar'
+import Toolbar from 'material-ui/Toolbar'
+import Button from 'material-ui/Button'
+import Typography from 'material-ui/Typography'
+import IconButton from 'material-ui/IconButton'
+import MenuIcon from 'material-ui-icons/Menu'
 
 export default class Header extends React.Component {
   render() {
     return (
       <header>
-        <nav>
-          <ul>
-            <li><Link to="/">Home</Link></li>
-            <li><Link to="/login">Login</Link></li>
-            <li><Link to="/register">Register</Link></li>
-          </ul>
-        </nav>
+        <AppBar>
+          <Toolbar>
+            <IconButton color="inherit" aria-label="Menu">
+              <MenuIcon />
+            </IconButton>
+            <Typography type="title" color="inherit" style={{flex: 1}}>
+              BD4A
+            </Typography>
+            <Button color="inherit" component={Link} to="/login">
+              Login
+            </Button>
+            <Button color="inherit" component={Link} to="/register">
+              Register
+            </Button>
+          </Toolbar>
+        </AppBar>
       </header>
     )
   }
diff --git a/src/components/Main.js b/src/components/Main.js
index 69bb2f2..37eb0e8 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -6,13 +6,13 @@ import Register from '../pages/Register'
 export default class Main extends React.Component {
   render() {
     return (
-      <main>
+      <div style={{marginTop: "70px"}}>
         <Switch>
           <Route exact path='/' component={Login}/>
           <Route exact path='/login' component={Login}/>
           <Route exact path='/register' component={Register}/>
         </Switch>
-      </main>
+      </div>
     )
   }
 }

From e7a7a77914fe9978bd0781a717883ba3b92b58d2 Mon Sep 17 00:00:00 2001
From: tyrsensei <tyrsensei@gmail.com>
Date: Mon, 7 Aug 2017 20:44:10 +0200
Subject: [PATCH 04/12] Removing logs

---
 src/pages/Login.js    | 12 ++++++++++--
 src/pages/Register.js |  1 -
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/pages/Login.js b/src/pages/Login.js
index 259d93c..cd5b940 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -1,11 +1,19 @@
 import React from "react"
+import TextField from 'material-ui/TextField'
 
 export default class Login extends React.Component {
   render () {
-    console.log('Login')
     return (
       <div>
-        Login Page
+        <TextField
+          id="account"
+          label="Account"
+        />
+        <TextField
+          id="password"
+          label="Password"
+          type="password"
+        />
       </div>
     )
   }
diff --git a/src/pages/Register.js b/src/pages/Register.js
index 79ae05f..41e33c2 100644
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -2,7 +2,6 @@ import React from "react"
 
 export default class Register extends React.Component {
   render () {
-    console.log('Register')
     return (
       <div>
         Register Page

From e12dba770a2bd7187e664408c614a4bf6c00346d Mon Sep 17 00:00:00 2001
From: tyrsensei <tyrsensei@gmail.com>
Date: Mon, 7 Aug 2017 23:31:57 +0200
Subject: [PATCH 05/12] Grid layout on Login page

---
 src/components/Main.js |  2 +-
 src/index.js           |  2 --
 src/pages/Login.js     | 36 +++++++++++++++++++++++++-----------
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/components/Main.js b/src/components/Main.js
index 37eb0e8..9d5c43b 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -6,7 +6,7 @@ import Register from '../pages/Register'
 export default class Main extends React.Component {
   render() {
     return (
-      <div style={{marginTop: "70px"}}>
+      <div style={{marginTop: "100px"}}>
         <Switch>
           <Route exact path='/' component={Login}/>
           <Route exact path='/login' component={Login}/>
diff --git a/src/index.js b/src/index.js
index ffad67f..ba39bd3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,8 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
 import './index.css'
-import Login from "./pages/Login"
-import Register from "./pages/Register"
 import App from './App'
 // import registerServiceWorker from './registerServiceWorker'
 
diff --git a/src/pages/Login.js b/src/pages/Login.js
index cd5b940..cf08675 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -1,20 +1,34 @@
 import React from "react"
+import Paper from 'material-ui/Paper'
+import Grid from 'material-ui/Grid'
 import TextField from 'material-ui/TextField'
 
 export default class Login extends React.Component {
   render () {
     return (
-      <div>
-        <TextField
-          id="account"
-          label="Account"
-        />
-        <TextField
-          id="password"
-          label="Password"
-          type="password"
-        />
-      </div>
+      <Grid container align="center" justify="center" spacing={0}>
+        <Grid item xs={2}>
+          <Paper>
+            <Grid container align="center" justify="flex-start" direction="column">
+              <Grid item xs={12}>
+                <TextField
+                  id="account"
+                  label="Account"
+                  margin="normal"
+                  />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  id="password"
+                  label="Password"
+                  type="password"
+                  margin="normal"
+                  />
+              </Grid>
+            </Grid>
+          </Paper>
+        </Grid>
+      </Grid>
     )
   }
 }

From 8a53c8a86272b0e796aed58242bc7e06741bee3d Mon Sep 17 00:00:00 2001
From: tyrsensei <tyrsensei@gmail.com>
Date: Wed, 9 Aug 2017 14:25:53 +0200
Subject: [PATCH 06/12] Reworked login page (layout + buttons)

---
 src/App.css              | 21 ---------------------
 src/components/Header.js |  3 ---
 src/pages/Login.js       | 20 ++++++++++++++------
 3 files changed, 14 insertions(+), 30 deletions(-)

diff --git a/src/App.css b/src/App.css
index 15adfdc..4931613 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,24 +1,3 @@
 .App {
   text-align: center;
 }
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
diff --git a/src/components/Header.js b/src/components/Header.js
index bf61a9d..5a8ea20 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -22,9 +22,6 @@ export default class Header extends React.Component {
             <Button color="inherit" component={Link} to="/login">
               Login
             </Button>
-            <Button color="inherit" component={Link} to="/register">
-              Register
-            </Button>
           </Toolbar>
         </AppBar>
       </header>
diff --git a/src/pages/Login.js b/src/pages/Login.js
index cf08675..0851d5e 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -1,23 +1,25 @@
 import React from "react"
 import Paper from 'material-ui/Paper'
 import Grid from 'material-ui/Grid'
+import Button from 'material-ui/Button'
 import TextField from 'material-ui/TextField'
+import { Link } from 'react-router-dom'
 
 export default class Login extends React.Component {
   render () {
     return (
       <Grid container align="center" justify="center" spacing={0}>
         <Grid item xs={2}>
-          <Paper>
-            <Grid container align="center" justify="flex-start" direction="column">
-              <Grid item xs={12}>
+          <Paper style={{paddingBottom: "20px"}}>
+            <Grid container align="center" justify="center" direction="row">
+              <Grid item xs={12} style={{textAlign: "center"}}>
                 <TextField
-                  id="account"
-                  label="Account"
+                  id="email"
+                  label="Mail"
                   margin="normal"
                   />
               </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} style={{textAlign: "center"}}>
                 <TextField
                   id="password"
                   label="Password"
@@ -25,6 +27,12 @@ export default class Login extends React.Component {
                   margin="normal"
                   />
               </Grid>
+              <Grid item xs={6} style={{textAlign: "center"}}>
+                <Button color="primary" component={Link} to="/register">Register</Button>
+              </Grid>
+              <Grid item xs={6} style={{textAlign: "center"}}>
+                <Button raised color="primary">Login</Button>
+              </Grid>
             </Grid>
           </Paper>
         </Grid>

From 034b4c8299ef1d572b089e28c63ccda93b2ccf5c Mon Sep 17 00:00:00 2001
From: tyrsensei <tyrsensei@gmail.com>
Date: Wed, 16 Aug 2017 07:55:48 +0200
Subject: [PATCH 07/12] Remove material-ui because of beta version of
 dependencies

---
 package.json             |  5 +----
 src/components/Header.js | 19 -------------------
 src/pages/Login.js       | 34 +---------------------------------
 src/pages/Register.js    | 34 +++++++++++++++++++++++++++++++---
 4 files changed, 33 insertions(+), 59 deletions(-)

diff --git a/package.json b/package.json
index 2625546..bb840db 100644
--- a/package.json
+++ b/package.json
@@ -3,14 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "material-ui": "^1.0.0-beta.4",
-    "material-ui-icons": "^1.0.0-alpha.19",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
-    "react-redux": "^5.0.5",
     "react-router-dom": "^4.1.2",
     "react-scripts": "1.0.10",
-    "redux": "^3.7.2"
+    "semantic-ui-react": "^0.71.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/Header.js b/src/components/Header.js
index 5a8ea20..26159ea 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,29 +1,10 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import AppBar from 'material-ui/AppBar'
-import Toolbar from 'material-ui/Toolbar'
-import Button from 'material-ui/Button'
-import Typography from 'material-ui/Typography'
-import IconButton from 'material-ui/IconButton'
-import MenuIcon from 'material-ui-icons/Menu'
 
 export default class Header extends React.Component {
   render() {
     return (
       <header>
-        <AppBar>
-          <Toolbar>
-            <IconButton color="inherit" aria-label="Menu">
-              <MenuIcon />
-            </IconButton>
-            <Typography type="title" color="inherit" style={{flex: 1}}>
-              BD4A
-            </Typography>
-            <Button color="inherit" component={Link} to="/login">
-              Login
-            </Button>
-          </Toolbar>
-        </AppBar>
       </header>
     )
   }
diff --git a/src/pages/Login.js b/src/pages/Login.js
index 0851d5e..4732b76 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -1,42 +1,10 @@
 import React from "react"
-import Paper from 'material-ui/Paper'
-import Grid from 'material-ui/Grid'
-import Button from 'material-ui/Button'
-import TextField from 'material-ui/TextField'
 import { Link } from 'react-router-dom'
 
 export default class Login extends React.Component {
   render () {
     return (
-      <Grid container align="center" justify="center" spacing={0}>
-        <Grid item xs={2}>
-          <Paper style={{paddingBottom: "20px"}}>
-            <Grid container align="center" justify="center" direction="row">
-              <Grid item xs={12} style={{textAlign: "center"}}>
-                <TextField
-                  id="email"
-                  label="Mail"
-                  margin="normal"
-                  />
-              </Grid>
-              <Grid item xs={12} style={{textAlign: "center"}}>
-                <TextField
-                  id="password"
-                  label="Password"
-                  type="password"
-                  margin="normal"
-                  />
-              </Grid>
-              <Grid item xs={6} style={{textAlign: "center"}}>
-                <Button color="primary" component={Link} to="/register">Register</Button>
-              </Grid>
-              <Grid item xs={6} style={{textAlign: "center"}}>
-                <Button raised color="primary">Login</Button>
-              </Grid>
-            </Grid>
-          </Paper>
-        </Grid>
-      </Grid>
+      <div></div>
     )
   }
 }
diff --git a/src/pages/Register.js b/src/pages/Register.js
index 41e33c2..140cd35 100644
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -1,11 +1,39 @@
 import React from "react"
+// import { Link } from 'react-router-dom'
 
 export default class Register extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      email: '',
+      email_check: '',
+      password: '',
+      password_check: '',
+    }
+  }
+  onRegister() {
+    console.log('register')
+  }
+
+  validateEmail() {
+    console.log('validate mail')
+  }
+
+  validateEmailVerification() {
+    console.log('verify email')
+    this.validateEmail()
+  }
+
+  handleInputChange(ev) {
+    let target = ev.target
+    this.setState({
+      [target.id]: target.value
+    })
+  }
+
   render () {
     return (
-      <div>
-        Register Page
-      </div>
+      <div></div>
     )
   }
 }

From 2bcfc217ea5664aadf67454a2d8b7c7bd34c7974 Mon Sep 17 00:00:00 2001
From: tyrsensei <tyrsensei@gmail.com>
Date: Sun, 20 Aug 2017 22:19:15 +0200
Subject: [PATCH 08/12] Starting again with semantic-ui

---
 public/index.html        |  1 +
 src/components/Header.js | 18 ++++++++++++++++++
 src/components/Main.js   |  5 +++--
 src/pages/Home.js        | 15 +++++++++++++++
 src/pages/Login.js       |  4 ++--
 src/pages/Register.js    |  4 ++--
 6 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/Home.js

diff --git a/public/index.html b/public/index.html
index d707fee..c0b5413 100644
--- a/public/index.html
+++ b/public/index.html
@@ -21,6 +21,7 @@
     -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css"></link>
     <title>React App</title>
   </head>
   <body>
diff --git a/src/components/Header.js b/src/components/Header.js
index 26159ea..392ca69 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,10 +1,28 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import {
+  Menu,
+  Container,
+  Button
+} from 'semantic-ui-react'
 
 export default class Header extends React.Component {
   render() {
     return (
       <header>
+        <Menu fixed='top' size='large'>
+          <Container>
+            <Menu.Item as={Link} to="/" active>Home</Menu.Item>
+            <Menu.Menu position='right'>
+              <Menu.Item className='item'>
+                <Button as={Link} to="/login">Log in</Button>
+              </Menu.Item>
+              <Menu.Item>
+                <Button as={Link} to="/register" primary>Register</Button>
+              </Menu.Item>
+            </Menu.Menu>
+          </Container>
+        </Menu>
       </header>
     )
   }
diff --git a/src/components/Main.js b/src/components/Main.js
index 9d5c43b..e0aafff 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -1,14 +1,15 @@
 import React from 'react'
 import { Switch, Route } from 'react-router-dom'
+import Home from '../pages/Home'
 import Login from '../pages/Login'
 import Register from '../pages/Register'
 
 export default class Main extends React.Component {
   render() {
     return (
-      <div style={{marginTop: "100px"}}>
+      <div style={{paddingTop: "60px"}}>
         <Switch>
-          <Route exact path='/' component={Login}/>
+          <Route exact path='/' component={Home}/>
           <Route exact path='/login' component={Login}/>
           <Route exact path='/register' component={Register}/>
         </Switch>
diff --git a/src/pages/Home.js b/src/pages/Home.js
new file mode 100644
index 0000000..2ac191b
--- /dev/null
+++ b/src/pages/Home.js
@@ -0,0 +1,15 @@
+import React from 'react'
+// import { Link } from 'react-router-dom'
+// import {
+//   Menu,
+//   Container,
+//   Button
+// } from 'semantic-ui-react'
+
+export default class Home extends React.Component {
+  render() {
+    return (
+      <div>Home</div>
+    )
+  }
+}
diff --git a/src/pages/Login.js b/src/pages/Login.js
index 4732b76..78c9ae4 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -1,10 +1,10 @@
 import React from "react"
-import { Link } from 'react-router-dom'
+// import { Link } from 'react-router-dom'
 
 export default class Login extends React.Component {
   render () {
     return (
-      <div></div>
+      <div>Login</div>
     )
   }
 }
diff --git a/src/pages/Register.js b/src/pages/Register.js
index 140cd35..a2166cb 100644
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -8,7 +8,7 @@ export default class Register extends React.Component {
       email: '',
       email_check: '',
       password: '',
-      password_check: '',
+      password_check: ''
     }
   }
   onRegister() {
@@ -33,7 +33,7 @@ export default class Register extends React.Component {
 
   render () {
     return (
-      <div></div>
+      <div>Register</div>
     )
   }
 }

From 66b2e45db612c0573c50f970c8c58ef5fd6c7b18 Mon Sep 17 00:00:00 2001
From: tyrsensei <tyrsensei@gmail.com>
Date: Tue, 12 Sep 2017 11:06:09 +0200
Subject: [PATCH 09/12] Some cleaning

---
 src/App.css       |  3 ---
 src/pages/Home.js | 27 +++++++++++++++++++++------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/App.css b/src/App.css
index 4931613..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +0,0 @@
-.App {
-  text-align: center;
-}
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 2ac191b..4ec8c82 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,15 +1,30 @@
 import React from 'react'
 // import { Link } from 'react-router-dom'
-// import {
-//   Menu,
-//   Container,
-//   Button
-// } from 'semantic-ui-react'
+import {
+  Segment,
+  Container,
+  Header
+} from 'semantic-ui-react'
 
 export default class Home extends React.Component {
   render() {
     return (
-      <div>Home</div>
+      <div>
+        <Segment
+          inverted
+          textAlign='center'
+          style={{ minHeight: 700, padding: '1em 0em' }}
+          vertical>
+          <Container text textAlign='center'>
+            <Header
+              as='h1'
+              content='Big Data for All'
+              style={{ fontSize: '4em', fontWeight: 'normal', marginBottom: 0, marginTop: '3em' }}
+              inverted
+              />
+          </Container>
+        </Segment>
+      </div>
     )
   }
 }

From 33dcb56de76ba872989b9d4cb7aca96abba0ede1 Mon Sep 17 00:00:00 2001
From: jlenne <jlenne.externe@macif.fr>
Date: Thu, 21 Sep 2017 11:33:12 +0200
Subject: [PATCH 10/12] Add a login form Add register form Checks a server
 status

---
 package.json             |  1 +
 src/components/Header.js | 40 +++++++++++++++++++++++++++++++++++-----
 src/pages/Login.js       | 15 +++++++++++++--
 src/pages/Register.js    | 15 ++++++++++++++-
 4 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index bb840db..b0bb2d4 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.16.2",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-router-dom": "^4.1.2",
diff --git a/src/components/Header.js b/src/components/Header.js
index 392ca69..c42ddfa 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -3,22 +3,52 @@ import { Link } from 'react-router-dom'
 import {
   Menu,
   Container,
-  Button
+  Button,
+  Icon
 } from 'semantic-ui-react'
+import axios from 'axios'
 
 export default class Header extends React.Component {
+  constructor() {
+    super()
+    this.state = {
+      color: 'black',
+      disabled: true
+    };
+  }
+
+  componentDidMount() {
+    axios.get('http://localhost:10000/health')
+      .then(res => {
+        console.log(res)
+        this.setState({
+          color: 'green',
+          disabled: false
+        })
+      })
+      .catch(err => {
+        this.setState({
+          color: 'red',
+          disabled: false
+        })
+      })
+  }
+
   render() {
     return (
       <header>
-        <Menu fixed='top' size='large'>
+        <Menu fixed='top' size='large' icon>
           <Container>
             <Menu.Item as={Link} to="/" active>Home</Menu.Item>
             <Menu.Menu position='right'>
-              <Menu.Item className='item'>
-                <Button as={Link} to="/login">Log in</Button>
+              <Menu.Item>
+                <Icon name='lightning' color={this.state.color} fitted size='large' disabled={this.state.disabled}/>
+              </Menu.Item>
+              <Menu.Item>
+              <Button as={Link} to="/register">Register</Button>
               </Menu.Item>
               <Menu.Item>
-                <Button as={Link} to="/register" primary>Register</Button>
+                <Button as={Link} to="/login" primary>Log in</Button>
               </Menu.Item>
             </Menu.Menu>
           </Container>
diff --git a/src/pages/Login.js b/src/pages/Login.js
index 78c9ae4..e53e3fc 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -1,10 +1,21 @@
-import React from "react"
+import React from 'react'
+import { Grid, Form, Segment } from 'semantic-ui-react'
 // import { Link } from 'react-router-dom'
 
 export default class Login extends React.Component {
   render () {
     return (
-      <div>Login</div>
+      <Grid verticalAlign='middle' textAlign='center'>
+        <Grid.Column width={3}>
+          <Form size='large'>
+            <Segment>
+              <Form.Input fluid placeholder='Mail' icon='user' iconPosition='left'/>
+              <Form.Input fluid placeholder='Password' icon='lock' iconPosition='left'/>
+              <Form.Button fluid primary>Submit</Form.Button>
+            </Segment>
+          </Form>
+        </Grid.Column>
+      </Grid>
     )
   }
 }
diff --git a/src/pages/Register.js b/src/pages/Register.js
index a2166cb..9ca391c 100644
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { Grid, Form, Segment } from 'semantic-ui-react'
 // import { Link } from 'react-router-dom'
 
 export default class Register extends React.Component {
@@ -33,7 +34,19 @@ export default class Register extends React.Component {
 
   render () {
     return (
-      <div>Register</div>
+      <Grid verticalAlign='middle' textAlign='center'>
+        <Grid.Column width={3}>
+          <Form size='large'>
+            <Segment>
+              <Form.Input fluid placeholder='Mail' icon='user' iconPosition='left'/>
+              <Form.Input fluid placeholder='Mail Verification' icon='user' iconPosition='left'/>
+              <Form.Input type='password' fluid placeholder='Password' icon='lock' iconPosition='left'/>
+              <Form.Input type='password' fluid placeholder='Password Vérification' icon='lock' iconPosition='left'/>
+              <Form.Button fluid primary>Submit</Form.Button>
+            </Segment>
+          </Form>
+        </Grid.Column>
+      </Grid>
     )
   }
 }

From 7e0f28028e039671281cf5106b6a7ec110b558d0 Mon Sep 17 00:00:00 2001
From: tyrsensei <tyrsensei@gmail.com>
Date: Fri, 22 Sep 2017 09:15:44 +0200
Subject: [PATCH 11/12] =?UTF-8?q?Log=20des=20erreurs=20de=20connexion=20?=
 =?UTF-8?q?=C3=A0=20l'api=20Validation=20des=20forms?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json             | 14 +++++-----
 src/components/Header.js |  6 ++---
 src/pages/Login.js       |  4 +--
 src/pages/Register.js    | 57 ++++++++++++++++++++++------------------
 4 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index b0bb2d4..f55f8ee 100644
--- a/package.json
+++ b/package.json
@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.16.2",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-router-dom": "^4.1.2",
-    "react-scripts": "1.0.10",
-    "semantic-ui-react": "^0.71.4"
+    "axios": "latest",
+    "formsy-react": "latest",
+    "formsy-semantic-ui-react": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-router-dom": "latest",
+    "react-scripts": "latest",
+    "semantic-ui-react": "latest"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/Header.js b/src/components/Header.js
index c42ddfa..a0f96db 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -6,7 +6,7 @@ import {
   Button,
   Icon
 } from 'semantic-ui-react'
-import axios from 'axios'
+import Axios from 'axios'
 
 export default class Header extends React.Component {
   constructor() {
@@ -18,15 +18,15 @@ export default class Header extends React.Component {
   }
 
   componentDidMount() {
-    axios.get('http://localhost:10000/health')
+    Axios.get('http://localhost:10000/health')
       .then(res => {
-        console.log(res)
         this.setState({
           color: 'green',
           disabled: false
         })
       })
       .catch(err => {
+        console.log(err);
         this.setState({
           color: 'red',
           disabled: false
diff --git a/src/pages/Login.js b/src/pages/Login.js
index e53e3fc..8cb2fe7 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -1,6 +1,5 @@
 import React from 'react'
-import { Grid, Form, Segment } from 'semantic-ui-react'
-// import { Link } from 'react-router-dom'
+import { Grid, Form, Segment, Header } from 'semantic-ui-react'
 
 export default class Login extends React.Component {
   render () {
@@ -9,6 +8,7 @@ export default class Login extends React.Component {
         <Grid.Column width={3}>
           <Form size='large'>
             <Segment>
+              <Header>Login</Header>
               <Form.Input fluid placeholder='Mail' icon='user' iconPosition='left'/>
               <Form.Input fluid placeholder='Password' icon='lock' iconPosition='left'/>
               <Form.Button fluid primary>Submit</Form.Button>
diff --git a/src/pages/Register.js b/src/pages/Register.js
index 9ca391c..38bc461 100644
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -1,6 +1,7 @@
 import React from "react"
-import { Grid, Form, Segment } from 'semantic-ui-react'
-// import { Link } from 'react-router-dom'
+import { Grid, Segment, Header, Message } from 'semantic-ui-react'
+import Axios from 'axios'
+import { Form } from 'formsy-semantic-ui-react'
 
 export default class Register extends React.Component {
   constructor(props) {
@@ -12,25 +13,6 @@ export default class Register extends React.Component {
       password_check: ''
     }
   }
-  onRegister() {
-    console.log('register')
-  }
-
-  validateEmail() {
-    console.log('validate mail')
-  }
-
-  validateEmailVerification() {
-    console.log('verify email')
-    this.validateEmail()
-  }
-
-  handleInputChange(ev) {
-    let target = ev.target
-    this.setState({
-      [target.id]: target.value
-    })
-  }
 
   render () {
     return (
@@ -38,10 +20,35 @@ export default class Register extends React.Component {
         <Grid.Column width={3}>
           <Form size='large'>
             <Segment>
-              <Form.Input fluid placeholder='Mail' icon='user' iconPosition='left'/>
-              <Form.Input fluid placeholder='Mail Verification' icon='user' iconPosition='left'/>
-              <Form.Input type='password' fluid placeholder='Password' icon='lock' iconPosition='left'/>
-              <Form.Input type='password' fluid placeholder='Password Vérification' icon='lock' iconPosition='left'/>
+              <Header>Register</Header>
+              <Form.Input
+                fluid
+                placeholder='Mail'
+                icon='user'
+                iconPosition='left'
+                validations='isEmail'
+                validationErrors={{ isEmail: 'Email is not valid' }}
+                errorLabel={ <Message icon='delete' negative size='mini' /> }
+                name='mail'/>
+              <Form.Input
+                fluid
+                placeholder='Mail Verification'
+                icon='user'
+                iconPosition='left'
+                name='mail_validation'/>
+              <Form.Input
+                type='password'
+                fluid
+                placeholder='Password'
+                icon='lock'
+                iconPosition='left'
+                name='password'/>
+              <Form.Input
+                type='password'
+                fluid placeholder='Password Vérification'
+                icon='lock'
+                iconPosition='left'
+                name='password_validation'/>
               <Form.Button fluid primary>Submit</Form.Button>
             </Segment>
           </Form>

From 22a1c9c09ee7db0c9b42f9a2b195001a4f6dc070 Mon Sep 17 00:00:00 2001
From: tyrsensei <tyrsensei@gmail.com>
Date: Mon, 25 Sep 2017 15:44:54 +0200
Subject: [PATCH 12/12] Added validations to register form

---
 src/pages/Register.js | 43 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/pages/Register.js b/src/pages/Register.js
index 38bc461..18d6491 100644
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -10,31 +10,56 @@ export default class Register extends React.Component {
       email: '',
       email_check: '',
       password: '',
-      password_check: ''
+      password_check: '',
+      submittable: false
     }
   }
 
+  setSubmittable() {
+    this.setState({submittable: true})
+  }
+
+  unsetSubmittable() {
+    this.setState({submittable: false})
+  }
+
+  register(formData) {
+    console.log(formData);
+  }
+
   render () {
     return (
       <Grid verticalAlign='middle' textAlign='center'>
         <Grid.Column width={3}>
-          <Form size='large'>
+          <Form
+            size='large'
+            onValidSubmit={ (formData) => this.register(formData) }
+            onValid={() => this.setSubmittable()}
+            onInvalid={() => this.unsetSubmittable()}>
             <Segment>
               <Header>Register</Header>
               <Form.Input
                 fluid
+                label='Mail'
                 placeholder='Mail'
                 icon='user'
                 iconPosition='left'
-                validations='isEmail'
-                validationErrors={{ isEmail: 'Email is not valid' }}
-                errorLabel={ <Message icon='delete' negative size='mini' /> }
+                validations={{ isEmail: true, minLength: 1}}
+                validationErrors={{ isEmail: 'Email is not valid', minLength: 'Mandatory field' }}
+                errorLabel={ <Message icon negative size='mini' ></Message> }
                 name='mail'/>
               <Form.Input
                 fluid
                 placeholder='Mail Verification'
                 icon='user'
                 iconPosition='left'
+                validations={{ isEmail: true, equalsField: 'mail', minLength: 1}}
+                validationErrors={{
+                  isEmail: 'Email is not valid',
+                  equalsField: 'Emails are different',
+                  minLength: 'Mandatory field'
+                }}
+                errorLabel={ <Message icon negative size='mini' ></Message> }
                 name='mail_validation'/>
               <Form.Input
                 type='password'
@@ -42,14 +67,20 @@ export default class Register extends React.Component {
                 placeholder='Password'
                 icon='lock'
                 iconPosition='left'
+                validations={{ minLength: 1}}
+                validationErrors={{ minLength: 'Mandatory field' }}
+                errorLabel={ <Message icon negative size='mini' ></Message> }
                 name='password'/>
               <Form.Input
                 type='password'
                 fluid placeholder='Password Vérification'
                 icon='lock'
                 iconPosition='left'
+                validations={{ equalsField: 'password', minLength: 1 }}
+                validationErrors={{ equalsField: 'Passwords are different', minLength: 'Mandatory field' }}
+                errorLabel={ <Message icon negative size='mini' ></Message> }
                 name='password_validation'/>
-              <Form.Button fluid primary>Submit</Form.Button>
+              <Form.Button fluid primary disabled={ !this.state.submittable }>Submit</Form.Button>
             </Segment>
           </Form>
         </Grid.Column>