feat: add user management functions and update dashboard for create, update, and delete actions

This commit is contained in:
2025-06-22 00:57:01 +02:00
parent 7b3dfc8c05
commit 0fd042c9ca
5 changed files with 225 additions and 27 deletions

View File

@@ -15,6 +15,38 @@
integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"
crossorigin="anonymous"
/>
<!-- Set the right attributes for form -->
<script>
function setAction(action) {
const form = document.getElementById("myForm");
form.action = action;
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");
}
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">
@@ -27,18 +59,29 @@
<h3>Welcome to your dashboard</h3>
</div>
<div>
<a href="/" class="btn btn-danger">Logout</a>
<a href="/" class="btn btn-info">Logout</a>
</div>
</div>
<!-- User creation form -->
<div class="card text-dark shadow">
<div class="card-body">
<h4 class="card-title mb-4">Create a new user</h4>
<form action="/createUser" method="post">
<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>
<form id="myForm" method="post">
<div class="row g-3">
<div class="col-md-6">
<label for="first_name" class="form-label">First Name</label>
<label for="first_name" class="form-label"
><strong>First Name</strong></label
>
<input
type="text"
name="first_name"
@@ -50,7 +93,9 @@
</div>
<div class="col-md-6">
<label for="last_name" class="form-label">Last Name</label>
<label for="last_name" class="form-label"
><strong>Last Name</strong></label
>
<input
type="text"
name="last_name"
@@ -62,7 +107,12 @@
</div>
<div class="col-md-6">
<label for="username" class="form-label">Username</label>
<label for="username" class="form-label"
><strong
>Username -
<span class="text-danger">CANNOT BE CHANGED</span></strong
></label
>
<input
type="text"
name="username"
@@ -74,7 +124,9 @@
</div>
<div class="col-md-6">
<label for="email" class="form-label">Email</label>
<label for="email" class="form-label"
><strong>Email</strong></label
>
<input
type="email"
name="email"
@@ -85,8 +137,10 @@
/>
</div>
<div class="col-md-6">
<label for="password" class="form-label">Password</label>
<div class="col-12">
<label for="password" class="form-label"
><strong>Password</strong></label
>
<input
type="password"
name="password"
@@ -96,20 +150,78 @@
required
/>
</div>
<% 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>
<div class="col-12">
<button type="submit" class="btn btn-primary w-100">
<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>
</form>
<% if (typeof status !== 'undefined') { %> <% if (status ===
'success') { %>
<div class="alert alert-success">User created successfully!</div>
<% } else if (status === 'error') { %>
<div class="alert alert-danger">User creation failed.</div>
<% } %> <% } %>
</div>
<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>