style login component

Relates #38
GSG-G7 · Oct 1, 2019 · 22722aa · 22722aa
1 parent 10fcf55
commit 22722aa
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 35 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/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",
@@ -40,5 +41,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://localhost:5000"
 }
diff --git a/client/src/components/utils/Login/index.js b/client/src/components/utils/Login/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+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';
@@ -7,34 +8,52 @@ import './style.css';
 export default class Login extends React.Component {
   state = {
     tableNumber: '',
-    secretNumber: '',
+    secret: '',
+    err: null,
   };
 
   setTableNumber = e => {
     this.setState({ tableNumber: e.target.value });
   };
 
-  setSecretNumber = e => {
-    this.setState({ secretNumber: e.target.value });
+  setSecret = e => {
+    this.setState({ secret: e.target.value });
   };
 
   handleSubmit = e => {
-    console.log('alaa');
     e.preventDefault();
-    fetch('http://localhost:5000/api/v1/login', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        table_number: this.tableNumber,
-        secret_number: this.secretNumber,
-      }),
-    })
-      .then(res => res.json())
-      .catch(err => console.log(`err ${err}`));
+    const { tableNumber, secret } = this.state;
+    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 res.json();
+        }
+        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, secretNumber } = this.state;
+    const { tableNumber, secret, err } = this.state;
     return (
       <div>
         <img
@@ -48,23 +67,23 @@ export default class Login extends React.Component {
           <input
             value={tableNumber}
             className="login__table-number"
-            type="number"
             placeholder="Table number"
-            name="table number"
+            name="tableNumber"
             onChange={this.setTableNumber}
           />
           <hr className="login__first-line" />
           <input
-            value={secretNumber}
+            value={secret}
             className="login__secret-number"
-            type="text"
-            placeholder="Secret number"
-            name="secret number"
-            onChange={this.setSecretNumber}
+            type="password"
+            placeholder="Secret key"
+            name="secret"
+            onChange={this.setSecret}
           />
           <hr className="login__second-line" />
           <Button type="submit" className="login__button"></Button>
         </form>
+        <p className="login__err-message">{err}</p>
       </div>
     );
   }

diff --git a/client/src/components/utils/Login/style.css b/client/src/components/utils/Login/style.css
@@ -54,7 +54,7 @@ hr {
   position: absolute;
   width: 239px;
   height: 0px;
-  left: 60px;
+  left: 4rem;
   border: 1px solid #FF9636;
 }
 
@@ -65,7 +65,18 @@ hr {
 .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;