109 lines
3.3 KiB
HTML
109 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<body>
|
|
<h1>User List</h1>
|
|
|
|
<!-- Button to create new user -->
|
|
<button id="createUserBtn">Create User</button>
|
|
|
|
<ul id="userList"></ul>
|
|
|
|
<table>
|
|
<tr>
|
|
<th>Email</th>
|
|
<th>Created At</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
|
|
{% for user in users %}
|
|
<tr>
|
|
<td>{{ user.email|escape }}</td>
|
|
<td>{{ user.created_at|escape }}</td>
|
|
<td>
|
|
<a href="/web/admin/users/{{ user.id }}" class="btn">More Info</a>
|
|
<button class="deleteBtn" data-user-id="{{ user.id }}">Delete</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
|
|
<script>
|
|
document
|
|
.getElementById("createUserBtn")
|
|
.addEventListener("click", function () {
|
|
// Get the email from the user
|
|
const email = prompt("Please enter the new user email:");
|
|
if (email) {
|
|
fetch(`/web-api/user/${email}`, {
|
|
method: "POST",
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error(
|
|
`Network response was not ok: ${response.statusText}`,
|
|
);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
if (data.code === 0) {
|
|
window.location.href = `/web/admin/users/${data.data.id}`;
|
|
} else {
|
|
throw new Error(`Error creating user: ${data.message}`);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error(`Error: ${error}`);
|
|
});
|
|
}
|
|
});
|
|
|
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
// Get all delete buttons
|
|
const deleteButtons = document.querySelectorAll(".deleteBtn");
|
|
|
|
deleteButtons.forEach((btn) => {
|
|
btn.addEventListener("click", function (e) {
|
|
e.preventDefault(); // Prevent default behaviour
|
|
|
|
// Confirm the deletion
|
|
if (!confirm("Are you sure you want to delete this user?")) {
|
|
return;
|
|
}
|
|
|
|
// Get user ID from the data attribute
|
|
const userId = e.target.getAttribute("data-user-id");
|
|
|
|
// Call delete API
|
|
fetch(`/web-api/user/${userId}`, {
|
|
method: "DELETE",
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error(
|
|
`Network response was not ok: ${response.statusText}`,
|
|
);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
if (data.code === 0) {
|
|
// Mark the row as deleted
|
|
e.target.closest("tr").style.textDecoration = "line-through";
|
|
// Optionally disable the delete button
|
|
e.target.disabled = true;
|
|
} else {
|
|
throw new Error(`Error deleting user: ${data.message}`);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error(`Error: ${error}`);
|
|
alert(`Failed to delete user: ${error}`);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|