Created the separation of admin and regular user. Added the ability for a regular user to be added in

Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai 2022-12-15 14:50:58 +00:00
parent 5a71f98a9a
commit 1f94dcb709
22 changed files with 314 additions and 173 deletions

View File

@ -9,13 +9,13 @@
<nav> <nav>
<ul> <ul>
<li><a href="search.html" class="btn">Search</a></li> <li><a href="search.html" class="btn">Search</a></li>
<li><a href="newVehicle.html" class="btn active">Add new vehicle</a></li> <li><a href="addVehicle.html" class="btn active">Add new vehicle</a></li>
<li><a href="newReport.html" class="btn">Create new report</a></li> <li><a href="newReport.html" class="btn">Create new report</a></li>
<li><a href="newUser.html" class="btn">Create new user</a></li> <li class="admin"><a href="newUser.html" class="btn">Create new user</a></li>
<li><a href="addFines.html" class="btn">Add fines</a></li> <li class="admin"><a href="addFines.html" class="btn">Add Fines</a></li>
<li><a href="viewLog.html" class="btn">View log</a></li> <li class="admin"><a href="viewLog.html" class="btn">View log</a></li>
<li><a href="changePassword.html" class="btn">Change password</a></li> <li><a href="changePassword.html" class="btn">Change password</a></li>
<li><a href="#" class="btn">Logout</a></li> <li><a id="logout" class="btn">Logout</a></li>
</ul> </ul>
</nav> </nav>
@ -74,6 +74,7 @@
</form> </form>
</main> </main>
<script src="js/checkUser.js"></script>
<script src="js/newVehicle.js"></script> <script src="js/newVehicle.js"></script>
</body> </body>
</html> </html>

View File

@ -3,19 +3,19 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Change Password</title> <title>Change Password</title>
<link rel="stylesheet" href="css/changePassword.css"> <link rel="stylesheet" href="css/nav.css">
</head> </head>
<body> <body>
<nav> <nav>
<ul> <ul>
<li><a href="search.html" class="btn">Search</a></li> <li><a href="search.html" class="btn">Search</a></li>
<li><a href="newVehicle.html" class="btn">Add new vehicle</a></li> <li><a href="addVehicle.html" class="btn">Add new vehicle</a></li>
<li><a href="newReport.html" class="btn">Create new report</a></li> <li><a href="newReport.html" class="btn">Create new report</a></li>
<li><a href="newUser.html" class="btn">Create new user</a></li> <li class="admin"><a href="newUser.html" class="btn">Create new user</a></li>
<li><a href="addFines.html" class="btn">Add fines</a></li> <li class="admin"><a href="addFines.html" class="btn">Add Fines</a></li>
<li><a href="viewLog.html" class="btn">View log</a></li> <li class="admin"><a href="viewLog.html" class="btn">View log</a></li>
<li><a href="changePassword.html" class="btn active">Change password</a></li> <li><a href="changePassword.html" class="btn active">Change password</a></li>
<li><a href="#" class="btn">Logout</a></li> <li><a id="logout" class="btn">Logout</a></li>
</ul> </ul>
</nav> </nav>

View File

