ebenezerdon · ebenezerdon · Nov 21, 2018 · Nov 21, 2018 · Nov 21, 2018 · Nov 21, 2018
diff --git a/UI/assets/css/lib/snackbar.css b/UI/assets/css/lib/snackbar.css
@@ -0,0 +1,35 @@
+#status-msg {
+    display: none;
+    max-width: 50px;
+    height: 40px;
+    margin: auto;
+    padding-top: 20px;
+    background-color: #7c0000;
+    color: #fff;
+    font-size: 17px;
+    text-align: center;
+    border-radius: 2px;
+    position: fixed;
+    z-index: 22;
+    left: 0;
+    right:0;
+    top: 150px;
+    animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s;
+}
+
+@keyframes fadein {
+    from {font-size: 0px; opacity: 0;}
+    to {font-size: 0px; opacity: 1;}
+}
+
+@keyframes expand {
+    from {font-size: 0px; min-width: 50px}
+    to {min-width: 350px}
+}
+
+@keyframes stay {
+    from {min-width: 350px}
+    to {min-width: 350px}
+}
+
+/* @Keyframes inspired by https://codepen.io/kipp0/pen/pPNrrj */
diff --git a/UI/assets/css/main.css b/UI/assets/css/main.css
@@ -6,6 +6,7 @@
 @import "lib/form.css";
 @import "lib/nav2.css";
 @import "lib/search.css";
+@import "lib/snackbar.css";
 
 
 body {

diff --git a/UI/assets/css/snackbar.css b/UI/assets/css/snackbar.css
diff --git a/UI/assets/js/indexpage.js → UI/assets/js/checkLogin.js b/UI/assets/js/indexpage.js → UI/assets/js/checkLogin.js
diff --git a/UI/assets/js/login.js b/UI/assets/js/login.js
@@ -1,3 +1,15 @@
+const addStatusMessageDiv = () => {
+  document.body.innerHTML += '<div id="status-msg"></div>';
+};
+
+const snackbar = (text) => {
+  const statusMessageDiv = document.getElementById('status-msg');
+  statusMessageDiv.innerHTML = text;
+  statusMessageDiv.style.display = 'block';
+  // eslint-disable-next-line no-return-assign
+  setTimeout(() => statusMessageDiv.style.display = 'none', 4000);
+};
+
 const loginUser = (e) => {
   e.preventDefault();
   const loginDetails = {
@@ -24,8 +36,13 @@ const loginUser = (e) => {
         }
         window.location.replace('./pages/attendantdashboard.html');
       }
+      snackbar(data.message);
     })
-    .catch(err => console.log(err));
+    .catch((err) => {
+      console.log(err);
+      snackbar('There was an error. Can you try again?');
+    });
 };
 
-document.getElementById('login').addEventListener('submit', loginUser);
+window.onload = addStatusMessageDiv();
+document.getElementById('login').addEventListener('submit', loginUser);
diff --git a/UI/assets/js/main.js b/UI/assets/js/main.js
@@ -1,7 +1,17 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-return-assign */
 const checkLoginstatus = () => {
   if (!localStorage.accesstoken) {
     window.location.replace('../index.html');
   }
 };
 
+const snackbar = (text) => {
+  document.body.innerHTML += '<div id="status-msg"></div>';
+  const statusMessageDiv = document.getElementById('status-msg');
+  statusMessageDiv.innerHTML = text;
+  statusMessageDiv.style.display = 'block';
+  setTimeout(() => statusMessageDiv.style.display = 'none', 4000);
+};
+
 window.onload = checkLoginstatus();
diff --git a/UI/assets/js/snackbar.js b/UI/assets/js/snackbar.js
diff --git a/UI/index.html b/UI/index.html
@@ -8,7 +8,7 @@
   <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 type="text/javascript" src="assets/js/indexpage.js"></script>
+  <script type="text/javascript" src="assets/js/checkLogin.js"></script>
 </head>
 
 <body>
@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="nav-2">
-        <h2>Hello awesome!</h2>
+        <h2>Hello Awesome!</h2>
     </div>
     <section class="login-form" id="login">
       <form action="" autocomplete="on">
@@ -34,7 +34,7 @@ <h1>Login Here</h1>
       </form>
     </section>
   </div>
-  <script type="text/javascript" src="../assets/js/snackbar.js"></script>
+
   <script type="text/javascript" src="assets/js/login.js"></script>
 </body>
 

diff --git a/server/routes/controllers/usersController.js b/server/routes/controllers/usersController.js
@@ -17,7 +17,10 @@ const getOneUser = (req, res) => {
   const text = 'SELECT * FROM users WHERE id = $1';
   pool.query(text, [req.params.id], (err, data) => {
     if (!data.rowCount) {
-      return res.status(404).json('Hi! There\'s no user with that id');
+      return res.status(404).json({
+        message: 'Hi! There\'s no user with that id',
+        success: false,
+      });
     }
     if (err) throw err;
     return res.status(200).json(data.rows[0]);
@@ -129,7 +132,12 @@ const loginUser = (req, res) => {
     ],
   };
   pool.query(query).then((data) => {
-    if (!data.rowCount) return (res.status(404).json('Hi! Can you check again? Ther\'s no user with those details'));
+    if (!data.rowCount) {
+      return res.status(404).json({
+        message: 'Hi! Can you check again? Ther\'s no user with those details',
+        success: false,
+      });
+    }
     const token = jwt.sign(data.rows[0], secret, {
       expiresIn: '24hrs',
     });
@@ -151,4 +159,4 @@ export {
   deleteUser,
   loginUser,
   getMyProfile,
-};
+}