feat: enhance user management functionality with detailed feedback and improved error handling

This commit is contained in:
2025-06-22 01:16:58 +02:00
parent 0fd042c9ca
commit c52193e697
4 changed files with 93 additions and 34 deletions

View File

@@ -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"