wtfcoderz · tyrsensei · Aug 5, 2017 · Aug 5, 2017 · Aug 6, 2017 · Aug 7, 2017
diff --git a/package.json b/package.json
@@ -3,13 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "material-ui": "^1.0.0-beta.3",
-    "material-ui-icons": "^1.0.0-alpha.19",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-redux": "^5.0.5",
-    "react-scripts": "1.0.10",
-    "redux": "^3.7.2"
+    "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/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/App.css b/src/App.css
@@ -1,24 +0,0 @@
-.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/App.js b/src/App.js
@@ -1,18 +1,14 @@
 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
@@ -0,0 +1,59 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import {
+  Menu,
+  Container,
+  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 => {
+        this.setState({
+          color: 'green',
+          disabled: false
+        })
+      })
+      .catch(err => {
+        console.log(err);
+        this.setState({
+          color: 'red',
+          disabled: false
+        })
+      })
+  }
+
+  render() {
+    return (
+      <header>
+        <Menu fixed='top' size='large' icon>
+          <Container>
+            <Menu.Item as={Link} to="/" active>Home</Menu.Item>
+            <Menu.Menu position='right'>
+              <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="/login" primary>Log in</Button>
+              </Menu.Item>
+            </Menu.Menu>
+          </Container>
+        </Menu>
+      </header>
+    )
+  }
+}
diff --git a/src/components/Main.js b/src/components/Main.js
@@ -0,0 +1,19 @@
+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={{paddingTop: "60px"}}>
+        <Switch>
+          <Route exact path='/' component={Home}/>
+          <Route exact path='/login' component={Login}/>
+          <Route exact path='/register' component={Register}/>
+        </Switch>
+      </div>
+    )
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,14 @@
-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 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/Home.js b/src/pages/Home.js
@@ -0,0 +1,30 @@
+import React from 'react'
+// import { Link } from 'react-router-dom'
+import {
+  Segment,
+  Container,
+  Header
+} from 'semantic-ui-react'
+
+export default class Home extends React.Component {
+  render() {
+    return (
+      <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>
+    )
+  }
+}
diff --git a/src/pages/Login.js b/src/pages/Login.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Grid, Form, Segment, Header } from 'semantic-ui-react'
+
+export default class Login extends React.Component {
+  render () {
+    return (
+      <Grid verticalAlign='middle' textAlign='center'>
+        <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>
+            </Segment>
+          </Form>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}
diff --git a/src/pages/Register.js b/src/pages/Register.js
@@ -0,0 +1,90 @@
+import React from "react"
+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) {
+    super(props)
+    this.state = {
+      email: '',
+      email_check: '',
+      password: '',
+      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'
+            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: 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'
+                fluid
+                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 disabled={ !this.state.submittable }>Submit</Form.Button>
+            </Segment>
+          </Form>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}