feat: enhance user management functionality with detailed feedback and improved error handling
This commit is contained in:
@@ -1,14 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--
|
||||
<script>
|
||||
window.history.pushState({}, "", "<%=// newLink %>");
|
||||
</script>
|
||||
-->
|
||||
<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"
|
||||
@@ -16,12 +12,16 @@
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
<!-- Set the right attributes for form -->
|
||||
<!--
|
||||
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");
|
||||
@@ -32,6 +32,7 @@
|
||||
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");
|
||||
@@ -50,20 +51,22 @@
|
||||
</head>
|
||||
<body class="bg-dark text-light">
|
||||
<div class="container py-5">
|
||||
<!-- Header -->
|
||||
<!-- 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>
|
||||
|
||||
<!-- User creation form -->
|
||||
<!-- 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">
|
||||
@@ -76,8 +79,10 @@
|
||||
>
|
||||
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
|
||||
@@ -92,6 +97,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Last Name input -->
|
||||
<div class="col-md-6">
|
||||
<label for="last_name" class="form-label"
|
||||
><strong>Last Name</strong></label
|
||||
@@ -106,6 +112,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Username input (cannot be changed) -->
|
||||
<div class="col-md-6">
|
||||
<label for="username" class="form-label"
|
||||
><strong
|
||||
@@ -123,6 +130,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Email input -->
|
||||
<div class="col-md-6">
|
||||
<label for="email" class="form-label"
|
||||
><strong>Email</strong></label
|
||||
@@ -137,6 +145,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Password input -->
|
||||
<div class="col-12">
|
||||
<label for="password" class="form-label"
|
||||
><strong>Password</strong></label
|
||||
@@ -150,6 +159,10 @@
|
||||
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
|
||||
@@ -183,6 +196,7 @@
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons for Create, Update, Delete -->
|
||||
<div class="row text-center gy-1 mt-4">
|
||||
<div class="col-sm">
|
||||
<button
|
||||
@@ -216,6 +230,7 @@
|
||||
</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
|
||||
@@ -226,6 +241,7 @@
|
||||
</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"
|
||||
|
Reference in New Issue
Block a user