added basic edit account

- add link in to edit a user in users.html
- change to AccountController
  - update getCreateAccount for change to AccountForm
  - add getEditAccount
- add edit.html
- change to Mapping.kt
  - update AccountForm toAccountRequest to throw exception if password null
  - add Account Response toAccountForm
- change password and passwordConfirm to be null in AccountForm
- add PasswordException
- add getAccount to AccountRegistryService
- add accountRegistryAccount to WebClientCalls.kt
This commit is contained in:
2025-01-27 13:26:31 +01:00
parent 8e65de0350
commit 14e7971f73
8 changed files with 167 additions and 4 deletions

View File

@@ -0,0 +1,93 @@
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Home Pages</title>
<!--/*/<th:block th:insert="~{layout.html :: documentHead}"/>/*/-->
</head>
<body>
<main>
<h1>Test edit user <strong th:text="${accountForm.username}">username</strong></h1>
<hr>
<form th:action="@{/account/edit-{account}(account = ${account})}" th:method="post">
<!-- Display error message if present -->
<div th:if="${errorMessage != null}" style="color: red; margin-bottom: 10px;">
<span th:text="${errorMessage}">Error Message</span>
</div>
<!-- Username -->
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" th:field="*{accountForm.username}" required/>
</div>
<!-- Role -->
<div>
<label for="role">Role:</label>
<select id="role" name="role" th:field="*{accountForm.role}" required>
<option value="user">User</option>
<option value="registered">Registered</option>
<option value="admin">Admin</option>
</select>
</div>
<!-- Enabled -->
<div>
<label for="enabled">Enabled:</label>
<input type="checkbox" id="enabled" name="enabled" th:field="*{accountForm.enabled}"/>
</div>
<hr>
<!-- Password -->
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
</div>
<!-- Re-enter Password -->
<div>
<label for="passwordConfirm">Re-enter Password:</label>
<input type="password" id="passwordConfirm" name="passwordConfirm"/>
<span id="passwordMatchMessage"></span>
</div>
<hr>
<!-- Submit Button -->
<button type="submit">Update User</button>
</form>
<br>
<a href="/account">Account</a>
<a href="/logout">Logout</a><br>
</main>
<!--/*/<th:block th:replace="~{layout.html :: script}"/>/*/-->
<script>
// Get password fields
const password = document.getElementById('password');
const passwordConfirm = document.getElementById('passwordConfirm');
const passwordMatchMessage = document.getElementById('passwordMatchMessage');
// Function to check if passwords match
function checkPasswordMatch() {
if (password.value === passwordConfirm.value) {
passwordMatchMessage.textContent = 'Passwords match!';
passwordMatchMessage.style.color = 'green';
} else {
passwordMatchMessage.textContent = 'Passwords do not match!';
passwordMatchMessage.style.color = 'red';
}
}
// Add event listeners to both password fields
password.addEventListener('input', checkPasswordMatch);
passwordConfirm.addEventListener('input', checkPasswordMatch);
// Form submit validation
document.querySelector('form').addEventListener('submit', function(e) {
if (password.value !== passwordConfirm.value) {
alert('Passwords do not match!');
e.preventDefault();
}
});
</script>
</body>
</html>

View File

@@ -14,11 +14,13 @@
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Actions</th>
</tr>
<tr th:each="item : ${items}">
<td th:text="${item.id}">ID</td>
<td th:text="${item.timestamp}">timestamp</td>
<td th:text="${item.username}">username</td>
<td><a th:href="@{/account/edit-{id}(id = ${item.id})}">Edit</a></td>
</tr>
</table>
<div th:if="${pagination.showSize}">