pull master and resolve conflict

Relates #37

client/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hapi/joi": "^16.1.4",
     "babel-eslint": "^9.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",

client/src/components/App/index.js

@@ -1,16 +1,36 @@
+/* eslint-disable react/no-unused-state */
 import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import Error404 from '../utils/Error404/index';
-import './style.css';
+
+import Login from '../pages/Login/index';
+import Error404 from '../pages/Error404/index';
 import Home from '../home';
+import './style.css';
+
+export default class App extends React.Component {
+  state = {
+    tableNumber: null,
+  };
+
+  updateTableNumber = (tableNumber, redirect) => {
+    this.setState({ tableNumber }, () => redirect('/'));
+  };
 
-export default () => {
-  return (
-    <Router>
-      <Switch>
-        <Route exact path="/" component={Home} />
-        <Route exact path="*" component={Error404} />
-      </Switch>
-    </Router>
-  );
-};
+  render() {
+    return (
+      <Router>
+        <Switch>
+          <Route
+            exact
+            path="/login"
+            render={props => (
+              <Login updateTableNumber={this.updateTableNumber} {...props} />
+            )}
+          />
+          <Route exact path="/" component={Home} />
+          <Route exact path="*" component={Error404} />
+        </Switch>
+      </Router>
+    );
+  }
+}

client/src/components/utils/Error404/index.js → client/src/components/pages/Error404/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import error404 from '../../../assets/images/error.jpg';
-import Button from '../Button/index';
+import Button from '../../utils/Button/index';
 import './style.css';
 
 const Error404 = () => {

client/src/components/pages/Login/index.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import logInSchema from '../../../validation/login';
+import Button from '../../utils/Button/index';
+import background from '../../../assets/images/login.background.png';
+import waiter from '../../../assets/images/waiter.png';
+import './style.css';
+
+export default class Login extends React.Component {
+  state = {
+    tableNumber: '',
+    secret: '',
+    err: '',
+  };
+
+  setTableNumber = e => {
+    this.setState({ tableNumber: e.target.value });
+  };
+
+  setSecret = e => {
+    this.setState({ secret: e.target.value });
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    const { tableNumber, secret } = this.state;
+    const { history, updateTableNumber } = this.props;
+    return logInSchema
+      .validateAsync({ tableNumber, secret })
+      .then(() => {
+        return fetch('/api/v1/login', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            tableNumber,
+            secret,
+          }),
+        });
+      })
+      .then(res => {
+        if (res.status === 200) {
+          return updateTableNumber(tableNumber, history.push);
+        }
+        return this.setState({ err: 'Incorrect Table Number or Secret' });
+      })
+      .catch(err => {
+        if (err.details) {
+          if (err.details[0].message) {
+            this.setState({ err: err.details[0].message });
+          }
+        } else {
+          this.setState({ err: 'Internal Server Error' });
+        }
+      });
+  };
+
+  render() {
+    const { tableNumber, secret, err } = this.state;
+    return (
+      <div>
+        <img
+          src={background}
+          alt="backgroundImage"
+          className="login__background--image"
+        />
+        <h1 className="login__title">HOTMEAL</h1>
+        <img src={waiter} alt="waiterImage" className="login__waiter-image" />
+        <form onSubmit={this.handleSubmit}>
+          <input
+            value={tableNumber}
+            className="login__table-number"
+            placeholder="Table number"
+            name="tableNumber"
+            onChange={this.setTableNumber}
+          />
+          <hr className="login__first-line" />
+          <input
+            value={secret}
+            className="login__secret-number"
+            type="password"
+            placeholder="Secret key"
+            name="secret"
+            onChange={this.setSecret}
+          />
+          <hr className="login__second-line" />
+          <Button type="submit" className="login__button">
+            Enter
+          </Button>
+        </form>
+        <p className="login__err-message">{err}</p>
+      </div>
+    );
+  }
+}
+
+Login.propTypes = {
+  history: propTypes.objectOf(propTypes.any).isRequired,
+  updateTableNumber: propTypes.func.isRequired,
+};

client/src/components/pages/Login/style.css

@@ -0,0 +1,88 @@
+.login__background--image {
+  position: relative;
+  width: 100%;
+  height: 98vh;
+}
+
+.login__waiter-image {
+  position: absolute;
+  width: 23vw;
+  height: 10vh;
+  left: 9rem;
+  top: 15.5rem;
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
+}
+
+.login__title {
+  position: absolute;
+  left: 7.5rem;
+  top: 10rem;
+  font-family: Creepster;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 2.6rem;
+  color: #FFFFFF;
+}
+
+input {
+  position: absolute;
+  left: 4rem;
+  width: 38vw;
+  height: 2vh;
+  background-color: #21232F;
+  border: none;
+  color:#FFFFFF;
+  font: 1.2rem Roboto;
+}
+
+::placeholder {
+  font-family: Roboto;
+  font-size: 1.1rem;
+  font-weight: 300;
+  color: #FFFFFF;
+}
+
+.login__table-number {
+  top: 24.1rem;
+}
+
+.login__secret-number {
+  top: 28.2rem;
+}
+
+hr {
+  position: absolute;
+  width: 239px;
+  height: 0px;
+  left: 4rem;
+  border: 1px solid #FF9636;
+}
+
+.login__first-line {
+  top: 25.5rem;
+}
+
+.login__second-line {
+  top: 29.6rem;
+}
+
+.login__err-message {
+  position: absolute;
+  top: 29.4rem;
+  left: 10%;
+  font-size: 1.3rem;
+  color: #ED1C24;
+  margin: 1.7rem auto;
+  text-align: center;
+  width: 80%;
+}
+
+.login__button {
+  position: absolute;
+  width: 66vw;
+  height: 6vh;
+  left: 3.9rem;
+  top: 34.4rem;
+  font-size: 1.5rem;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
+}

client/src/validation/login.js

@@ -0,0 +1,10 @@
+import Joi from '@hapi/joi';
+
+const logInSchema = Joi.object().keys({
+  tableNumber: Joi.number()
+    .required()
+    .label('Table Number'),
+  secret: Joi.string().required(),
+});
+
+export default logInSchema;