From 36dd25f307126d3f45b7286acac4e6fe15cd21dd Mon Sep 17 00:00:00 2001 From: alaa-yasin Date: Tue, 1 Oct 2019 12:13:37 +0300 Subject: [PATCH 1/9] install required packages Relates #38 --- client/package-lock.json | 42 ++++++++++++++++++++++++++++++---------- client/package.json | 4 +++- 2 files changed, 35 insertions(+), 11 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 6d793b0..0158e1a 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -936,22 +936,33 @@ "resolved": "https://registry.npmjs.org/@hapi/bourne/-/bourne-1.3.2.tgz", "integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==" }, + "@hapi/formula": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@hapi/formula/-/formula-1.2.0.tgz", + "integrity": "sha512-UFbtbGPjstz0eWHb+ga/GM3Z9EzqKXFWIbSOFURU0A/Gku0Bky4bCk9/h//K2Xr3IrCfjFNhMm4jyZ5dbCewGA==" + }, "@hapi/hoek": { - "version": "8.2.4", - "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.2.4.tgz", - "integrity": "sha512-Ze5SDNt325yZvNO7s5C4fXDscjJ6dcqLFXJQ/M7dZRQCewuDj2iDUuBi6jLQt+APbW9RjjVEvLr35FXuOEqjow==" + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.2.5.tgz", + "integrity": "sha512-rmGFzok1zR3xZKd5m3ihWdqafXFxvPHoQ/78+AG5URKbEbJiwBBfRgzbu+07W5f3+07JRshw6QqGbVmCp8ntig==" }, "@hapi/joi": { - "version": "15.1.1", - "resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-15.1.1.tgz", - "integrity": "sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==", + "version": "16.1.4", + "resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-16.1.4.tgz", + "integrity": "sha512-m7ctezhxjob+dSpXnCNlgAj6rrEpdSsaWu3GWL3g1AybQCU36mlAo9IwGFJwIxD+oHgdO6mYyviYlaejX+qN6g==", "requires": { - "@hapi/address": "2.x.x", - "@hapi/bourne": "1.x.x", - "@hapi/hoek": "8.x.x", - "@hapi/topo": "3.x.x" + "@hapi/address": "^2.1.2", + "@hapi/formula": "^1.2.0", + "@hapi/hoek": "^8.2.4", + "@hapi/pinpoint": "^1.0.2", + "@hapi/topo": "^3.1.3" } }, + "@hapi/pinpoint": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@hapi/pinpoint/-/pinpoint-1.0.2.tgz", + "integrity": "sha512-dtXC/WkZBfC5vxscazuiJ6iq4j9oNx1SHknmIr8hofarpKUZKmlUVYVIhNVzIEgK5Wrc4GMHL5lZtt1uS2flmQ==" + }, "@hapi/topo": { "version": "3.1.4", "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-3.1.4.tgz", @@ -13114,6 +13125,17 @@ "workbox-window": "^4.3.1" }, "dependencies": { + "@hapi/joi": { + "version": "15.1.1", + "resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-15.1.1.tgz", + "integrity": "sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==", + "requires": { + "@hapi/address": "2.x.x", + "@hapi/bourne": "1.x.x", + "@hapi/hoek": "8.x.x", + "@hapi/topo": "3.x.x" + } + }, "fs-extra": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz", diff --git a/client/package.json b/client/package.json index f2ca7fa..56b5e14 100644 --- 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" } From 8606dc2d3c3c3d6864554a36d13a5f01188241ee Mon Sep 17 00:00:00 2001 From: alaa-yasin Date: Tue, 1 Oct 2019 12:15:01 +0300 Subject: [PATCH 2/9] add login route Relates #38 --- client/src/components/App/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js index 699fb70..d508367 100644 --- a/client/src/components/App/index.js +++ b/client/src/components/App/index.js @@ -1,5 +1,6 @@ import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; +import Login from '../utils/Login/index'; import Error404 from '../utils/Error404/index'; import './style.css'; @@ -7,6 +8,7 @@ export default () => { return ( + From 2dcb6b54a6375d19300ce2203f02e8534101bd79 Mon Sep 17 00:00:00 2001 From: alaa-yasin Date: Tue, 1 Oct 2019 12:15:45 +0300 Subject: [PATCH 3/9] add login component Relates #38 --- client/src/components/utils/Login/index.js | 99 +++++++++++++++++++++ client/src/components/utils/Login/style.css | 88 ++++++++++++++++++ 2 files changed, 187 insertions(+) create mode 100644 client/src/components/utils/Login/index.js create mode 100644 client/src/components/utils/Login/style.css diff --git a/client/src/components/utils/Login/index.js b/client/src/components/utils/Login/index.js new file mode 100644 index 0000000..dfc64b0 --- /dev/null +++ b/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 ( +
+ backgroundImage +

HOTMEAL