@ -1,18 +0,0 @@
@import "nav.css";
main {
padding-top: 2.5em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
main form {
width: 15%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 1em;
}

View File

@ -24,6 +24,7 @@ div.login {
} }
form.loginForm { form.loginForm {
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;

View File

@ -37,3 +37,7 @@ nav ul li a:hover {
nav ul li a.active { nav ul li a.active {
background-color: var(--hover); background-color: var(--hover);
} }
nav ul li.admin {
display: none;
}

View File

@ -1,13 +1,5 @@
@import "nav.css"; @import "nav.css";
main {
padding-top: 2.5em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
main .formGroup { main .formGroup {
width: 30%; width: 30%;
display: flex; display: flex;
@ -20,11 +12,7 @@ main .formGroup {
main form { main form {
width: 100%; width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
gap: 1em;
flex: 1; flex: 1;
} }

View File

@ -1,13 +1,5 @@
@import "nav.css"; @import "nav.css";
main {
padding-top: 2.5em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.searchContainer { div.searchContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -18,11 +10,8 @@ div.searchContainer {
main form { main form {
width: 100%; width: 100%;
display: flex;
flex-direction: row; flex-direction: row;
justify-content: center;
align-items: center; align-items: center;
gap: 1em;
} }
main#search form input:not([type="submit"]) { main#search form input:not([type="submit"]) {

View File

@ -7,7 +7,7 @@
--secondary: hsl(210, 100%, 95%, 1); --secondary: hsl(210, 100%, 95%, 1);
--accent: hsla(15, 99%, 57%, 1); --accent: hsla(15, 99%, 57%, 1);
--light: hsla(90, 8%, 85%, 1); --light: hsla(90, 8%, 85%, 1);
--mutedBlack: hsla(0, 0%, 0%, 0.25) --mutedBlack: hsla(0, 0%, 0%, 0.25);
} }
* { * {
@ -74,6 +74,68 @@ input:not([type="submit"]):hover, form .formControl textarea:hover {
border: 4px solid var(--hover); border: 4px solid var(--hover);
} }
.checkContainer {
display: block;
position: relative;
margin-bottom: 0.75em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkContainer input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 1.25em;
left: 0;
height: 1.5em;
width: 1.5em;
background-color: #eee;
}
.checkContainer:hover input ~ .checkmark {
background-color: #ccc;
}
.checkContainer input:checked ~ .checkmark {
background-color: var(--primary);
}
.checkContainer:hover input:checked ~ .checkmark {
background-color: var(--hover);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.checkContainer input:checked ~ .checkmark:after {
display: block;
}
.checkContainer .checkmark:after {
left: 9px;
top: 5px;
width: 0.35em;
height: 0.6em;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.selectDiv { .selectDiv {
position: relative; position: relative;
min-width: 300px; min-width: 300px;
@ -164,6 +226,24 @@ table th {
color: #FFFFFF; color: #FFFFFF;
} }
main {
padding-top: 2.5em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
main form {
width: 15%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 1em;
}
main #title { main #title {
align-self: flex-start; align-self: flex-start;
margin-left: 1em;
} }

View File

@ -6,7 +6,7 @@ header('Content-Type: application/json');
if (isset($_SESSION["username"])) if (isset($_SESSION["username"]))
{ {
$conn = dbConn(); $conn = dbConn();
$stmt = $conn->prepare("SELECT People_ID, People_name FROM People"); $stmt = $conn->prepare("SELECT People_ID, People_name, People_licence FROM People");
$stmt->execute(); $stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC); $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode(array("message" => "ok", "owners" => $result)); echo json_encode(array("message" => "ok", "owners" => $result));

View File

@ -0,0 +1,11 @@
<?php
session_start();
header('Content-Type: application/json');
if ($_SESSION["admin"])
{
echo json_encode(array("message" => "ok", "admin" => $_SESSION["admin"]));
}
else
{
echo json_encode(array("message" => "not logged in as admin"));
}

View File

@ -3,7 +3,7 @@ session_start();
header('Content-Type: application/json'); header('Content-Type: application/json');
if (isset($_SESSION["username"])) if (isset($_SESSION["username"]))
{ {
echo json_encode(array("message" => "ok")); echo json_encode(array("message" => "ok", "username" => $_SESSION["username"], "admin" => $_SESSION["admin"]));
} }
else else
{ {

View File

@ -1,15 +1,35 @@
// document.addEventListener("DOMContentLoaded", () => document.addEventListener("DOMContentLoaded", () =>
// { {
// fetch("isLoggedIn.php").then(res => res.json().then(json => fetch("isLoggedIn.php").then(res => res.json().then(json =>
// { {
// if (json.message !== "ok") if (json.message !== "ok")
// { {
// window.location.href = "index.html"; window.location.href = "./";
// } }
// else else
// { {
// document.querySelector("#title h1").innerText = "Logged in as: " + json.username; document.querySelector("#title h1").innerText = "Logged in as: " + json.username;
// } let adminLinks = document.querySelectorAll(".admin");
// })); for (let adminLink of adminLinks)
// }); {
if (json.admin === true)
{
adminLink.style.display = "block";
}
}
}
}));
});
document.querySelector("#logout").addEventListener("click", e =>
{
e.preventDefault();
fetch("logout.php").then(res => res.json().then(json =>
{
if (json.message === "ok")
{
window.location.href = "./";
}
}));
});

View File

@ -1,5 +1,16 @@
// Login stuff // Login stuff
document.addEventListener("DOMContentLoaded", () =>
{
fetch("isLoggedIn.php").then(res => res.json().then(json =>
{
if (json.message === "ok")
{
window.location.href = "./search.html";
}
}));
});
document.querySelector("#login").addEventListener("submit", e => document.querySelector("#login").addEventListener("submit", e =>
{ {
e.preventDefault(); e.preventDefault();

View File

@ -0,0 +1,51 @@
// create new a user stuff
document.addEventListener("DOMContentLoaded", () =>
{
fetch("isAdmin.php").then(res => res.json().then(json =>
{
if (json.message !== "ok")
{
window.location.href = "./search.html";
}
}));
});
document.querySelector("#createUser").addEventListener("submit", e =>
{
e.preventDefault();
let username = document.querySelector("#username").value;
let password = document.querySelector("#pass").value;
let rePass = document.querySelector("#rePass").value;
let admin = document.querySelector("#isAdmin").checked;
if (password === "" || rePass === "" || username === "")
{
alert("Please fill in all fields");
}
else if (password !== rePass)
{
alert("Passwords do not match");
}
else
{
let data = new FormData();
data.append("username", username);
data.append("password", password);
data.append("admin", admin);
fetch("newUser.php", {
method: "POST",
body: data
}).then(res => res.json().then(json =>
{
if (json.message === "ok")
{
alert("User created");
}
else
{
alert("Error creating user");
}
}));
}
});

View File

@ -8,7 +8,7 @@ document.addEventListener("DOMContentLoaded", () =>
let body = ""; let body = "";
for (const owner of json.owners) for (const owner of json.owners)
{ {
body += `<option value="${owner.People_ID}">${owner.People_name}</option>`; body += `<option value="${owner.People_ID}">${owner.People_name} - ${owner.People_licence}</option>`;
} }
body += `<option value="new">New Owner</option>`; body += `<option value="new">New Owner</option>`;
document.querySelector("#owner").innerHTML = body; document.querySelector("#owner").innerHTML = body;

View File

@ -28,23 +28,25 @@ document.querySelector("#searchForm").addEventListener("submit", e =>
{ {
document.querySelector("#searchResults thead tr").innerHTML = ""; document.querySelector("#searchResults thead tr").innerHTML = "";
document.querySelector("#searchResults tbody").innerHTML = ""; document.querySelector("#searchResults tbody").innerHTML = "";
console.log(Object.keys(json.data[0]));
Object.keys(json.data[0]).forEach(key => for (const key of Object.keys(json.data[0]))
{ {
let header = key.substring(key.indexOf("_") + 1) let header = key.substring(key.indexOf("_") + 1)
header = header.charAt(0).toUpperCase() + header.slice(1); header = header.charAt(0).toUpperCase() + header.slice(1);
document.querySelector("#searchResults thead tr").innerHTML += `<th>${header}</th>`; document.querySelector("#searchResults thead tr").innerHTML += `<th>${header}</th>`;
}); }
let body = ""; let body = "";
json.data.forEach(row => for (const row of json.data)
{ {
body += "<tr>"; body += "<tr>";
Object.keys(row).forEach(key => for (const key of Object.keys(row))
{ {
body += `<td>${(row[key] === "null" || row[key] === null) ? "N/A" : row[key]}</td>`; body += `<td>${(row[key] === "null" || row[key] === null) ? "N/A" : row[key]}</td>`;
}); }
body += "</tr>"; body += "</tr>";
}); }
document.querySelector("#searchResults tbody").innerHTML = body; document.querySelector("#searchResults tbody").innerHTML = body;
} }

View File

@ -11,10 +11,12 @@ $stmt = $conn->prepare("SELECT * FROM Users WHERE Users_username = :username AND
$stmt->bindParam(":username", $username); $stmt->bindParam(":username", $username);
$stmt->bindParam(":password", $password); $stmt->bindParam(":password", $password);
$stmt->execute(); $stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
if (count($stmt->fetchAll(PDO::FETCH_ASSOC)) > 0) if (count($result) > 0)
{ {
$_SESSION["username"] = $username; $_SESSION["username"] = $username;
$_SESSION["admin"] = $result[0]["Users_admin"] === "1";
echo json_encode(array("message" => "ok")); echo json_encode(array("message" => "ok"));
} }
else else

View File

@ -0,0 +1,4 @@
<?php
session_start();
session_destroy();
echo json_encode(array("message" => "ok"));

View File

@ -2,9 +2,56 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Title</title> <title>Create New User</title>
<link rel="stylesheet" href="css/nav.css">
</head> </head>
<body> <body>
<nav>
<ul>
<li><a href="search.html" class="btn">Search</a></li>
<li><a href="addVehicle.html" class="btn">Add new vehicle</a></li>
<li><a href="newReport.html" class="btn">Create new report</a></li>
<li class="admin"><a href="newUser.html" class="btn active">Create new user</a></li>
<li class="admin"><a href="addFines.html" class="btn">Add Fines</a></li>
<li class="admin"><a href="viewLog.html" class="btn">View log</a></li>
<li><a href="changePassword.html" class="btn">Change password</a></li>
<li><a id="logout" class="btn">Logout</a></li>
</ul>
</nav>
<main>
<header id="title">
<h1></h1>
</header>
<form method="POST" id="createUser">
<div class="formControl">
<label for="username">Username</label>
<input type="text" name="username" id="username">
</div>
<div class="formControl">
<label for="pass">Password</label>
<input type="password" name="pass" id="pass">
</div>
<div class="formControl">
<label for="rePass">Retype Password</label>
<input type="password" name="rePass" id="rePass">
</div>
<div class="formControl">
<label for="isAdmin" class="checkContainer">Is Admin
<input type="checkbox" name="isAdmin" id="isAdmin">
<span class="checkmark"></span>
</label>
</div>
<input type="submit" value="Create New User" class="btn btnPrimary" style="margin-top: 1em;">
</form>
</main>
<script src="js/checkUser.js"></script>
<script src="js/newUser.js"></script>
</body> </body>
</html> </html>

View File

@ -0,0 +1,29 @@
<?php
session_start();
require_once 'config.php';
header('Content-Type: application/json');
if (isset($_SESSION["username"]) && isset($_SESSION["admin"]))
{
$username = $_POST["username"];
$password = $_POST["password"];
$admin = $_POST["admin"];
$conn = dbConn();
$stmt = $conn->prepare("INSERT INTO Users (Users_username, Users_password, Users_admin) VALUES (:username, :password, :admin)");
$stmt->bindParam(":username", $username);
$stmt->bindParam(":password", $password);
$isAdmin = $admin ? 1 : 0;
$stmt->bindParam(":admin", $isAdmin);
$stmt->execute();
echo json_encode(array("message" => "ok", "admin" => $admin));
}
else if (isset($_SESSION["username"]) && !isset($_SESSION["admin"]))
{
echo json_encode(array("message" => "not logged in as admin"));
}
else
{
echo json_encode(array("message" => "Not logged in "));
}

View File

@ -1,81 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add New Vehicle</title>
<link rel="stylesheet" href="css/newVehicle.css">
</head>
<body>
<nav>
<ul>
<li><a href="search.html" class="btn">Search</a></li>
<li><a href="newVehicle.html" class="btn active">Add new vehicle</a></li>
<li><a href="newReport.html" class="btn">Create new report</a></li>
<li><a href="newUser.html" class="btn">Create new user</a></li>
<li><a href="addFines.html" class="btn">Add fines</a></li>
<li><a href="viewLog.html" class="btn">View log</a></li>
<li><a href="changePassword.html" class="btn">Change password</a></li>
<li><a href="#" class="btn">Logout</a></li>
</ul>
</nav>
<main>
<header id="title">
<h1></h1>
</header>
<div class="formGroup">
<form method="post" id="vehicleForm">
<div class="formControl">
<label for="plateNum">Plate Number</label>
<input type="text" name="plateNum" id="plateNum">
</div>
<div class="formControl">
<label for="make">Make</label>
<input type="text" name="make" id="make">
</div>
<div class="formControl">
<label for="model">Model</label>
<input type="text" name="model" id="model">
</div>
<div class="formControl">
<label for="owner">Owner</label>
<div class="selectDiv">
<select name="owner" id="owner">
<option value="james-smith">James Smith</option>
</select>
</div>
</div>
<input type="submit" value="Add new vehicle" class="btn btnPrimary">
</form>
<form method="post" id="ownerForm">
<div class="formSpace">
<div class="formControl">
<label for="name">Name</label>
<input type="text" name="name" id="name">
</div>
<div class="formControl">
<label for="address">Address</label>
<input type="text" name="address" id="address">
</div>
<div class="formControl">
<label for="licence">Licence number</label>
<input type="text" name="licence" id="licence">
</div>
</div>
<div class="formSpace">
<input type="submit" value="Add new Owner" class="btn btnPrimary">
</div>
</form>
</div>
</main>
<script src=""></script>
</body>
</html>

View File

@ -10,13 +10,13 @@
<nav> <nav>
<ul> <ul>
<li><a href="search.html" class="btn active">Search</a></li> <li><a href="search.html" class="btn active">Search</a></li>
<li><a href="newVehicle.html" class="btn">Add new vehicle</a></li> <li><a href="addVehicle.html" class="btn">Add new vehicle</a></li>
<li><a href="newReport.html" class="btn">Create new report</a></li> <li><a href="newReport.html" class="btn">Create new report</a></li>
<li><a href="newUser.html" class="btn">Create new user</a></li> <li class="admin"><a href="newUser.html" class="btn">Create new user</a></li>
<li><a href="addFines.html" class="btn">Add Fines</a></li> <li class="admin"><a href="addFines.html" class="btn">Add Fines</a></li>
<li><a href="viewLog.html" class="btn">View log</a></li> <li class="admin"><a href="viewLog.html" class="btn">View log</a></li>
<li><a href="changePassword.html" class="btn">Change password</a></li> <li><a href="changePassword.html" class="btn">Change password</a></li>
<li><a href="#" class="btn">Logout</a></li> <li><a id="logout" class="btn">Logout</a></li>
</ul> </ul>
</nav> </nav>
<main id="search"> <main id="search">