completing user administration

This commit is contained in:
georg.sinn-schirwitz
2025-08-30 18:33:08 +02:00
parent 7379d3040d
commit fe2a579fc4
5 changed files with 276 additions and 136 deletions

View File

@@ -1,139 +1,100 @@
{% extends 'base.html' %} {% block content %}
<div id="users">
<h2>Users</h2>
<form id="user-form" method="post" action="{{ url_for('admin_users') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<table>
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Admin</th>
<th>Active</th>
<th colspan="2">Password</th>
<th>Created</th>
<th>Last Login</th>
<th></th>
</tr>
</thead>
<tbody>
{% for u in users %}
<tr class="user-row" data-user-id="{{ u.user_id }}">
<td>
{{ u.user_id }}<input
type="hidden"
name="user_id"
value="{{ u.user_id }}"
/>
</td>
<td>
<input
type="text"
name="username"
value="{{ u.username }}"
required
/>
</td>
<td>
<input type="checkbox" name="is_admin" {{ 'checked' if u.is_admin
else '' }} />
</td>
<td>
<input type="checkbox" name="is_active" {{ 'checked' if u.is_active
else '' }} />
</td>
<td>{{ '✅' if u.has_password else '❌' }}</td>
<td><input type="password" name="password" /></td>
<td>{{ u.created_at }}</td>
<td>{{ u.last_login or 'never' }}</td>
<td>
<button type="submit" data-user-id="{{ u.user_id }}">Save</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
</div>
<h3>Create / Update User</h3>
<form
id="create-update-user-form"
method="post"
action="{{ url_for('admin_users') }}"
>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<label>Username <input type="text" name="username" required /></label>
<label>Password <input type="password" name="password" /></label>
<label>Admin <input type="checkbox" name="is_admin" value="1" /></label>
<label
>Active <input type="checkbox" name="is_active" value="1" checked
/></label>
<button type="submit">Save</button>
</form>
<table>
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Admin</th>
<th>Active</th>
<th>Password</th>
<th>Created</th>
<th>Last Login</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{% for u in users %}
<tr class="user-row" data-user-id="{{ u.user_id }}">
<td>{{ u.user_id }}</td>
<td>
<a href="{{ url_for('admin_user', user_id=u.user_id) }}"
>{{ u.username }}</a
>
</td>
<td>{{ '✅' if u.is_admin else '❌' }}</td>
<td>{{ '✅' if u.is_active else '❌' }}</td>
<td>{{ '✅' if u.has_password else '❌' }}</td>
<td>{{ u.created_at }}</td>
<td>{{ u.last_login or 'never' }}</td>
<td>
<button
type="button"
class="edit-user"
data-user-id="{{ u.user_id }}"
onclick="editUser({{ u.user_id }})"
>
Edit
</button>
</td>
<td>
<button
type="button"
class="delete-user"
data-user-id="{{ u.user_id }}"
onclick="deleteUser({{ u.user_id }})"
>
Delete
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<h2>Create New User</h2>
<a href="{{ url_for('admin_user', user_id='new') }}">Create User</a>
{% endblock %} {% block footer_scripts %}
<script>
function updateUser(userId) {
const row = document.querySelector(`.user-row[data-user-id="${userId}"]`);
const passwordInput = row.querySelector('input[name="password"]');
const hasPassword =
row.querySelector("td:nth-child(5)").textContent.trim() === "✅";
const formData = row.querySelector("form").elements;
const username = formData.username.value;
const password = hasPassword ? passwordInput.value : undefined;
const isAdmin = formData.is_admin.checked;
const isActive = formData.is_active.checked;
fetch("/admin/users", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
user_id: userId,
password: password,
username: username,
is_admin: isAdmin,
is_active: isActive,
csrf_token: formData.csrf_token.value,
}),
})
.then((response) => {
if (response.ok) {
alert("User updated successfully");
// Clear the password field after successful update
passwordInput.value = "";
} else {
alert("Error updating user");
}
function editUser(userId) {
window.location.href = `/admin/user/${userId}`;
}
function deleteUser(userId) {
if (
confirm(
"Are you sure you want to delete this user? This action cannot be undone."
)
) {
fetch(`/admin/user/${userId}/delete`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": document.querySelector('input[name="csrf_token"]')
.value,
},
})
.catch((error) => {
console.error("Error:", error);
alert("Error updating user");
});
.then((response) => {
if (response.ok) {
// Remove the user row from the table
const row = document.querySelector(
`.user-row[data-user-id="${userId}"]`
);
if (row) {
row.remove();
}
} else {
alert("Error deleting user.");
}
})
.catch((error) => {
console.error("Error:", error);
alert("Error deleting user.");
});
}
}
function initUserForm() {
const form = document.getElementById("user-form");
const createUpdateForm = document.getElementById("create-update-user-form");
form.addEventListener("submit", function (event) {
const userId = event.target.querySelector('input[name="user_id"]').value;
event.preventDefault(); // Prevent the default form submission
updateUser(userId);
});
form.addEventListener("click", function (event) {
const userId = event.target.closest(".user-row").dataset.userId;
updateUser(userId);
});
createUpdateForm.addEventListener("submit", function (event) {
const passwordInput = createUpdateForm.querySelector(
'input[name="password"]'
);
});
}
initUserForm();
</script>
{% endblock %}