add: redesign addUsers.html (#1407)

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>

src/main/resources/messages_ar_AR.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Admin User Control Settings
 adminUserSettings.admin=Admin
 adminUserSettings.user=User
 adminUserSettings.addUser=Add New User
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Roles
 adminUserSettings.role=Role

src/main/resources/messages_bg_BG.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Настройки за администраторск
 adminUserSettings.admin=Администратор
 adminUserSettings.user=Потребител
 adminUserSettings.addUser=Добавяне на нов потребител
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Потребителското име може да съдържа само букви, цифри и следните специални символи @._+- или трябва да е валиден имейл адрес.
 adminUserSettings.roles=Роли
 adminUserSettings.role=Роля

src/main/resources/messages_ca_CA.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Usuari Admin Opcions Control
 adminUserSettings.admin=Admin
 adminUserSettings.user=Usuari
 adminUserSettings.addUser=Afegir Usuari
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Rols
 adminUserSettings.role=Rol

src/main/resources/messages_cs_CZ.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Admin User Control Settings
 adminUserSettings.admin=Admin
 adminUserSettings.user=Uživatel
 adminUserSettings.addUser=Přidat Nového Uživatele
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Uživatelské Jméno může obsahovat pouze písmena, čísla a následující speciální znaky @._+- nebo musí být správná emailová adresa.
 adminUserSettings.roles=Role
 adminUserSettings.role=Role

src/main/resources/messages_de_DE.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Administrator-Benutzerkontrolle
 adminUserSettings.admin=Administrator
 adminUserSettings.user=Benutzer
 adminUserSettings.addUser=Neuen Benutzer hinzufügen
+adminUserSettings.deleteUser=Benutzer löschen
+adminUserSettings.confirmDeleteUser=Soll der Benutzer gelöscht werden?
 adminUserSettings.usernameInfo=Der Benutzername darf nur Buchstaben, Zahlen und die folgenden Sonderzeichen @._+- enthalten oder muss eine gültige E-Mail-Adresse sein.
 adminUserSettings.roles=Rollen
 adminUserSettings.role=Rolle
@@ -332,9 +334,9 @@ home.certSign.title=Mit Zertifikat signieren
 home.certSign.desc=Ein PDF mit einem Zertifikat/Schlüssel (PEM/P12) signieren
 certSign.tags=authentifizieren,pem,p12,offiziell,verschlüsseln
 
-home.removeCertSign.title=Remove Certificate Sign
+home.removeCertSign.title=Zertifikatsignatur entfernen
-home.removeCertSign.desc=Remove certificate signature from PDF
+home.removeCertSign.desc=Zertifikatsignatur aus PDF entfernen
-removeCertSign.tags=authenticate,PEM,P12,official,decrypt
+removeCertSign.tags=authentifizieren,PEM,P12,offiziell,entschlüsseln,decrypt
 
 home.pageLayout.title=Mehrseitiges Layout
 home.pageLayout.desc=Mehrere Seiten eines PDF zu einer Seite zusammenführen

src/main/resources/messages_el_GR.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Ρυθμίσεις ελέγχου Διαχειριστ
 adminUserSettings.admin=Διαχειριστής
 adminUserSettings.user=Χρήστης
 adminUserSettings.addUser=Προσθήκη νέου Χρήστη
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Ρόλοι
 adminUserSettings.role=Ρόλος

src/main/resources/messages_en_GB.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Admin User Control Settings
 adminUserSettings.admin=Admin
 adminUserSettings.user=User
 adminUserSettings.addUser=Add New User
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Roles
 adminUserSettings.role=Role

src/main/resources/messages_en_US.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Admin User Control Settings
 adminUserSettings.admin=Admin
 adminUserSettings.user=User
 adminUserSettings.addUser=Add New User
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Roles
 adminUserSettings.role=Role

src/main/resources/messages_es_ES.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Configuración de control de usuario administrador
 adminUserSettings.admin=Administrador
 adminUserSettings.user=Usuario
 adminUserSettings.addUser=Añadir Nuevo Usuario
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=El nombre de usuario solo puede contener letras, números y los siguientes caracteres especiales @._+- o debe ser una dirección de correo electrónico válida.
 adminUserSettings.roles=Roles
 adminUserSettings.role=Rol

src/main/resources/messages_eu_ES.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Admin Erabiltzailearen Ezarpenen Kontrolak
 adminUserSettings.admin=Admin
 adminUserSettings.user=Erabiltzaile
 adminUserSettings.addUser=Erabiltzaile berria
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Rolak
 adminUserSettings.role=Rol

src/main/resources/messages_fr_FR.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Administration des paramètres des utilisateurs
 adminUserSettings.admin=Administateur
 adminUserSettings.user=Utilisateur
 adminUserSettings.addUser=Ajouter un utilisateur
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Le nom d'utilisateur ne peut contenir que des lettres, des chiffres et les caractères spéciaux suivants @._+- ou doit être une adresse e-mail valide.
 adminUserSettings.roles=Rôles
 adminUserSettings.role=Rôle

src/main/resources/messages_hi_IN.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=व्यवस्थापक उपयोगकर्
 adminUserSettings.admin=व्यवस्थापक
 adminUserSettings.user=उपयोगकर्ता
 adminUserSettings.addUser=नया उपयोगकर्ता जोड़ें
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=रोल्स
 adminUserSettings.role=रोल

src/main/resources/messages_hr_HR.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Postavka kontrole korisnika za administratora
 adminUserSettings.admin=Administrator
 adminUserSettings.user=Korisnik
 adminUserSettings.addUser=Dodaj novog korisnika
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Korisničko ime može sadržavati samo slova, brojke i sljedeće posebne znakove @._+- ili mora biti važeća adresa e-pošte.
 adminUserSettings.roles=Uloge
 adminUserSettings.role=Uloga

src/main/resources/messages_hu_HU.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Adminisztrátori Felhasználói Vezérlési Beállítá
 adminUserSettings.admin=Adminisztrátor
 adminUserSettings.user=Felhasználó
 adminUserSettings.addUser=Új felhasználó hozzáadása
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Szerepek
 adminUserSettings.role=Szerep

src/main/resources/messages_id_ID.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Pengaturan Kontrol Admin
 adminUserSettings.admin=Admin
 adminUserSettings.user=Pengguna
 adminUserSettings.addUser=Tambahkan Pengguna Baru
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Peran
 adminUserSettings.role=Peran

src/main/resources/messages_it_IT.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Impostazioni di controllo utente amministratore
 adminUserSettings.admin=Amministratore
 adminUserSettings.user=Utente
 adminUserSettings.addUser=Aggiungi un nuovo Utente
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Il nome utente può contenere solo lettere, numeri e i seguenti caratteri speciali @._+- oppure deve essere un indirizzo email valido.
 adminUserSettings.roles=Ruoli
 adminUserSettings.role=Ruolo

src/main/resources/messages_ja_JP.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=管理者ユーザー制御設定
 adminUserSettings.admin=管理者
 adminUserSettings.user=ユーザー
 adminUserSettings.addUser=新しいユーザを追加
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=ユーザー名には、文字、数字、および次の特殊文字 @._+- のみを含めることができます。または、有効な電子メール アドレスである必要があります。
 adminUserSettings.roles=役割
 adminUserSettings.role=役割

src/main/resources/messages_ko_KR.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=사용자 관리
 adminUserSettings.admin=관리자
 adminUserSettings.user=사용자
 adminUserSettings.addUser=새 사용자 추가
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=사용자 이름은 문자, 숫자, 특수 문자 @._+-만 포함할 수 있으며 유효한 이메일 주소여야 합니다.
 adminUserSettings.roles=역할
 adminUserSettings.role=역할

src/main/resources/messages_nl_NL.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Beheer gebruikers
 adminUserSettings.admin=Beheerder
 adminUserSettings.user=Gebruiker
 adminUserSettings.addUser=Voeg nieuwe gebruiker toe
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Rollen
 adminUserSettings.role=Rol

src/main/resources/messages_no_NB.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Admin Brukerkontroll Innstillinger
 adminUserSettings.admin=Admin
 adminUserSettings.user=Bruker
 adminUserSettings.addUser=Legg til Ny Bruker
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Brukernavn kan bare inneholde bokstaver, tall og følgende spesialtegn @._+- eller må være en gyldig e-postadresse.
 adminUserSettings.roles=Roller
 adminUserSettings.role=Rolle

src/main/resources/messages_pl_PL.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Admin User Control Settings
 adminUserSettings.admin=Admin
 adminUserSettings.user=User
 adminUserSettings.addUser=Add New User
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Roles
 adminUserSettings.role=Role

src/main/resources/messages_pt_BR.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Admin User Control Settings
 adminUserSettings.admin=Admin
 adminUserSettings.user=User
 adminUserSettings.addUser=Add New User
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Roles
 adminUserSettings.role=Role

src/main/resources/messages_pt_PT.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Admin User Control Settings
 adminUserSettings.admin=Admin
 adminUserSettings.user=User
 adminUserSettings.addUser=Add New User
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Roles
 adminUserSettings.role=Role

src/main/resources/messages_ro_RO.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Admin User Control Settings
 adminUserSettings.admin=Admin
 adminUserSettings.user=User
 adminUserSettings.addUser=Add New User
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Roles
 adminUserSettings.role=Role

src/main/resources/messages_ru_RU.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Настройки контроля пользоват
 adminUserSettings.admin=Администратор
 adminUserSettings.user=Пользователь
 adminUserSettings.addUser=Добавить нового пользователя
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Имя пользователя может содержать только буквы, цифры и следующие специальные символы @._+- или должно быть действительным адресом электронной почты.
 adminUserSettings.roles=Роли
 adminUserSettings.role=Роль

src/main/resources/messages_sk_SK.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Admin nastavenia kontroly používateľov
 adminUserSettings.admin=Admin
 adminUserSettings.user=Používateľ
 adminUserSettings.addUser=Pridať nového používateľa
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Používateľské meno musí obsahovať iba písmená a čísla, žiadne medzery alebo špeciálne znaky.
 adminUserSettings.roles=Role
 adminUserSettings.role=Rola

src/main/resources/messages_sr_LATN_RS.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Podešavanja kontrole korisnika za administratora
 adminUserSettings.admin=Administrator
 adminUserSettings.user=Korisnik
 adminUserSettings.addUser=Dodaj novog korisnika
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Uloge
 adminUserSettings.role=Uloga

src/main/resources/messages_sv_SE.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Admin User Control Settings
 adminUserSettings.admin=Admin
 adminUserSettings.user=User
 adminUserSettings.addUser=Add New User
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Username can only contain letters, numbers and the following special characters @._+- or must be a valid email address.
 adminUserSettings.roles=Roles
 adminUserSettings.role=Role

src/main/resources/messages_tr_TR.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Yönetici Kullanıcı Kontrol Ayarları
 adminUserSettings.admin=Yönetici
 adminUserSettings.user=Kullanıcı
 adminUserSettings.addUser=Yeni Kullanıcı Ekle
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Kullanıcı adı yalnızca harf, rakam ve aşağıdaki özel karakterleri @._+- içerebilir veya geçerli bir e-posta adresi olmalıdır.
 adminUserSettings.roles=Roller
 adminUserSettings.role=Rol

src/main/resources/messages_uk_UA.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=Налаштування контролю корист
 adminUserSettings.admin=Адміністратор
 adminUserSettings.user=Користувач
 adminUserSettings.addUser=Додати нового користувача
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=Ім’я користувача може містити лише літери, цифри та наступні спеціальні символи @._+- або має бути дійсною електронною адресою.
 adminUserSettings.roles=Ролі
 adminUserSettings.role=Роль

src/main/resources/messages_zh_CN.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=管理员用户控制设置
 adminUserSettings.admin=管理员
 adminUserSettings.user=用户
 adminUserSettings.addUser=添加新用户
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=用户名只能包含字母、数字和以下特殊字符@._+-，或者必须是有效的电子邮件地址。
 adminUserSettings.roles=角色
 adminUserSettings.role=角色

src/main/resources/messages_zh_TW.properties

@@ -173,6 +173,8 @@ adminUserSettings.header=管理使用者控制設定
 adminUserSettings.admin=管理員
 adminUserSettings.user=使用者
 adminUserSettings.addUser=新增使用者
+adminUserSettings.deleteUser=Delete User
+adminUserSettings.confirmDeleteUser=Should the user be deleted?
 adminUserSettings.usernameInfo=使用者名稱只能包含字母、數字和以下特殊字元@._+-，或必須是有效的電子郵件地址。
 adminUserSettings.roles=角色
 adminUserSettings.role=角色

src/main/resources/templates/account.html

@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-9">
+            <div class="col-md-9 bg-card">
 
               <!-- User Settings Title -->
               <h2 class="text-center" th:text="#{account.accountSettings}">User Settings</h2>

src/main/resources/templates/addUsers.html

@@ -16,6 +16,16 @@
 
               <!-- User Settings Title -->
               <h2 class="text-center" th:text="#{adminUserSettings.header}">Admin User Control Settings</h2>
+              <div style="background: var(--md-sys-color-outline-variant);padding: .8rem; margin: 10px 0; border-radius: 2rem; text-align: center;">
+                <a href="#" data-bs-toggle="modal" data-bs-target="#addUserModal" class="btn btn-outline-info" th:title="#{adminUserSettings.addUser}">
+                  <span class="material-symbols-rounded">person_add</span>
+                  <span th:text="#{adminUserSettings.addUser}">Add New User</span>
+                </a>
+                <a href="#" data-bs-toggle="modal" data-bs-target="#changeUserRoleModal" class="btn btn-outline-info" th:title="#{adminUserSettings.changeUserRole}">
+                  <span class="material-symbols-rounded">edit</span>
+                  <span th:text="#{adminUserSettings.changeUserRole}">Change User's Role</span>
+                </a>
+              </div>
               <div th:if="${deleteMessage}" class="alert alert-danger">
                 <span th:text="#{${deleteMessage}}">Message</span>
               </div>
@@ -30,55 +40,47 @@
                 </thead>
                 <tbody>
                   <tr th:each="user : ${users}">
-                    <td th:text="${user.username}"></td>
+                    <td style="align-content: center;" th:text="${user.username}"></td>
-                    <td th:text="#{${user.roleName}}"></td>
+                    <td style="align-content: center;" th:text="#{${user.roleName}}"></td>
-                    <td>
+                    <td style="align-content: center;">
-                      <form th:if="${user.username != currentUsername}" th:action="@{'/api/v1/user/admin/deleteUser/' + ${user.username}}" method="post">
+                      <form th:if="${user.username != currentUsername}" th:action="@{'/api/v1/user/admin/deleteUser/' + ${user.username}}" method="post" onsubmit="return confirmDelete()">
-                        <button class="btn btn-danger" type="submit" th:text="#{delete}">Delete</button>
+                        <button type="submit" th:title="#{adminUserSettings.deleteUser}" class="btn btn-info"><span class="material-symbols-rounded">person_remove</span></button>
                       </form>
+                      <script th:inline="javascript">
+                        const confirm_text = /*[[#{adminUserSettings.confirmDeleteUser}]]*/ 'Should the user be deleted?';
+                        function confirmDelete() {
+                          return confirm(confirm_text);
+                        }
+                      </script>
+                      <a th:if="${user.username == currentUsername}" th:href="@{'/account'}" class="btn btn-outline-info"><span class="material-symbols-rounded">edit</span></a>
                     </td>
-                    <td th:text="${user.authenticationType}"></td>
+                    <td style="align-content: center;" th:text="${user.authenticationType}"></td>
                   </tr>
                 </tbody>
               </table>
-
-              <h2 th:text="#{adminUserSettings.addUser}">Add New User</h2>
-              <div th:if="${addMessage}" class="alert alert-danger">
-                <span th:text="#{${addMessage}}">Default message if not found</span>
             </div>
-              <button class="btn btn-outline-info" data-toggle="tooltip" data-placement="auto" th:title="#{adminUserSettings.usernameInfo}" th:text="#{help}">Help</button>
-              <form id="formsaveuser" th:action="@{/api/v1/user/admin/saveUser}" method="post">
-                <div class="mb-3">
-                  <label for="username" th:text="#{username}">Username</label>
-                  <input type="text" class="form-control" name="username" id="username" th:title="#{adminUserSettings.usernameInfo}" required>
-                  <span id="usernameError" style="display: none;" th:text="#{invalidUsernameMessage}">Invalid username!</span>
           </div>
-                <div class="mb-3">
-                  <label for="password" th:text="#{password}">Password</label>
-                  <input type="password" class="form-control" name="password" required>
         </div>
-                <div class="mb-3">
-                  <label for="role" th:text="#{adminUserSettings.role}">Role</label>
-                  <select name="role" class="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="mb-3">
-                  <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>
 
-                <!-- Add other fields as required -->
+      <!-- change User role Modal start -->
-                <button type="submit" class="btn btn-primary" th:text="#{adminUserSettings.submit}">Save User</button>
+      <div class="modal fade" id="changeUserRoleModal" tabindex="-1" aria-labelledby="changeUserRoleModalLabel" aria-hidden="true">
-              </form>
+        <div class="modal-dialog modal-dialog-centered" role="document">
-              <hr />
+          <div class="modal-content">
+            <div class="modal-header">
               <h2 th:text="#{adminUserSettings.changeUserRole}">Change User's Role</h2>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+                <span class="material-symbols-rounded">
+                  close
+                </span>
+              </button>
+            </div>
+            <div class="modal-body">
               <button class="btn btn-outline-info" data-toggle="tooltip" data-placement="auto" th:title="#{downgradeCurrentUserLongMessage}" th:text="#{help}">Help</button>
               <div th:if="${changeMessage}" class="alert alert-danger">
                 <span th:text="#{${changeMessage}}">Default message if not found</span>
               </div>
-              <form th:action="@{/api/v1/user/admin/changeRole}" method="post">
+              <form th:action="@{'/api/v1/user/admin/changeRole'}" method="post">
                 <div class="mb-3">
                   <label for="username" th:text="#{username}">Username</label>
                   <select name="username" class="form-control" required>
@@ -98,9 +100,59 @@
                 <button type="submit" class="btn btn-primary" th:text="#{adminUserSettings.submit}">Save User</button>
               </form>
             </div>
+            <div class="modal-footer"></div>
           </div>
         </div>
       </div>
+      <!-- change User role Modal end -->
+
+      <!-- Add User Modal start -->
+      <div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="addUserModalLabel" th:text="#{adminUserSettings.addUser}">Add New User</h5>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+                <span class="material-symbols-rounded">
+                  close
+                </span>
+              </button>
+            </div>
+            <div class="modal-body">
+              <div th:if="${addMessage}" class="alert alert-danger">
+                <span th:text="#{${addMessage}}">Default message if not found</span>
+              </div>
+              <button class="btn btn-outline-info" data-toggle="tooltip" data-placement="auto" th:title="#{adminUserSettings.usernameInfo}" th:text="#{help}">Help</button>
+              <form id="formsaveuser" th:action="@{'/api/v1/user/admin/saveUser'}" method="post">
+                <div class="mb-3">
+                  <label for="username" th:text="#{username}">Username</label>
+                  <input type="text" class="form-control" name="username" id="username" th:title="#{adminUserSettings.usernameInfo}" required>
+                  <span id="usernameError" style="display: none;" th:text="#{invalidUsernameMessage}">Invalid username!</span>
+                </div>
+                <div class="mb-3">
+                  <label for="password" th:text="#{password}">Password</label>
+                  <input type="password" class="form-control" name="password" required>
+                </div>
+                <div class="mb-3">
+                  <label for="role" th:text="#{adminUserSettings.role}">Role</label>
+                  <select name="role" class="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="form-check mb-3">
+                  <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>
+                <button type="submit" class="btn btn-primary" th:text="#{adminUserSettings.submit}">Save User</button>
+              </form>
+            </div>
+            <div class="modal-footer"></div>
+          </div>
+        </div>
+      </div>
+      <!-- Add User Modal end -->
+
       <script th:inline="javascript">
         jQuery.validator.addMethod("usernamePattern", function(value, element) {
             return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9@._+-]*[a-zA-Z0-9]$|^(?=.{1,64}@)[A-Za-z0-9]+(\.[A-Za-z0-9_+.-]+)*@[^-][A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*(\.[A-Za-z]{2,})$/.test(value);
@@ -154,5 +206,27 @@
       </script>
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
+    <div th:if="${oAuth2Enabled}" class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="editUserModalLabel" th:text="#{login.ssoSignIn}"></h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+              <span class="material-symbols-rounded">
+                close
+              </span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="mb-3" th:each="provider : ${providerlist}">
+              <a th:href="@{|/oauth2/authorization/${provider.key}|}" th:text="${provider.value}" class="w-100 btn btn-lg btn-primary">OpenID Connect</a>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}"></button>
+          </div>
+        </div>
+      </div>
+    </div>
   </body>
 </html>

src/main/resources/templates/convert/html-to-pdf.html

@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="mb-3 bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon convert">html</span>
                 <span class="tool-header-text" th:text="#{HTMLToPDF.header}"></span>

src/main/resources/templates/home.html

@@ -44,7 +44,6 @@
             </a>
           </div>
 
-
           <div
             th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', toolIcon='family_history', tags=#{pipeline.tags}, toolGroup='advance')}">
           </div>

src/main/resources/templates/security/sanitize-pdf.html

@@ -20,23 +20,23 @@
                 <div class="mb-3">
                   <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 </div>
-                <div class="form-check">
+                <div class="form-check ms-3">
                   <input type="checkbox" id="removeJavaScript" name="removeJavaScript" checked>
                   <label for="removeJavaScript" th:text="#{sanitizePDF.selectText.1}"></label>
                 </div>
-                <div class="form-check">
+                <div class="form-check ms-3">
                   <input type="checkbox" id="removeEmbeddedFiles" name="removeEmbeddedFiles" checked>
                   <label for="removeEmbeddedFiles" th:text="#{sanitizePDF.selectText.2}"></label>
                 </div>
-                <div class="form-check">
+                <div class="form-check ms-3">
                   <input type="checkbox" id="removeMetadata" name="removeMetadata" checked>
                   <label for="removeMetadata" th:text="#{sanitizePDF.selectText.3}"></label>
                 </div>
-                <div class="form-check">
+                <div class="form-check ms-3">
                   <input type="checkbox" id="removeLinks" name="removeLinks">
                   <label for="removeLinks" th:text="#{sanitizePDF.selectText.4}"></label>
                 </div>
-                <div class="form-check">
+                <div class="form-check ms-3">
                   <input type="checkbox" id="removeFonts" name="removeFonts">
                   <label for="removeFonts" th:text="#{sanitizePDF.selectText.5}"></label>
                 </div>