add login component

Relates #38

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import logInSchema from '../../../validation/login';
+import Button from '../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: null,
+  };
+
+  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 } = this.props;
+    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) {
+          res.json();
+          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.string.isRequired,
+};

client/src/components/utils/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.1rem;
+}
+
+.login__second-line {
+  top: 29.2rem;
+}
+
+.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);
+}