Add js file for login

Add cors to app.js
ebenezerdon · Nov 10, 2018 · 0e05f12 · 0e05f12
1 parent e7ed785
commit 0e05f12
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 16 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,6 +2,7 @@
   "root": true,
   "extends": "airbnb-base",
   "env": {
+    "browser": true,
     "node": true,
     "es6": true,
     "mocha": true
@@ -12,5 +13,9 @@
   },
   "rules": {
     "linebreak-style": ["error", "windows"]
-  } 
+  },
+  "globals": {
+    "localStorage": true,
+    "fetch": true
+}
 }
diff --git a/UI/assets/js/login.js b/UI/assets/js/login.js
@@ -0,0 +1,45 @@
+// const loginUser = () => {
+//   const emailaddress = document.getElementById('emailaddress').value;
+//   const password = document.getElementById('password').value;
+//   fetch('https://newstoremanager.herokuapp.com/api/v1/auth/login', {
+//     method: 'POST',
+//     headers: {
+//       Accept: 'application/json, text/plain, */*',
+//       'content-Type': 'application/json',
+//     },
+//     body: JSON.stringify({
+//       emailaddress: emailaddress,
+//       password: password,
+//     }),
+//   }).then(res => res.json())
+//     .then((data) => {
+//       console.log(data);
+//       if (data.status === 200) {
+//         localStorage.setItem('accesstoken', `${data.data}`);
+//       }
+//     });
+// };
+
+// document.getElementById('login').addEventListener('submit', loginUser);
+const loginDetails = {
+  emailaddress: document.getElementById('emailaddress').value,
+  password: document.getElementById('password').value,
+};
+
+const options = {
+  method: 'POST',
+  body: JSON.stringify(loginDetails),
+  headers: new Headers({
+    'Content-Type': 'application/json'
+  }),
+};
+
+const loginUser = (e) => {
+  e.preventDefault();
+  fetch('https://newstoremanager.herokuapp.com/api/v1/auth/login', options)
+    .then(res => res.json())
+    .then(data => console.log(data))
+    .catch(err => console.log(err));
+};
+
+document.getElementById('login').addEventListener('submit', loginUser);
diff --git a/UI/index.html b/UI/index.html
@@ -8,7 +8,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" media="screen" href="./assets/css/main.css" />
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
-  <script src="main.js"></script>
 </head>
 
 <body>
@@ -21,18 +20,7 @@
     <div class="nav-2">
         <h2>Hello awesome!</h2>
     </div>
-
-    <!-- <div class="card-div">
-      <ul class="card">
-        <li class="card-item item6"></li>
-        <li class="card-item item5"></li>
-        <li class="card-item item4"></li>
-        <li class="card-item item3"></li>
-        <li class="card-item item2"></li>
-        <li class="card-item item1"></li>
-      </ul>
-    </div> -->
-    <section class="login-form">
+    <section class="login-form" id="login">
       <form action="" autocomplete="on">
         <h1>Login Here</h1>
         <div>
@@ -41,12 +29,13 @@ <h1>Login Here</h1>
         <div>
           <input type="password" placeholder="Password" required="" id="password" />
         </div>
-          <button class="button">Login</button>
+        <button type="submit" class="button">Login</button>
+          <!-- <button class="button" id="loginbutton">Login</button> -->
           <!--  <a href="#">Lost your password?</a> -->
-        </div>
       </form>
     </section>
   </div>
+  <script type="text/javascript" src="assets/js/login.js"></script>
 </body>
 
 </html>
diff --git a/app.js b/app.js
@@ -2,6 +2,7 @@ import express from 'express';
 import bodyParser from 'body-parser';
 import cookieParser from 'cookie-parser';
 import logger from 'morgan';
+import cors from 'cors';
 import router from './server/routes/index';
 
 const app = express();
@@ -13,6 +14,7 @@ app.use(logger('dev'));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
+app.use(cors());
 
 // use body parser to parse request
 app.use(bodyParser.urlencoded({ extended: true }));