+ waiterImage +
+ +
+ +
+ +
+

{err}

+
+ ); + } +} + +Login.propTypes = { + history: propTypes.string.isRequired, +}; diff --git a/client/src/components/utils/Login/style.css b/client/src/components/utils/Login/style.css new file mode 100644 index 0000000..6cdd40e --- /dev/null +++ b/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); +} \ No newline at end of file From 604b1b5f05228d1e95b2edfe0bd67247b994c191 Mon Sep 17 00:00:00 2001 From: alaa-yasin Date: Tue, 1 Oct 2019 12:16:32 +0300 Subject: [PATCH 4/9] add login schema for validation Relates #38 --- client/src/validation/login.js | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 client/src/validation/login.js diff --git a/client/src/validation/login.js b/client/src/validation/login.js new file mode 100644 index 0000000..80e7fc4 --- /dev/null +++ b/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; From b91dad4bc686668bfb301df788c3f9d419f2d01a Mon Sep 17 00:00:00 2001 From: alaa-yasin Date: Tue, 1 Oct 2019 17:22:02 +0300 Subject: [PATCH 5/9] pass the table number to the parent component Relates #38 --- client/src/components/App/index.js | 37 ++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js index d508367..907e23f 100644 --- a/client/src/components/App/index.js +++ b/client/src/components/App/index.js @@ -1,16 +1,33 @@ +/* eslint-disable react/no-unused-state */ import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Login from '../utils/Login/index'; import Error404 from '../utils/Error404/index'; import './style.css'; -export default () => { - return ( - - - - - - - ); -}; +export default class App extends React.Component { + state = { + tableNumber: null, + }; + + updateTableNumber = e => { + this.setState({ tableNumber: e }); + }; + + render() { + return ( + + + ( + + )} + /> + + + + ); + } +} From d27a81c5881b97871c9018d32107c2675ef63ae9 Mon Sep 17 00:00:00 2001 From: alaa-yasin Date: Tue, 1 Oct 2019 17:22:31 +0300 Subject: [PATCH 6/9] pass the table number to the parent component Relates #38 --- client/src/components/utils/Login/index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/client/src/components/utils/Login/index.js b/client/src/components/utils/Login/index.js index dfc64b0..9c56c36 100644 --- a/client/src/components/utils/Login/index.js +++ b/client/src/components/utils/Login/index.js @@ -8,7 +8,7 @@ import './style.css'; export default class Login extends React.Component { state = { - tableNumber: '', + tableNumber: null, secret: '', err: null, }; @@ -24,7 +24,7 @@ export default class Login extends React.Component { handleSubmit = e => { e.preventDefault(); const { tableNumber, secret } = this.state; - const { history } = this.props; + const { history, updateTableNumber } = this.props; logInSchema .validateAsync({ tableNumber, secret }) .then(() => { @@ -39,7 +39,7 @@ export default class Login extends React.Component { }) .then(res => { if (res.status === 200) { - res.json(); + updateTableNumber(tableNumber); history.push('/'); } return this.setState({ err: 'Incorrect Table Number or Secret' }); @@ -95,5 +95,6 @@ export default class Login extends React.Component { } Login.propTypes = { - history: propTypes.string.isRequired, + history: propTypes.isRequired, + updateTableNumber: propTypes.func.isRequired, }; From 3ed9366346aa766828124a1fe33afb94f011bf3a Mon Sep 17 00:00:00 2001 From: alaa-yasin Date: Wed, 2 Oct 2019 09:20:37 +0300 Subject: [PATCH 7/9] create a new folder to put the pages inside it Relates #38 --- client/src/components/App/index.js | 4 ++-- client/src/components/{utils => pages}/Error404/index.js | 2 +- client/src/components/{utils => pages}/Error404/style.css | 0 client/src/components/{utils => pages}/Login/index.js | 2 +- client/src/components/{utils => pages}/Login/style.css | 4 ++-- 5 files changed, 6 insertions(+), 6 deletions(-) rename client/src/components/{utils => pages}/Error404/index.js (90%) rename client/src/components/{utils => pages}/Error404/style.css (100%) rename client/src/components/{utils => pages}/Login/index.js (98%) rename client/src/components/{utils => pages}/Login/style.css (97%) diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js index 907e23f..15bb35e 100644 --- a/client/src/components/App/index.js +++ b/client/src/components/App/index.js @@ -1,8 +1,8 @@ /* eslint-disable react/no-unused-state */ import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; -import Login from '../utils/Login/index'; -import Error404 from '../utils/Error404/index'; +import Login from '../pages/Login/index'; +import Error404 from '../pages/Error404/index'; import './style.css'; export default class App extends React.Component { diff --git a/client/src/components/utils/Error404/index.js b/client/src/components/pages/Error404/index.js similarity index 90% rename from client/src/components/utils/Error404/index.js rename to client/src/components/pages/Error404/index.js index 141c2d9..fa3be39 100644 --- a/client/src/components/utils/Error404/index.js +++ b/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 = () => { diff --git a/client/src/components/utils/Error404/style.css b/client/src/components/pages/Error404/style.css similarity index 100% rename from client/src/components/utils/Error404/style.css rename to client/src/components/pages/Error404/style.css diff --git a/client/src/components/utils/Login/index.js b/client/src/components/pages/Login/index.js similarity index 98% rename from client/src/components/utils/Login/index.js rename to client/src/components/pages/Login/index.js index 9c56c36..e495670 100644 --- a/client/src/components/utils/Login/index.js +++ b/client/src/components/pages/Login/index.js @@ -1,7 +1,7 @@ import React from 'react'; import propTypes from 'prop-types'; import logInSchema from '../../../validation/login'; -import Button from '../Button/index'; +import Button from '../../utils/Button/index'; import background from '../../../assets/images/login.background.png'; import waiter from '../../../assets/images/waiter.png'; import './style.css'; diff --git a/client/src/components/utils/Login/style.css b/client/src/components/pages/Login/style.css similarity index 97% rename from client/src/components/utils/Login/style.css rename to client/src/components/pages/Login/style.css index 6cdd40e..433f5b7 100644 --- a/client/src/components/utils/Login/style.css +++ b/client/src/components/pages/Login/style.css @@ -59,11 +59,11 @@ hr { } .login__first-line { - top: 25.1rem; + top: 25.5rem; } .login__second-line { - top: 29.2rem; + top: 29.6rem; } .login__err-message { From 0a068bc09781b76bed40bfa0ad3db520235525af Mon Sep 17 00:00:00 2001 From: alaa-yasin Date: Wed, 2 Oct 2019 10:21:47 +0300 Subject: [PATCH 8/9] edit the proptypes of history ans make history.push a callback Relates #38 --- client/src/components/App/index.js | 6 +++--- client/src/components/pages/Login/index.js | 15 +++++++-------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js index 15bb35e..d7a474d 100644 --- a/client/src/components/App/index.js +++ b/client/src/components/App/index.js @@ -10,8 +10,8 @@ export default class App extends React.Component { tableNumber: null, }; - updateTableNumber = e => { - this.setState({ tableNumber: e }); + updateTableNumber = (tableNumber, redirect) => { + this.setState({ tableNumber }, () => redirect('/')); }; render() { @@ -21,7 +21,7 @@ export default class App extends React.Component { ( + render={props => ( )} /> diff --git a/client/src/components/pages/Login/index.js b/client/src/components/pages/Login/index.js index e495670..156fed0 100644 --- a/client/src/components/pages/Login/index.js +++ b/client/src/components/pages/Login/index.js @@ -8,9 +8,9 @@ import './style.css'; export default class Login extends React.Component { state = { - tableNumber: null, + tableNumber: '', secret: '', - err: null, + err: '', }; setTableNumber = e => { @@ -37,12 +37,11 @@ export default class Login extends React.Component { }), }); }) - .then(res => { + .then((res => { if (res.status === 200) { - updateTableNumber(tableNumber); - history.push('/'); - } - return this.setState({ err: 'Incorrect Table Number or Secret' }); + updateTableNumber(tableNumber, history.push); + } else + return this.setState({ err: 'Incorrect Table Number or Secret' }); }) .catch(err => { if (err.details) { @@ -95,6 +94,6 @@ export default class Login extends React.Component { } Login.propTypes = { - history: propTypes.isRequired, + history: propTypes.objectOf(propTypes.any).isRequired, updateTableNumber: propTypes.func.isRequired, }; From 4a713bee3c88788151c1f2643d454af922ec12f3 Mon Sep 17 00:00:00 2001 From: alaa-yasin Date: Wed, 2 Oct 2019 10:25:09 +0300 Subject: [PATCH 9/9] refactor the code Relates #38 --- client/src/components/pages/Login/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/src/components/pages/Login/index.js b/client/src/components/pages/Login/index.js index 156fed0..a76948a 100644 --- a/client/src/components/pages/Login/index.js +++ b/client/src/components/pages/Login/index.js @@ -25,7 +25,7 @@ export default class Login extends React.Component { e.preventDefault(); const { tableNumber, secret } = this.state; const { history, updateTableNumber } = this.props; - logInSchema + return logInSchema .validateAsync({ tableNumber, secret }) .then(() => { return fetch('/api/v1/login', { @@ -37,11 +37,11 @@ export default class Login extends React.Component { }), }); }) - .then((res => { + .then(res => { if (res.status === 200) { - updateTableNumber(tableNumber, history.push); - } else - return this.setState({ err: 'Incorrect Table Number or Secret' }); + return updateTableNumber(tableNumber, history.push); + } + return this.setState({ err: 'Incorrect Table Number or Secret' }); }) .catch(err => { if (err.details) {