adding the files in order to save them

Relates #38
GSG-G7 · Sep 26, 2019 · e9f5728 · e9f5728
1 parent 77e2c3f
commit e9f5728
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 41 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -7,6 +7,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-router-dom": "^5.1.0",
     "react-scripts": "^3.1.2"
   },
   "devDependencies": {

diff --git a/client/src/components/Utils/Login/index.js b/client/src/components/Utils/Login/index.js
@@ -4,21 +4,51 @@ import background from '../../../assets/images/login.background.png';
 import waiter from '../../../assets/images/waiter.png';
 import './style.css';
 
-export default () => {
-  return (
-    <div>
-      <img
-        src={background}
-        alt="backgroundImage"
-        className="background-image"
-      />
-      <img src={waiter} alt="waiterImage" className="waiter-image" />
-      <h1 className="title">HOTMEAL</h1>
-      <p className="table-number">Table number</p>
-      <hr className="first-line" />
-      <p className="secret-number">Secret number</p>
-      <hr className="second-line" />
-      <Button className="login-button" />
-    </div>
-  );
-};
+export default class Login extends React.Component {
+  state = {
+    tableNumber: 1,
+    secretNumber: 23,
+  };
+
+  setTableNumber = event => {
+    this.setState({ tableNumber: event.target.value });
+  };
+
+  setSecretNumber = event => {
+    this.setState({ secretNumber: event.target.value });
+  };
+
+  render() {
+    const { tableNumber, secretNumber } = this.state;
+    return (
+      <div>
+        <img
+          src={background}
+          alt="backgroundImage"
+          className="login__background--image"
+        />
+        <img src={waiter} alt="waiterImage" className="login__waiter-image" />
+        <h1 className="login__title">HOTMEAL</h1>
+        <h5 className="login__table-number">Table name</h5>
+        <input
+          className="login__first-input"
+          type="number"
+          placeholder="Table number"
+          name="table number"
+          value={tableNumber}
+          onChange={this.setTableNumber}
+        />
+        <h5 className="login__secret-number">Secret number</h5>
+        <input
+          className="login__second-input"
+          type="number"
+          placeholder="Secret number"
+          name="secret number"
+          value={secretNumber}
+          onChange={this.setSecretNumber}
+        />
+        <Button className="login__button" text="Enter" />
+      </div>
+    );
+  }
+}
diff --git a/client/src/components/Utils/Login/style.css b/client/src/components/Utils/Login/style.css
@@ -1,12 +1,12 @@
-.background-image {
+.login__background--image {
   position: relative;
   width: 100%;
-  height: 810px;
+  height: 812px;
   top: 0;
   left: 0;
 }
 
-.waiter-image {
+.login__waiter-image {
   position: absolute;
   width: 75px;
   height: 64px;
@@ -15,7 +15,7 @@
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
 }
 
-.title {
+.login__title {
   position: absolute;
   width: 169px;
   height: 44px;
@@ -30,12 +30,12 @@
   color: #FFFFFF;
 }
 
-.table-number {
+.login__table-number {
   position: absolute;
   width: 112px;
   height: 20px;
-  left: 53px;
-  top: 340px;
+  left: 50px;
+  top: 322px;
   font-family: Roboto;
   font-style: normal;
   font-weight: 300;
@@ -46,20 +46,32 @@
   text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 
-.first-line {
+.login__first-input {
   position: absolute;
-  width: 239px;
+  width: 170px;
   height: 0px;
-  left: 60px;
+  left: 58px;
   top: 370px;
-  border: 1px solid #FF9636;
+  border: none;
+  border-bottom: 1px solid #FF9636;
+}
+
+.login__second-input {
+  position: absolute;
+  width: 170px;
+  height: 0px;
+  left: 58px;
+  top: 465px;
+  border: none;
+  border-bottom: 1px solid #FF9636;
 }
-.secret-number {
+
+.login__secret-number {
   position: absolute;
   width: 115px;
   height: 19px;
   left: 53px;
-  top: 435px;
+  top: 417px;
   font-family: Roboto;
   font-style: normal;
   font-weight: 300;
@@ -70,16 +82,7 @@
   text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 
-.second-line {
-  position: absolute;
-  width: 239px;
-  height: 0px;
-  left: 60px;
-  top: 465px;
-  border: 1px solid #FF9636;
-}
-
-.login-button {
+.login__button {
   position: absolute;
   width: 262px;
   height: 47px;