feat: add user management functions and update dashboard for create, update, and delete actions
This commit is contained in:
@@ -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>
|
||||
|
Reference in New Issue
Block a user