From 50c8c294e2e23566887a47a3180c180675d64add Mon Sep 17 00:00:00 2001 From: Bobby Date: Sun, 1 May 2022 00:17:22 -0400 Subject: login function with a new main page --- interface/public/login.js | 39 +++++++++++++++ interface/public/logout.js | 5 ++ interface/public/router.js | 7 +++ interface/public/verify.js | 22 +++++++++ interface/routes/api/index.js | 5 +- interface/routes/index.js | 14 ++++-- interface/views/citizens.ejs | 51 +++++++++++++++++++ interface/views/index.ejs | 95 +++++++++++++++++++++--------------- interface/views/partials/head.ejs | 2 - interface/views/partials/navbar.ejs | 39 ++------------- interface/views/partials/scripts.ejs | 9 ++++ 11 files changed, 204 insertions(+), 84 deletions(-) create mode 100644 interface/public/login.js create mode 100644 interface/public/logout.js create mode 100644 interface/public/router.js create mode 100644 interface/public/verify.js create mode 100644 interface/views/citizens.ejs create mode 100644 interface/views/partials/scripts.ejs (limited to 'interface') 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 @@ + + + + <%- include('partials/head') %> + + + + <%- include('partials/navbar') %> + + + + + + + + + + + + + + + + + + + + <% for(var i=0; i < citizens.length; i++) { %> + + + + + + + + + + + + + + + + <% } %> + +
Citizen IDFirst NameMiddle NameLast NameAddressMobile NumberDate of BirthGenderMarital StatusDisabledDisabled PercentageCasteVillage ID
<%= citizens[i].citizen_id %><%= citizens[i].first_name %> + <%= citizens[i].middle_name ? citizens[i].middle_name : '-' %> + <%= citizens[i].last_name %><%= citizens[i].address %><%= citizens[i].mobile_num %><%= citizens[i].dob %><%= citizens[i].gender %><%= citizens[i].marital_status %><%= citizens[i].disabled %><%= citizens[i].disbaled_percentage %><%= citizens[i].caste %><%= citizens[i].village_id %>
+ + <%- include('partials/scripts') %> + 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 @@ +
+ +
Log in to continue
+
+
+
+ + +
+
+ + +
+
Submit
+
+
+
+
<%- include('partials/navbar') %> - - - - - - - - - - - - - - - - - - - - <% for(var i=0; i < citizens.length; i++) { %> - - - - - - - - - - - - - - - - <% } %> - -
Citizen IDFirst NameMiddle NameLast NameAddressMobile NumberDate of BirthGenderMarital StatusDisabledDisabled PercentageCasteVillage ID
<%= citizens[i].citizen_id %><%= citizens[i].first_name %> - <%= citizens[i].middle_name ? citizens[i].middle_name : '-' %> - <%= citizens[i].last_name %><%= citizens[i].address %><%= citizens[i].mobile_num %><%= citizens[i].dob %><%= citizens[i].gender %><%= citizens[i].marital_status %><%= citizens[i].disabled %><%= citizens[i].disbaled_percentage %><%= citizens[i].caste %><%= citizens[i].village_id %>
+
+
+
+
+
Citizens
+
+ Provides the details of all the citizens in the database +
+
+
+
+ View Data +
+
+
+
+
+ <%- include('partials/scripts') %> + + 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 @@ Welfare Schemes | <%= title %> - - 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 @@
- +
- - Log in - + Log in + Log out
-
- -
- Log in to continue -
-
-
-
- - -
-
- - -
-
-
- -
-
- Cancel -
-
- Continue - -
-
-
- 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 @@ + + + + + -- cgit v1.2.3