aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--interface/public/login.js39
-rw-r--r--interface/public/logout.js5
-rw-r--r--interface/public/router.js7
-rw-r--r--interface/public/verify.js22
-rw-r--r--interface/routes/api/index.js5
-rw-r--r--interface/routes/index.js14
-rw-r--r--interface/views/citizens.ejs51
-rw-r--r--interface/views/index.ejs95
-rw-r--r--interface/views/partials/head.ejs2
-rw-r--r--interface/views/partials/navbar.ejs39
-rw-r--r--interface/views/partials/scripts.ejs9
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>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 03:48:42 +0000