293 lines
9.7 KiB
Plaintext
293 lines
9.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Dashboard</title>
|
|
<!-- Bootstrap CSS for styling -->
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"
|
|
crossorigin="anonymous"
|
|
/>
|
|
|
|
<!--
|
|
setAction JS function dynamically sets the form action and required fields
|
|
based on which button is clicked (Create, Update, Delete)
|
|
-->
|
|
<script>
|
|
function setAction(action) {
|
|
const form = document.getElementById("myForm");
|
|
form.action = action;
|
|
|
|
// For deleteUser, only username and password are required
|
|
if (action === "/deleteUser") {
|
|
const first_name = document.getElementById("first_name");
|
|
const last_name = document.getElementById("last_name");
|
|
const email = document.getElementById("email");
|
|
|
|
first_name.removeAttribute("required");
|
|
last_name.removeAttribute("required");
|
|
email.removeAttribute("required");
|
|
}
|
|
|
|
// For createUser and updateUser, all fields are required
|
|
if (action === "/createUser" || action === "/updateUser") {
|
|
const first_name = document.getElementById("first_name");
|
|
const last_name = document.getElementById("last_name");
|
|
const username = document.getElementById("username");
|
|
const password = document.getElementById("password");
|
|
const email = document.getElementById("email");
|
|
|
|
first_name.setAttribute("required", "required");
|
|
last_name.setAttribute("required", "required");
|
|
username.setAttribute("required", "required");
|
|
password.setAttribute("required", "required");
|
|
email.setAttribute("required", "required");
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-dark text-light">
|
|
<div class="container py-5">
|
|
<!-- Header with greeting and logout button -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<!-- Displays user's first name from server-side variable -->
|
|
<h2>Hello, <%= sqlResult.user.first_name %>!</h2>
|
|
</div>
|
|
<div>
|
|
<h3>Welcome to your dashboard</h3>
|
|
</div>
|
|
<div>
|
|
<!-- Logout button -->
|
|
<a href="/" class="btn btn-info">Logout</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card containing the user form for create, update, delete -->
|
|
<div class="card text-dark shadow">
|
|
<div class="card-body">
|
|
<h4 class="card-title mb-4">
|
|
<strong
|
|
><i
|
|
><span class="text-primary">Create</span> /
|
|
<span class="text-warning">Update</span> /
|
|
<span class="text-danger">Delete</span></i
|
|
></strong
|
|
>
|
|
a user
|
|
</h4>
|
|
<!-- Main user form, method POST, action set dynamically -->
|
|
<form id="myForm" method="post">
|
|
<div class="row g-3">
|
|
<!-- First Name input -->
|
|
<div class="col-md-6">
|
|
<label for="first_name" class="form-label"
|
|
><strong>First Name</strong></label
|
|
>
|
|
<input
|
|
type="text"
|
|
name="first_name"
|
|
id="first_name"
|
|
class="form-control"
|
|
placeholder="First name"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<!-- Last Name input -->
|
|
<div class="col-md-6">
|
|
<label for="last_name" class="form-label"
|
|
><strong>Last Name</strong></label
|
|
>
|
|
<input
|
|
type="text"
|
|
name="last_name"
|
|
id="last_name"
|
|
class="form-control"
|
|
placeholder="Last name"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<!-- Username input (cannot be changed) -->
|
|
<div class="col-md-6">
|
|
<label for="username" class="form-label"
|
|
><strong
|
|
>Username -
|
|
<span class="text-danger">CANNOT BE CHANGED</span></strong
|
|
></label
|
|
>
|
|
<input
|
|
type="text"
|
|
name="username"
|
|
id="username"
|
|
class="form-control"
|
|
placeholder="Username"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<!-- Email input -->
|
|
<div class="col-md-6">
|
|
<label for="email" class="form-label"
|
|
><strong>Email</strong></label
|
|
>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
id="email"
|
|
class="form-control"
|
|
placeholder="Email"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<!-- Password input -->
|
|
<div class="col-12">
|
|
<label for="password" class="form-label"
|
|
><strong>Password</strong></label
|
|
>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
id="password"
|
|
class="form-control"
|
|
placeholder="Password"
|
|
required
|
|
/>
|
|
</div>
|
|
<!--
|
|
Alert and success messages, shown conditionally
|
|
Uses EJS to check for alert or success variables
|
|
-->
|
|
<% if (alert !== null) { %>
|
|
<div class="col-12 d-flex align-items-center">
|
|
<div
|
|
class="alert alert-danger text-center w-100 mb-0 py-0 px-2"
|
|
role="alert"
|
|
style="
|
|
height: 38px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
"
|
|
>
|
|
<%= alert %>
|
|
</div>
|
|
</div>
|
|
<% } else if (success !== null) { %>
|
|
<div class="col-12 d-flex align-items-center">
|
|
<div
|
|
class="alert alert-success text-center w-100 mb-0 py-0 px-2"
|
|
role="alert"
|
|
style="
|
|
height: 38px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
"
|
|
>
|
|
<%= success %>
|
|
</div>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
|
|
<!-- Action buttons for Create, Update, Delete -->
|
|
<div class="row text-center gy-1 mt-4">
|
|
<div class="col-sm">
|
|
<button
|
|
type="submit"
|
|
onclick="setAction('/createUser')"
|
|
class="btn btn-primary w-100"
|
|
>
|
|
Create User
|
|
</button>
|
|
</div>
|
|
|
|
<div class="col-sm">
|
|
<button
|
|
type="submit"
|
|
onclick="setAction('/updateUser')"
|
|
class="btn btn-warning w-100"
|
|
>
|
|
Update User
|
|
</button>
|
|
</div>
|
|
|
|
<div class="col-sm">
|
|
<button
|
|
type="submit"
|
|
onclick="setAction('/deleteUser')"
|
|
class="btn btn-danger w-100"
|
|
>
|
|
Delete User
|
|
</button>
|
|
</div>
|
|
|
|
<div class="col-sm">
|
|
<button
|
|
type="button"
|
|
onclick="callFunc('fetchAllUsers')"
|
|
class="btn btn-info w-100"
|
|
>
|
|
Fetch all Users
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- Card footer with note about delete requirements -->
|
|
<div class="card-footer">
|
|
<p class="text-center mb-0">
|
|
<strong>Note:</strong> When <strong>deleting a user</strong>, you
|
|
only need to provide the username and password. Other fields are not
|
|
required.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user-table">
|
|
<h4 class="mt-5 mb-3">All Users</h4>
|
|
<!-- Table to display all users -->
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">id</th>
|
|
<th scope="col">Username</th>
|
|
<th scope="col">First name</th>
|
|
<th scope="col">Last name</th>
|
|
<th scope="col">E-Mail</th>
|
|
<th scope="col">Password</th>
|
|
<th scope="col">Created</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="table-group-divider">
|
|
<% users.forEach(user => { %>
|
|
<tr>
|
|
<td><%= user.id %></td>
|
|
<td><%= user.username %></td>
|
|
<td><%= user.first_name %></td>
|
|
<td><%= user.last_name %></td>
|
|
<td><%= user.email %></td>
|
|
<td><%= user.password %></td>
|
|
<td><%= user.created.toISOString() %></td>
|
|
</tr>
|
|
<% }) %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS Bundle -->
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
</body>
|
|
</html>
|