moved files
This commit is contained in:
292
administration/backend/views/dashboard.ejs
Normal file
292
administration/backend/views/dashboard.ejs
Normal file
@@ -0,0 +1,292 @@
|
||||
<!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>
|
||||
66
administration/backend/views/login.ejs
Normal file
66
administration/backend/views/login.ejs
Normal file
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Login Page</title>
|
||||
<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"
|
||||
/>
|
||||
</head>
|
||||
<body class="bg-dark">
|
||||
<div
|
||||
class="container d-flex justify-content-center align-items-center"
|
||||
style="min-height: 100vh"
|
||||
>
|
||||
<div class="card shadow-lg" style="width: 100%; max-width: 400px">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-center mb-4">Login</h2>
|
||||
|
||||
<% if (error) { %>
|
||||
<div class="alert alert-danger text-center" role="alert">
|
||||
<%= error %>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<form action="/login" method="post">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="username"
|
||||
name="username"
|
||||
placeholder="Enter username"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="Enter password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary">Login</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user