2023-08-13 01:12:29 +01:00
|
|
|
<!DOCTYPE html>
|
2024-05-22 21:48:23 +01:00
|
|
|
<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
|
2024-02-16 22:49:06 +01:00
|
|
|
<head>
|
2025-06-11 17:21:37 +01:00
|
|
|
<th:block th:insert="~{fragments/common :: head(title=#{adminUserSettings.title}, header=#{adminUserSettings.header})}"></th:block>
|
|
|
|
|
<link rel="stylesheet" th:href="@{/css/modern-tables.css}">
|
2024-08-16 12:57:37 +02:00
|
|
|
<style>
|
|
|
|
|
.active-user {
|
2025-06-11 17:21:37 +01:00
|
|
|
color: var(--md-sys-color-tertiary);
|
|
|
|
|
font-weight: 600;
|
2024-08-16 12:57:37 +02:00
|
|
|
}
|
2025-06-11 17:21:37 +01:00
|
|
|
|
2024-08-16 12:57:37 +02:00
|
|
|
.text-overflow {
|
|
|
|
|
max-width: 100px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
2025-06-11 17:21:37 +01:00
|
|
|
text-overflow: ellipsis;
|
2024-08-16 12:57:37 +02:00
|
|
|
}
|
|
|
|
|
</style>
|
2024-02-16 22:49:06 +01:00
|
|
|
</head>
|
2023-08-13 01:12:29 +01:00
|
|
|
|
2024-02-16 22:49:06 +01:00
|
|
|
<body>
|
2023-08-13 01:12:29 +01:00
|
|
|
<th:block th:insert="~{fragments/common :: game}"></th:block>
|
|
|
|
|
<div id="page-container">
|
2024-02-16 22:49:06 +01:00
|
|
|
<div id="content-wrap">
|
|
|
|
|
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
|
2025-06-11 17:21:37 +01:00
|
|
|
|
|
|
|
|
<div class="data-container">
|
|
|
|
|
<div class="data-panel">
|
|
|
|
|
<div class="data-header">
|
|
|
|
|
<h1 class="data-title">
|
|
|
|
|
<span class="data-icon">
|
|
|
|
|
<span class="material-symbols-rounded">manage_accounts</span>
|
|
|
|
|
</span>
|
|
|
|
|
<span th:text="#{adminUserSettings.header}">Admin User Control Settings</span>
|
|
|
|
|
</h1>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="data-body">
|
|
|
|
|
<!-- User Stats Banner -->
|
|
|
|
|
<div class="data-panel data-mb-3" style="background-color: var(--md-sys-color-primary-container);">
|
|
|
|
|
<div class="data-body" style="padding: 1.25rem;">
|
|
|
|
|
<div style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 1.5rem;">
|
|
|
|
|
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
|
|
|
|
<span class="material-symbols-rounded" style="font-size: 2.25rem; color: var(--md-sys-color-primary);">
|
|
|
|
|
group
|
|
|
|
|
</span>
|
|
|
|
|
<div>
|
|
|
|
|
<div style="color: var(--md-sys-color-primary); font-size: 0.875rem; font-weight: 500;" th:text="#{adminUserSettings.totalUsers}">Total Users</div>
|
|
|
|
|
<div style="color: var(--md-sys-color-primary); font-size: 1.5rem; font-weight: 700;">
|
|
|
|
|
<span th:text="${totalUsers}"></span>
|
|
|
|
|
<span th:if="${@runningProOrHigher}" th:text="'/' + ${maxPaidUsers}" style="font-size: 1rem;"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
|
|
|
|
<span class="material-symbols-rounded" style="font-size: 2.25rem; color: var(--md-sys-color-primary);">
|
|
|
|
|
check_circle
|
|
|
|
|
</span>
|
|
|
|
|
<div>
|
|
|
|
|
<div style="color: var(--md-sys-color-primary); font-size: 0.875rem; font-weight: 500;" th:text="#{adminUserSettings.activeUsers}">Active Users</div>
|
|
|
|
|
<div style="color: var(--md-sys-color-primary); font-size: 1.5rem; font-weight: 700;" th:text="${activeUsers}"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
|
|
|
|
<span class="material-symbols-rounded" style="font-size: 2.25rem; color: var(--md-sys-color-primary);">
|
|
|
|
|
person_off
|
|
|
|
|
</span>
|
|
|
|
|
<div>
|
|
|
|
|
<div style="color: var(--md-sys-color-primary); font-size: 0.875rem; font-weight: 500;" th:text="#{adminUserSettings.disabledUsers}">Disabled Users</div>
|
|
|
|
|
<div style="color: var(--md-sys-color-primary); font-size: 1.5rem; font-weight: 700;" th:text="${disabledUsers}"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-08-16 12:57:37 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-06-11 17:21:37 +01:00
|
|
|
|
|
|
|
|
<!-- Alert Messages -->
|
|
|
|
|
<div th:if="${addMessage}" th:class="${#strings.contains(addMessage, 'Successfully') or #strings.contains(addMessage, 'Created') ? 'alert alert-success data-mb-3' : 'alert alert-danger data-mb-3'}">
|
|
|
|
|
<span th:text="#{${addMessage}}">Default message if not found</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div th:if="${changeMessage}" th:class="${#strings.contains(changeMessage, 'Successfully') or #strings.contains(changeMessage, 'Created') ? 'alert alert-success data-mb-3' : 'alert alert-danger data-mb-3'}">
|
|
|
|
|
<span th:text="#{${changeMessage}}">Default message if not found</span>
|
2024-06-07 23:27:16 +02:00
|
|
|
</div>
|
2025-06-11 17:21:37 +01:00
|
|
|
|
|
|
|
|
<div th:if="${deleteMessage}" th:class="${#strings.contains(deleteMessage, 'Successfully') or #strings.contains(deleteMessage, 'Created') ? 'alert alert-success data-mb-3' : 'alert alert-danger data-mb-3'}">
|
2024-08-16 12:57:37 +02:00
|
|
|
<span th:text="#{${deleteMessage}}">Default message if not found</span>
|
2024-03-06 23:14:02 +01:00
|
|
|
</div>
|
2025-06-11 17:21:37 +01:00
|
|
|
|
|
|
|
|
<!-- Admin Actions -->
|
|
|
|
|
<div class="data-section-title">User Management</div>
|
|
|
|
|
<div class="data-actions data-mb-3">
|
|
|
|
|
<button
|
|
|
|
|
th:data-bs-toggle="${@runningProOrHigher && totalUsers >= maxPaidUsers} ? null : 'modal'"
|
|
|
|
|
th:data-bs-target="${@runningProOrHigher && totalUsers >= maxPaidUsers} ? null : '#addUserModal'"
|
|
|
|
|
th:class="${@runningProOrHigher && totalUsers >= maxPaidUsers} ? 'data-btn data-btn-danger' : 'data-btn data-btn-primary'"
|
|
|
|
|
th:title="${@runningProOrHigher && totalUsers >= maxPaidUsers} ? #{adminUserSettings.maxUsersReached} : #{adminUserSettings.addUser}">
|
|
|
|
|
<span class="material-symbols-rounded">person_add</span>
|
|
|
|
|
<span th:text="#{adminUserSettings.addUser}">Add New User</span>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<a href="/teams" class="data-btn data-btn-secondary" th:title="#{adminUserSettings.teams}">
|
|
|
|
|
<span class="material-symbols-rounded">group</span>
|
|
|
|
|
<span th:text="#{adminUserSettings.teams}">Manage Teams</span>
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
data-bs-toggle="modal"
|
|
|
|
|
data-bs-target="#changeUserRoleModal"
|
|
|
|
|
class="data-btn data-btn-secondary"
|
|
|
|
|
th:title="#{adminUserSettings.changeUserRole}">
|
|
|
|
|
<span class="material-symbols-rounded">edit</span>
|
|
|
|
|
<span th:text="#{adminUserSettings.changeUserRole}">Change User's Role</span>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<a href="/usage" th:if="${@runningEE}" class="data-btn data-btn-secondary" th:title="#{adminUserSettings.usage}">
|
|
|
|
|
<span class="material-symbols-rounded">analytics</span>
|
|
|
|
|
<span th:text="#{adminUserSettings.usage}">Usage Statistics</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Users Table -->
|
|
|
|
|
<div class="table-responsive">
|
|
|
|
|
<table class="data-table">
|
2024-07-04 23:13:03 +02:00
|
|
|
<thead>
|
|
|
|
|
<tr>
|
2024-08-16 12:57:37 +02:00
|
|
|
<th scope="col">#</th>
|
|
|
|
|
<th scope="col" th:title="#{username}" th:text="#{username}">Username</th>
|
2025-06-11 17:21:37 +01:00
|
|
|
<th scope="col" th:title="#{adminUserSettings.team}" th:text="#{adminUserSettings.team}">Team</th>
|
2024-08-16 12:57:37 +02:00
|
|
|
<th scope="col" th:title="#{adminUserSettings.roles}" th:text="#{adminUserSettings.roles}">Roles</th>
|
|
|
|
|
<th scope="col" th:title="#{adminUserSettings.authenticated}" class="text-overflow" th:text="#{adminUserSettings.authenticated}">Authenticated</th>
|
|
|
|
|
<th scope="col" th:title="#{adminUserSettings.lastRequest}" class="text-overflow" th:text="#{adminUserSettings.lastRequest}">Last Request</th>
|
2025-06-11 17:21:37 +01:00
|
|
|
<th scope="col" th:title="#{adminUserSettings.actions}" th:text="#{adminUserSettings.actions}">Actions</th>
|
2024-07-04 23:13:03 +02:00
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr th:each="user : ${users}">
|
2025-06-11 17:21:37 +01:00
|
|
|
<td th:text="${user.id}"></td>
|
|
|
|
|
<td th:text="${user.username}" th:classappend="${userSessions[user.username] ? 'active-user' : ''}"></td>
|
|
|
|
|
<td th:text="${user.team != null ? user.team.name : '—'}"></td>
|
|
|
|
|
<td>
|
|
|
|
|
<span class="data-badge" style="background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-secondary); padding: 0.25rem 0.5rem; border-radius: 1rem; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.25rem;">
|
|
|
|
|
<span class="material-symbols-rounded" style="font-size: 1rem;">shield</span>
|
|
|
|
|
<span th:text="#{${user.roleName}}">Role</span>
|
|
|
|
|
</span>
|
2024-08-16 12:57:37 +02:00
|
|
|
</td>
|
2025-06-11 17:21:37 +01:00
|
|
|
<td th:text="${user.authenticationType}"></td>
|
|
|
|
|
<td th:text="${userLastRequest[user.username] != null ? #dates.format(userLastRequest[user.username], 'yyyy-MM-dd HH:mm:ss') : 'N/A'}"></td>
|
|
|
|
|
<td>
|
|
|
|
|
<div class="data-action-cell">
|
|
|
|
|
<form th:if="${user.username != currentUsername}" th:action="@{'/api/v1/user/admin/deleteUser/' + ${user.username}}" method="post" onsubmit="return confirmDeleteUser()" style="display: inline;">
|
|
|
|
|
<button type="submit" th:title="#{adminUserSettings.deleteUser}" class="data-icon-btn data-icon-btn-danger">
|
|
|
|
|
<span class="material-symbols-rounded">person_remove</span>
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<a th:if="${user.username == currentUsername}" th:title="#{adminUserSettings.editOwnProfil}" th:href="@{'/account'}" class="data-icon-btn data-icon-btn-primary">
|
|
|
|
|
<span class="material-symbols-rounded">edit</span>
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<form th:action="@{'/api/v1/user/admin/changeUserEnabled/' + ${user.username}}" method="post" onsubmit="return confirmChangeUserStatus()" style="display: inline;">
|
|
|
|
|
<input type="hidden" name="enabled" th:value="!${user.enabled}" />
|
|
|
|
|
<button type="submit" th:if="${user.enabled}" th:title="#{adminUserSettings.enabledUser}" class="data-icon-btn data-icon-btn-primary">
|
|
|
|
|
<span class="material-symbols-rounded">person</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button type="submit" th:unless="${user.enabled}" th:title="#{adminUserSettings.disabledUser}" class="data-icon-btn data-icon-btn-danger">
|
|
|
|
|
<span class="material-symbols-rounded">person_off</span>
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2024-07-04 23:13:03 +02:00
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
2025-06-11 17:21:37 +01:00
|
|
|
|
|
|
|
|
<p th:if="${!@runningProOrHigher}" class="data-mt-3" th:text="#{enterpriseEdition.ssoAdvert}"></p>
|
2024-06-07 23:27:16 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-08-13 01:12:29 +01:00
|
|
|
|
2025-06-11 17:21:37 +01:00
|
|
|
<!-- Change User Role Modal -->
|
2024-06-07 23:27:16 +02:00
|
|
|
<div class="modal fade" id="changeUserRoleModal" tabindex="-1" aria-labelledby="changeUserRoleModalLabel" aria-hidden="true">
|
2025-06-11 17:21:37 +01:00
|
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
|
|
|
<form th:action="@{'/api/v1/user/admin/changeRole'}" method="post" class="modal-content data-modal">
|
|
|
|
|
<div class="data-modal-header">
|
|
|
|
|
<h5 class="data-modal-title">
|
|
|
|
|
<span class="data-icon">
|
|
|
|
|
<span class="material-symbols-rounded">edit</span>
|
|
|
|
|
</span>
|
|
|
|
|
<span th:text="#{adminUserSettings.changeUserRole}">Change User's Role</span>
|
|
|
|
|
</h5>
|
|
|
|
|
<button type="button" class="data-btn-close" data-bs-dismiss="modal" aria-label="Close">
|
2024-08-16 12:57:37 +02:00
|
|
|
<span class="material-symbols-rounded">close</span>
|
2024-06-07 23:27:16 +02:00
|
|
|
</button>
|
|
|
|
|
</div>
|
2025-06-11 17:21:37 +01:00
|
|
|
<div class="data-modal-body">
|
|
|
|
|
<div class="data-mb-2">
|
|
|
|
|
<button class="data-btn data-btn-secondary" data-toggle="tooltip" data-placement="auto" th:title="#{downgradeCurrentUserLongMessage}" style="padding: 0.25rem 0.5rem;">
|
|
|
|
|
<span class="material-symbols-rounded">help</span>
|
|
|
|
|
<span th:text="#{help}">Help</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="data-form-group">
|
|
|
|
|
<label for="username" class="data-form-label" th:text="#{username}">Username</label>
|
|
|
|
|
<select name="username" id="username" class="data-form-control" required>
|
|
|
|
|
<option value="" disabled selected th:text="#{selectFillter}">-- Select --</option>
|
|
|
|
|
<option th:each="user : ${users}" th:if="${user.username != currentUsername}" th:value="${user.username}" th:text="${user.username}">Username</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="data-form-group">
|
|
|
|
|
<label for="role" class="data-form-label" th:text="#{adminUserSettings.role}">Role</label>
|
|
|
|
|
<select name="role" id="role" class="data-form-control" required>
|
|
|
|
|
<option value="" disabled selected th:text="#{selectFillter}">-- Select --</option>
|
|
|
|
|
<option th:each="roleDetail : ${roleDetails}" th:value="${roleDetail.key}" th:text="#{${roleDetail.value}}">Role</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="data-form-group">
|
|
|
|
|
<label for="team" class="data-form-label" th:text="#{adminUserSettings.team}">Team</label>
|
|
|
|
|
<select name="teamId" id="team" class="data-form-control" required>
|
|
|
|
|
<option value="" th:text="#{selectFillter}">-- Select --</option>
|
|
|
|
|
<option th:each="team : ${teams}" th:value="${team.id}" th:text="${team.name}"></option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="data-form-actions">
|
|
|
|
|
<button type="button" class="data-btn data-btn-secondary" data-bs-dismiss="modal">
|
|
|
|
|
<span class="material-symbols-rounded">close</span>
|
|
|
|
|
<span th:text="#{cancel}">Cancel</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button type="submit" class="data-btn data-btn-primary">
|
|
|
|
|
<span class="material-symbols-rounded">check</span>
|
|
|
|
|
<span th:text="#{adminUserSettings.submit}">Save User</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2024-06-07 23:27:16 +02:00
|
|
|
</div>
|
2025-06-11 17:21:37 +01:00
|
|
|
</form>
|
2024-06-07 23:27:16 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-06-11 17:21:37 +01:00
|
|
|
<!-- Add User Modal -->
|
|
|
|
|
<div class="modal fade" id="addUserModal" tabindex="-1" style="z-index: 10000;" aria-labelledby="addUserModalLabel" aria-hidden="true">
|
|
|
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
|
|
|
<form id="formsaveuser" th:action="@{'/api/v1/user/admin/saveUser'}" method="post" class="modal-content data-modal">
|
|
|
|
|
<div class="data-modal-header">
|
|
|
|
|
<h5 class="data-modal-title">
|
|
|
|
|
<span class="data-icon">
|
|
|
|
|
<span class="material-symbols-rounded">person_add</span>
|
|
|
|
|
</span>
|
|
|
|
|
<span th:text="#{adminUserSettings.addUser}">Add New User</span>
|
|
|
|
|
</h5>
|
|
|
|
|
<button type="button" class="data-btn-close" data-bs-dismiss="modal" aria-label="Close">
|
2024-08-16 12:57:37 +02:00
|
|
|
<span class="material-symbols-rounded">close</span>
|
2024-06-07 23:27:16 +02:00
|
|
|
</button>
|
|
|
|
|
</div>
|
2025-06-11 17:21:37 +01:00
|
|
|
<div class="data-modal-body">
|
|
|
|
|
<div class="data-mb-2">
|
|
|
|
|
<button class="data-btn data-btn-secondary" data-toggle="tooltip" data-placement="auto" th:title="#{adminUserSettings.usernameInfo}" style="padding: 0.25rem 0.5rem;">
|
|
|
|
|
<span class="material-symbols-rounded">help</span>
|
|
|
|
|
<span th:text="#{help}">Help</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="data-form-group">
|
|
|
|
|
<label for="username" class="data-form-label" th:text="#{username}">Username</label>
|
|
|
|
|
<input type="text" class="data-form-control" name="username" id="username" th:title="#{adminUserSettings.usernameInfo}" required>
|
|
|
|
|
<span id="usernameError" style="display: none; color: var(--md-sys-color-error);" th:text="#{invalidUsernameMessage}">Invalid username!</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="data-form-group" id="passwordContainer">
|
|
|
|
|
<label for="password" class="data-form-label" th:text="#{password}">Password</label>
|
|
|
|
|
<input type="password" class="data-form-control" name="password" id="password" required>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="data-form-group">
|
|
|
|
|
<label for="role" class="data-form-label" th:text="#{adminUserSettings.role}">Role</label>
|
|
|
|
|
<select name="role" class="data-form-control" id="role" required>
|
|
|
|
|
<option value="" disabled selected th:text="#{selectFillter}">-- Select --</option>
|
|
|
|
|
<option th:each="roleDetail : ${roleDetails}" th:value="${roleDetail.key}" th:text="#{${roleDetail.value}}">Role</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="data-form-group">
|
|
|
|
|
<label for="team" class="data-form-label" th:text="#{adminUserSettings.team}">Team</label>
|
|
|
|
|
<select name="teamId" class="data-form-control" required>
|
|
|
|
|
<option value="" th:text="#{selectFillter}">-- Select --</option>
|
|
|
|
|
<option th:each="team : ${teams}" th:value="${team.id}" th:text="${team.name}"></option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="data-form-group">
|
|
|
|
|
<label for="authType" class="data-form-label">Authentication Type</label>
|
|
|
|
|
<select id="authType" name="authType" class="data-form-control" required>
|
|
|
|
|
<option value="web" selected>WEB</option>
|
|
|
|
|
<option value="sso">SSO</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="data-form-group" id="checkboxContainer">
|
|
|
|
|
<div class="form-check">
|
2024-06-07 23:27:16 +02:00
|
|
|
<input type="checkbox" class="form-check-input" id="forceChange" name="forceChange">
|
|
|
|
|
<label class="form-check-label" for="forceChange" th:text="#{adminUserSettings.forceChange}">Force user to change username/password on login</label>
|
|
|
|
|
</div>
|
2025-06-11 17:21:37 +01:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="data-form-actions">
|
|
|
|
|
<button type="button" class="data-btn data-btn-secondary" data-bs-dismiss="modal">
|
|
|
|
|
<span class="material-symbols-rounded">close</span>
|
|
|
|
|
<span th:text="#{cancel}">Cancel</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button type="submit" class="data-btn data-btn-primary">
|
|
|
|
|
<span class="material-symbols-rounded">check</span>
|
|
|
|
|
<span th:text="#{adminUserSettings.submit}">Save User</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
2025-06-11 17:21:37 +01:00
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Add Team Modal -->
|
|
|
|
|
<div class="modal fade" id="addTeamModal" tabindex="-1" aria-hidden="true">
|
|
|
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
|
|
|
<form th:action="@{'/api/v1/team/create'}" method="post" class="modal-content data-modal">
|
|
|
|
|
<div class="data-modal-header">
|
|
|
|
|
<h5 class="data-modal-title">
|
|
|
|
|
<span class="data-icon">
|
|
|
|
|
<span class="material-symbols-rounded">group_add</span>
|
|
|
|
|
</span>
|
|
|
|
|
<span th:text="#{adminUserSettings.createTeam}">Create Team</span>
|
|
|
|
|
</h5>
|
|
|
|
|
<button type="button" class="data-btn-close" data-bs-dismiss="modal" aria-label="Close">
|
|
|
|
|
<span class="material-symbols-rounded">close</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="data-modal-body">
|
|
|
|
|
<div class="data-form-group">
|
|
|
|
|
<label for="teamName" class="data-form-label" th:text="#{adminUserSettings.teamName}">Team Name</label>
|
|
|
|
|
<input type="text" name="name" id="teamName" class="data-form-control" required />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="data-form-actions">
|
|
|
|
|
<button type="button" class="data-btn data-btn-secondary" data-bs-dismiss="modal">
|
|
|
|
|
<span class="material-symbols-rounded">close</span>
|
|
|
|
|
<span th:text="#{cancel}">Cancel</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button type="submit" class="data-btn data-btn-primary">
|
|
|
|
|
<span class="material-symbols-rounded">check</span>
|
|
|
|
|
<span th:text="#{adminUserSettings.submit}">Create</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
2023-08-13 01:12:29 +01:00
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
2024-06-07 23:27:16 +02:00
|
|
|
|
2024-05-02 14:52:50 -06:00
|
|
|
<script th:inline="javascript">
|
2025-06-11 17:21:37 +01:00
|
|
|
const delete_confirm_text = /*[[#{adminUserSettings.confirmDeleteUser}]]*/ 'Should the user be deleted?';
|
|
|
|
|
const change_confirm_text = /*[[#{adminUserSettings.confirmChangeUserStatus}]]*/ 'Should the user be disabled/enabled?';
|
|
|
|
|
|
|
|
|
|
function confirmDeleteUser() {
|
|
|
|
|
return confirm(delete_confirm_text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function confirmChangeUserStatus() {
|
|
|
|
|
return confirm(change_confirm_text);
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
jQuery.validator.addMethod("usernamePattern", function(value, element) {
|
2025-01-12 16:30:17 +01:00
|
|
|
// Regular expression for user name: Min. 3 characters, max. 50 characters
|
|
|
|
|
const regexUsername = /^[a-zA-Z0-9](?!.*[-@._+]{2,})([a-zA-Z0-9@._+-]{1,48})[a-zA-Z0-9]$/;
|
|
|
|
|
|
|
|
|
|
// Regular expression for email addresses: Max. 320 characters, with RFC-like validation
|
|
|
|
|
const regexEmail = /^(?=.{1,320}$)(?=.{1,64}@)[A-Za-z0-9](?:[A-Za-z0-9_.+-]*[A-Za-z0-9])?@[^-][A-Za-z0-9-]+(?:\.[A-Za-z0-9-]+)*(?:\.[A-Za-z]{2,})$/;
|
|
|
|
|
|
|
|
|
|
// Check if the field is optional or meets the requirements
|
|
|
|
|
return this.optional(element) || regexUsername.test(value) || regexEmail.test(value);
|
2024-05-18 23:47:05 +02:00
|
|
|
}, /*[[#{invalidUsernameMessage}]]*/ "Invalid username format");
|
2025-06-11 17:21:37 +01:00
|
|
|
|
2024-05-02 14:52:50 -06:00
|
|
|
$(document).ready(function() {
|
2024-05-18 23:47:05 +02:00
|
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
|
|
|
|
|
|
|
|
$('#formsaveuser').validate({
|
|
|
|
|
rules: {
|
|
|
|
|
username: {
|
|
|
|
|
required: true,
|
|
|
|
|
usernamePattern: true
|
|
|
|
|
},
|
|
|
|
|
password: {
|
|
|
|
|
required: true
|
|
|
|
|
},
|
2024-08-16 12:57:37 +02:00
|
|
|
role: {
|
|
|
|
|
required: true
|
2024-05-18 23:47:05 +02:00
|
|
|
},
|
2024-08-16 12:57:37 +02:00
|
|
|
authType: {
|
|
|
|
|
required: true
|
2024-05-18 23:47:05 +02:00
|
|
|
}
|
2024-08-16 12:57:37 +02:00
|
|
|
},
|
|
|
|
|
messages: {
|
2025-06-11 17:21:37 +01:00
|
|
|
username: {
|
|
|
|
|
usernamePattern: /*[[#{invalidUsernameMessage}]]*/ "Invalid username format"
|
|
|
|
|
},
|
2024-08-16 12:57:37 +02:00
|
|
|
},
|
|
|
|
|
errorPlacement: function(error, element) {
|
|
|
|
|
if (element.attr("name") === "username") {
|
|
|
|
|
$("#usernameError").text(error.text()).show();
|
|
|
|
|
} else if (element.attr("name") !== "role" && element.attr("name") !== "authType") {
|
|
|
|
|
error.insertAfter(element);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
success: function(label, element) {
|
|
|
|
|
if ($(element).attr("name") === "username") {
|
|
|
|
|
$("#usernameError").hide();
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-05-18 23:47:05 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('#username').on('input', function() {
|
2025-06-11 17:21:37 +01:00
|
|
|
var usernameInput = $(this);
|
|
|
|
|
var isValid = usernameInput[0].checkValidity();
|
|
|
|
|
var errorSpan = $('#usernameError');
|
2024-05-18 23:47:05 +02:00
|
|
|
|
2025-06-11 17:21:37 +01:00
|
|
|
if (isValid) {
|
|
|
|
|
usernameInput.removeClass('invalid').addClass('valid');
|
|
|
|
|
errorSpan.hide();
|
|
|
|
|
} else {
|
|
|
|
|
usernameInput.removeClass('valid').addClass('invalid');
|
|
|
|
|
errorSpan.show();
|
|
|
|
|
}
|
2024-05-18 23:47:05 +02:00
|
|
|
});
|
2024-08-16 12:57:37 +02:00
|
|
|
|
|
|
|
|
$('#authType').on('change', function() {
|
2025-06-11 17:21:37 +01:00
|
|
|
var authType = $(this).val();
|
|
|
|
|
var passwordField = $('#password');
|
|
|
|
|
var passwordFieldContainer = $('#passwordContainer');
|
|
|
|
|
var checkboxContainer = $('#checkboxContainer');
|
2024-08-16 12:57:37 +02:00
|
|
|
|
2025-06-11 17:21:37 +01:00
|
|
|
if (authType === 'sso') {
|
|
|
|
|
passwordField.removeAttr('required');
|
|
|
|
|
passwordField.prop('disabled', true).val('');
|
|
|
|
|
passwordFieldContainer.slideUp('fast');
|
|
|
|
|
checkboxContainer.slideUp('fast');
|
|
|
|
|
} else {
|
|
|
|
|
passwordField.prop('disabled', false);
|
|
|
|
|
passwordField.attr('required', 'required');
|
|
|
|
|
passwordFieldContainer.slideDown('fast');
|
|
|
|
|
checkboxContainer.slideDown('fast');
|
|
|
|
|
}
|
2024-08-16 12:57:37 +02:00
|
|
|
});
|
2024-05-18 23:47:05 +02:00
|
|
|
});
|
2024-05-02 14:52:50 -06:00
|
|
|
</script>
|
2024-02-16 22:49:06 +01:00
|
|
|
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
|
2023-08-13 01:12:29 +01:00
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</body>
|
2025-06-11 17:21:37 +01:00
|
|
|
</html>
|
