login function with a new main page

11 files changed, 204 insertions, 84 deletions

diff --git a/interface/public/login.js b/interface/public/login.js
new file mode 100644
index 0000000..3396f81
--- /dev/null
+++ b/interface/public/login.js
@@ -0,0 +1,39 @@
+$(".ui.form").form({
+  fields: {
+    username: "empty",
+    password: "empty",
+  },
+});
+
+function login(event) {
+  event.preventDefault();
+  const username = $("#username").val().trim();
+  const password = $("#password").val().trim();
+
+  // make sure username is a-zA-Z0-9
+  if (!username.match(/^[a-zA-Z0-9]+$/)) {
+    alert("Username must be alphanumeric");
+    return;
+  } else {
+    // make request to /api/login
+    fetch("/api/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        username,
+        password,
+      }),
+    }).then((response) => {
+      if (response.status === 200) {
+        response.json().then((data) => {
+          localStorage.setItem("token", data.token);
+          window.location.href = "/";
+        });
+      } else {
+        alert("Invalid username or password");
+      }
+    });
+  }
+}
diff --git a/interface/public/logout.js b/interface/public/logout.js
new file mode 100644
index 0000000..401f06d
--- /dev/null
+++ b/interface/public/logout.js
@@ -0,0 +1,5 @@
+function logout(event) {
+    event.preventDefault();
+    localStorage.removeItem("token");
+    window.location.href = "/";
+}
diff --git a/interface/public/router.js b/interface/public/router.js
new file mode 100644
index 0000000..23f8115
--- /dev/null
+++ b/interface/public/router.js
@@ -0,0 +1,7 @@
+function route(page) {
+    if (!localStorage.getItem("token")) {
+        $("#loginButton").click();
+    } else {
+        window.location.href = page;
+    }
+}
\ No newline at end of file
diff --git a/interface/public/verify.js b/interface/public/verify.js
new file mode 100644
index 0000000..ca7b47f
--- /dev/null
+++ b/interface/public/verify.js
@@ -0,0 +1,22 @@
+const token = localStorage.getItem("token");
+if (token) {
+    fetch("/api/verify", {
+        method: "POST",
+        headers: {
+            Authorization: `Bearer ${token}`,
+        }
+    }).then(response => {
+        if (response.status === 200) {
+            console.log(response.json());
+            $('#loginButton').hide();
+            $('#logoutButton').show();
+        } else {
+            window.location.href = "/";
+            $('#loginButton').show();
+            $('#logoutButton').hide();
+        }
+    });
+} else {
+    $('#loginButton').show();
+    $('#logoutButton').hide();
+}
diff --git a/interface/routes/api/index.js b/interface/routes/api/index.js
index bad2706..27f9c98 100644
--- a/interface/routes/api/index.js
+++ b/interface/routes/api/index.js
@@ -5,8 +5,9 @@ const jwt = require("jsonwebtoken");
 const bcyrpt = require("bcryptjs");
 const userController = require("../../controllers/users.controller");
 const { verifyJWT } = require("../../functions");
+require('dotenv').config();
 
-router.get("/verify", (req, res) => {
+router.post("/verify", (req, res) => {
   // get token from auth header
   console.log(req.headers)
   const token = req.headers.authorization;
@@ -62,7 +63,7 @@ router.post("/login", (req, res) => {
       };
       jwt.sign(
         payload,
-        process.env.SECRET_KEY,
+        process.env.JWT_SECRET,
         {
           expiresIn: 3600,
         },
diff --git a/interface/routes/index.js b/interface/routes/index.js
index 057e1df..fcc7c14 100644
--- a/interface/routes/index.js
+++ b/interface/routes/index.js
@@ -6,13 +6,19 @@ const api = require('./api');
 // Setup api routes
 router.use('/api', api);
 
-// Setup main route
-router.get("/", (req, res) => {
+
+router.get('/', (req, res) => {
+    res.render('index', {
+        title: 'Home Page'
+    });
+});
+
+router.get("/citizens", (req, res) => {
     // Get the citizens from the database
     citizensController.findXCitizens().then(citizens => {
-        res.render("index", {
+        res.render("citizens", {
             citizens: citizens,
-            title: "Home"
+            title: "Citizens Data"
         });
     });
 });
diff --git a/interface/views/citizens.ejs b/interface/views/citizens.ejs
new file mode 100644
index 0000000..97c98fa
--- /dev/null
+++ b/interface/views/citizens.ejs
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <%- include('partials/head') %>
+  </head>
+
+  <body>
+    <%- include('partials/navbar') %>
+    <table class="ui selectable table">
+      <thead>
+        <tr>
+          <th>Citizen ID</th>
+          <th>First Name</th>
+          <th>Middle Name</th>
+          <th>Last Name</th>
+          <th>Address</th>
+          <th>Mobile Number</th>
+          <th>Date of Birth</th>
+          <th>Gender</th>
+          <th>Marital Status</th>
+          <th>Disabled</th>
+          <th>Disabled Percentage</th>
+          <th>Caste</th>
+          <th>Village ID</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% for(var i=0; i < citizens.length; i++) { %>
+        <tr>
+          <td><%= citizens[i].citizen_id %></td>
+          <td><%= citizens[i].first_name %></td>
+          <td>
+            <%= citizens[i].middle_name ? citizens[i].middle_name : '-' %>
+          </td>
+          <td><%= citizens[i].last_name %></td>
+          <td><%= citizens[i].address %></td>
+          <td><%= citizens[i].mobile_num %></td>
+          <td><%= citizens[i].dob %></td>
+          <td><%= citizens[i].gender %></td>
+          <td><%= citizens[i].marital_status %></td>
+          <td><%= citizens[i].disabled %></td>
+          <td><%= citizens[i].disbaled_percentage %></td>
+          <td><%= citizens[i].caste %></td>
+          <td><%= citizens[i].village_id %></td>
+        </tr>
+        <% } %>
+      </tbody>
+    </table>
+  </body>
+  <%- include('partials/scripts') %>
+</html>
diff --git a/interface/views/index.ejs b/interface/views/index.ejs
index 827334b..6848aa3 100644
--- a/interface/views/index.ejs
+++ b/interface/views/index.ejs
@@ -5,46 +5,61 @@
   </head>
 
   <body>
+    <div class="ui modal login">
+      <i class="close icon"></i>
+      <div class="header">Log in to continue</div>
+      <div
+        class="ui padded container segment"
+        style="border: none; box-shadow: none"
+      >
+        <form class="ui form" method="post" onsubmit="login(event)">
+          <div class="field">
+            <label>Username</label>
+            <input
+              placeholder="Username"
+              name="username"
+              type="text"
+              autocomplete="off"
+              id="username"
+            />
+          </div>
+          <div class="field">
+            <label>Password</label>
+            <input
+              type="password"
+              name="password"
+              placeholder="password"
+              id="password"
+            />
+          </div>
+          <div class="ui primary submit button" id="submit">Submit</div>
+          <div class="ui error message"></div>
+        </form>
+      </div>
+    </div>
     <%- include('partials/navbar') %>
-    <table class="ui selectable table">
-      <thead>
-        <tr>
-          <th>Citizen ID</th>
-          <th>First Name</th>
-          <th>Middle Name</th>
-          <th>Last Name</th>
-          <th>Address</th>
-          <th>Mobile Number</th>
-          <th>Date of Birth</th>
-          <th>Gender</th>
-          <th>Marital Status</th>
-          <th>Disabled</th>
-          <th>Disabled Percentage</th>
-          <th>Caste</th>
-          <th>Village ID</th>
-        </tr>
-      </thead>
-      <tbody>
-        <% for(var i=0; i < citizens.length; i++) { %>
-        <tr>
-          <td><%= citizens[i].citizen_id %></td>
-          <td><%= citizens[i].first_name %></td>
-          <td>
-            <%= citizens[i].middle_name ? citizens[i].middle_name : '-' %>
-          </td>
-          <td><%= citizens[i].last_name %></td>
-          <td><%= citizens[i].address %></td>
-          <td><%= citizens[i].mobile_num %></td>
-          <td><%= citizens[i].dob %></td>
-          <td><%= citizens[i].gender %></td>
-          <td><%= citizens[i].marital_status %></td>
-          <td><%= citizens[i].disabled %></td>
-          <td><%= citizens[i].disbaled_percentage %></td>
-          <td><%= citizens[i].caste %></td>
-          <td><%= citizens[i].village_id %></td>
-        </tr>
-        <% } %>
-      </tbody>
-    </table>
+    <div class="ui main container segment">
+      <div class="ui cards">
+        <div class="card">
+          <div class="content">
+            <div class="header">Citizens</div>
+            <div class="description">
+              Provides the details of all the citizens in the database
+            </div>
+          </div>
+          <div class="extra content">
+            <div class="ui basic green button" onclick="route('citizens')">
+              View Data
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </body>
+  <%- include('partials/scripts') %>
+  <script>
+    $(".ui.dropdown").dropdown();
+    $(".login.modal").modal("attach events", ".loginButton", "show");
+  </script>
+  <script src="/login.js"></script>
 </html>
diff --git a/interface/views/partials/head.ejs b/interface/views/partials/head.ejs
index c43233a..c4b963e 100644
--- a/interface/views/partials/head.ejs
+++ b/interface/views/partials/head.ejs
@@ -3,5 +3,3 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Welfare Schemes | <%= title %></title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
-<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
diff --git a/interface/views/partials/navbar.ejs b/interface/views/partials/navbar.ejs
index 2939438..91880fb 100644
--- a/interface/views/partials/navbar.ejs
+++ b/interface/views/partials/navbar.ejs
@@ -45,44 +45,11 @@
   <div class="right menu">
     <div class="item">
       <div class="ui icon input">
-        <input type="text" placeholder="Search...">
+        <input type="text" placeholder="Search..." />
         <i class="search link icon"></i>
       </div>
     </div>
-    <a class="ui item loginButton">
-      Log in
-    </a>
+    <a class="ui item loginButton" id="loginButton"> Log in </a>
+    <a class="ui item loginButton" id="logoutButton" onclick="logout(event)"> Log out</a>
   </div>
 </div>
-<div class="ui modal login">
-  <i class="close icon"></i>
-  <div class="header">
-    Log in to continue
-  </div>
-  <div class="ui padded container segment" style="border: none; box-shadow: none;">
-    <div class="ui form ">
-    <div class="field">
-      <label>Username</label>
-      <input type="text" placeholder="Username">
-    </div>
-    <div class="field">
-      <label>Password</label>
-      <input type="password" placeholder="Password">
-    </div>
-  </div>
-  </div>
-  
-  <div class="actions">
-    <div class="ui black deny button">
-      Cancel
-    </div>
-    <div class="ui positive right labeled icon button">
-      Continue
-      <i class="checkmark icon"></i>
-    </div>
-  </div>
-</div>
-<script>
-  $(".ui.dropdown").dropdown();
-  $(".login.modal").modal("attach events", ".loginButton", "show");
-</script>
diff --git a/interface/views/partials/scripts.ejs b/interface/views/partials/scripts.ejs
new file mode 100644
index 0000000..a90467a
--- /dev/null
+++ b/interface/views/partials/scripts.ejs
@@ -0,0 +1,9 @@
+<script
+  src="https://code.jquery.com/jquery-3.1.1.min.js"
+  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
+  crossorigin="anonymous"
+></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
+<script src="/verify.js"></script>
+<script src="/router.js"></script>
+<script src="/logout.js"></script>