From 994d876ba30717b9d4a77f55106738909fcfb3e7 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Tue, 19 Nov 2024 16:42:53 +0100
Subject: [PATCH 01/79] Fix multiselect buttons with rounded corners

---
 resources/sass/override/_multiselect.scss | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/resources/sass/override/_multiselect.scss b/resources/sass/override/_multiselect.scss
index 2a1dabee7..9021ee0d3 100644
--- a/resources/sass/override/_multiselect.scss
+++ b/resources/sass/override/_multiselect.scss
@@ -127,16 +127,20 @@
 }
 
 .p-inputgroup > .multiselect .multiselect__tags {
-    border-radius: 0;
+    border-radius: 0 !important;
     margin: 0;
 }
 
 .p-inputgroup .multiselect:first-child .multiselect__tags {
-    border-top-left-radius: var(--p-inputgroup-addon-border-radius);
-    border-bottom-left-radius: var(--p-inputgroup-addon-border-radius);
+    border-top-left-radius: var(--p-inputgroup-addon-border-radius) !important;
+    border-bottom-left-radius: var(
+        --p-inputgroup-addon-border-radius
+    ) !important;
 }
 
 .p-inputgroup .multiselect:last-child .multiselect__tags {
-    border-top-right-radius: var(--p-inputgroup-addon-border-radius);
-    border-bottom-right-radius: var(--p-inputgroup-addon-border-radius);
+    border-top-right-radius: var(--p-inputgroup-addon-border-radius) !important;
+    border-bottom-right-radius: var(
+        --p-inputgroup-addon-border-radius
+    ) !important;
 }

From 3f4a34e6cfcf0004fc292d144be259e0a0a87256 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Tue, 19 Nov 2024 16:44:48 +0100
Subject: [PATCH 02/79] Fix frontend user view / edit permissions

---
 resources/js/policies/UserPolicy.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/policies/UserPolicy.js b/resources/js/policies/UserPolicy.js
index 8568eb694..a3c82234c 100644
--- a/resources/js/policies/UserPolicy.js
+++ b/resources/js/policies/UserPolicy.js
@@ -22,7 +22,7 @@ export default {
   view(user, model) {
     if (!user) {
       return false;
-    } else if (model.id === user.id) {
+    } else if (parseInt(model.id) === user.id) {
       return true;
     }
 
@@ -49,7 +49,7 @@ export default {
   update(user, model) {
     if (!user) {
       return false;
-    } else if (model.id === user.id) {
+    } else if (parseInt(model.id) === user.id) {
       return true;
     }
 

From 9fa0a66e79cccdd3514d43d314c6b07c1da2ad17 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Tue, 19 Nov 2024 17:46:31 +0100
Subject: [PATCH 03/79] Fix missing permissions for user index list

---
 database/seeders/RolesAndPermissionsSeeder.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/database/seeders/RolesAndPermissionsSeeder.php b/database/seeders/RolesAndPermissionsSeeder.php
index bd9b69786..6cabb5e76 100644
--- a/database/seeders/RolesAndPermissionsSeeder.php
+++ b/database/seeders/RolesAndPermissionsSeeder.php
@@ -104,7 +104,7 @@ public function run()
         Permission::setIncludedPermissions('users.create', ['users.updateOwnAttributes', 'users.update', 'users.view', 'users.viewAny', 'roles.viewAny', 'admin.view']);
         Permission::setIncludedPermissions('users.update', ['users.updateOwnAttributes', 'users.view', 'users.viewAny', 'roles.viewAny', 'admin.view']);
         Permission::setIncludedPermissions('users.view', ['users.viewAny', 'roles.viewAny', 'admin.view']);
-        Permission::setIncludedPermissions('users.viewAny', ['admin.view']);
+        Permission::setIncludedPermissions('users.viewAny', ['admin.view', 'roles.viewAny']);
 
         Permission::setIncludedPermissions('roomTypes.delete', ['roomTypes.create', 'roomTypes.update', 'roomTypes.view', 'serverPools.viewAny', 'admin.view', 'roles.viewAny']);
         Permission::setIncludedPermissions('roomTypes.create', ['roomTypes.update', 'roomTypes.view', 'serverPools.viewAny', 'admin.view', 'roles.viewAny']);

From 85b31604835db70e657dd6b71919ba331960e0b9 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Wed, 20 Nov 2024 14:16:01 +0100
Subject: [PATCH 04/79] Fix error handling

---
 resources/js/views/AdminUsersIndex.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/views/AdminUsersIndex.vue b/resources/js/views/AdminUsersIndex.vue
index dbb324fc7..799968115 100644
--- a/resources/js/views/AdminUsersIndex.vue
+++ b/resources/js/views/AdminUsersIndex.vue
@@ -321,7 +321,7 @@ function loadRoles(page = 1) {
     .catch((error) => {
       rolesMultiselectRef.value.deactivate();
       rolesLoadingError.value = true;
-      error(error, this.$root, error.message);
+      api.error(error);
     })
     .finally(() => {
       rolesLoading.value = false;

From ff1b818db307c07abe7c53c8052e10daf22ae508 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Wed, 20 Nov 2024 14:22:44 +0100
Subject: [PATCH 05/79] Close multiselect dropdown on selection

---
 resources/js/views/AdminRoomTypesView.vue | 2 +-
 resources/js/views/AdminUsersIndex.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/views/AdminRoomTypesView.vue b/resources/js/views/AdminRoomTypesView.vue
index 0e7366218..18c36d34a 100644
--- a/resources/js/views/AdminRoomTypesView.vue
+++ b/resources/js/views/AdminRoomTypesView.vue
@@ -135,7 +135,7 @@
                   :searchable="false"
                   :internal-search="false"
                   :clear-on-select="false"
-                  :close-on-select="false"
+                  :close-on-select="true"
                   :show-no-results="false"
                   :show-labels="false"
                   :options="serverPools"
diff --git a/resources/js/views/AdminUsersIndex.vue b/resources/js/views/AdminUsersIndex.vue
index 799968115..b567e3b14 100644
--- a/resources/js/views/AdminUsersIndex.vue
+++ b/resources/js/views/AdminUsersIndex.vue
@@ -31,7 +31,7 @@
             :searchable="false"
             :internal-search="false"
             :clear-on-select="false"
-            :close-on-select="false"
+            :close-on-select="true"
             :show-no-results="false"
             :show-labels="false"
             :options="roles"

From 1785da1566d69f8189bb00551b6ba266159c1e85 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Wed, 20 Nov 2024 14:49:54 +0100
Subject: [PATCH 06/79] Disable role select during loading

---
 resources/js/views/AdminUsersIndex.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/views/AdminUsersIndex.vue b/resources/js/views/AdminUsersIndex.vue
index b567e3b14..caff61d87 100644
--- a/resources/js/views/AdminUsersIndex.vue
+++ b/resources/js/views/AdminUsersIndex.vue
@@ -35,7 +35,7 @@
             :show-no-results="false"
             :show-labels="false"
             :options="roles"
-            :disabled="rolesLoadingError"
+            :disabled="rolesLoadingError || isBusy"
             :loading="rolesLoading"
             :allow-empty="true"
             @update:model-value="loadData(1)"

From 77c5832a4aaeee9272c5fa2b4e8a6bb15d3d301a Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Wed, 20 Nov 2024 18:05:08 +0100
Subject: [PATCH 07/79] Bugfix overlay reload buttons

---
 resources/js/views/AdminRolesView.vue       | 2 +-
 resources/js/views/AdminRoomTypesView.vue   | 2 +-
 resources/js/views/AdminServerPoolsView.vue | 2 +-
 resources/js/views/AdminServersView.vue     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/views/AdminRolesView.vue b/resources/js/views/AdminRolesView.vue
index ca1e5c063..3638fcb55 100644
--- a/resources/js/views/AdminRolesView.vue
+++ b/resources/js/views/AdminRolesView.vue
@@ -30,7 +30,7 @@
     </div>
 
     <OverlayComponent :show="isBusy || modelLoadingError">
-      <template #loading>
+      <template #overlay>
         <LoadingRetryButton
           :error="modelLoadingError"
           @reload="load()"
diff --git a/resources/js/views/AdminRoomTypesView.vue b/resources/js/views/AdminRoomTypesView.vue
index 18c36d34a..6908c3c35 100644
--- a/resources/js/views/AdminRoomTypesView.vue
+++ b/resources/js/views/AdminRoomTypesView.vue
@@ -29,7 +29,7 @@
       </div>
     </div>
     <OverlayComponent :show="isBusy || modelLoadingError">
-      <template #loading>
+      <template #overlay>
         <LoadingRetryButton
           :error="modelLoadingError"
           @reload="loadRoomType"
diff --git a/resources/js/views/AdminServerPoolsView.vue b/resources/js/views/AdminServerPoolsView.vue
index 8687358cb..425d7a883 100644
--- a/resources/js/views/AdminServerPoolsView.vue
+++ b/resources/js/views/AdminServerPoolsView.vue
@@ -31,7 +31,7 @@
     </div>
 
     <OverlayComponent :show="isBusy">
-      <template #loading>
+      <template #overlay>
         <LoadingRetryButton
           :error="modelLoadingError"
           @reload="load"
diff --git a/resources/js/views/AdminServersView.vue b/resources/js/views/AdminServersView.vue
index bc424d64b..2ef6d4964 100644
--- a/resources/js/views/AdminServersView.vue
+++ b/resources/js/views/AdminServersView.vue
@@ -30,7 +30,7 @@
     </div>
 
     <OverlayComponent :show="isBusy">
-      <template #loading>
+      <template #overlay>
         <LoadingRetryButton
           :error="modelLoadingError"
           @reload="load"

From 7f2f633328ef981b8776e6c7763780a1d93ba481 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 25 Nov 2024 08:58:04 +0100
Subject: [PATCH 08/79] Start adding AdminUsers Index and new tests

---
 resources/js/components/RoleSelect.vue        |    5 +-
 .../components/SettingsUsersDeleteButton.vue  |    4 +
 .../SettingsUsersResetPasswordButton.vue      |    4 +
 resources/js/views/AdminUsersIndex.vue        |   32 +-
 resources/js/views/AdminUsersNew.vue          |   33 +-
 tests/Frontend/e2e/AdminUsersIndex.cy.js      | 1758 +++++++++++++++++
 .../e2e/AdminUsersIndexUserActions.cy.js      |  380 ++++
 tests/Frontend/e2e/AdminUsersNew.cy.js        |  922 +++++++++
 tests/Frontend/e2e/Login.cy.js                |    6 +-
 tests/Frontend/e2e/Logout.cy.js               |    4 +-
 tests/Frontend/e2e/RoomsViewMembers.cy.js     |    1 +
 .../e2e/RoomsViewPersonalizedLinks.cy.js      |    1 +
 ...omsViewPersonalizedLinksTokenActions.cy.js |   14 +-
 tests/Frontend/e2e/UserProfileBase.cy.js      |   16 +
 tests/Frontend/fixtures/config.json           |    4 +-
 tests/Frontend/fixtures/user2.json            |   22 +
 tests/Frontend/fixtures/userRoles.json        |   36 +
 tests/Frontend/fixtures/users.json            |   57 +
 .../support/commands/interceptCommands.js     |   53 +
 .../Frontend/support/commands/roomCommands.js |    2 +
 20 files changed, 3330 insertions(+), 24 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminUsersIndex.cy.js
 create mode 100644 tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
 create mode 100644 tests/Frontend/e2e/AdminUsersNew.cy.js
 create mode 100644 tests/Frontend/fixtures/user2.json
 create mode 100644 tests/Frontend/fixtures/userRoles.json
 create mode 100644 tests/Frontend/fixtures/users.json

diff --git a/resources/js/components/RoleSelect.vue b/resources/js/components/RoleSelect.vue
index 998cd14c8..4dea9cf2f 100644
--- a/resources/js/components/RoleSelect.vue
+++ b/resources/js/components/RoleSelect.vue
@@ -29,7 +29,7 @@
         {{ option.name }}
       </template>
       <template #tag="{ option, remove }">
-        <Chip :label="option.name">
+        <Chip :label="option.name" data-test="role-chip">
           <span>{{ option.name }}</span>
           <Button
             v-if="
@@ -41,6 +41,7 @@
             class="h-5 w-5 rounded-full text-sm"
             icon="fas fa-xmark"
             :aria-label="$t('admin.users.remove_role', { name: option.name })"
+            data-test="remove-role-button"
             @click="remove(option)"
           />
         </Chip>
@@ -53,6 +54,7 @@
             outlined
             icon="fa-solid fa-arrow-left"
             :label="$t('app.previous_page')"
+            data-test="previous-page-button"
             @click="loadRoles(Math.max(1, currentPage - 1))"
           />
           <Button
@@ -61,6 +63,7 @@
             outlined
             icon="fa-solid fa-arrow-right"
             :label="$t('app.next_page')"
+            data-test="next-page-button"
             @click="loadRoles(currentPage + 1)"
           />
         </div>
diff --git a/resources/js/components/SettingsUsersDeleteButton.vue b/resources/js/components/SettingsUsersDeleteButton.vue
index 46f6aa725..692bf6a35 100644
--- a/resources/js/components/SettingsUsersDeleteButton.vue
+++ b/resources/js/components/SettingsUsersDeleteButton.vue
@@ -15,6 +15,7 @@
     :disabled="isBusy"
     severity="danger"
     icon="fa-solid fa-trash"
+    data-test="users-delete-button"
     @click="showModal"
   />
   <Dialog
@@ -27,6 +28,7 @@
     :dismissable-mask="!isBusy"
     :closeable="!isBusy"
     :draggable="false"
+    data-test="users-delete-dialog"
   >
     <span>
       {{
@@ -40,12 +42,14 @@
       <Button
         :label="$t('app.no')"
         severity="secondary"
+        data-test="dialog-cancel-button"
         @click="modalVisible = false"
       />
       <Button
         :label="$t('app.yes')"
         severity="danger"
         :loading="isBusy"
+        data-test="dialog-continue-button"
         @click="deleteUser"
       />
     </template>
diff --git a/resources/js/components/SettingsUsersResetPasswordButton.vue b/resources/js/components/SettingsUsersResetPasswordButton.vue
index bee1b1139..49e5c7128 100644
--- a/resources/js/components/SettingsUsersResetPasswordButton.vue
+++ b/resources/js/components/SettingsUsersResetPasswordButton.vue
@@ -16,6 +16,7 @@
     :disabled="isBusy"
     severity="warn"
     icon="fa-solid fa-key"
+    data-test="users-reset-password-button"
     @click="showModal"
   />
 
@@ -29,6 +30,7 @@
     :dismissable-mask="!isBusy"
     :closeable="!isBusy"
     :draggable="false"
+    data-test="users-reset-password-dialog"
   >
     <span>
       {{
@@ -42,12 +44,14 @@
       <Button
         :label="$t('app.no')"
         severity="secondary"
+        data-test="dialog-cancel-button"
         @click="modalVisible = false"
       />
       <Button
         :label="$t('app.yes')"
         severity="danger"
         :loading="isBusy"
+        data-test="dialog-continue-button"
         @click="resetPassword"
       />
     </template>
diff --git a/resources/js/views/AdminUsersIndex.vue b/resources/js/views/AdminUsersIndex.vue
index dbb324fc7..c7a5c2caa 100644
--- a/resources/js/views/AdminUsersIndex.vue
+++ b/resources/js/views/AdminUsersIndex.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="mb-6 flex flex-col justify-between gap-4 md:flex-row">
       <div>
-        <InputGroup>
+        <InputGroup data-test="user-search">
           <InputText
             v-model="filter.name"
             :disabled="isBusy"
@@ -24,6 +24,7 @@
           <multiselect
             ref="rolesMultiselectRef"
             v-model="filter.role"
+            data-test="role-dropdown"
             :placeholder="$t('admin.users.role_filter')"
             track-by="id"
             open-direction="bottom"
@@ -57,6 +58,7 @@
                   severity="secondary"
                   icon="fa-solid fa-arrow-left"
                   :label="$t('app.previous_page')"
+                  data-test="previous-page-button"
                   @click="loadRoles(Math.max(1, rolesCurrentPage - 1))"
                 />
                 <Button
@@ -65,6 +67,7 @@
                   severity="secondary"
                   icon="fa-solid fa-arrow-right"
                   :label="$t('app.next_page')"
+                  data-test="next-page-button"
                   @click="loadRoles(rolesCurrentPage + 1)"
                 />
               </div>
@@ -75,6 +78,7 @@
             outlined
             severity="secondary"
             icon="fa-solid fa-xmark"
+            data-test="clear-roles-button"
             @click="clearFilterRole"
           />
 
@@ -83,6 +87,7 @@
             outlined
             severity="secondary"
             icon="fa-solid fa-sync"
+            data-test="roles-reload-button"
             @click="loadRoles(rolesCurrentPage)"
           />
         </InputGroup>
@@ -97,6 +102,7 @@
           :aria-label="$t('admin.users.new')"
           icon="fa-solid fa-plus"
           :to="{ name: 'admin.users.new' }"
+          data-test="users-add-button"
         />
       </div>
     </div>
@@ -118,6 +124,28 @@
       striped-rows
       :pt="{
         table: 'table-auto lg:table-fixed',
+        bodyRow: {
+          'data-test': 'user-item',
+        },
+        mask: {
+          'data-test': 'overlay',
+        },
+        column: {
+          bodyCell: {
+            'data-test': 'user-item-cell',
+          },
+          headerCell: {
+            'data-test': 'user-header-cell',
+          },
+        },
+        pcPaginator: {
+          page: {
+            'data-test': 'paginator-page',
+          },
+          next: {
+            'data-test': 'paginator-next-button',
+          },
+        },
       }"
       @update:first="paginator.setFirst($event)"
       @page="onPage"
@@ -198,6 +226,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-eye"
+              data-test="users-view-button"
             />
             <Button
               v-if="userPermissions.can('update', slotProps.data)"
@@ -221,6 +250,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-edit"
+              data-test="users-edit-button"
             />
             <SettingsUsersResetPasswordButton
               v-if="
diff --git a/resources/js/views/AdminUsersNew.vue b/resources/js/views/AdminUsersNew.vue
index 3c2e2b4e1..c09cd83d8 100644
--- a/resources/js/views/AdminUsersNew.vue
+++ b/resources/js/views/AdminUsersNew.vue
@@ -3,7 +3,10 @@
     <OverlayComponent :show="isBusy">
       <form class="flex flex-col gap-4" @submit.prevent="save">
         <AdminPanel :title="$t('rooms.settings.general.title')">
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="firstname-field"
+          >
             <label for="firstname" class="col-span-12 md:col-span-4 md:mb-0">{{
               $t("app.firstname")
             }}</label>
@@ -20,7 +23,7 @@
               <FormError :errors="formErrors.fieldError('firstname')" />
             </div>
           </div>
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="lastname-field">
             <label for="lastname" class="col-span-12 md:col-span-4 md:mb-0">{{
               $t("app.lastname")
             }}</label>
@@ -37,7 +40,7 @@
               <FormError :errors="formErrors.fieldError('lastname')" />
             </div>
           </div>
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="email-field">
             <label for="email" class="col-span-12 md:col-span-4 md:mb-0">{{
               $t("app.email")
             }}</label>
@@ -55,7 +58,7 @@
               <FormError :errors="formErrors.fieldError('email')" />
             </div>
           </div>
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="locale-field">
             <label
               id="locale-label"
               class="col-span-12 md:col-span-4 md:mb-0"
@@ -73,7 +76,7 @@
               <FormError :errors="formErrors.fieldError('user_locale')" />
             </div>
           </div>
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="timezone-field">
             <label
               id="timezone-label"
               class="col-span-12 md:col-span-4 md:mb-0"
@@ -93,7 +96,7 @@
               <FormError :errors="formErrors.fieldError('timezone')" />
             </div>
           </div>
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="role-field">
             <label id="roles-label" class="col-span-12 md:col-span-4 md:mb-0">{{
               $t("app.roles")
             }}</label>
@@ -111,7 +114,10 @@
           </div>
         </AdminPanel>
         <AdminPanel :title="$t('auth.password')">
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="generate-password-field"
+          >
             <label
               for="generate_password"
               class="col-span-12 items-start md:col-span-4 md:mb-0"
@@ -133,7 +139,11 @@
               }}</small>
             </div>
           </div>
-          <div v-if="!generatePassword" class="field grid grid-cols-12 gap-4">
+          <div
+            v-if="!generatePassword"
+            class="field grid grid-cols-12 gap-4"
+            data-test="new-password-field"
+          >
             <label
               for="new_password"
               class="col-span-12 md:col-span-4 md:mb-0"
@@ -155,7 +165,11 @@
             </div>
           </div>
 
-          <div v-if="!generatePassword" class="field grid grid-cols-12 gap-4">
+          <div
+            v-if="!generatePassword"
+            class="field grid grid-cols-12 gap-4"
+            data-test="new-password-confirmation-field"
+          >
             <label
               for="new_password_confirmation"
               class="col-span-12 md:col-span-4 md:mb-0"
@@ -191,6 +205,7 @@
             type="submit"
             icon="fa-solid fa-save"
             :label="$t('app.save')"
+            data-test="users-new-save-button"
           />
         </div>
       </form>
diff --git a/tests/Frontend/e2e/AdminUsersIndex.cy.js b/tests/Frontend/e2e/AdminUsersIndex.cy.js
new file mode 100644
index 000000000..7f481a781
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersIndex.cy.js
@@ -0,0 +1,1758 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/users");
+  });
+
+  // ToDo think about creating custom command for this
+  it("visit with user without permission to view users", function () {
+    // Check with missing users.viewAny permission
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/users");
+    cy.get("h1").should("be.visible").and("contain", "home.title");
+
+    // Check with missing admin.view permission
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["users.viewAny", "roles.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/users");
+    cy.get("h1").should("be.visible").and("contain", "home.title");
+  });
+
+  it("load users", function () {
+    const usersRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/users*",
+      { fixture: "users.json" },
+      "usersRequest",
+    );
+
+    cy.visit("/admin/users");
+
+    // Test loading
+    cy.get("[data-test=user-search]")
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("be.disabled");
+        cy.get("button").should("be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        usersRequest.sendResponse();
+      });
+
+    cy.wait("@usersRequest");
+
+    // Check that loading is over
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get("[data-test=user-search]")
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("not.be.disabled");
+        cy.get("button").should("not.be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    // Check that headers are displayed correctly
+    cy.get('[data-test="user-header-cell"]').should("have.length", 7);
+
+    cy.get('[data-test="user-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.id");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(1)
+      .should("have.text", "app.firstname");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(2)
+      .should("have.text", "app.lastname");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(3)
+      .should("have.text", "admin.users.email");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(4)
+      .should("have.text", "admin.users.authenticator.title");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(5)
+      .should("have.text", "app.roles");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(6)
+      .should("have.text", "app.actions");
+
+    // Check that users are displayed correctly
+    cy.get('[data-test="user-item"]').should("have.length", 3);
+
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="user-item-cell"]').should("have.length", 7);
+
+        cy.get('[data-test="user-item-cell"]').eq(0).should("have.text", "1");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(1)
+          .should("have.text", "John");
+        cy.get('[data-test="user-item-cell"]').eq(2).should("have.text", "Doe");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(3)
+          .should("have.text", "JohnDoe@domain.tld");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(4)
+          .should("have.text", "admin.users.authenticator.local");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(5)
+          .should("have.text", "Admin");
+
+        cy.get('[data-test="user-item-cell"]')
+          .eq(6)
+          .within(() => {
+            cy.get('[data-test="users-view-button"]').should("be.visible");
+            cy.get('[data-test="users-edit-button"]').should("be.visible");
+            cy.get('[data-test="users-delete-button"]').should("not.exist");
+            cy.get('[data-test="users-reset-password-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="user-item-cell"]').should("have.length", 7);
+
+        cy.get('[data-test="user-item-cell"]').eq(0).should("have.text", "2");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(1)
+          .should("have.text", "Laura");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(2)
+          .should("have.text", "Rivera");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(3)
+          .should("have.text", "LauraWRivera@domain.tld");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(4)
+          .should("have.text", "admin.users.authenticator.local");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(5)
+          .should("have.text", "StudentsStaff");
+
+        cy.get('[data-test="user-item-cell"]')
+          .eq(6)
+          .within(() => {
+            cy.get('[data-test="users-view-button"]').should("not.exist");
+            cy.get('[data-test="users-edit-button"]').should("not.exist");
+            cy.get('[data-test="users-delete-button"]').should("not.exist");
+            cy.get('[data-test="users-reset-password-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="user-item-cell"]').should("have.length", 7);
+
+        cy.get('[data-test="user-item-cell"]').eq(0).should("have.text", "3");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(1)
+          .should("have.text", "Juan");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(2)
+          .should("have.text", "Walter");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(3)
+          .should("have.text", "JuanMWalter@domain.tld");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(4)
+          .should("have.text", "admin.users.authenticator.ldap");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(5)
+          .should("have.text", "Students");
+
+        cy.get('[data-test="user-item-cell"]')
+          .eq(6)
+          .within(() => {
+            cy.get('[data-test="users-view-button"]').should("not.exist");
+            cy.get('[data-test="users-edit-button"]').should("not.exist");
+            cy.get('[data-test="users-delete-button"]').should("not.exist");
+            cy.get('[data-test="users-reset-password-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+  });
+
+  it("load users errors", function () {
+    cy.intercept("GET", "api/v1/users*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("usersRequest");
+
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get("[data-test=user-search]")
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("not.be.disabled");
+        cy.get("button").should("not.be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 3;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("include.text", "app.reload")
+      .click();
+
+    cy.wait("@usersRequest");
+
+    // Check that overlay gets hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check if user is shown and contains the correct data
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    // Switch to next page with general error
+    cy.intercept("GET", "api/v1/users*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("usersRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get("[data-test=user-search]")
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("not.be.disabled");
+        cy.get("button").should("not.be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 3;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("include.text", "app.reload")
+      .click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that overlay gets hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check if user is shown and contains the correct data
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page with 401 error
+    cy.intercept("GET", "api/v1/users*", {
+      statusCode: 401,
+    }).as("usersRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+    cy.wait("@usersRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Reload page with 401 error
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load users page out of bounds", function () {
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.data[0].role = 3;
+      users.meta.last_page = 2;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+      users.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.visit("/admin/users");
+    cy.wait("@usersRequest");
+
+    // Switch to next page but respond with no users on second page
+    cy.fixture("users.json").then((users) => {
+      users.data = [];
+      users.meta.current_page = 2;
+      users.meta.from = null;
+      users.meta.per_page = 2;
+      users.meta.to = null;
+      users.meta.total = 2;
+      users.meta.total_no_filter = 2;
+
+      const emptyUsersRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/users*",
+        {
+          statusCode: 200,
+          body: users,
+        },
+        "usersRequest",
+      );
+
+      cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+      cy.fixture("users.json").then((users) => {
+        users.data = users.data.slice(0, 2);
+        users.meta.per_page = 2;
+        users.meta.to = 2;
+        users.meta.total = 2;
+        users.meta.total_no_filter = 2;
+
+        cy.intercept("GET", "api/v1/users*", {
+          statusCode: 200,
+          body: users,
+        })
+          .as("usersRequest")
+          .then(() => {
+            emptyUsersRequest.sendResponse();
+          });
+      });
+    });
+
+    // Wait for first user request and check that page is still the same
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Wait for second user request and check that page is reset
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+  });
+
+  it("load roles errors", function () {
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+    cy.wait("@rolesRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that multiselect is disabled
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    // Reload roles
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "userRoles.json",
+    }).as("rolesRequest");
+
+    cy.get('[data-test="roles-reload-button"]').should("be.visible").click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that multiselect is enabled and shown correctly
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Admin")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    // Switch to next page with 500 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content").within(() => {
+      cy.get('[data-test="next-page-button"]').click();
+    });
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that multiselect is closed and disabled
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    // Reload roles
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "userRoles.json",
+    }).as("rolesRequest");
+
+    cy.get('[data-test="roles-reload-button"]').should("be.visible").click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that multiselect is enabled and shown correctly
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Admin")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    // Switch to next page with 401 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content").within(() => {
+      cy.get('[data-test="next-page-button"]').click();
+    });
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Reload page with 401 error
+    cy.visit("/admin/users");
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("user search", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.name).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check with no users found for this search query
+    cy.fixture("users.json").then((users) => {
+      users.data = [];
+      users.meta.from = null;
+      users.meta.per_page = 1;
+      users.meta.to = null;
+      users.meta.total = 0;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-search"] > input').should("have.value", "");
+    cy.get('[data-test="user-search"] > input').type("Test");
+    cy.get('[data-test="user-search"] > button').click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.name).to.equal("Test");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no users are displayed
+    cy.contains("admin.users.no_data_filtered").should("be.visible");
+    cy.get('[data-test="user-item"]').should("not.exist");
+
+    // Check with no users available
+    cy.fixture("users.json").then((users) => {
+      users.data = [];
+      users.meta.from = null;
+      users.meta.per_page = 1;
+      users.meta.to = null;
+      users.meta.total = 0;
+      users.meta.total_no_filter = 0;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-search"] > input').clear();
+    cy.get('[data-test="user-search"] > input').type("Test2");
+    cy.get('[data-test="user-search"] > input').type("{enter}");
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.name).to.equal("Test2");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no users are displayed
+    cy.contains("admin.users.no_data").should("be.visible");
+    cy.get('[data-test="user-item"]').should("have.length", 0);
+
+    // Check with 2 users on 2 pages
+    cy.fixture("users.json").then((users) => {
+      users.data.slice(0, 1);
+      users.meta.last_page = 2;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+      users.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-search"] > input').clear();
+    cy.get('[data-test="user-search"] > input').type("e");
+    cy.get('[data-test="user-search"] > button').click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.name).to.equal("e");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    // Check that pagination shows the correct number of pages and switch to next page
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(1, 2);
+      users.meta.current_page = 2;
+      users.meta.from = 2;
+      users.meta.last_page = 2;
+      users.meta.per_page = 1;
+      users.meta.to = 2;
+      users.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    // Click on button for next page (eq(1) needed because there are two paginator components
+    // (first one for small devices second one for larger devices))
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check if the search query stays the same after changing the page
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        name: "e",
+        page: "2",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.get('[data-test="user-search"] > input').should("have.value", "e");
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "Laura");
+
+    // Change search query and make sure that the page is reset
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 2;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+      users.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-search"] > input').clear();
+    cy.get('[data-test="user-search"] > input').type("o");
+    cy.get('[data-test="user-search"] > button').click();
+
+    // Check that users are loaded with the page reset to the first page
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        name: "o",
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("filter users", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.role).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="clear-roles-button"]').should("not.exist");
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter")
+      .click();
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Admin")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    // Change role and respond with no users found for this role
+    cy.fixture("users.json").then((users) => {
+      users.data = [];
+      users.meta.from = null;
+      users.meta.per_page = 1;
+      users.meta.to = null;
+      users.meta.total = 0;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get(".multiselect__option").eq(1).click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.role).to.equal("2");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.contains("admin.users.no_data_filtered").should("be.visible");
+    cy.get('[data-test="user-item"]').should("have.length", 0);
+
+    // Check that role are shown correctly and change it again to check for no users available
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "Staff")
+      .click();
+    cy.get('[data-test="clear-roles-button"]').should("be.visible");
+
+    cy.fixture("users.json").then((users) => {
+      users.data = [];
+      users.meta.from = null;
+      users.meta.per_page = 1;
+      users.meta.to = null;
+      users.meta.total = 0;
+      users.meta.total_no_filter = 0;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get(".multiselect__option").eq(2).click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.role).to.equal("3");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.contains("admin.users.no_data").should("be.visible");
+    cy.get('[data-test="user-item"]').should("have.length", 0);
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "Students")
+      .click();
+    cy.get('[data-test="clear-roles-button"]').should("be.visible");
+
+    // Check with 3 users on 3 pages
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.data[0].roles = [{ id: 4, name: "Dean", automatic: false }];
+      users.meta.last_page = 3;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    // Switch to next role page
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]')
+          .should("include.text", "app.previous_page")
+          .and("be.disabled");
+        cy.get('[data-test="next-page-button"]')
+          .should("include.text", "app.next_page")
+          .and("not.be.disabled");
+
+        const userRoleRequest = interceptIndefinitely(
+          "GET",
+          "api/v1/roles*",
+          {
+            statusCode: 200,
+            body: {
+              data: [
+                {
+                  id: 4,
+                  name: "Dean",
+                  default: false,
+                  updated_at: "2021-01-08T15:51:08.000000Z",
+                  model_name: "Role",
+                  room_limit: 20,
+                },
+                {
+                  id: 5,
+                  name: "Faculty",
+                  default: false,
+                  updated_at: "2021-03-19T09:12:44.000000Z",
+                  model_name: "Role",
+                  room_limit: 20,
+                },
+                {
+                  id: 6,
+                  name: "Manager",
+                  default: false,
+                  updated_at: "2021-05-22T11:55:21.000000Z",
+                  model_name: "Role",
+                  room_limit: -1,
+                },
+              ],
+              meta: {
+                current_page: 2,
+                from: 4,
+                last_page: 2,
+                per_page: 3,
+                to: 6,
+                total: 6,
+              },
+            },
+          },
+          "userRoleRequest",
+        );
+        cy.get('[data-test="next-page-button"]').click();
+
+        // Check loading
+        cy.get('[data-test="previous-page-button"]').should("be.disabled");
+        cy.get('[data-test="next-page-button"]')
+          .should("be.disabled")
+          .then(() => {
+            userRoleRequest.sendResponse();
+          });
+      });
+
+    cy.wait("@userRoleRequest");
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Dean")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Faculty")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Manager")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option").eq(0).click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.role).to.equal("4");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "Dean");
+    cy.get('[data-test="clear-roles-button"]').should("be.visible");
+
+    // Check that pagination shows the correct number of pages and switch to next page
+    cy.get('[data-test="paginator-page"]').should("have.length", 3);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(1, 2);
+      users.meta.current_page = 2;
+      users.meta.from = 2;
+      users.meta.last_page = 3;
+      users.meta.per_page = 1;
+      users.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    // Click on button for next page (eq(1) needed because there are two paginator components
+    // (first one for small devices second one for larger devices))
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check if the search query stays the same after changing the page
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        role: "4",
+        page: "2",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "Dean");
+    cy.get('[data-test="clear-roles-button"]').should("be.visible");
+
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "Laura");
+
+    // Clear role and make sure that page is reset
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 3;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="clear-roles-button"]').click();
+
+    // Check that users are loaded with the page reset to the first page
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.role).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+
+    cy.get('[data-test="clear-roles-button"]').should("not.exist");
+  });
+
+  it("sort users", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "id",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct columns are sortable and correct sorting type is shown
+    cy.get('[data-test="user-header-cell"]').should("have.length", 7);
+    cy.get('[data-test="user-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.id")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "true");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(1)
+      .should("have.text", "app.firstname")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(2)
+      .should("have.text", "app.lastname")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(3)
+      .should("have.text", "admin.users.email")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(4)
+      .should("have.text", "admin.users.authenticator.title")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(5)
+      .should("have.text", "app.roles")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(6)
+      .should("have.text", "app.actions")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+
+    // Change sorting type and response with 3 users on 3 different pages
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 3;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-header-cell"]').eq(1).click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "firstname",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="user-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="user-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true");
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 3);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(1, 2);
+      users.meta.current_page = 2;
+      users.meta.from = 2;
+      users.meta.last_page = 3;
+      users.meta.per_page = 1;
+      users.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        sort_by: "firstname",
+        sort_direction: "asc",
+        page: "2",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="user-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "Laura");
+
+    // Change sorting direction and make sure that the page is reset
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 3;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-header-cell"]').eq(1).click();
+
+    // Check that users are loaded with the page reset to the first page
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        sort_by: "firstname",
+        sort_direction: "desc",
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="user-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    // Change sorting type again
+    cy.get('[data-test="user-header-cell"]').eq(2).click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        sort_by: "lastname",
+        sort_direction: "asc",
+        page: "1",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="user-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="user-header-cell"]')
+      .eq(2)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Switch to next page
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(1, 2);
+      users.meta.current_page = 2;
+      users.meta.from = 2;
+      users.meta.last_page = 3;
+      users.meta.per_page = 1;
+      users.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        sort_by: "lastname",
+        sort_direction: "asc",
+        page: "2",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="user-header-cell"]')
+      .eq(2)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "Laura");
+
+    // Change sorting and make sure that the page is reset
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 3;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-header-cell"]').eq(3).click();
+
+    // Check that users are loaded with the page reset to the first page
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        sort_by: "email",
+        sort_direction: "asc",
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="user-header-cell"]')
+      .eq(2)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="user-header-cell"]')
+      .eq(3)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    // Change sorting again
+    cy.get('[data-test="user-header-cell"]').eq(4).click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        sort_by: "authenticator",
+        sort_direction: "asc",
+        page: "1",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="user-header-cell"]')
+      .eq(3)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="user-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+  });
+
+  it("check button visibility with view permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+
+    cy.get('[data-test="users-add-button"]').should("not.exist");
+    cy.get('[data-test="user-item"]').should("have.length", 3);
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2");
+        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3");
+        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with update permission", function () {
+    // Check with local users enabled
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.update",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+
+    cy.get('[data-test="users-add-button"]').should("not.exist");
+    cy.get('[data-test="user-item"]').should("have.length", 3);
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("not.exist");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("not.exist");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    // Check with local users disabled
+    cy.intercept("GET", "api/v1/config", { fixture: "config.json" });
+
+    cy.reload();
+
+    cy.get('[data-test="users-add-button"]').should("not.exist");
+
+    cy.get('[data-test="user-item"]').should("have.length", 3);
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("not.exist");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("not.exist");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+
+      cy.visit("/admin/users");
+
+      cy.get('[data-test="users-add-button"]').should("not.exist");
+      cy.get('[data-test="user-item"]').should("have.length", 3);
+      // Check that delete button for current user does not exist
+      cy.get('[data-test="user-item"]')
+        .eq(0)
+        .within(() => {
+          cy.get('[data-test="users-view-button"]')
+            .should("be.visible")
+            .and("have.attr", "href", "/admin/users/1");
+          cy.get('[data-test="users-edit-button"]')
+            .should("be.visible")
+            .and("have.attr", "href", "/admin/users/1/edit");
+          cy.get('[data-test="users-delete-button"]').should("not.exist");
+          cy.get('[data-test="users-reset-password-button"]').should(
+            "not.exist",
+          );
+        });
+
+      cy.get('[data-test="user-item"]')
+        .eq(1)
+        .within(() => {
+          cy.get('[data-test="users-view-button"]').should("not.exist");
+          cy.get('[data-test="users-edit-button"]').should("not.exist");
+          cy.get('[data-test="users-delete-button"]').should("be.visible");
+          cy.get('[data-test="users-reset-password-button"]').should(
+            "not.exist",
+          );
+        });
+
+      cy.get('[data-test="user-item"]')
+        .eq(2)
+        .within(() => {
+          cy.get('[data-test="users-view-button"]').should("not.exist");
+          cy.get('[data-test="users-edit-button"]').should("not.exist");
+          cy.get('[data-test="users-delete-button"]').should("be.visible");
+          cy.get('[data-test="users-reset-password-button"]').should(
+            "not.exist",
+          );
+        });
+    });
+  });
+
+  it("check button visibility with add permission", function () {
+    // Check with local users enabled
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+
+    cy.get('[data-test="users-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/users/new");
+    cy.get('[data-test="user-item"]').should("have.length", 3);
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("not.exist");
+        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("not.exist");
+        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    // Check with local users disabled
+    cy.intercept("GET", "api/v1/config", { fixture: "config.json" });
+
+    cy.reload();
+
+    cy.get('[data-test="users-add-button"]').should("not.exist");
+    cy.get('[data-test="user-item"]').should("have.length", 3);
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("not.exist");
+        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("not.exist");
+        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
new file mode 100644
index 000000000..8086334b1
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
@@ -0,0 +1,380 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("delete user", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="user-item"]').should("have.length", 3);
+
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .find('[data-test="users-delete-button"]')
+      .click();
+
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="users-delete-dialog"]')
+      .should("include.text", "admin.users.delete.title")
+      .should(
+        "include.text",
+        'admin.users.delete.confirm_{"firstname":"Juan","lastname":"Walter"}',
+      );
+
+    // Confirm delete of user
+    const deleteUserRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/users/3",
+      { statusCode: 204 },
+      "deleteUserRequest",
+    );
+
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 2);
+      users.meta.to = 2;
+      users.meta.total = 2;
+      users.meta.total_no_filter = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("not.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteUserRequest.sendResponse();
+      });
+
+    cy.wait("@deleteUserRequest");
+    cy.wait("@usersRequest");
+
+    // Check that user was deleted
+    cy.get('[data-test="user-item"]').should("have.length", 2);
+
+    // Check that dialog is closed
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+
+    // Reopen dialog for different user
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .find('[data-test="users-delete-button"]')
+      .click();
+
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="users-delete-dialog"]')
+      .should("include.text", "admin.users.delete.title")
+      .should(
+        "include.text",
+        'admin.users.delete.confirm_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
+    // Cancel delete
+    cy.get('[data-test="dialog-cancel-button"]').click();
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+  });
+
+  // ToDo 404 error, 403 error after adjustments
+  it("delete user errors", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="user-item"]').should("have.length", 3);
+
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .find('[data-test="users-delete-button"]')
+      .click();
+
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/users/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteUserRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteUserRequest");
+
+    // Check that dialog is still open and that error message gets shown
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/users/3", {
+      statusCode: 401,
+    }).as("deleteUserRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteUserRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("reset password", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .find('[data-test="users-reset-password-button"]')
+      .click();
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("be.visible");
+
+    cy.get('[data-test="users-reset-password-dialog"]')
+      .should("include.text", "admin.users.reset_password.title")
+      .should(
+        "include.text",
+        'admin.users.reset_password.confirm_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
+    // Confirm reset if password
+    const resetPasswordRequest = interceptIndefinitely(
+      "POST",
+      "api/v1/users/2/resetPassword",
+      { statusCode: 204 },
+      "resetPasswordRequest",
+    );
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("not.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        resetPasswordRequest.sendResponse();
+      });
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that toast message is shown
+    cy.checkToastMessage(
+      'admin.users.password_reset_success_{"mail":"LauraWRivera@domain.tld"}',
+    );
+
+    // Check that dialog is closed
+    cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
+  });
+
+  // ToDo 404 error, 403 error after adjustments
+  it("reset password errors", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .find('[data-test="users-reset-password-button"]')
+      .click();
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/users/2/resetPassword", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that dialog is still open and that error message gets shown
+    cy.get('[data-test="users-reset-password-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/users/2/resetPassword", {
+      statusCode: 401,
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("open add new user page", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.interceptAdminUsersNewRequests();
+
+    cy.get('[data-test="users-add-button"]').click();
+
+    cy.url().should("include", "/admin/users/new");
+  });
+
+  it("open edit user page", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.interceptAdminUsersViewRequests();
+
+    cy.intercept("GET", "api/v1/users/2", {
+      fixture: "user2.json",
+    }).as("userRequest");
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .find('[data-test="users-edit-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/users/2/edit");
+
+    // Reload and open edit page for current user but without edit permission
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.intercept("GET", "api/v1/users/1", {
+      fixture: "user.json",
+    }).as("userRequest");
+
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .find('[data-test="users-edit-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/users/1/edit");
+  });
+
+  it("open view user page", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.interceptAdminUsersViewRequests();
+
+    cy.intercept("GET", "api/v1/users/2", {
+      fixture: "user2.json",
+    }).as("userRequest");
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .find('[data-test="users-view-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/users/2");
+
+    // Reload and open edit page for current user but without view permission
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.intercept("GET", "api/v1/users/1", {
+      fixture: "user.json",
+    }).as("userRequest");
+
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .find('[data-test="users-view-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/users/1");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
new file mode 100644
index 000000000..7440df46c
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -0,0 +1,922 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users new", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersNewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/users/new");
+  });
+
+  it("visit with user without permission to add new users", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/new");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/users");
+    cy.get("h1").should("be.visible").and("contain", "home.title");
+  });
+
+  it("add new user with custom password and 1 role", function () {
+    cy.visit("/admin/users/new");
+
+    // Check general settings and change them
+    cy.contains("rooms.settings.general.title").should("be.visible");
+
+    cy.get('[data-test="firstname-field"]')
+      .should("be.visible")
+      .and("include.text", "app.firstname")
+      .within(() => {
+        cy.get("#firstname").should("have.value", "").type("Max");
+      });
+
+    cy.get('[data-test="lastname-field"]')
+      .should("be.visible")
+      .and("include.text", "app.lastname")
+      .within(() => {
+        cy.get("#lastname").should("have.value", "").type("Doe");
+      });
+
+    cy.get('[data-test="email-field"]')
+      .should("be.visible")
+      .and("include.text", "app.email")
+      .within(() => {
+        cy.get("#email").should("have.value", "").type("maxdoe@domain.tld");
+      });
+
+    // Check locale setting and change it
+    cy.get('[data-test="locale-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="locale-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.user_locale")
+      .within(() => {
+        cy.get('[data-test="locale-dropdown"]')
+          .should("have.text", "English")
+          .click();
+      });
+
+    cy.get('[data-test="locale-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="locale-dropdown-option"]').should("have.length", 3);
+
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "Deutsch");
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "English");
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(1)
+          .should("have.attr", "aria-selected", "true");
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Français");
+
+        cy.get('[data-test="locale-dropdown-option"]').eq(0).click();
+      });
+
+    cy.get('[data-test="locale-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "Deutsch");
+
+    // Check timezone setting and change it
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="timezone-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.timezone")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown"]')
+          .should("have.text", "UTC")
+          .click();
+      });
+
+    cy.get('[data-test="timezone-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown-option"]').should(
+          "have.length",
+          4,
+        );
+
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "America/New_York");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "Australia/Sydney");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Europe/Berlin");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "UTC");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(3)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="timezone-dropdown-option"]').eq(2).click();
+      });
+
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+
+    // Check role setting and change it
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="role-field"]')
+      .should("be.visible")
+      .and("include.text", "app.roles")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]').within(() => {
+          cy.get(".multiselect__tags")
+            .should("include.text", "admin.roles.select_roles")
+            .click();
+          cy.get('[data-test="role-chip"]').should("have.length", 0);
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Admin")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option").eq(1).click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 1);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("have.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("not.exist");
+    });
+
+    // Select second role
+    cy.get(".multiselect__option").eq(2).click();
+
+    // Check that roles are shown and remove second role
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Students")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible")
+        .click();
+    });
+
+    // Check that dialog is closed
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Check password settings and change them
+    cy.get('[data-test="generate-password-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.generate_password")
+      .and("include.text", "admin.users.generate_password_description")
+      .within(() => {
+        cy.get("#generate_password").and("not.be.checked");
+      });
+
+    cy.get('[data-test="new-password-field"]')
+      .should("be.visible")
+      .and("include.text", "auth.new_password")
+      .within(() => {
+        cy.get("#new_password").should("have.value", "").type("Password!123");
+      });
+
+    cy.get('[data-test="new-password-confirmation-field"]')
+      .should("be.visible")
+      .and("include.text", "auth.new_password_confirmation")
+      .within(() => {
+        cy.get("#new_password_confirmation")
+          .should("have.value", "")
+          .type("Password!123");
+      });
+
+    // Save new user
+
+    cy.fixture("user.json").then((user) => {
+      user.data.id = 20;
+      user.data.firstname = "Max";
+      user.data.email = "Doe";
+      user.data.roles = [
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+      user.data.locale = "de";
+      user.data.timezone = "Europe/Berlin";
+
+      const newUserRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/users",
+        {
+          statusCode: 201,
+          body: user,
+        },
+        "newUserRequest",
+      );
+
+      cy.intercept("GET", "api/v1/users/20", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+      cy.get('[data-test="users-new-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get("#firstname").should("be.disabled");
+      cy.get("#lastname").should("be.disabled");
+      cy.get("#email").should("be.disabled");
+      cy.get('[data-test="locale-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+      cy.get('[data-test="timezone-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+      cy.get('[data-test="role-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+      cy.get("#generate_password").should("be.disabled");
+      cy.get("#new_password").should("be.disabled");
+      cy.get("#new_password_confirmation").should("be.disabled");
+
+      cy.get('[data-test="users-new-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newUserRequest.sendResponse();
+        });
+    });
+
+    // Check request data
+    cy.wait("@newUserRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        firstname: "Max",
+        lastname: "Doe",
+        email: "maxdoe@domain.tld",
+        user_locale: "de",
+        timezone: "Europe/Berlin",
+        roles: [2],
+        generate_password: false,
+        new_password: "Password!123",
+        new_password_confirmation: "Password!123",
+      });
+    });
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that user page is shown
+    cy.url().should("include", "/admin/users/20");
+  });
+
+  it("add new user with generated password and several roles", function () {
+    cy.visit("/admin/users/new");
+
+    // Check general settings and change them
+    cy.contains("rooms.settings.general.title").should("be.visible");
+
+    cy.get("#firstname").should("have.value", "").type("Max");
+    cy.get("#lastname").should("have.value", "").type("Doe");
+    cy.get("#email").should("have.value", "").type("maxdoe@domain.tld");
+
+    // Check locale setting and
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
+
+    // Check timezone setting
+    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
+
+    // Check role setting and change it
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="role-field"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]').within(() => {
+          cy.get(".multiselect__tags")
+            .should("include.text", "admin.roles.select_roles")
+            .click();
+          cy.get('[data-test="role-chip"]').should("have.length", 0);
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Admin")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    // Switch to next page
+    const userRoleRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 200,
+        body: {
+          data: [
+            {
+              id: 4,
+              name: "Dean",
+              default: false,
+              updated_at: "2021-01-08T15:51:08.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 5,
+              name: "Faculty",
+              default: false,
+              updated_at: "2021-03-19T09:12:44.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 6,
+              name: "Manager",
+              default: false,
+              updated_at: "2021-05-22T11:55:21.000000Z",
+              model_name: "Role",
+              room_limit: -1,
+            },
+          ],
+          meta: {
+            current_page: 2,
+            from: 4,
+            last_page: 2,
+            per_page: 3,
+            to: 6,
+            total: 6,
+          },
+        },
+      },
+      "userRoleRequest",
+    );
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]')
+          .should("include.text", "app.previous_page")
+          .and("be.disabled");
+        cy.get('[data-test="next-page-button"]')
+          .should("include.text", "app.next_page")
+          .and("not.be.disabled");
+
+        cy.get('[data-test="next-page-button"]').click();
+
+        // Check loading
+        cy.get('[data-test="previous-page-button"]').should("be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-new-save-button"]')
+      .should("be.disabled")
+      .then(() => {
+        userRoleRequest.sendResponse();
+      });
+
+    cy.wait("@userRoleRequest");
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Dean")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Faculty")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Manager")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    // Select roles
+    cy.get(".multiselect__option").eq(0).click();
+    cy.get(".multiselect__option").eq(2).click();
+
+    // Check that roles are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Dean")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Manager")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    // Close dialog
+    cy.get(".multiselect__select").click();
+
+    // Check that dialog is closed
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Check password settings and change them
+    cy.get("#generate_password").and("not.be.checked").click();
+
+    cy.get('[data-test="new-password-field"]').should("not.exist");
+    cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
+
+    // Save new user
+    cy.fixture("user.json").then((user) => {
+      user.data.id = 20;
+      user.data.firstname = "Max";
+      user.data.email = "Doe";
+      user.data.roles = [
+        {
+          id: 4,
+          name: "Dean",
+        },
+        {
+          id: 6,
+          name: "Manager",
+        },
+      ];
+
+      const newUserRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/users",
+        {
+          statusCode: 201,
+          body: user,
+        },
+        "newUserRequest",
+      );
+
+      cy.intercept("GET", "api/v1/users/20", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+      cy.get('[data-test="users-new-save-button"]').click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get("#firstname").should("be.disabled");
+      cy.get("#lastname").should("be.disabled");
+      cy.get("#email").should("be.disabled");
+      cy.get('[data-test="locale-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+      cy.get('[data-test="timezone-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+      cy.get('[data-test="role-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+      cy.get("#generate_password").should("be.disabled");
+      cy.get("#new_password").should("not.exist");
+      cy.get("#new_password_confirmation").should("not.exist");
+
+      cy.get('[data-test="users-new-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newUserRequest.sendResponse();
+        });
+    });
+
+    // Check request data
+    cy.wait("@newUserRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        firstname: "Max",
+        lastname: "Doe",
+        email: "maxdoe@domain.tld",
+        user_locale: "en",
+        timezone: "UTC",
+        roles: [4, 6],
+        generate_password: true,
+      });
+    });
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that user page is shown
+    cy.url().should("include", "/admin/users/20");
+  });
+
+  // ToDo 403 error after adjusted
+  it("add new user errors", function () {
+    cy.visit("/admin/users/new");
+
+    // Set values
+    cy.get("#firstname").should("have.value", "").type("Max");
+    cy.get("#lastname").should("have.value", "").type("Doe");
+    cy.get("#email").should("have.value", "").type("maxdoe@domain.tld");
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
+    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
+    cy.get('[data-test="role-dropdown"]').click();
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").eq(0).click();
+    cy.get(".multiselect__select").click();
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get("#new_password").type("Password!123");
+    cy.get("#new_password_confirmation").type("Password!123");
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/users", {
+      statusCode: 422,
+      body: {
+        message: "The given data was invalid.",
+        errors: {
+          firstname: ["The Firstname field is required."],
+          lastname: ["The Lastname field is required."],
+          email: ["The Email field is required."],
+          user_locale: ["The user locale field is required."],
+          timezone: ["The timezone field is required."],
+          roles: ["The Roles field is required."],
+          generate_password: ["The generate password field is required."],
+          new_password: [
+            "The New password field is required when generate password is false.",
+          ],
+          new_password_confirmation: [
+            "The new password confirmation field is required.",
+          ],
+        },
+      },
+    }).as("newUserRequest");
+
+    cy.get('[data-test="users-new-save-button"]').click();
+
+    cy.wait("@newUserRequest");
+
+    cy.get('[data-test="firstname-field"]').should(
+      "include.text",
+      "The Firstname field is required.",
+    );
+    cy.get('[data-test="lastname-field"]').should(
+      "include.text",
+      "The Lastname field is required.",
+    );
+    cy.get('[data-test="email-field"]').should(
+      "include.text",
+      "The Email field is required.",
+    );
+    cy.get('[data-test="locale-field"]').should(
+      "include.text",
+      "The user locale field is required.",
+    );
+    cy.get('[data-test="timezone-field"]').should(
+      "include.text",
+      "The timezone field is required.",
+    );
+    cy.get('[data-test="role-field"]').should(
+      "include.text",
+      "The Roles field is required.",
+    );
+    cy.get('[data-test="generate-password-field"]').should(
+      "include.text",
+      "The generate password field is required.",
+    );
+    cy.get('[data-test="new-password-field"]').should(
+      "include.text",
+      "The New password field is required when generate password is false.",
+    );
+    cy.get('[data-test="new-password-confirmation-field"]').should(
+      "include.text",
+      "The new password confirmation field is required.",
+    );
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/users", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("newUserRequest");
+
+    cy.get('[data-test="users-new-save-button"]').click();
+
+    cy.wait("@newUserRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="firstname-field"]').should(
+      "not.include.text",
+      "The Firstname field is required.",
+    );
+    cy.get('[data-test="lastname-field"]').should(
+      "not.include.text",
+      "The Lastname field is required.",
+    );
+    cy.get('[data-test="email-field"]').should(
+      "not.include.text",
+      "The Email field is required.",
+    );
+    cy.get('[data-test="locale-field"]').should(
+      "not.include.text",
+      "The user locale field is required.",
+    );
+    cy.get('[data-test="timezone-field"]').should(
+      "not.include.text",
+      "The timezone field is required.",
+    );
+    cy.get('[data-test="role-field"]').should(
+      "not.include.text",
+      "The Roles field is required.",
+    );
+    cy.get('[data-test="generate-password-field"]').should(
+      "not.include.text",
+      "The generate password field is required.",
+    );
+    cy.get('[data-test="new-password-field"]').should(
+      "not.include.text",
+      "The New password field is required when generate password is false.",
+    );
+    cy.get('[data-test="new-password-confirmation-field"]').should(
+      "not.include.text",
+      "The new password confirmation field is required.",
+    );
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/users", {
+      statusCode: 401,
+    }).as("newUserRequest");
+
+    cy.get('[data-test="users-new-save-button"]').click();
+
+    cy.wait("@newUserRequest");
+
+    cy.url().should("include", "/login?redirect=/admin/users/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load timezones errors", function () {
+    // Check with 500 error
+    const loadTimezonesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/getTimezones",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "timezonesRequest",
+    );
+
+    cy.visit("/admin/users/new");
+
+    // Check loading
+    cy.get('[data-test="users-new-save-button"]')
+      .should("be.disabled")
+      .then(() => {
+        loadTimezonesRequest.sendResponse();
+      });
+
+    cy.wait("@timezonesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "admin.users.timezone")
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true");
+
+    cy.get('[data-test="users-new-save-button"]').should("be.disabled");
+
+    // Reload timezones without errors
+    cy.intercept("GET", "api/v1/getTimezones", {
+      fixture: "timezones.json",
+    }).as("timezonesRequest");
+
+    cy.get('[data-test="timezone-reload-button"]').click();
+
+    cy.wait("@timezonesRequest");
+
+    cy.get('[data-test="users-new-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .find(".p-select-label")
+      .should("not.have.attr", "aria-disabled", "true");
+
+    cy.get('[data-test="timezone-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="timezone-dropdown"]').click();
+
+    cy.get('[data-test="timezone-dropdown-option"]').should("have.length", 4);
+
+    //Check with 401 error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      statusCode: 401,
+    }).as("timezonesRequest");
+
+    cy.reload();
+
+    cy.wait("@timezonesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load roles errors", function () {
+    // Check with 500 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.visit("/admin/users/new");
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-new-save-button"]').should("be.disabled");
+
+    // Reload roles without errors
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "userRoles.json",
+    }).as("rolesRequest");
+
+    cy.get('[data-test="roles-reload-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-new-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="roles-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.reload();
+
+    cy.wait("@rolesRequest");
+
+    cy.url().should("include", "/login?redirect=/admin/users/new");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/Login.cy.js b/tests/Frontend/e2e/Login.cy.js
index f6f84cddc..9ab003bed 100644
--- a/tests/Frontend/e2e/Login.cy.js
+++ b/tests/Frontend/e2e/Login.cy.js
@@ -108,7 +108,7 @@ describe("Login", function () {
     }).as("loginRequest");
 
     // Visit page that can only be visited by logged in users
-    cy.visit("admin");
+    cy.visit("/admin");
 
     // Check redirect to the login page
     cy.url().should("include", "/login?redirect=/admin");
@@ -243,7 +243,7 @@ describe("Login", function () {
     }).as("loginRequest");
 
     // Visit page that can only be visited by logged in users
-    cy.visit("admin");
+    cy.visit("/admin");
 
     // Check redirect to the login page
     cy.url().should("include", "/login?redirect=/admin");
@@ -436,7 +436,7 @@ describe("Login", function () {
     });
 
     // Visit page that can only be visited by logged in users
-    cy.visit("admin");
+    cy.visit("/admin");
 
     // Check redirect to the login page
     cy.url().should("include", "/login?redirect=/admin");
diff --git a/tests/Frontend/e2e/Logout.cy.js b/tests/Frontend/e2e/Logout.cy.js
index 6d93a6d8e..d334a132c 100644
--- a/tests/Frontend/e2e/Logout.cy.js
+++ b/tests/Frontend/e2e/Logout.cy.js
@@ -11,7 +11,7 @@ describe("Logout", function () {
         redirect: false,
       },
     }).as("logoutRequest");
-    cy.visit("rooms");
+    cy.visit("/rooms");
 
     // Click on logout
     cy.get('[data-test="user-avatar"]').click();
@@ -42,7 +42,7 @@ describe("Logout", function () {
         redirect: "https://example.org/?foo=a&bar=b",
       },
     }).as("logoutRequest");
-    cy.visit("rooms");
+    cy.visit("/rooms");
     // Click on logout
     cy.get("[data-test=user-avatar]").click();
     cy.get("[data-test=submenu]")
diff --git a/tests/Frontend/e2e/RoomsViewMembers.cy.js b/tests/Frontend/e2e/RoomsViewMembers.cy.js
index 93df40810..e493fa830 100644
--- a/tests/Frontend/e2e/RoomsViewMembers.cy.js
+++ b/tests/Frontend/e2e/RoomsViewMembers.cy.js
@@ -295,6 +295,7 @@ describe("Rooms view members", function () {
       .eq(0)
       .should("have.attr", "data-p-active", "true");
 
+    // ToDo Change to custom command (difficult because members need to be loaded "normally" first)
     // Switch to next page with 401 error
     cy.fixture("room.json").then((room) => {
       room.data.current_user = null;
diff --git a/tests/Frontend/e2e/RoomsViewPersonalizedLinks.cy.js b/tests/Frontend/e2e/RoomsViewPersonalizedLinks.cy.js
index 72c83e286..2c1c78468 100644
--- a/tests/Frontend/e2e/RoomsViewPersonalizedLinks.cy.js
+++ b/tests/Frontend/e2e/RoomsViewPersonalizedLinks.cy.js
@@ -307,6 +307,7 @@ describe("Rooms view personalized links", function () {
       .eq(0)
       .should("have.attr", "data-p-active", "true");
 
+    // ToDo Change to custom command (difficult because members need to be loaded "normally" first)
     // Switch to next page with 401 error
     cy.fixture("room.json").then((room) => {
       room.data.current_user = null;
diff --git a/tests/Frontend/e2e/RoomsViewPersonalizedLinksTokenActions.cy.js b/tests/Frontend/e2e/RoomsViewPersonalizedLinksTokenActions.cy.js
index 69054324b..2fb6aa11a 100644
--- a/tests/Frontend/e2e/RoomsViewPersonalizedLinksTokenActions.cy.js
+++ b/tests/Frontend/e2e/RoomsViewPersonalizedLinksTokenActions.cy.js
@@ -8,7 +8,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("add new token", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
 
     cy.wait("@roomTokensRequest");
 
@@ -136,7 +136,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("add new token errors", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
 
     cy.wait("@roomRequest");
     cy.wait("@roomTokensRequest");
@@ -223,7 +223,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("edit token", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
     cy.wait("@roomRequest");
     cy.wait("@roomTokensRequest");
 
@@ -360,7 +360,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("edit token errors", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
 
     cy.wait("@roomRequest");
     cy.wait("@roomTokensRequest");
@@ -509,7 +509,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("delete token", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
 
     cy.wait("@roomRequest");
     cy.wait("@roomTokensRequest");
@@ -586,7 +586,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("delete token errors", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
 
     cy.wait("@roomRequest");
     cy.wait("@roomTokensRequest");
@@ -710,7 +710,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("copy token", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
 
     cy.wait("@roomRequest");
     cy.wait("@roomTokensRequest");
diff --git a/tests/Frontend/e2e/UserProfileBase.cy.js b/tests/Frontend/e2e/UserProfileBase.cy.js
index e6973e194..6ebffe18a 100644
--- a/tests/Frontend/e2e/UserProfileBase.cy.js
+++ b/tests/Frontend/e2e/UserProfileBase.cy.js
@@ -778,5 +778,21 @@ describe("User Profile Base", function () {
     cy.get('[data-test="timezone-dropdown-option"]')
       .eq(3)
       .should("have.attr", "aria-selected", "true");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      statusCode: 401,
+    }).as("timezonesRequest");
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    cy.wait("@timezonesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/profile");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
   });
 });
diff --git a/tests/Frontend/fixtures/config.json b/tests/Frontend/fixtures/config.json
index 29cf9c86a..c26e9d07b 100644
--- a/tests/Frontend/fixtures/config.json
+++ b/tests/Frontend/fixtures/config.json
@@ -8,7 +8,9 @@
         "de": "Deutsch",
         "en": "English",
         "fr": "Français"
-      }
+      },
+      "default_locale": "en",
+      "default_timezone": "UTC"
     },
     "theme": {
       "primary_color": "#14b8a6",
diff --git a/tests/Frontend/fixtures/user2.json b/tests/Frontend/fixtures/user2.json
new file mode 100644
index 000000000..8549ae809
--- /dev/null
+++ b/tests/Frontend/fixtures/user2.json
@@ -0,0 +1,22 @@
+{
+  "data": {
+    "id": 2,
+    "authenticator": "local",
+    "image": null,
+    "email": "LauraWRivera@domain.tld",
+    "external_id": null,
+    "firstname": "Laura",
+    "lastname": "Rivera",
+    "model_name": "User",
+    "user_locale": "en",
+    "room_limit": -1,
+    "updated_at": "2024-09-13T14:20:26.000000Z",
+    "roles": [
+      { "id": 3, "name": "Students", "automatic": true },
+      { "id": 2, "name": "Staff", "automatic": false }
+    ],
+    "bbb_skip_check_audio": false,
+    "initial_password_set": false,
+    "timezone": "UTC"
+  }
+}
diff --git a/tests/Frontend/fixtures/userRoles.json b/tests/Frontend/fixtures/userRoles.json
new file mode 100644
index 000000000..7a8aa4b90
--- /dev/null
+++ b/tests/Frontend/fixtures/userRoles.json
@@ -0,0 +1,36 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "Admin",
+      "default": true,
+      "updated_at": "2021-01-08T15:51:08.000000Z",
+      "model_name": "Role",
+      "room_limit": -1
+    },
+    {
+      "id": 2,
+      "name": "Staff",
+      "default": false,
+      "updated_at": "2021-03-19T09:12:44.000000Z",
+      "model_name": "Role",
+      "room_limit": 20
+    },
+    {
+      "id": 3,
+      "name": "Students",
+      "default": false,
+      "updated_at": "2021-05-22T11:55:21.000000Z",
+      "model_name": "Role",
+      "room_limit": 1
+    }
+  ],
+  "meta": {
+    "current_page": 1,
+    "from": 1,
+    "last_page": 2,
+    "per_page": 3,
+    "to": 3,
+    "total": 6
+  }
+}
diff --git a/tests/Frontend/fixtures/users.json b/tests/Frontend/fixtures/users.json
new file mode 100644
index 000000000..e6cfccae7
--- /dev/null
+++ b/tests/Frontend/fixtures/users.json
@@ -0,0 +1,57 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "authenticator": "local",
+      "email": "JohnDoe@domain.tld",
+      "external_id": null,
+      "firstname": "John",
+      "lastname": "Doe",
+      "user_locale": "en",
+      "model_name": "User",
+      "room_limit": 0,
+      "roles": [{ "id": 1, "name": "Admin", "automatic": false }],
+      "updated_at": "2020-01-01T01:00:00.000000Z",
+      "initial_password_set": true
+    },
+    {
+      "id": 2,
+      "authenticator": "local",
+      "email": "LauraWRivera@domain.tld",
+      "external_id": null,
+      "firstname": "Laura",
+      "lastname": "Rivera",
+      "user_locale": null,
+      "model_name": "User",
+      "room_limit": 0,
+      "roles": [
+        { "id": 3, "name": "Students", "automatic": true },
+        { "id": 2, "name": "Staff", "automatic": false }
+      ],
+      "updated_at": "2020-01-01T01:00:00.000000Z",
+      "initial_password_set": false
+    },
+    {
+      "id": 3,
+      "authenticator": "ldap",
+      "email": "JuanMWalter@domain.tld",
+      "external_id": "JMW",
+      "firstname": "Juan",
+      "lastname": "Walter",
+      "user_locale": "de",
+      "model_name": "User",
+      "room_limit": 0,
+      "roles": [{ "id": 3, "name": "Students", "automatic": true }],
+      "updated_at": "2020-01-01T01:00:00.000000Z"
+    }
+  ],
+  "meta": {
+    "current_page": 1,
+    "from": 1,
+    "last_page": 1,
+    "per_page": 3,
+    "to": 3,
+    "total": 3,
+    "total_no_filter": 3
+  }
+}
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index ff8c7696b..e409807fb 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -178,3 +178,56 @@ Cypress.Commands.add("interceptRoomPersonalizedLinksRequests", () => {
     fixture: "roomTokens.json",
   }).as("roomTokensRequest");
 });
+
+/**
+ * Intercept all requests that are needed when visiting the admin users index page
+ * @memberof cy
+ * @method interceptAdminUsersIndexRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminUsersIndexRequests", () => {
+  cy.intercept("GET", "api/v1/users*", {
+    fixture: "users.json",
+  }).as("usersRequest");
+
+  cy.intercept("GET", "api/v1/roles*", {
+    fixture: "userRoles.json",
+  });
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin users new page
+ * @memberof cy
+ * @method interceptAdminUsersNewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminUsersNewRequests", () => {
+  cy.intercept("GET", "api/v1/users*", {
+    fixture: "users.json",
+  }).as("usersRequest");
+
+  cy.intercept("GET", "api/v1/roles*", {
+    fixture: "userRoles.json",
+  });
+
+  cy.intercept("GET", "api/v1/getTimezones", { fixture: "timezones.json" });
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin users view page
+ * @memberof cy
+ * @method interceptAdminUsersViewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminUsersViewRequests", () => {
+  cy.intercept("GET", "api/v1/users*", {
+    fixture: "users.json",
+  }).as("usersRequest");
+
+  cy.intercept("GET", "api/v1/roles*", {
+    fixture: "userRoles.json",
+  });
+
+  cy.intercept("GET", "api/v1/getTimezones", { fixture: "timezones.json" });
+  cy.intercept("GET", "api/v1/sessions", { fixture: "sessions.json" });
+});
diff --git a/tests/Frontend/support/commands/roomCommands.js b/tests/Frontend/support/commands/roomCommands.js
index 7e165fc9b..d21f510d6 100644
--- a/tests/Frontend/support/commands/roomCommands.js
+++ b/tests/Frontend/support/commands/roomCommands.js
@@ -294,6 +294,8 @@ Cypress.Commands.add(
  * @param  {string} roomTabName
  * @returns void
  */
+// ToDo add possibility to load with correct data and then trigger error
+// ToDo add possibility to change room data (maybe get room data(additional room data as parameter)
 Cypress.Commands.add(
   "checkRoomAuthErrors",
   (triggerRequestActions, requestMethod, requestUrl, roomTabName) => {

From 269b1466a1b7efe5ec0d1acf4725c17dd054f522 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 27 Nov 2024 13:36:26 +0100
Subject: [PATCH 09/79] Start adding AdminUsers View tests

---
 resources/js/views/AdminUsersView.vue         |   2 +
 .../e2e/AdminUsersIndexUserActions.cy.js      |   4 -
 tests/Frontend/e2e/AdminUsersNew.cy.js        |   2 +-
 tests/Frontend/e2e/AdminUsersView.cy.js       | 336 ++++++++++++++++++
 .../e2e/AdminUsersViewUserActions.cy.js       | 242 +++++++++++++
 .../support/commands/interceptCommands.js     |  10 +-
 6 files changed, 584 insertions(+), 12 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminUsersView.cy.js
 create mode 100644 tests/Frontend/e2e/AdminUsersViewUserActions.cy.js

diff --git a/resources/js/views/AdminUsersView.vue b/resources/js/views/AdminUsersView.vue
index 182066d8c..6fd17f016 100644
--- a/resources/js/views/AdminUsersView.vue
+++ b/resources/js/views/AdminUsersView.vue
@@ -9,6 +9,7 @@
           :label="$t('app.cancel_editing')"
           icon="fa-solid fa-times"
           severity="secondary"
+          data-test="users-cancel-edit-button"
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', user)"
@@ -18,6 +19,7 @@
           :label="$t('app.edit')"
           icon="fa-solid fa-edit"
           severity="info"
+          data-test="users-edit-button"
         />
         <SettingsUsersResetPasswordButton
           v-if="
diff --git a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
index 8086334b1..f89b5a260 100644
--- a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
@@ -291,10 +291,6 @@ describe("Admin users index", function () {
 
     cy.interceptAdminUsersViewRequests();
 
-    cy.intercept("GET", "api/v1/users/2", {
-      fixture: "user2.json",
-    }).as("userRequest");
-
     cy.get('[data-test="user-item"]')
       .eq(1)
       .find('[data-test="users-edit-button"]')
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index 7440df46c..ae01798ea 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -57,7 +57,7 @@ describe("Admin users new", function () {
 
     // Check if the welcome page is shown
     cy.url().should("not.include", "/admin/users");
-    cy.get("h1").should("be.visible").and("contain", "home.title");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
   });
 
   it("add new user with custom password and 1 role", function () {
diff --git a/tests/Frontend/e2e/AdminUsersView.cy.js b/tests/Frontend/e2e/AdminUsersView.cy.js
new file mode 100644
index 000000000..9e84fd947
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersView.cy.js
@@ -0,0 +1,336 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/users/");
+  });
+
+  it("visit with user without permission to view users", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/users/2");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check userView shown correctly", function () {
+    const userRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/users/2",
+      { fixture: "user2.json" },
+      "userRequest",
+    );
+
+    cy.visit("/admin/users/2");
+
+    // Check loading
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+
+    cy.get('[data-test="base-tab-button"]').should("not.exist");
+    cy.get('[data-test="email-tab-button"]').should("not.exist");
+    cy.get('[data-test="security-tab-button"]').should("not.exist");
+    cy.get('[data-test="others-tab-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        userRequest.sendResponse();
+      });
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+
+    cy.get('[data-test="base-tab-button"]').should("be.visible");
+    cy.get('[data-test="email-tab-button"]').should("be.visible");
+    cy.get('[data-test="security-tab-button"]').should("be.visible");
+    cy.get('[data-test="others-tab-button"]').should("be.visible");
+
+    // Check that user data is shown and all inputs are disabled
+    // Base tab
+    cy.get("#firstname").should("have.value", "Laura").and("be.disabled");
+    cy.get("#lastname").should("have.value", "Rivera").and("be.disabled");
+    cy.get("#authenticator")
+      .should("have.value", "admin.users.authenticator.local")
+      .and("be.disabled");
+
+    // Check that profile image buttons are hidden
+    cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+    cy.get('[data-test="delete-image-button"]').should("not.exist");
+    cy.get('[data-test="undo-delete-button"]').should("not.exist");
+    cy.get('[data-test="upload-file-input"]').should("not.exist");
+
+    cy.get('[data-test="locale-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    cy.get('[data-test="timezone-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    // Email tab
+    cy.get('[data-test="email-tab-button"]').click();
+
+    cy.get("#email")
+      .should("have.value", "LauraWRivera@domain.tld")
+      .and("be.disabled");
+
+    // Security tab
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("include.text", "Students")
+      .should("include.text", "Staff")
+      .should("have.class", "multiselect--disabled");
+
+    // Check others tab
+    cy.get('[data-test="others-tab-button"]').click();
+
+    cy.get("#bbb_skip_check_audio").should("not.be.checked").and("be.disabled");
+  });
+
+  it("check userView with ldap user", function () {
+    cy.fixture("user2.json").then((user) => {
+      user.data.authenticator = "ldap";
+      user.data.external_id = "lwr";
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get("#firstname").should("have.value", "Laura").and("be.disabled");
+    cy.get("#lastname").should("have.value", "Rivera").and("be.disabled");
+    cy.get("#authenticator")
+      .should("have.value", "admin.users.authenticator.ldap")
+      .and("be.disabled");
+
+    cy.get('[data-test="authenticator-id-field"]')
+      .should("include.text", "auth.authenticator_id")
+      .within(() => {
+        cy.get("#authenticator_id")
+          .should("have.value", "lwr")
+          .and("be.disabled");
+      });
+
+    // Check that profile image buttons are hidden
+    cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+    cy.get('[data-test="delete-image-button"]').should("not.exist");
+    cy.get('[data-test="undo-delete-button"]').should("not.exist");
+    cy.get('[data-test="upload-file-input"]').should("not.exist");
+
+    cy.get('[data-test="locale-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    cy.get('[data-test="timezone-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    // Email tab
+    cy.get('[data-test="email-tab-button"]').click();
+
+    cy.get("#email")
+      .should("have.value", "LauraWRivera@domain.tld")
+      .and("be.disabled");
+
+    // Security tab
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("include.text", "Students")
+      .should("include.text", "Staff")
+      .should("have.class", "multiselect--disabled");
+
+    // Check others tab
+    cy.get('[data-test="others-tab-button"]').click();
+
+    cy.get("#bbb_skip_check_audio").should("not.be.checked").and("be.disabled");
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.create",
+        "users.update",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]')
+      .should("be.visible")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/users/2/edit");
+    cy.get('[data-test="users-reset-password-button"]').should("be.visible");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.create",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+    cy.get('[data-test="users-delete-button"]').should("be.visible");
+  });
+
+  it("open view errors", function () {
+    cy.intercept("GET", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("userRequest");
+
+    cy.visit("admin/users/2");
+
+    cy.wait("@userRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/users/2", {
+      fixture: "user2.json",
+    }).as("userRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@userRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Reload page with 404 errors
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.intercept("GET", "api/v1/users/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("userRequest");
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("not.include", "/admin/users/2");
+    cy.url().should("include", "/admin/users");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/users/2", {
+      statusCode: 401,
+    }).as("userRequest");
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
new file mode 100644
index 000000000..b513a9ec1
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
@@ -0,0 +1,242 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users view user actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("delete user", function () {
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="users-delete-button"]').click();
+
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="users-delete-dialog"]')
+      .should("include.text", "admin.users.delete.title")
+      .should(
+        "include.text",
+        'admin.users.delete.confirm_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
+    // Confirm delete of user
+    const deleteUserRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/users/2",
+      { statusCode: 204 },
+      "deleteUserRequest",
+    );
+
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 2);
+      users.meta.to = 2;
+      users.meta.total = 2;
+      users.meta.total_no_filter = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("not.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteUserRequest.sendResponse();
+      });
+
+    cy.wait("@deleteUserRequest");
+    cy.wait("@usersRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/users/2");
+    cy.url().should("include", "/admin/users");
+
+    // Check that user was deleted
+    cy.get('[data-test="user-item"]').should("have.length", 2);
+
+    // Check that dialog is closed
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+  });
+
+  // ToDo 404 error, 403 error after adjustments
+  it("delete user errors", function () {
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="users-delete-button"]').click();
+
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteUserRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteUserRequest");
+
+    // Check that dialog is still open and that error message gets shown
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/users/2", {
+      statusCode: 401,
+    }).as("deleteUserRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteUserRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("reset password", function () {
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
+
+    cy.get('[data-test="users-reset-password-button"]').click();
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("be.visible");
+
+    cy.get('[data-test="users-reset-password-dialog"]')
+      .should("include.text", "admin.users.reset_password.title")
+      .should(
+        "include.text",
+        'admin.users.reset_password.confirm_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
+    // Confirm reset if password
+    const resetPasswordRequest = interceptIndefinitely(
+      "POST",
+      "api/v1/users/2/resetPassword",
+      { statusCode: 204 },
+      "resetPasswordRequest",
+    );
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("not.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        resetPasswordRequest.sendResponse();
+      });
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that toast message is shown
+    cy.checkToastMessage(
+      'admin.users.password_reset_success_{"mail":"LauraWRivera@domain.tld"}',
+    );
+
+    // Check that dialog is closed
+    cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
+  });
+
+  //ToDo 404 error, 403 error after adjustments
+  it("reset password errors", function () {
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
+
+    cy.get('[data-test="users-reset-password-button"]').click();
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/users/2/resetPassword", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that dialog is still open and that error message gets shown
+    cy.get('[data-test="users-reset-password-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/users/2/resetPassword", {
+      statusCode: 401,
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index e409807fb..b445ecf3e 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -202,10 +202,6 @@ Cypress.Commands.add("interceptAdminUsersIndexRequests", () => {
  * @returns void
  */
 Cypress.Commands.add("interceptAdminUsersNewRequests", () => {
-  cy.intercept("GET", "api/v1/users*", {
-    fixture: "users.json",
-  }).as("usersRequest");
-
   cy.intercept("GET", "api/v1/roles*", {
     fixture: "userRoles.json",
   });
@@ -220,9 +216,9 @@ Cypress.Commands.add("interceptAdminUsersNewRequests", () => {
  * @returns void
  */
 Cypress.Commands.add("interceptAdminUsersViewRequests", () => {
-  cy.intercept("GET", "api/v1/users*", {
-    fixture: "users.json",
-  }).as("usersRequest");
+  cy.intercept("GET", "api/v1/users/2", {
+    fixture: "user2.json",
+  }).as("userRequest");
 
   cy.intercept("GET", "api/v1/roles*", {
     fixture: "userRoles.json",

From 52d7f8e9319e3674c7ed2d4c392769bea4ee2459 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 2 Dec 2024 21:41:15 +0100
Subject: [PATCH 10/79] Start adding AdminUsers Edit tests (Base, Email,
 Others)

---
 tests/Frontend/e2e/AdminUsersEdit.cy.js       | 231 +++++
 tests/Frontend/e2e/AdminUsersEditBase.cy.js   | 909 ++++++++++++++++++
 tests/Frontend/e2e/AdminUsersEditEmail.cy.js  | 241 +++++
 tests/Frontend/e2e/AdminUsersEditOthers.cy.js | 245 +++++
 tests/Frontend/e2e/AdminUsersIndex.cy.js      |  17 -
 .../e2e/AdminUsersIndexUserActions.cy.js      |   6 +-
 tests/Frontend/e2e/AdminUsersNew.cy.js        |  13 +-
 tests/Frontend/e2e/AdminUsersView.cy.js       |   9 +-
 tests/Frontend/e2e/UserProfile.cy.js          |   4 +-
 tests/Frontend/e2e/UserProfileBase.cy.js      |  10 +-
 tests/Frontend/e2e/UserProfileEmail.cy.js     |   6 +-
 tests/Frontend/e2e/UserProfileOthers.cy.js    |   4 +-
 tests/Frontend/e2e/UserProfileSecurity.cy.js  |   4 +-
 .../{user.json => userDataCurrentUser.json}   |   0
 .../{user2.json => userDataUser.json}         |   0
 .../support/commands/interceptCommands.js     |   8 +-
 16 files changed, 1664 insertions(+), 43 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminUsersEdit.cy.js
 create mode 100644 tests/Frontend/e2e/AdminUsersEditBase.cy.js
 create mode 100644 tests/Frontend/e2e/AdminUsersEditEmail.cy.js
 create mode 100644 tests/Frontend/e2e/AdminUsersEditOthers.cy.js
 rename tests/Frontend/fixtures/{user.json => userDataCurrentUser.json} (100%)
 rename tests/Frontend/fixtures/{user2.json => userDataUser.json} (100%)

diff --git a/tests/Frontend/e2e/AdminUsersEdit.cy.js b/tests/Frontend/e2e/AdminUsersEdit.cy.js
new file mode 100644
index 000000000..8c0896ada
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersEdit.cy.js
@@ -0,0 +1,231 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users edit", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/users/1");
+  });
+
+  it("visit with user without permission to edit users", function () {
+    // Check with missing users.edit permission
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+
+    // Check with missing users.view permission
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.edit",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("visit edit user page", function () {
+    const userRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/users/2",
+      { fixture: "userDataUser.json" },
+      "userRequest",
+    );
+
+    cy.visit("/admin/users/2/edit");
+
+    // Check loading
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]').should("not.exist");
+
+    cy.get('[data-test="base-tab-button"]').should("not.exist");
+    cy.get('[data-test="email-tab-button"]').should("not.exist");
+    cy.get('[data-test="security-tab-button"]').should("not.exist");
+    cy.get('[data-test="others-tab-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        userRequest.sendResponse();
+      });
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("be.visible");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]').should("be.visible");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]').should("be.visible");
+
+    cy.get('[data-test="base-tab-button"]').should("be.visible");
+    cy.get('[data-test="email-tab-button"]').should("be.visible");
+    cy.get('[data-test="security-tab-button"]').should("be.visible");
+    cy.get('[data-test="others-tab-button"]').should("be.visible");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("be.visible");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]').should("be.visible");
+    cy.get('[data-test="users-delete-button"]').should("be.visible");
+    cy.get('[data-test="user-tab-profile-save-button"]').should("be.visible");
+  });
+
+  it("visit edit user page errors", function () {
+    cy.intercept("GET", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("userRequest");
+
+    cy.visit("admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/users/2", {
+      fixture: "userDataUser.json",
+    }).as("userRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@userRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Reload page with 404 errors
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.intercept("GET", "api/v1/users/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("userRequest");
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.url().should("include", "/admin/users");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/users/2", {
+      statusCode: 401,
+    }).as("userRequest");
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersEditBase.cy.js b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
new file mode 100644
index 000000000..7873698a3
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
@@ -0,0 +1,909 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+import {
+  _arrayBufferToBase64,
+  parseFormData,
+} from "../support/utils/formData.js";
+
+describe("Admin users edit base", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check view and save changes", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.contains("admin.users.base_data").should("be.visible");
+
+    cy.get('[data-test="default-profile-image-preview"]')
+      .should("be.visible")
+      .and("include.text", "LR");
+
+    // Check firstname setting and change it
+    cy.get('[data-test="firstname-field"]')
+      .should("be.visible")
+      .and("include.text", "app.firstname")
+      .within(() => {
+        cy.get("#firstname").should("have.value", "Laura");
+        cy.get("#firstname").clear();
+        cy.get("#firstname").type("Juan");
+      });
+
+    // Check lastname setting and change it
+    cy.get('[data-test="lastname-field"]')
+      .should("be.visible")
+      .and("include.text", "app.lastname")
+      .within(() => {
+        cy.get("#lastname").should("have.value", "Rivera");
+        cy.get("#lastname").clear();
+        cy.get("#lastname").type("Walter");
+      });
+
+    // Check authenticator setting
+    cy.get('[data-test="authenticator-field"]')
+      .should("be.visible")
+      .and("include.text", "auth.authenticator")
+      .within(() => {
+        cy.get("#authenticator")
+          .should("have.value", "admin.users.authenticator.local")
+          .and("be.disabled");
+      });
+
+    // Check profile image setting and upload new image
+    cy.get('[data-test="profile-image-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.image.title")
+      .within(() => {
+        cy.get('[data-test="default-profile-image-preview"]')
+          .should("be.visible")
+          .and("include.text", "JW");
+        cy.get('[data-test="profile-image-preview"]').should("not.exist");
+
+        // Check that other buttons are hidden
+        cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+        cy.get('[data-test="delete-image-button"]').should("not.exist");
+        cy.get('[data-test="undo-delete-button"]').should("not.exist");
+
+        // Upload new profile image
+        cy.get('[data-test="upload-file-input"]').then((fileInput) => {
+          cy.stub(fileInput[0], "click").as("fileInputClick");
+        });
+
+        cy.get('[data-test="upload-file-button"]')
+          .should("be.visible")
+          .and("have.text", "admin.users.image.upload")
+          .click();
+
+        // Check that button is connected to file input
+        cy.get("@fileInputClick").should("be.calledOnce");
+
+        cy.get('[data-test="crop-image-dialog"]').should("not.exist");
+
+        cy.get('[data-test="upload-file-input"]')
+          .should("not.be.visible")
+          .selectFile("tests/Frontend/fixtures/files/profileImage.jpg", {
+            force: true,
+          });
+      });
+
+    cy.get('[data-test="crop-image-dialog"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.image.crop");
+
+    // Check if correct image is shown
+    cy.fixture("files/profileImage.jpg", "base64").then((content) => {
+      cy.get('[data-test="crop-image-dialog"]')
+        .find("img")
+        .should("have.attr", "src")
+        .and("include", content);
+    });
+
+    cy.get('[data-test="dialog-save-button"]')
+      .should("have.text", "admin.users.image.save")
+      .click();
+
+    cy.get('[data-test="crop-image-dialog"]').should("not.exist");
+
+    cy.get('[data-test="profile-image-field"]').within(() => {
+      cy.get('[data-test="default-profile-image-preview"]').should("not.exist");
+      cy.get('[data-test="profile-image-preview"]')
+        .should("be.visible")
+        .find("img")
+        .should("have.attr", "src")
+        .then((src) => {
+          cy.fixture("files/profileImagePreview.jpg", "base64").then(
+            (content) => {
+              expect(src).to.eql("data:image/jpeg;base64," + content);
+            },
+          );
+        });
+
+      cy.get('[data-test="upload-file-button"]').should("be.visible");
+      cy.get('[data-test="delete-image-button"]').should("not.exist");
+      cy.get('[data-test="undo-delete-button"]').should("not.exist");
+
+      // Reset image upload
+      cy.get('[data-test="reset-file-upload-button"]')
+        .should("be.visible")
+        .and("have.text", "app.cancel")
+        .click();
+
+      cy.get('[data-test="default-profile-image-preview"]')
+        .should("be.visible")
+        .and("include.text", "JW");
+      cy.get('[data-test="profile-image-preview"]').should("not.exist");
+
+      cy.get('[data-test="upload-file-button"]').should("be.visible");
+      cy.get('[data-test="delete-image-button"]').should("not.exist");
+      cy.get('[data-test="undo-delete-button"]').should("not.exist");
+      cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+
+      // Upload image again
+      cy.get('[data-test="upload-file-input"]')
+        .should("not.be.visible")
+        .selectFile("tests/Frontend/fixtures/files/profileImage.jpg", {
+          force: true,
+        });
+    });
+
+    cy.get('[data-test="crop-image-dialog"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.image.crop");
+
+    // Check if correct image is shown
+    cy.fixture("files/profileImage.jpg", "base64").then((content) => {
+      cy.get('[data-test="crop-image-dialog"]')
+        .find("img")
+        .should("have.attr", "src")
+        .and("include", content);
+    });
+
+    cy.get('[data-test="dialog-save-button"]')
+      .should("have.text", "admin.users.image.save")
+      .click();
+
+    cy.get('[data-test="crop-image-dialog"]').should("not.exist");
+
+    // Check that image and buttons are still shown correctly
+    cy.get('[data-test="profile-image-field"]').within(() => {
+      cy.get('[data-test="default-profile-image-preview"]').should("not.exist");
+      cy.get('[data-test="profile-image-preview"]')
+        .should("be.visible")
+        .find("img")
+        .should("have.attr", "src")
+        .then((src) => {
+          cy.fixture("files/profileImagePreview.jpg", "base64").then(
+            (content) => {
+              expect(src).to.eql("data:image/jpeg;base64," + content);
+            },
+          );
+        });
+
+      cy.get('[data-test="upload-file-button"]').should("be.visible");
+      cy.get('[data-test="delete-image-button"]').should("not.exist");
+      cy.get('[data-test="undo-delete-button"]').should("not.exist");
+
+      cy.get('[data-test="reset-file-upload-button"]').should("be.visible");
+    });
+
+    // Check locale setting and change it
+    cy.intercept("GET", "api/v1/locale/de", {
+      data: {},
+      meta: {
+        dateTimeFormat: {
+          dateShort: {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+          },
+          dateLong: {
+            year: "numeric",
+            month: "short",
+            day: "2-digit",
+          },
+          time: {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          },
+          datetimeShort: {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          },
+          datetimeLong: {
+            year: "numeric",
+            month: "short",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          },
+        },
+      },
+    });
+
+    cy.get('[data-test="locale-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="locale-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.user_locale")
+      .within(() => {
+        cy.get('[data-test="locale-dropdown"]')
+          .should("have.text", "English")
+          .click();
+      });
+
+    cy.get('[data-test="locale-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="locale-dropdown-option"]').should("have.length", 3);
+
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "Deutsch");
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "English");
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(1)
+          .should("have.attr", "aria-selected", "true");
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Français");
+
+        cy.get('[data-test="locale-dropdown-option"]').eq(0).click();
+      });
+
+    cy.get('[data-test="locale-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "Deutsch");
+
+    // Check timezone setting and change it
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="timezone-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.timezone")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown"]')
+          .should("have.text", "UTC")
+          .click();
+      });
+
+    cy.get('[data-test="timezone-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown-option"]').should(
+          "have.length",
+          4,
+        );
+
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "America/New_York");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "Australia/Sydney");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Europe/Berlin");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "UTC");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(3)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="timezone-dropdown-option"]').eq(2).click();
+      });
+
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+
+    // Save changes
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.firstname = "Juan";
+      user.data.lastname = "Walter";
+      user.data.user_locale = "de";
+      user.data.timezone = "Europe/Berlin";
+      user.data.image = Cypress.config("baseUrl") + "/test.jpg";
+      user.data.updated_at = "2024-09-13T14:22:26.000000Z";
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/users/2",
+        {
+          statusCode: 200,
+          body: user,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+
+      cy.get('[data-test="user-tab-profile-save-button"]')
+        .should("be.visible")
+        .and("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get("#firstname").should("be.disabled");
+      cy.get("#lastname").should("be.disabled");
+      cy.get("#authenticator").should("be.disabled");
+
+      cy.get('[data-test="upload-file-button"]').should("be.disabled");
+      cy.get('[data-test="reset-file-upload-button"]').should("be.disabled");
+
+      cy.get('[data-test="locale-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+      cy.get('[data-test="timezone-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+      cy.get('[data-test="user-tab-profile-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("user_locale")).to.eql("de");
+      expect(formData.get("timezone")).to.eql("Europe/Berlin");
+      expect(formData.get("firstname")).to.eql("Juan");
+      expect(formData.get("lastname")).to.eql("Walter");
+      expect(formData.get("_method")).to.eql("PUT");
+      expect(formData.get("updated_at")).to.eql("2024-09-13T14:20:26.000000Z");
+
+      const uploadedFile = formData.get("image");
+      expect(uploadedFile.name).to.eql("image.png");
+      expect(uploadedFile.type).to.eql("image/jpeg");
+      cy.fixture("files/profileImagePreview.jpg", "base64").then((content) => {
+        uploadedFile.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+    });
+
+    // Check that redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Reload edit page and save again
+    cy.visit("/admin/users/2/edit");
+
+    // Check if changes are saved and shown in the view
+    cy.get("#firstname").should("have.value", "Juan").and("not.be.disabled");
+    cy.get("#lastname").should("have.value", "Walter").and("not.be.disabled");
+    cy.get("#authenticator")
+      .should("have.value", "admin.users.authenticator.local")
+      .and("be.disabled");
+
+    cy.get('[data-test="upload-file-button"]').should("be.visible");
+    cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+    cy.get('[data-test="delete-image-button"]').should("be.visible");
+    cy.get('[data-test="undo-delete-button"]').should("not.exist");
+
+    cy.get('[data-test="default-profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="profile-image-preview"]')
+      .should("be.visible")
+      .find("img")
+      .should("have.attr", "src", Cypress.config("baseUrl") + "/test.jpg");
+
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "Deutsch");
+    cy.get('[data-test="locale-dropdown"]').within(() => {
+      cy.get(".p-select-label").should(
+        "not.have.attr",
+        "aria-disabled",
+        "true",
+      );
+    });
+
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+    cy.get('[data-test="timezone-dropdown"]').within(() => {
+      cy.get(".p-select-label").should(
+        "not.have.attr",
+        "aria-disabled",
+        "true",
+      );
+    });
+
+    // Delete profile image
+    cy.get('[data-test="delete-image-button"]')
+      .should("have.text", "admin.users.image.delete")
+      .click();
+
+    cy.get('[data-test="profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="default-profile-image-preview"]')
+      .should("be.visible")
+      .and("include.text", "JW");
+
+    // Check visibility of other buttons
+    cy.get('[data-test="upload-file-button"]').should("not.exist");
+    cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+    cy.get('[data-test="delete-image-button"]').should("not.exist");
+
+    // Undo delete
+    cy.get('[data-test="undo-delete-button"]')
+      .should("have.text", "app.undo_delete")
+      .click();
+
+    cy.get('[data-test="default-profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="profile-image-preview"]')
+      .should("be.visible")
+      .find("img")
+      .should("have.attr", "src", Cypress.config("baseUrl") + "/test.jpg");
+
+    // Delete again and save changes
+    cy.get('[data-test="delete-image-button"]').click();
+
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.firstname = "Juan";
+      user.data.lastname = "Walter";
+      user.data.user_locale = "de";
+      user.data.timezone = "Europe/Berlin";
+      user.data.updated_at = "2024-09-13T14:24:26.000000Z";
+
+      cy.intercept("POST", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="user-tab-profile-save-button"]').click();
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("user_locale")).to.eql("de");
+      expect(formData.get("timezone")).to.eql("Europe/Berlin");
+      expect(formData.get("firstname")).to.eql("Juan");
+      expect(formData.get("lastname")).to.eql("Walter");
+      expect(formData.get("_method")).to.eql("PUT");
+      expect(formData.get("updated_at")).to.eql("2024-09-13T14:22:26.000000Z");
+      expect(formData.get("image")).to.eql("");
+    });
+
+    // Check that redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+  });
+
+  it("save changes errors", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 422,
+      body: {
+        errors: {
+          firstname: ["The firstname field is required."],
+          lastname: ["The lastname field is required."],
+          user_locale: ["The user locale field is required."],
+          timezone: ["The timezone field is required."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-profile-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that error messages are shown
+    cy.get('[data-test="firstname-field"]').should(
+      "include.text",
+      "The firstname field is required.",
+    );
+
+    cy.get('[data-test="lastname-field"]').should(
+      "include.text",
+      "The lastname field is required.",
+    );
+
+    cy.get('[data-test="locale-field"]').should(
+      "include.text",
+      "The user locale field is required.",
+    );
+
+    cy.get('[data-test="timezone-field"]').should(
+      "include.text",
+      "The timezone field is required.",
+    );
+
+    // Check with 428 error (stale error)
+    cy.fixture("userDataUser.json").then((user) => {
+      const newModel = user.data;
+      newModel.firstname = "Laura";
+      newModel.lastname = "Rivera";
+      newModel.user_locale = "de";
+      newModel.timezone = "Europe/Berlin";
+
+      cy.intercept("POST", "api/v1/users/2", {
+        statusCode: 428,
+        body: {
+          message: " The user entity was updated in the meanwhile!",
+          new_model: newModel,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-user-dialog"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-user-dialog"]')
+      .should("be.visible")
+      .and("include.text", "The user entity was updated in the meanwhile!");
+
+    cy.get('[data-test="stale-dialog-reload-button"]').click();
+
+    // Check that redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-profile-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 404 error
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-profile-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.url().should("include", "/admin/users");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-profile-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("view as external user", function () {
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.authenticator = "ldap";
+      user.data.external_id = "lwr";
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get("#firstname").should("have.value", "Laura").and("be.disabled");
+    cy.get("#lastname").should("have.value", "Rivera").and("be.disabled");
+    cy.get("#authenticator")
+      .should("have.value", "admin.users.authenticator.ldap")
+      .and("be.disabled");
+
+    cy.get('[data-test="authenticator-id-field"]')
+      .should("include.text", "auth.authenticator_id")
+      .within(() => {
+        cy.get("#authenticator_id")
+          .should("have.value", "lwr")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="default-profile-image-preview"]')
+      .should("be.visible")
+      .and("include.text", "LR");
+
+    // Check image buttons
+    cy.get('[data-test="upload-file-button"]').should("be.visible");
+    cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+    cy.get('[data-test="delete-image-button"]').should("not.exist");
+    cy.get('[data-test="undo-delete-button"]').should("not.exist");
+
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
+    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
+    cy.get('[data-test="locale-dropdown"]').within(() => {
+      cy.get(".p-select-label").should(
+        "not.have.attr",
+        "aria-disabled",
+        "true",
+      );
+    });
+    cy.get('[data-test="timezone-dropdown"]').within(() => {
+      cy.get(".p-select-label").should(
+        "not.have.attr",
+        "aria-disabled",
+        "true",
+      );
+    });
+  });
+
+  it("load timezones error", function () {
+    cy.intercept("GET", "api/v1/getTimezones", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("timezonesRequest");
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.wait("@timezonesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "admin.users.timezone")
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true");
+
+    // Reload timezones withouth error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      fixture: "timezones.json",
+    }).as("timezonesRequest");
+
+    cy.get('[data-test="timezone-reload-button"]').click();
+
+    cy.wait("@timezonesRequest");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .find(".p-select-label")
+      .should("not.have.attr", "aria-disabled", "true");
+
+    cy.get('[data-test="timezone-dropdown"]').click();
+
+    cy.get('[data-test="timezone-dropdown-option"]').should("have.length", 4);
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(0)
+      .should("have.text", "America/New_York");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(1)
+      .should("have.text", "Australia/Sydney");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(2)
+      .should("have.text", "Europe/Berlin");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(3)
+      .should("have.text", "UTC");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(3)
+      .should("have.attr", "aria-selected", "true");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      statusCode: 401,
+    }).as("timezonesRequest");
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    cy.wait("@timezonesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  // ToDo figure out where to put this test (which test file)
+  //  would maybe make sense inside AdminUsersViewUserActions.cy.js (problem: needs to be tested for all tabs)
+  it("switch between edit and view", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    // Change values of all fields
+    cy.get("#firstname").should("have.value", "Laura").clear();
+    cy.get("#firstname").type("Juan");
+    cy.get("#lastname").should("have.value", "Rivera").clear();
+    cy.get("#lastname").type("Walter");
+
+    cy.get('[data-test="upload-file-input"]')
+      .should("not.be.visible")
+      .selectFile("tests/Frontend/fixtures/files/profileImage.jpg", {
+        force: true,
+      });
+
+    cy.get('[data-test="crop-image-dialog"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.image.crop");
+
+    // Check if correct image is shown
+    cy.fixture("files/profileImage.jpg", "base64").then((content) => {
+      cy.get('[data-test="crop-image-dialog"]')
+        .find("img")
+        .should("have.attr", "src")
+        .and("include", content);
+    });
+
+    cy.get('[data-test="dialog-save-button"]')
+      .should("have.text", "admin.users.image.save")
+      .click();
+
+    cy.get('[data-test="crop-image-dialog"]').should("not.exist");
+
+    // Check that image and buttons are still shown correctly
+    cy.get('[data-test="profile-image-field"]').within(() => {
+      cy.get('[data-test="default-profile-image-preview"]').should("not.exist");
+      cy.get('[data-test="profile-image-preview"]')
+        .should("be.visible")
+        .find("img")
+        .should("have.attr", "src")
+        .then((src) => {
+          cy.fixture("files/profileImagePreview.jpg", "base64").then(
+            (content) => {
+              expect(src).to.eql("data:image/jpeg;base64," + content);
+            },
+          );
+        });
+      cy.get('[data-test="upload-file-button"]').should("be.visible");
+      cy.get('[data-test="delete-image-button"]').should("not.exist");
+      cy.get('[data-test="undo-delete-button"]').should("not.exist");
+
+      cy.get('[data-test="reset-file-upload-button"]').should("be.visible");
+    });
+
+    cy.get('[data-test="locale-dropdown"]')
+      .should("have.text", "English")
+      .click();
+
+    cy.get('[data-test="locale-dropdown-option"]').eq(0).click();
+
+    cy.get('[data-test="locale-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "Deutsch");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .click();
+
+    cy.get('[data-test="timezone-dropdown-option"]').eq(2).click();
+
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+
+    // Switch to view
+    cy.get('[data-test="users-cancel-edit-button"]').click();
+
+    // Check if redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Check that changed were not saved
+    cy.get("#firstname").should("have.value", "Laura");
+    cy.get("#lastname").should("have.value", "Rivera");
+    cy.get('[data-test="profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="default-profile-image-preview"]')
+      .should("be.visible")
+      .and("include.text", "LR");
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
+    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
+
+    // Switch to edit again
+    cy.get('[data-test="users-edit-button"]').click();
+
+    cy.url().should("include", "/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    // Check that original values are shown
+    cy.get("#firstname").should("have.value", "Laura");
+    cy.get("#lastname").should("have.value", "Rivera");
+    cy.get('[data-test="profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="default-profile-image-preview"]')
+      .should("be.visible")
+      .and("include.text", "LR");
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
+    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersEditEmail.cy.js b/tests/Frontend/e2e/AdminUsersEditEmail.cy.js
new file mode 100644
index 000000000..d781a13de
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersEditEmail.cy.js
@@ -0,0 +1,241 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users edit email", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check view and save changes", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="email-tab-button"]').click();
+
+    cy.contains("admin.users.email").should("be.visible");
+
+    // Check that fields are shown correctly and try to change email setting
+    cy.get('[data-test="email-tab-current-password-field"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="email-field"]')
+      .should("be.visible")
+      .and("include.text", "app.email")
+      .within(() => {
+        cy.get("#email")
+          .should("have.value", "LauraWRivera@domain.tld")
+          .clear();
+        cy.get("#email").type("laura.rivera@example.com");
+      });
+
+    // Save changes
+    cy.fixture("userDataUser.json").then((user) => {
+      user.email = "laura.rivera@example.com";
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/users/2/email",
+        {
+          statusCode: 200,
+          body: user,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="user-tab-email-save-button"]')
+        .should("have.text", "auth.change_email")
+        .click();
+
+      // Check loading
+      cy.get("#current_password").should("not.exist");
+      cy.get("#email")
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        email: "laura.rivera@example.com",
+      });
+    });
+
+    // Check that redirect to user view worked
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+  });
+
+  it("save changes errors", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="email-tab-button"]').click();
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/users/2/email", {
+      statusCode: 422,
+      body: {
+        errors: {
+          email: ["The email field is required."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-email-save-button"]').click();
+
+    cy.get('[data-test="email-field"]').should(
+      "include.text",
+      "The email field is required.",
+    );
+
+    // Check with 500 error
+    cy.intercept("PUT", "api/v1/users/2/email", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-email-save-button"]').click();
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 404 error
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.intercept("PUT", "api/v1/users/2/email", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-email-save-button"]').click();
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.url().should("include", "/admin/users");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="email-tab-button"]').click();
+
+    // Check with 401 error
+    cy.intercept("PUT", "api/v1/users/2/email", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-email-save-button"]').click();
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("view for external user", function () {
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.authenticator = "ldap";
+      user.data.external_id = "lwr";
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="email-tab-button"]').click();
+
+    // Check that email setting is disabled and save button is hidden
+    cy.get('[data-test="email-tab-current-password-field"]').should(
+      "not.exist",
+    );
+    cy.get("#email")
+      .should("be.disabled")
+      .and("have.value", "LauraWRivera@domain.tld");
+
+    cy.get('[data-test="user-tab-email-save-button"]').should("not.exist");
+  });
+
+  // ToDo figure out where to put this test (which test file)
+  //  would maybe make sense inside AdminUsersViewUserActions.cy.js (problem: needs to be tested for all tabs)
+  it("switch between edit and view", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="email-tab-button"]').click();
+
+    // Change value of email field
+    cy.get("#email").should("have.value", "LauraWRivera@domain.tld").type("e");
+
+    // Switch to view
+    cy.get('[data-test="users-cancel-edit-button"]').click();
+
+    // Check if redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Switch to email tab and check that changes are not saved
+    cy.get('[data-test="email-tab-button"]').click();
+
+    cy.get("#email").should("have.value", "LauraWRivera@domain.tld");
+
+    // Switch back to edit
+    cy.get('[data-test="users-edit-button"]').click();
+
+    // Check if redirected to edit page
+    cy.url().should("include", "/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="email-tab-button"]').click();
+
+    // Check that original values are shown
+    cy.get("#email").should("have.value", "LauraWRivera@domain.tld");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersEditOthers.cy.js b/tests/Frontend/e2e/AdminUsersEditOthers.cy.js
new file mode 100644
index 000000000..dbba3221f
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersEditOthers.cy.js
@@ -0,0 +1,245 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users edit others", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check view and save changes", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="others-tab-button"]').click();
+
+    cy.contains("admin.users.bbb").should("be.visible");
+
+    cy.get('[data-test="bbb-skip-check-audio-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.skip_check_audio")
+      .find("#bbb_skip_check_audio")
+      .should("not.be.checked")
+      .click();
+
+    // Save changes
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.bbb_skip_check_audio = true;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/users/2",
+        {
+          statusCode: 200,
+          body: user,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="user-tab-others-save-button"]').click();
+
+      // Check loading
+      cy.get("#bbb_skip_check_audio").should("be.disabled");
+      cy.get('[data-test="user-tab-others-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      expect(interception.request.body).to.include({
+        bbb_skip_check_audio: true,
+      });
+    });
+
+    // Check that redirect to user view worked
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+  });
+
+  it("save changes errors", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="others-tab-button"]').click();
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 422,
+      body: {
+        errors: {
+          bbb_skip_check_audio: ["The bbb skip check audio field is required."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-others-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.get("#bbb_skip_check_audio").should("not.be.checked");
+
+    cy.get('[data-test="bbb-skip-check-audio-field"]').should(
+      "include.text",
+      "The bbb skip check audio field is required.",
+    );
+
+    // Check with 428 error (stale error)
+    cy.fixture("userDataUser.json").then((user) => {
+      const newModel = user.data;
+      newModel.bbb_skip_check_audio = true;
+
+      cy.intercept("POST", "api/v1/users/2", {
+        statusCode: 428,
+        body: {
+          message: " The user entity was updated in the meanwhile!",
+          new_model: newModel,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-user-dialog"]').should("not.exist");
+    cy.get('[data-test="user-tab-others-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-user-dialog"]')
+      .should("be.visible")
+      .and("include.text", "The user entity was updated in the meanwhile!");
+
+    cy.get('[data-test="stale-dialog-reload-button"]').click();
+
+    // Check that redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+    cy.get('[data-test="others-tab-button"]').click();
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-others-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 404 error
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-others-save-button"]').click();
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.url().should("include", "/admin/users");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="others-tab-button"]').click();
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-others-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("switch between edit and view", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="others-tab-button"]').click();
+
+    // Change value of bbb_skip_check_audio
+    cy.get("#bbb_skip_check_audio").click();
+
+    // Switch to view
+    cy.get('[data-test="users-cancel-edit-button"]').click();
+
+    // Check if redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Switch to others tab and check if changes are not saved
+    cy.get('[data-test="others-tab-button"]').click();
+
+    cy.get("#bbb_skip_check_audio").should("not.be.checked");
+
+    // Switch back to edit page
+    cy.get('[data-test="users-edit-button"]').click();
+
+    // Check if redirected to edit page
+    cy.url().should("include", "/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="others-tab-button"]').click();
+
+    // Check that original value is shown
+    cy.get("#bbb_skip_check_audio").should("not.be.checked");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersIndex.cy.js b/tests/Frontend/e2e/AdminUsersIndex.cy.js
index 7f481a781..963c67929 100644
--- a/tests/Frontend/e2e/AdminUsersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndex.cy.js
@@ -49,23 +49,6 @@ describe("Admin users index", function () {
     // Check if the welcome page is shown
     cy.url().should("not.include", "/admin/users");
     cy.get("h1").should("be.visible").and("contain", "home.title");
-
-    // Check with missing admin.view permission
-    cy.fixture("currentUser.json").then((currentUser) => {
-      currentUser.data.permissions = ["users.viewAny", "roles.viewAny"];
-      cy.intercept("GET", "api/v1/currentUser", {
-        statusCode: 200,
-        body: currentUser,
-      });
-    });
-
-    cy.visit("/admin/users");
-
-    cy.checkToastMessage("app.flash.unauthorized");
-
-    // Check if the welcome page is shown
-    cy.url().should("not.include", "/admin/users");
-    cy.get("h1").should("be.visible").and("contain", "home.title");
   });
 
   it("load users", function () {
diff --git a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
index f89b5a260..af0256a1e 100644
--- a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
@@ -316,7 +316,7 @@ describe("Admin users index", function () {
     cy.wait("@usersRequest");
 
     cy.intercept("GET", "api/v1/users/1", {
-      fixture: "user.json",
+      fixture: "userDataCurrentUser.json",
     }).as("userRequest");
 
     cy.get('[data-test="user-item"]')
@@ -335,7 +335,7 @@ describe("Admin users index", function () {
     cy.interceptAdminUsersViewRequests();
 
     cy.intercept("GET", "api/v1/users/2", {
-      fixture: "user2.json",
+      fixture: "userDataUser.json",
     }).as("userRequest");
 
     cy.get('[data-test="user-item"]')
@@ -363,7 +363,7 @@ describe("Admin users index", function () {
     cy.wait("@usersRequest");
 
     cy.intercept("GET", "api/v1/users/1", {
-      fixture: "user.json",
+      fixture: "userDataCurrentUser.json",
     }).as("userRequest");
 
     cy.get('[data-test="user-item"]')
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index ae01798ea..57e0d9bfb 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -60,6 +60,15 @@ describe("Admin users new", function () {
     cy.get("h1").should("be.visible").and("include.text", "home.title");
   });
 
+  it("visit with local auth disabled", function () {
+    cy.intercept("GET", "api/v1/config", { fixture: "config.json" });
+
+    cy.visit("/admin/users/new");
+
+    cy.url().should("not.include", "/admin/users/new");
+    cy.url().should("include", "/404");
+  });
+
   it("add new user with custom password and 1 role", function () {
     cy.visit("/admin/users/new");
 
@@ -270,7 +279,7 @@ describe("Admin users new", function () {
 
     // Save new user
 
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.id = 20;
       user.data.firstname = "Max";
       user.data.email = "Doe";
@@ -550,7 +559,7 @@ describe("Admin users new", function () {
     cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
 
     // Save new user
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.id = 20;
       user.data.firstname = "Max";
       user.data.email = "Doe";
diff --git a/tests/Frontend/e2e/AdminUsersView.cy.js b/tests/Frontend/e2e/AdminUsersView.cy.js
index 9e84fd947..fae1e6074 100644
--- a/tests/Frontend/e2e/AdminUsersView.cy.js
+++ b/tests/Frontend/e2e/AdminUsersView.cy.js
@@ -60,7 +60,7 @@ describe("Admin users view", function () {
     const userRequest = interceptIndefinitely(
       "GET",
       "api/v1/users/2",
-      { fixture: "user2.json" },
+      { fixture: "userDataUser.json" },
       "userRequest",
     );
 
@@ -71,6 +71,7 @@ describe("Admin users view", function () {
     cy.get('[data-test="users-edit-button"]').should("not.exist");
     cy.get('[data-test="users-reset-password-button"]').should("not.exist");
     cy.get('[data-test="users-delete-button"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]').should("not.exist");
 
     cy.get('[data-test="base-tab-button"]').should("not.exist");
     cy.get('[data-test="email-tab-button"]').should("not.exist");
@@ -91,6 +92,7 @@ describe("Admin users view", function () {
     cy.get('[data-test="users-edit-button"]').should("not.exist");
     cy.get('[data-test="users-reset-password-button"]').should("not.exist");
     cy.get('[data-test="users-delete-button"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]').should("not.exist");
 
     cy.get('[data-test="base-tab-button"]').should("be.visible");
     cy.get('[data-test="email-tab-button"]').should("be.visible");
@@ -141,7 +143,7 @@ describe("Admin users view", function () {
   });
 
   it("check userView with ldap user", function () {
-    cy.fixture("user2.json").then((user) => {
+    cy.fixture("userDataUser.json").then((user) => {
       user.data.authenticator = "ldap";
       user.data.external_id = "lwr";
 
@@ -174,6 +176,7 @@ describe("Admin users view", function () {
     cy.get('[data-test="delete-image-button"]').should("not.exist");
     cy.get('[data-test="undo-delete-button"]').should("not.exist");
     cy.get('[data-test="upload-file-input"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]').should("not.exist");
 
     cy.get('[data-test="locale-dropdown"]').within(() => {
       cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
@@ -282,7 +285,7 @@ describe("Admin users view", function () {
 
     // Reload with correct data
     cy.intercept("GET", "api/v1/users/2", {
-      fixture: "user2.json",
+      fixture: "userDataUser.json",
     }).as("userRequest");
 
     cy.get('[data-test="loading-retry-button"]')
diff --git a/tests/Frontend/e2e/UserProfile.cy.js b/tests/Frontend/e2e/UserProfile.cy.js
index 2550111a8..a62154ad5 100644
--- a/tests/Frontend/e2e/UserProfile.cy.js
+++ b/tests/Frontend/e2e/UserProfile.cy.js
@@ -16,7 +16,7 @@ describe("User Profile", function () {
     const userRequest = interceptIndefinitely(
       "GET",
       "api/v1/users/1",
-      { fixture: "user.json" },
+      { fixture: "userDataCurrentUser.json" },
       "userRequest",
     );
 
@@ -80,7 +80,7 @@ describe("User Profile", function () {
 
     // Reload with correct data
     cy.intercept("GET", "api/v1/users/1", {
-      fixture: "user.json",
+      fixture: "userDataCurrentUser.json",
     }).as("userRequest");
 
     cy.get('[data-test="loading-retry-button"]')
diff --git a/tests/Frontend/e2e/UserProfileBase.cy.js b/tests/Frontend/e2e/UserProfileBase.cy.js
index 6ebffe18a..83d447703 100644
--- a/tests/Frontend/e2e/UserProfileBase.cy.js
+++ b/tests/Frontend/e2e/UserProfileBase.cy.js
@@ -307,12 +307,13 @@ describe("User Profile Base", function () {
     );
 
     // Save changes
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.firstname = "Laura";
       user.data.lastname = "Rivera";
       user.data.user_locale = "de";
       user.data.timezone = "Europe/Berlin";
       user.data.image = Cypress.config("baseUrl") + "/test.jpg";
+      user.data.updated_at = "2024-09-13T14:22:26.000000Z";
 
       const saveChangesRequest = interceptIndefinitely(
         "POST",
@@ -329,7 +330,6 @@ describe("User Profile Base", function () {
         currentUser.data.lastname = "Rivera";
         currentUser.data.user_locale = "de";
         currentUser.data.permissions = ["users.updateOwnAttributes"];
-        user.data.updated_at = "2024-09-13T14:22:26.000000Z";
 
         cy.intercept("GET", "api/v1/currentUser", {
           statusCode: 200,
@@ -459,7 +459,7 @@ describe("User Profile Base", function () {
     // Delete again and save changes
     cy.get('[data-test="delete-image-button"]').click();
 
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.firstname = "Laura";
       user.data.lastname = "Rivera";
       user.data.user_locale = "de";
@@ -543,7 +543,7 @@ describe("User Profile Base", function () {
     );
 
     // Check with 428 error (stale error)
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       const newModel = user.data;
       newModel.firstname = "Laura";
       newModel.lastname = "Rivera";
@@ -665,7 +665,7 @@ describe("User Profile Base", function () {
   });
 
   it("view as external user", function () {
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.authenticator = "ldap";
       user.data.external_id = "jdo";
 
diff --git a/tests/Frontend/e2e/UserProfileEmail.cy.js b/tests/Frontend/e2e/UserProfileEmail.cy.js
index fb679af40..b8010f9f7 100644
--- a/tests/Frontend/e2e/UserProfileEmail.cy.js
+++ b/tests/Frontend/e2e/UserProfileEmail.cy.js
@@ -81,7 +81,7 @@ describe("User Profile Email", function () {
     cy.get("#email").clear();
     cy.get("#email").type("john.doe@example.com");
 
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.email = "john.doe@example.com";
 
       cy.intercept("PUT", "api/v1/users/1/email", {
@@ -178,7 +178,7 @@ describe("User Profile Email", function () {
     cy.checkToastMessage("app.flash.unauthenticated");
   });
 
-  it("view without users.update permission", function () {
+  it("view without users.updateOwnAttributes permission", function () {
     cy.intercept("GET", "api/v1/currentUser", { fixture: "currentUser.json" });
 
     cy.visit("/profile");
@@ -199,7 +199,7 @@ describe("User Profile Email", function () {
   });
 
   it("view as external user", function () {
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.authenticator = "ldap";
       user.data.external_id = "jdo";
 
diff --git a/tests/Frontend/e2e/UserProfileOthers.cy.js b/tests/Frontend/e2e/UserProfileOthers.cy.js
index f20401d79..aff7ce5b8 100644
--- a/tests/Frontend/e2e/UserProfileOthers.cy.js
+++ b/tests/Frontend/e2e/UserProfileOthers.cy.js
@@ -23,7 +23,7 @@ describe("User Profile Others", function () {
       .click();
 
     // Save changes
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.bbb_skip_check_audio = true;
 
       const saveChangesRequest = interceptIndefinitely(
@@ -86,7 +86,7 @@ describe("User Profile Others", function () {
     );
 
     // Check with 428 error (stale error)
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       const newModel = user.data;
       newModel.bbb_skip_check_audio = true;
 
diff --git a/tests/Frontend/e2e/UserProfileSecurity.cy.js b/tests/Frontend/e2e/UserProfileSecurity.cy.js
index 23ec90206..dc75aeb56 100644
--- a/tests/Frontend/e2e/UserProfileSecurity.cy.js
+++ b/tests/Frontend/e2e/UserProfileSecurity.cy.js
@@ -55,7 +55,7 @@ describe("User Profile Security", function () {
       });
 
     // Try to change password
-    cy.fixture("user").then((user) => {
+    cy.fixture("userDataCurrentUser").then((user) => {
       const saveChangesRequest = interceptIndefinitely(
         "PUT",
         "api/v1/users/1/password",
@@ -231,7 +231,7 @@ describe("User Profile Security", function () {
   });
 
   it("view as external user", function () {
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.authenticator = "ldap";
       user.data.external_id = "jdo";
 
diff --git a/tests/Frontend/fixtures/user.json b/tests/Frontend/fixtures/userDataCurrentUser.json
similarity index 100%
rename from tests/Frontend/fixtures/user.json
rename to tests/Frontend/fixtures/userDataCurrentUser.json
diff --git a/tests/Frontend/fixtures/user2.json b/tests/Frontend/fixtures/userDataUser.json
similarity index 100%
rename from tests/Frontend/fixtures/user2.json
rename to tests/Frontend/fixtures/userDataUser.json
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index b445ecf3e..ab6033798 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -136,9 +136,9 @@ Cypress.Commands.add("interceptUserProfileRequests", () => {
     cy.intercept("GET", "api/v1/currentUser", currentUser);
   });
 
-  cy.intercept("GET", "api/v1/users/1", { fixture: "user.json" }).as(
-    "userRequest",
-  );
+  cy.intercept("GET", "api/v1/users/1", {
+    fixture: "userDataCurrentUser.json",
+  }).as("userRequest");
   cy.intercept("GET", "api/v1/getTimezones", { fixture: "timezones.json" });
   cy.intercept("GET", "api/v1/sessions", { fixture: "sessions.json" });
 });
@@ -217,7 +217,7 @@ Cypress.Commands.add("interceptAdminUsersNewRequests", () => {
  */
 Cypress.Commands.add("interceptAdminUsersViewRequests", () => {
   cy.intercept("GET", "api/v1/users/2", {
-    fixture: "user2.json",
+    fixture: "userDataUser.json",
   }).as("userRequest");
 
   cy.intercept("GET", "api/v1/roles*", {

From baa20a57e2d924379febd40c7a583954dc0cfaac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 4 Dec 2024 19:58:13 +0100
Subject: [PATCH 11/79] Continue adding AdminUsers Edit tests (Security)

---
 ...rTabSecurityRolesAndPermissionsSection.vue |   1 +
 tests/Frontend/e2e/AdminUsersEdit.cy.js       |   4 +-
 tests/Frontend/e2e/AdminUsersEditBase.cy.js   | 139 +--
 tests/Frontend/e2e/AdminUsersEditEmail.cy.js  |  59 +-
 tests/Frontend/e2e/AdminUsersEditOthers.cy.js |  57 +-
 .../Frontend/e2e/AdminUsersEditSecurity.cy.js | 815 ++++++++++++++++++
 tests/Frontend/e2e/AdminUsersNew.cy.js        |  52 ++
 tests/Frontend/e2e/AdminUsersView.cy.js       |  48 +-
 .../e2e/AdminUsersViewUserActions.cy.js       | 296 +++++++
 tests/Frontend/e2e/UserProfileSecurity.cy.js  |   2 +
 10 files changed, 1264 insertions(+), 209 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminUsersEditSecurity.cy.js

diff --git a/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue b/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue
index 2f902323c..61ca0199e 100644
--- a/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue
+++ b/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue
@@ -30,6 +30,7 @@
           :loading="isBusy"
           :label="$t('app.save')"
           icon="fa-solid fa-save"
+          data-test="users-roles-save-button"
         />
       </div>
     </form>
diff --git a/tests/Frontend/e2e/AdminUsersEdit.cy.js b/tests/Frontend/e2e/AdminUsersEdit.cy.js
index 8c0896ada..175facb09 100644
--- a/tests/Frontend/e2e/AdminUsersEdit.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEdit.cy.js
@@ -204,10 +204,12 @@ describe("Admin users edit", function () {
 
     cy.wait("@userRequest");
 
-    // Check that redirect worked and error message is shown
+    // Check that redirect worked
     cy.url().should("not.include", "/admin/users/2/edit");
     cy.url().should("include", "/admin/users");
 
+    cy.wait("@usersRequest");
+
     // Check that error message gets shown
     cy.checkToastMessage([
       'app.flash.server_error.message_{"message":"No query results for model"}',
diff --git a/tests/Frontend/e2e/AdminUsersEditBase.cy.js b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
index 7873698a3..882e8febf 100644
--- a/tests/Frontend/e2e/AdminUsersEditBase.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
@@ -494,6 +494,11 @@ describe("Admin users edit base", function () {
         statusCode: 200,
         body: user,
       }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
     });
 
     cy.get('[data-test="user-tab-profile-save-button"]').click();
@@ -565,19 +570,23 @@ describe("Admin users edit base", function () {
 
     // Check with 428 error (stale error)
     cy.fixture("userDataUser.json").then((user) => {
-      const newModel = user.data;
-      newModel.firstname = "Laura";
-      newModel.lastname = "Rivera";
-      newModel.user_locale = "de";
-      newModel.timezone = "Europe/Berlin";
+      user.data.firstname = "Juan";
+      user.data.lastname = "Walter";
+      user.data.user_locale = "de";
+      user.data.timezone = "Europe/Berlin";
 
       cy.intercept("POST", "api/v1/users/2", {
         statusCode: 428,
         body: {
           message: " The user entity was updated in the meanwhile!",
-          new_model: newModel,
+          new_model: user.data,
         },
       }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
     });
 
     cy.get('[data-test="stale-user-dialog"]').should("not.exist");
@@ -636,6 +645,8 @@ describe("Admin users edit base", function () {
     cy.url().should("not.include", "/admin/users/2/edit");
     cy.url().should("include", "/admin/users");
 
+    cy.wait("@usersRequest");
+
     cy.checkToastMessage([
       'app.flash.server_error.message_{"message":"No query results for model"}',
       'app.flash.server_error.error_code_{"statusCode":404}',
@@ -790,120 +801,4 @@ describe("Admin users edit base", function () {
 
     cy.checkToastMessage("app.flash.unauthenticated");
   });
-
-  // ToDo figure out where to put this test (which test file)
-  //  would maybe make sense inside AdminUsersViewUserActions.cy.js (problem: needs to be tested for all tabs)
-  it("switch between edit and view", function () {
-    cy.visit("/admin/users/2/edit");
-
-    cy.wait("@userRequest");
-
-    // Change values of all fields
-    cy.get("#firstname").should("have.value", "Laura").clear();
-    cy.get("#firstname").type("Juan");
-    cy.get("#lastname").should("have.value", "Rivera").clear();
-    cy.get("#lastname").type("Walter");
-
-    cy.get('[data-test="upload-file-input"]')
-      .should("not.be.visible")
-      .selectFile("tests/Frontend/fixtures/files/profileImage.jpg", {
-        force: true,
-      });
-
-    cy.get('[data-test="crop-image-dialog"]')
-      .should("be.visible")
-      .and("include.text", "admin.users.image.crop");
-
-    // Check if correct image is shown
-    cy.fixture("files/profileImage.jpg", "base64").then((content) => {
-      cy.get('[data-test="crop-image-dialog"]')
-        .find("img")
-        .should("have.attr", "src")
-        .and("include", content);
-    });
-
-    cy.get('[data-test="dialog-save-button"]')
-      .should("have.text", "admin.users.image.save")
-      .click();
-
-    cy.get('[data-test="crop-image-dialog"]').should("not.exist");
-
-    // Check that image and buttons are still shown correctly
-    cy.get('[data-test="profile-image-field"]').within(() => {
-      cy.get('[data-test="default-profile-image-preview"]').should("not.exist");
-      cy.get('[data-test="profile-image-preview"]')
-        .should("be.visible")
-        .find("img")
-        .should("have.attr", "src")
-        .then((src) => {
-          cy.fixture("files/profileImagePreview.jpg", "base64").then(
-            (content) => {
-              expect(src).to.eql("data:image/jpeg;base64," + content);
-            },
-          );
-        });
-      cy.get('[data-test="upload-file-button"]').should("be.visible");
-      cy.get('[data-test="delete-image-button"]').should("not.exist");
-      cy.get('[data-test="undo-delete-button"]').should("not.exist");
-
-      cy.get('[data-test="reset-file-upload-button"]').should("be.visible");
-    });
-
-    cy.get('[data-test="locale-dropdown"]')
-      .should("have.text", "English")
-      .click();
-
-    cy.get('[data-test="locale-dropdown-option"]').eq(0).click();
-
-    cy.get('[data-test="locale-dropdown-items"]').should("not.exist");
-    cy.get('[data-test="locale-dropdown"]').should("have.text", "Deutsch");
-
-    cy.get('[data-test="timezone-dropdown"]')
-      .should("have.text", "UTC")
-      .click();
-
-    cy.get('[data-test="timezone-dropdown-option"]').eq(2).click();
-
-    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
-    cy.get('[data-test="timezone-dropdown"]').should(
-      "have.text",
-      "Europe/Berlin",
-    );
-
-    // Switch to view
-    cy.get('[data-test="users-cancel-edit-button"]').click();
-
-    // Check if redirected to view page
-    cy.url().should("include", "/admin/users/2");
-    cy.url().should("not.include", "/edit");
-
-    cy.wait("@userRequest");
-
-    // Check that changed were not saved
-    cy.get("#firstname").should("have.value", "Laura");
-    cy.get("#lastname").should("have.value", "Rivera");
-    cy.get('[data-test="profile-image-preview"]').should("not.exist");
-    cy.get('[data-test="default-profile-image-preview"]')
-      .should("be.visible")
-      .and("include.text", "LR");
-    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
-    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
-
-    // Switch to edit again
-    cy.get('[data-test="users-edit-button"]').click();
-
-    cy.url().should("include", "/admin/users/2/edit");
-
-    cy.wait("@userRequest");
-
-    // Check that original values are shown
-    cy.get("#firstname").should("have.value", "Laura");
-    cy.get("#lastname").should("have.value", "Rivera");
-    cy.get('[data-test="profile-image-preview"]').should("not.exist");
-    cy.get('[data-test="default-profile-image-preview"]')
-      .should("be.visible")
-      .and("include.text", "LR");
-    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
-    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
-  });
 });
diff --git a/tests/Frontend/e2e/AdminUsersEditEmail.cy.js b/tests/Frontend/e2e/AdminUsersEditEmail.cy.js
index d781a13de..f118dd168 100644
--- a/tests/Frontend/e2e/AdminUsersEditEmail.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditEmail.cy.js
@@ -56,7 +56,7 @@ describe("Admin users edit email", function () {
 
     // Save changes
     cy.fixture("userDataUser.json").then((user) => {
-      user.email = "laura.rivera@example.com";
+      user.data.email = "laura.rivera@example.com";
 
       const saveChangesRequest = interceptIndefinitely(
         "PUT",
@@ -68,6 +68,11 @@ describe("Admin users edit email", function () {
         "saveChangesRequest",
       );
 
+      cy.intercept("GET", "/api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+
       cy.get('[data-test="user-tab-email-save-button"]')
         .should("have.text", "auth.change_email")
         .click();
@@ -90,6 +95,8 @@ describe("Admin users edit email", function () {
     // Check that redirect to user view worked
     cy.url().should("include", "/admin/users/2");
     cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
   });
 
   it("save changes errors", function () {
@@ -111,6 +118,8 @@ describe("Admin users edit email", function () {
 
     cy.get('[data-test="user-tab-email-save-button"]').click();
 
+    cy.wait("@saveChangesRequest");
+
     cy.get('[data-test="email-field"]').should(
       "include.text",
       "The email field is required.",
@@ -126,6 +135,8 @@ describe("Admin users edit email", function () {
 
     cy.get('[data-test="user-tab-email-save-button"]').click();
 
+    cy.wait("@saveChangesRequest");
+
     cy.checkToastMessage([
       'app.flash.server_error.message_{"message":"Test"}',
       'app.flash.server_error.error_code_{"statusCode":500}',
@@ -143,10 +154,14 @@ describe("Admin users edit email", function () {
 
     cy.get('[data-test="user-tab-email-save-button"]').click();
 
+    cy.wait("@saveChangesRequest");
+
     // Check that redirect worked and error message is shown
     cy.url().should("not.include", "/admin/users/2/edit");
     cy.url().should("include", "/admin/users");
 
+    cy.wait("@usersRequest");
+
     cy.checkToastMessage([
       'app.flash.server_error.message_{"message":"No query results for model"}',
       'app.flash.server_error.error_code_{"statusCode":404}',
@@ -165,6 +180,8 @@ describe("Admin users edit email", function () {
 
     cy.get('[data-test="user-tab-email-save-button"]').click();
 
+    cy.wait("@saveChangesRequest");
+
     // Check that redirect worked and error message is shown
     cy.url().should("include", "/login?redirect=/admin/users/2/edit");
 
@@ -198,44 +215,4 @@ describe("Admin users edit email", function () {
 
     cy.get('[data-test="user-tab-email-save-button"]').should("not.exist");
   });
-
-  // ToDo figure out where to put this test (which test file)
-  //  would maybe make sense inside AdminUsersViewUserActions.cy.js (problem: needs to be tested for all tabs)
-  it("switch between edit and view", function () {
-    cy.visit("/admin/users/2/edit");
-
-    cy.wait("@userRequest");
-
-    cy.get('[data-test="email-tab-button"]').click();
-
-    // Change value of email field
-    cy.get("#email").should("have.value", "LauraWRivera@domain.tld").type("e");
-
-    // Switch to view
-    cy.get('[data-test="users-cancel-edit-button"]').click();
-
-    // Check if redirected to view page
-    cy.url().should("include", "/admin/users/2");
-    cy.url().should("not.include", "/edit");
-
-    cy.wait("@userRequest");
-
-    // Switch to email tab and check that changes are not saved
-    cy.get('[data-test="email-tab-button"]').click();
-
-    cy.get("#email").should("have.value", "LauraWRivera@domain.tld");
-
-    // Switch back to edit
-    cy.get('[data-test="users-edit-button"]').click();
-
-    // Check if redirected to edit page
-    cy.url().should("include", "/admin/users/2/edit");
-
-    cy.wait("@userRequest");
-
-    cy.get('[data-test="email-tab-button"]').click();
-
-    // Check that original values are shown
-    cy.get("#email").should("have.value", "LauraWRivera@domain.tld");
-  });
 });
diff --git a/tests/Frontend/e2e/AdminUsersEditOthers.cy.js b/tests/Frontend/e2e/AdminUsersEditOthers.cy.js
index dbba3221f..fc816c707 100644
--- a/tests/Frontend/e2e/AdminUsersEditOthers.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditOthers.cy.js
@@ -60,6 +60,11 @@ describe("Admin users edit others", function () {
         "saveChangesRequest",
       );
 
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+
       cy.get('[data-test="user-tab-others-save-button"]').click();
 
       // Check loading
@@ -80,6 +85,8 @@ describe("Admin users edit others", function () {
     // Check that redirect to user view worked
     cy.url().should("include", "/admin/users/2");
     cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
   });
 
   it("save changes errors", function () {
@@ -112,16 +119,20 @@ describe("Admin users edit others", function () {
 
     // Check with 428 error (stale error)
     cy.fixture("userDataUser.json").then((user) => {
-      const newModel = user.data;
-      newModel.bbb_skip_check_audio = true;
+      user.data.bbb_skip_check_audio = true;
 
       cy.intercept("POST", "api/v1/users/2", {
         statusCode: 428,
         body: {
           message: " The user entity was updated in the meanwhile!",
-          new_model: newModel,
+          new_model: user.data,
         },
       }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
     });
 
     cy.get('[data-test="stale-user-dialog"]').should("not.exist");
@@ -179,6 +190,8 @@ describe("Admin users edit others", function () {
     cy.url().should("not.include", "/admin/users/2/edit");
     cy.url().should("include", "/admin/users");
 
+    cy.wait("@usersRequest");
+
     cy.checkToastMessage([
       'app.flash.server_error.message_{"message":"No query results for model"}',
       'app.flash.server_error.error_code_{"statusCode":404}',
@@ -204,42 +217,4 @@ describe("Admin users edit others", function () {
 
     cy.checkToastMessage("app.flash.unauthenticated");
   });
-
-  it("switch between edit and view", function () {
-    cy.visit("/admin/users/2/edit");
-
-    cy.wait("@userRequest");
-
-    cy.get('[data-test="others-tab-button"]').click();
-
-    // Change value of bbb_skip_check_audio
-    cy.get("#bbb_skip_check_audio").click();
-
-    // Switch to view
-    cy.get('[data-test="users-cancel-edit-button"]').click();
-
-    // Check if redirected to view page
-    cy.url().should("include", "/admin/users/2");
-    cy.url().should("not.include", "/edit");
-
-    cy.wait("@userRequest");
-
-    // Switch to others tab and check if changes are not saved
-    cy.get('[data-test="others-tab-button"]').click();
-
-    cy.get("#bbb_skip_check_audio").should("not.be.checked");
-
-    // Switch back to edit page
-    cy.get('[data-test="users-edit-button"]').click();
-
-    // Check if redirected to edit page
-    cy.url().should("include", "/admin/users/2/edit");
-
-    cy.wait("@userRequest");
-
-    cy.get('[data-test="others-tab-button"]').click();
-
-    // Check that original value is shown
-    cy.get("#bbb_skip_check_audio").should("not.be.checked");
-  });
 });
diff --git a/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
new file mode 100644
index 000000000..c6a0c9ee1
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
@@ -0,0 +1,815 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users edit email", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check view", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.contains("admin.users.roles_and_permissions").should("be.visible");
+
+    // Check that role-select is enabled and shows the correct roles
+    cy.get('[data-test="roles-field"]')
+      .should("be.visible")
+      .and("include.text", "app.roles")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]').within(() => {
+          cy.get('[data-test="role-chip"]').should("have.length", 2);
+          cy.get('[data-test="role-chip"]')
+            .eq(0)
+            .should("include.text", "Students")
+            .find('[data-test="remove-role-button"]')
+            .should("not.exist");
+
+          cy.get('[data-test="role-chip"]')
+            .eq(1)
+            .should("include.text", "Staff")
+            .find('[data-test="remove-role-button"]')
+            .should("be.visible");
+        });
+      });
+
+    // Check that password fields are shown correctly and try to change password
+    cy.get('[data-test="security-tab-current-password-field"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="new-password-field"]')
+      .should("be.visible")
+      .and("include.text", "auth.new_password")
+      .within(() => {
+        cy.get("#new_password").should("have.value", "");
+      });
+
+    cy.get('[data-test="new-password-confirmation-field"]')
+      .should("be.visible")
+      .and("include.text", "auth.new_password_confirmation")
+      .within(() => {
+        cy.get("#new_password_confirmation").should("have.value", "");
+      });
+
+    // Check that essions are not shown
+    cy.get('[data-test="session-panel"]').should("not.exist");
+  });
+
+  it("check view with external user", function () {
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.authenticator = "ldap";
+      user.data.external_id = "lwr";
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Check that role select is shown and enabled
+    cy.get('[data-test="roles-field"]')
+      .should("be.visible")
+      .and("include.text", "app.roles")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]').should(
+          "not.have.class",
+          "multiselect--disabled",
+        );
+      });
+
+    // Check that password fields are hidden
+    cy.get('[data-test="security-tab-current-password-field"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="new-password-field"]').should("not.exist");
+    cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
+    cy.get('[data-test="change-password-save-button"]').should("not.exist");
+
+    // Check that sessions are not shown
+    cy.get('[data-test="session-panel"]').should("not.exist");
+  });
+
+  it("change role", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.get('[data-test="role-chip"]').should("have.length", 2);
+    cy.get('[data-test="role-chip"]')
+      .eq(0)
+      .should("include.text", "Students")
+      .find('[data-test="remove-role-button"]')
+      .should("not.exist");
+
+    cy.get('[data-test="role-chip"]')
+      .eq(1)
+      .should("include.text", "Staff")
+      .find('[data-test="remove-role-button"]')
+      .should("be.visible");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Admin")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("be.visible")
+      .and("have.class", "multiselect__option--selected");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("be.visible")
+      .and("have.class", "multiselect__option--disabled");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    // Switch to next page
+    const userRoleRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 200,
+        body: {
+          data: [
+            {
+              id: 4,
+              name: "Dean",
+              default: false,
+              updated_at: "2021-01-08T15:51:08.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 5,
+              name: "Faculty",
+              default: false,
+              updated_at: "2021-03-19T09:12:44.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 6,
+              name: "Manager",
+              default: false,
+              updated_at: "2021-05-22T11:55:21.000000Z",
+              model_name: "Role",
+              room_limit: -1,
+            },
+          ],
+          meta: {
+            current_page: 2,
+            from: 4,
+            last_page: 2,
+            per_page: 3,
+            to: 6,
+            total: 6,
+          },
+        },
+      },
+      "userRoleRequest",
+    );
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]')
+          .should("include.text", "app.previous_page")
+          .and("be.disabled");
+        cy.get('[data-test="next-page-button"]')
+          .should("include.text", "app.next_page")
+          .and("not.be.disabled");
+
+        cy.get('[data-test="next-page-button"]').click();
+
+        // Check loading
+        cy.get('[data-test="previous-page-button"]').should("be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-roles-save-button"]')
+      .should("be.disabled")
+      .then(() => {
+        userRoleRequest.sendResponse();
+      });
+
+    cy.wait("@userRoleRequest");
+
+    cy.get('[data-test="users-roles-save-button"]').should("not.be.disabled");
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Dean")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Faculty")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Manager")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    // Select roles
+    cy.get(".multiselect__option").eq(0).click();
+    cy.get(".multiselect__option").eq(2).click();
+
+    // Check that roles are shown correctly and remove one role
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 4);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Students")
+        .find('[data-test="remove-role-button"]')
+        .should("not.exist");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+      cy.get('[data-test="role-chip"]')
+        .eq(2)
+        .should("include.text", "Dean")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(3)
+        .should("include.text", "Manager")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .find('[data-test="remove-role-button"]')
+        .click();
+    });
+
+    // Check that dropdown is hidden
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Save new roles
+    cy.fixture("userDataUser").then((user) => {
+      user.data.roles = [
+        { id: 3, name: "Students", automatic: true },
+        { id: 4, name: "Dean", automatic: false },
+        { id: 6, name: "Manager", automatic: false },
+      ];
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/users/2",
+        {
+          statusCode: 200,
+          body: user,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "/api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+
+      cy.get('[data-test="users-roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="role-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+      cy.get('[data-test="users-roles-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      expect(interception.request.body).to.deep.include({
+        roles: [3, 4, 6],
+      });
+    });
+
+    // Check that redirect to user view worked
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+  });
+
+  it("change role errors", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/users/2", {
+      statusCode: 422,
+      body: {
+        errors: {
+          roles: ["The roles field is required."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="users-roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.get('[data-test="roles-field"]').should(
+      "include.text",
+      "The roles field is required.",
+    );
+
+    // Check with 500 error
+    cy.intercept("PUT", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="users-roles-save-button"]').click();
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 428 error (stale error)
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.roles = [
+        { id: 3, name: "Students", automatic: true },
+        { id: 4, name: "Dean", automatic: false },
+        { id: 6, name: "Manager", automatic: false },
+      ];
+      user.data.user_locale = "de";
+      user.data.timezone = "Europe/Berlin";
+
+      cy.intercept("PUT", "api/v1/users/2", {
+        statusCode: 428,
+        body: {
+          message: " The user entity was updated in the meanwhile!",
+          new_model: user.data,
+        },
+      }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.get('[data-test="stale-user-dialog"]').should("not.exist");
+
+    cy.get('[data-test="users-roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-user-dialog"]')
+      .should("be.visible")
+      .and("include.text", "The user entity was updated in the meanwhile!");
+
+    cy.get('[data-test="stale-dialog-reload-button"]').click();
+
+    // Check that redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Check with 404 error
+    cy.interceptAdminUsersIndexRequests();
+    cy.intercept("PUT", "api/v1/users/2 ", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="users-roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.url().should("include", "/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Check with 401 error
+    cy.intercept("PUT", "api/v1/users/2", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="users-roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("change password", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Type in new password and confirmation
+    cy.get("#new_password").type("secretPassword123#");
+    cy.get("#new_password_confirmation").type("secretPassword123#");
+
+    // Try to change password
+    cy.fixture("userDataUser").then((user) => {
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/users/2/password",
+        {
+          statusCode: 200,
+          body: user,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="change-password-save-button"]')
+        .should("have.text", "auth.change_password")
+        .click();
+
+      // Check loading
+      cy.get("#new_password").should("be.disabled");
+      cy.get("#new_password_confirmation")
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        new_password: "secretPassword123#",
+        new_password_confirmation: "secretPassword123#",
+      });
+    });
+
+    // Check that message is shown
+    cy.checkToastMessage("auth.flash.password_changed");
+
+    // Check that redirect to user view worked
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+  });
+
+  it("change password errors", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.get('[data-test="new-password-field"]').type(" ");
+    cy.get('[data-test="new-password-confirmation-field"]').type(" ");
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/users/2/password", {
+      statusCode: 422,
+      body: {
+        errors: {
+          new_password: ["The New password field is required."],
+          new_password_confirmation: [
+            "The New password confirmation field is required.",
+          ],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="change-password-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.get('[data-test="new-password-field"]').should(
+      "include.text",
+      "The New password field is required.",
+    );
+
+    cy.get('[data-test="new-password-confirmation-field"]').should(
+      "include.text",
+      "The New password confirmation field is required.",
+    );
+
+    // Check with 500 error
+    cy.get('[data-test="new-password-field"]')
+      .should("have.value", "")
+      .type("newSecretPassword123#");
+
+    cy.get('[data-test="new-password-confirmation-field"]')
+      .should("have.value", "")
+      .type("newSecretPassword123#");
+
+    cy.intercept("PUT", "api/v1/users/2/password", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="change-password-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 404 error
+    cy.get('[data-test="new-password-field"]')
+      .should("have.value", "")
+      .type("newSecretPassword123#");
+
+    cy.get('[data-test="new-password-confirmation-field"]')
+      .should("have.value", "")
+      .type("newSecretPassword123#");
+
+    cy.interceptAdminUsersIndexRequests();
+    cy.intercept("PUT", "api/v1/users/2/password", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="change-password-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.url().should("include", "/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Check 401 error
+    cy.get('[data-test="new-password-field"]')
+      .should("have.value", "")
+      .type("newSecretPassword123#");
+
+    cy.get('[data-test="new-password-confirmation-field"]')
+      .should("have.value", "")
+      .type("newSecretPassword123#");
+
+    cy.intercept("PUT", "api/v1/users/2/password", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="change-password-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load roles errors", function () {
+    // Check with 500 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-roles-save-button"]').should("be.disabled");
+
+    // Reload roles without errors
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "userRoles.json",
+    }).as("rolesRequest");
+
+    cy.get('[data-test="roles-reload-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-roles-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="roles-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-roles-save-button"]').should("be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.reload();
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit edit page again with roles
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "userRoles.json",
+    }).as("rolesRequest");
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index 57e0d9bfb..02b8ff881 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -912,6 +912,31 @@ describe("Admin users new", function () {
     cy.get(".multiselect__content").should("be.visible");
     cy.get(".multiselect__option").should("have.length", 5);
 
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-new-save-button"]').should("be.disabled");
+
     // Check with 401 error
     cy.intercept("GET", "api/v1/roles*", {
       statusCode: 401,
@@ -927,5 +952,32 @@ describe("Admin users new", function () {
     cy.url().should("include", "/login?redirect=/admin/users/new");
 
     cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit edit page again with roles
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "userRoles.json",
+    }).as("rolesRequest");
+
+    cy.visit("/admin/users/new");
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
   });
 });
diff --git a/tests/Frontend/e2e/AdminUsersView.cy.js b/tests/Frontend/e2e/AdminUsersView.cy.js
index fae1e6074..8e298b79b 100644
--- a/tests/Frontend/e2e/AdminUsersView.cy.js
+++ b/tests/Frontend/e2e/AdminUsersView.cy.js
@@ -121,6 +121,9 @@ describe("Admin users view", function () {
       cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
     });
 
+    // Check that save button is hidden
+    cy.get('[data-test="user-tab-profile-save-button"]').should("not.exist");
+
     // Email tab
     cy.get('[data-test="email-tab-button"]').click();
 
@@ -128,18 +131,53 @@ describe("Admin users view", function () {
       .should("have.value", "LauraWRivera@domain.tld")
       .and("be.disabled");
 
+    // Check that save button is hidden
+    cy.get('[data-test="user-tab-email-save-button"]').should("not.exist");
+
     // Security tab
     cy.get('[data-test="security-tab-button"]').click();
 
     cy.get('[data-test="role-dropdown"]')
-      .should("include.text", "Students")
-      .should("include.text", "Staff")
-      .should("have.class", "multiselect--disabled");
+      .should("have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="role-chip"]').should("have.length", 2);
+        cy.get('[data-test="role-chip"]')
+          .eq(0)
+          .should("include.text", "Students")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+        cy.get('[data-test="role-chip"]')
+          .eq(1)
+          .should("include.text", "Staff")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+      });
+
+    // Check that role save button is hidden
+    cy.get('[data-test="users-roles-save-button"]').should("not.exist");
+
+    // Check that password fields are hidden
+    cy.get('[data-test="security-tab-current-password-field"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="new-password-field"]').should("not.exist");
+
+    cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
+
+    // Check that password save button is hidden
+    cy.get('[data-test="change-password-save-button"]').should("not.exist");
+
+    // Check that sessions are hidden
+    cy.get('[data-test="session-panel"]').should("not.exist");
 
     // Check others tab
     cy.get('[data-test="others-tab-button"]').click();
 
     cy.get("#bbb_skip_check_audio").should("not.be.checked").and("be.disabled");
+
+    // Check that others save button is hidden
+    cy.get('[data-test="user-tab-others-save-button"]').should("not.exist");
   });
 
   it("check userView with ldap user", function () {
@@ -312,10 +350,12 @@ describe("Admin users view", function () {
 
     cy.wait("@userRequest");
 
-    // Check that redirect worked and error message is shown
+    // Check that redirect worked
     cy.url().should("not.include", "/admin/users/2");
     cy.url().should("include", "/admin/users");
 
+    cy.wait("@usersRequest");
+
     // Check that error message gets shown
     cy.checkToastMessage([
       'app.flash.server_error.message_{"message":"No query results for model"}',
diff --git a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
index b513a9ec1..6fce9c093 100644
--- a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
+++ b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
@@ -239,4 +239,300 @@ describe("Admin users view user actions", function () {
 
     cy.checkToastMessage("app.flash.unauthenticated");
   });
+
+  it("switch between edit and view", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    // Check base tab
+    // Change values of all fields
+    cy.get("#firstname").should("have.value", "Laura").clear();
+    cy.get("#firstname").type("Juan");
+    cy.get("#lastname").should("have.value", "Rivera").clear();
+    cy.get("#lastname").type("Walter");
+
+    cy.get('[data-test="upload-file-input"]')
+      .should("not.be.visible")
+      .selectFile("tests/Frontend/fixtures/files/profileImage.jpg", {
+        force: true,
+      });
+
+    cy.get('[data-test="crop-image-dialog"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.image.crop");
+
+    // Check if correct image is shown
+    cy.fixture("files/profileImage.jpg", "base64").then((content) => {
+      cy.get('[data-test="crop-image-dialog"]')
+        .find("img")
+        .should("have.attr", "src")
+        .and("include", content);
+    });
+
+    cy.get('[data-test="dialog-save-button"]')
+      .should("have.text", "admin.users.image.save")
+      .click();
+
+    cy.get('[data-test="crop-image-dialog"]').should("not.exist");
+
+    // Check that image and buttons are still shown correctly
+    cy.get('[data-test="profile-image-field"]').within(() => {
+      cy.get('[data-test="default-profile-image-preview"]').should("not.exist");
+      cy.get('[data-test="profile-image-preview"]')
+        .should("be.visible")
+        .find("img")
+        .should("have.attr", "src")
+        .then((src) => {
+          cy.fixture("files/profileImagePreview.jpg", "base64").then(
+            (content) => {
+              expect(src).to.eql("data:image/jpeg;base64," + content);
+            },
+          );
+        });
+      cy.get('[data-test="upload-file-button"]').should("be.visible");
+      cy.get('[data-test="delete-image-button"]').should("not.exist");
+      cy.get('[data-test="undo-delete-button"]').should("not.exist");
+
+      cy.get('[data-test="reset-file-upload-button"]').should("be.visible");
+    });
+
+    cy.get('[data-test="locale-dropdown"]')
+      .should("have.text", "English")
+      .click();
+
+    cy.get('[data-test="locale-dropdown-option"]').eq(0).click();
+
+    cy.get('[data-test="locale-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "Deutsch");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .click();
+
+    cy.get('[data-test="timezone-dropdown-option"]').eq(2).click();
+
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+
+    // Switch to view
+    cy.get('[data-test="users-cancel-edit-button"]').click();
+
+    // Check if redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Check that changed were not saved
+    cy.get("#firstname").should("have.value", "Laura");
+    cy.get("#lastname").should("have.value", "Rivera");
+    cy.get('[data-test="profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="default-profile-image-preview"]')
+      .should("be.visible")
+      .and("include.text", "LR");
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
+    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
+
+    // Switch to edit again
+    cy.get('[data-test="users-edit-button"]').click();
+
+    cy.url().should("include", "/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    // Check that original values are shown
+    cy.get("#firstname").should("have.value", "Laura");
+    cy.get("#lastname").should("have.value", "Rivera");
+    cy.get('[data-test="profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="default-profile-image-preview"]')
+      .should("be.visible")
+      .and("include.text", "LR");
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
+    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
+
+    // Check email tab
+    cy.get('[data-test="email-tab-button"]').click();
+
+    // Change value of email field
+    cy.get("#email").should("have.value", "LauraWRivera@domain.tld").type("e");
+
+    // Switch to view
+    cy.get('[data-test="users-cancel-edit-button"]').click();
+
+    // Check if redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Switch to email tab and check that changes are not saved
+    cy.get('[data-test="email-tab-button"]').click();
+
+    cy.get("#email").should("have.value", "LauraWRivera@domain.tld");
+
+    // Switch back to edit
+    cy.get('[data-test="users-edit-button"]').click();
+
+    // Check if redirected to edit page
+    cy.url().should("include", "/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="email-tab-button"]').click();
+
+    // Check that original values are shown
+    cy.get("#email").should("have.value", "LauraWRivera@domain.tld");
+
+    // Check security tab
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Change value of role field
+    cy.get('[data-test="role-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="role-chip"]').should("have.length", 2);
+        cy.get('[data-test="role-chip"]')
+          .eq(0)
+          .should("include.text", "Students")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+        cy.get('[data-test="role-chip"]')
+          .eq(1)
+          .should("include.text", "Staff")
+          .find('[data-test="remove-role-button"]')
+          .should("be.visible");
+      });
+
+    cy.get('[data-test="role-dropdown"]').click();
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").eq(0).click();
+
+    // Check that roles are shown correctly
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 3);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Students")
+        .find('[data-test="remove-role-button"]')
+        .should("not.exist");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+      cy.get('[data-test="role-chip"]')
+        .eq(2)
+        .should("include.text", "Admin")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    // Close dropdown
+    cy.get(".multiselect__select").click();
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Change value of password field
+    cy.get("#new_password").type("secretPassword123#");
+    cy.get("#new_password_confirmation").type("secretPassword123#");
+
+    // Switch to view
+    cy.get('[data-test="users-cancel-edit-button"]').click();
+
+    // Check if redirected to view page and check that changes are not saved
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="role-chip"]').should("have.length", 2);
+        cy.get('[data-test="role-chip"]')
+          .eq(0)
+          .should("include.text", "Students")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+        cy.get('[data-test="role-chip"]')
+          .eq(1)
+          .should("include.text", "Staff")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+      });
+
+    // Check that password fields are hidden
+    cy.get('[data-test="new-password-field"]').should("not.exist");
+
+    cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
+
+    // Switch back to edit page
+    cy.get('[data-test="users-edit-button"]').click();
+
+    cy.url().should("include", "/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Check that original values are shown
+    cy.get('[data-test="role-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="role-chip"]').should("have.length", 2);
+        cy.get('[data-test="role-chip"]')
+          .eq(0)
+          .should("include.text", "Students")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+        cy.get('[data-test="role-chip"]')
+          .eq(1)
+          .should("include.text", "Staff")
+          .find('[data-test="remove-role-button"]')
+          .should("be.visible");
+      });
+
+    cy.get("#new_password").should("have.value", "");
+    cy.get("#new_password_confirmation").should("have.value", "");
+
+    // Check other tab
+    cy.get('[data-test="others-tab-button"]').click();
+
+    // Change value of bbb_skip_check_audio
+    cy.get("#bbb_skip_check_audio").click();
+
+    // Switch to view
+    cy.get('[data-test="users-cancel-edit-button"]').click();
+
+    // Check if redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Switch to others tab and check if changes are not saved
+    cy.get('[data-test="others-tab-button"]').click();
+
+    cy.get("#bbb_skip_check_audio").should("not.be.checked");
+
+    // Switch back to edit page
+    cy.get('[data-test="users-edit-button"]').click();
+
+    // Check if redirected to edit page
+    cy.url().should("include", "/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="others-tab-button"]').click();
+
+    // Check that original value is shown
+    cy.get("#bbb_skip_check_audio").should("not.be.checked");
+  });
 });
diff --git a/tests/Frontend/e2e/UserProfileSecurity.cy.js b/tests/Frontend/e2e/UserProfileSecurity.cy.js
index dc75aeb56..24661d87b 100644
--- a/tests/Frontend/e2e/UserProfileSecurity.cy.js
+++ b/tests/Frontend/e2e/UserProfileSecurity.cy.js
@@ -204,6 +204,7 @@ describe("User Profile Security", function () {
     );
     cy.get('[data-test="new-password-field"]').should("not.exist");
     cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
+    cy.get('[data-test="change-password-save-button"]').should("not.exist");
 
     // Check that all sessions are shown
     cy.get('[data-test="session-panel"]').should("have.length", 2);
@@ -266,6 +267,7 @@ describe("User Profile Security", function () {
     );
     cy.get('[data-test="new-password-field"]').should("not.exist");
     cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
+    cy.get('[data-test="change-password-save-button"]').should("not.exist");
 
     // Check that all sessions are shown
     cy.get('[data-test="session-panel"]').should("have.length", 2);

From 20c67b17cbc0760b80f2693d9342a48544cee316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Fri, 6 Dec 2024 11:17:47 +0100
Subject: [PATCH 12/79] Continue adding AdminServers Index tests and
 restructure permission tests

---
 .../SettingsServersDeleteButton.vue           |    4 +
 resources/js/views/AdminServersIndex.vue      |   29 +-
 tests/Frontend/e2e/AdminServersIndex.cy.js    | 1336 +++++++++++++++++
 tests/Frontend/e2e/AdminUsersIndex.cy.js      |  180 ++-
 tests/Frontend/fixtures/servers.json          |   88 ++
 .../support/commands/interceptCommands.js     |   12 +
 6 files changed, 1575 insertions(+), 74 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminServersIndex.cy.js
 create mode 100644 tests/Frontend/fixtures/servers.json

diff --git a/resources/js/components/SettingsServersDeleteButton.vue b/resources/js/components/SettingsServersDeleteButton.vue
index a48968165..341f34f04 100644
--- a/resources/js/components/SettingsServersDeleteButton.vue
+++ b/resources/js/components/SettingsServersDeleteButton.vue
@@ -5,6 +5,7 @@
     icon="fa-solid fa-trash"
     :disabled="isBusy"
     :aria-label="$t('admin.servers.delete.item', { name: props.name })"
+    data-test="servers-delete-button"
     @click="showModal()"
   />
   <Dialog
@@ -17,6 +18,7 @@
     :closeable="!isBusy"
     :dismissable-mask="!isBusy"
     :draggable="false"
+    data-test="servers-delete-dialog"
   >
     <span>{{ $t("admin.servers.delete.confirm", { name: props.name }) }}</span>
 
@@ -24,12 +26,14 @@
       <Button
         :label="$t('app.no')"
         severity="secondary"
+        data-test="dialog-cancel-button"
         @click="modalVisible = false"
       />
       <Button
         :label="$t('app.yes')"
         :loading="isBusy"
         severity="danger"
+        data-test="dialog-continue-button"
         @click="deleteServer"
       />
     </template>
diff --git a/resources/js/views/AdminServersIndex.vue b/resources/js/views/AdminServersIndex.vue
index d896d736d..da0580102 100644
--- a/resources/js/views/AdminServersIndex.vue
+++ b/resources/js/views/AdminServersIndex.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="flex flex-col justify-between md:flex-row">
       <div>
-        <InputGroup>
+        <InputGroup data-test="server-search">
           <InputText
             v-model="filter"
             :placeholder="$t('app.search')"
@@ -23,6 +23,7 @@
           severity="info"
           icon="fa-solid fa-repeat"
           :label="$t('admin.servers.reload')"
+          data-test="servers-reload-usage-button"
           @click="loadData(null, true)"
         />
         <Button
@@ -31,6 +32,7 @@
           severity="secondary"
           icon="fa-solid fa-sync"
           :aria-label="$t('app.reload')"
+          data-test="servers-reload-no-usage-button"
           @click="loadData(null, false)"
         />
         <Button
@@ -40,6 +42,7 @@
           :aria-label="$t('admin.servers.new')"
           :to="{ name: 'admin.servers.new' }"
           icon="fa-solid fa-plus"
+          data-test="servers-add-button"
         />
       </div>
     </div>
@@ -61,6 +64,28 @@
       striped-rows
       :pt="{
         table: 'table-auto lg:table-fixed',
+        bodyRow: {
+          'data-test': 'server-item',
+        },
+        mask: {
+          'data-test': 'overlay',
+        },
+        column: {
+          bodyCell: {
+            'data-test': 'server-item-cell',
+          },
+          headerCell: {
+            'data-test': 'server-header-cell',
+          },
+        },
+        pcPaginator: {
+          page: {
+            'data-test': 'paginator-page',
+          },
+          next: {
+            'data-test': 'paginator-next-button',
+          },
+        },
       }"
       @update:first="paginator.setFirst($event)"
       @page="onPage"
@@ -219,6 +244,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-eye"
+              data-test="servers-view-button"
             />
             <Button
               v-if="userPermissions.can('update', slotProps.data)"
@@ -236,6 +262,7 @@
               }"
               severity="info"
               icon="fa-solid fa-edit"
+              data-test="servers-edit-button"
             />
             <SettingsServersDeleteButton
               v-if="
diff --git a/tests/Frontend/e2e/AdminServersIndex.cy.js b/tests/Frontend/e2e/AdminServersIndex.cy.js
new file mode 100644
index 000000000..5875b6b98
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServersIndex.cy.js
@@ -0,0 +1,1336 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServersIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "servers.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/servers");
+  });
+
+  it("visit with user without permission to view servers", function () {
+    // Check with missing servers.viewAny permission
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/servers");
+    cy.get("h1").should("be.visible").and("contain", "home.title");
+  });
+
+  it("load servers", function () {
+    const serversRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/servers*",
+      { fixture: "servers.json" },
+      "serversRequest",
+    );
+
+    cy.visit("/admin/servers");
+
+    // Test loading
+    cy.get('[data-test="server-search"]')
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("be.disabled");
+        cy.get("button").should("be.disabled");
+      });
+
+    cy.get('[data-test="servers-reload-usage-button"]')
+      .should("include.text", "admin.servers.reload")
+      .should("be.disabled");
+    cy.get('[data-test="servers-reload-no-usage-button"]').should(
+      "be.disabled",
+    );
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        serversRequest.sendResponse();
+      });
+
+    cy.contains("admin.servers.usage_info").should("be.visible");
+
+    // Check that loading is over
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get('[data-test="server-search"]').within(() => {
+      cy.get("input").should("not.be.disabled");
+      cy.get("button").should("not.be.disabled");
+    });
+
+    cy.get('[data-test="servers-reload-usage-button"]').should(
+      "not.be.disabled",
+    );
+    cy.get('[data-test="servers-reload-no-usage-button"]').should(
+      "not.be.disabled",
+    );
+
+    cy.contains("admin.servers.usage_info").should("be.visible");
+
+    // Check that headers are displayed correctly
+    cy.get('[data-test="server-header-cell"]').should("have.length", 8);
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(1)
+      .should("have.text", "admin.servers.status");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(2)
+      .should("have.text", "admin.servers.connection");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(3)
+      .should("have.text", "admin.servers.version");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(4)
+      .should("have.text", "admin.servers.meeting_count");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(5)
+      .should("have.text", "admin.servers.participant_count");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(6)
+      .should("have.text", "admin.servers.video_count");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(7)
+      .should("have.text", "app.actions");
+
+    // Check that servers are displayed correctly
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').should("have.length", 8);
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(0)
+          .should("have.text", "Server 01");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(1)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.enabled");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(2)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.online");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(3)
+          .should("have.text", "2.4.5");
+
+        cy.get('[data-test="server-item-cell"]').eq(4).should("have.text", "2");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "10");
+
+        cy.get('[data-test="server-item-cell"]').eq(6).should("have.text", "5");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(7)
+          .within(() => {
+            cy.get('[data-test="servers-view-button"]').should("not.exist");
+            cy.get('[data-test="servers-edit-button"]').should("not.exist");
+            cy.get('[data-test="servers-delete-button"]').should("not.exist");
+          });
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').should("have.length", 8);
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(0)
+          .should("have.text", "Server 02");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(1)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.enabled");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(2)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.unhealthy");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(3)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(4)
+          .should("have.text", "10");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "50");
+
+        cy.get('[data-test="server-item-cell"]').eq(6).should("have.text", "5");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(7)
+          .within(() => {
+            cy.get('[data-test="servers-view-button"]').should("not.exist");
+            cy.get('[data-test="servers-edit-button"]').should("not.exist");
+            cy.get('[data-test="servers-delete-button"]').should("not.exist");
+          });
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').should("have.length", 8);
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(0)
+          .should("have.text", "Server 03");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(1)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.disabled");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(2)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.offline");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(3)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(4)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(6)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(7)
+          .within(() => {
+            cy.get('[data-test="servers-view-button"]').should("not.exist");
+            cy.get('[data-test="servers-edit-button"]').should("not.exist");
+            cy.get('[data-test="servers-delete-button"]').should("not.exist");
+          });
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').should("have.length", 8);
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(0)
+          .should("have.text", "Server 04");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(1)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.draining");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(2)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.online");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(3)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(4)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(6)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(7)
+          .within(() => {
+            cy.get('[data-test="servers-view-button"]').should("not.exist");
+            cy.get('[data-test="servers-edit-button"]').should("not.exist");
+            cy.get('[data-test="servers-delete-button"]').should("not.exist");
+          });
+      });
+  });
+
+  it("load servers errors", function () {
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serversRequest");
+
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="server-search"]')
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("not.be.disabled");
+        cy.get("button").should("not.be.disabled");
+      });
+
+    cy.get('[data-test="servers-reload-usage-button"]').should(
+      "not.be.disabled",
+    );
+    cy.get('[data-test="servers-reload-no-usage-button"]').should(
+      "not.be.disabled",
+    );
+
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("include.text", "app.reload")
+      .click();
+
+    // Check that update usage is set correctly when reloading servers
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.update_usage).to.eql("false");
+    });
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check if server is shown and contains the correct data
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 01");
+
+    // Switch to next page with general error
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serversRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="server-search"]')
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("not.be.disabled");
+        cy.get("button").should("not.be.disabled");
+      });
+
+    cy.get('[data-test="servers-reload-usage-button"]').should(
+      "not.be.disabled",
+    );
+    cy.get('[data-test="servers-reload-no-usage-button"]').should(
+      "not.be.disabled",
+    );
+
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("include.text", "app.reload")
+      .click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        update_usage: "false",
+        page: "1",
+      });
+    });
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check if server is shown and contains the correct data
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 01");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page with 401 error
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 401,
+    }).as("serversRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Reload page with 401 error
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load servers page out of bounds", function () {
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+      servers.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.visit("/admin/servers");
+    cy.wait("@serversRequest");
+
+    // Switch to next page but respond with no servers on second page
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = [];
+      servers.meta.current_page = 2;
+      servers.meta.from = null;
+      servers.meta.per_page = 2;
+      servers.meta.to = null;
+      servers.meta.total = 2;
+      servers.meta.total_no_filter = 2;
+
+      const emptyServersRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/servers*",
+        {
+          statusCode: 200,
+          body: servers,
+        },
+        "serversRequest",
+      );
+
+      cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+      cy.fixture("servers.json").then((servers) => {
+        servers.data = servers.data.slice(0, 2);
+        servers.meta.per_page = 2;
+        servers.meta.to = 2;
+        servers.meta.total = 2;
+        servers.meta.total_no_filter = 2;
+
+        cy.intercept("GET", "api/v1/server*", {
+          statusCode: 200,
+          body: servers,
+        })
+          .as("serversRequest")
+          .then(() => {
+            emptyServersRequest.sendResponse();
+          });
+      });
+    });
+
+    // Wait for first servers request and check that page is still the same
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Wait for second servers request and check that page is reset
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+  });
+
+  it("server search", function () {
+    cy.visit("/admin/servers");
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.name).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+        update_usage: "false",
+      });
+    });
+
+    // Check with no servers found for this search query
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = [];
+      servers.meta.from = null;
+      servers.meta.per_page = 1;
+      servers.meta.to = null;
+      servers.meta.total = 0;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-search"] > input').should("have.value", "");
+    cy.get('[data-test="server-search"] > input').type("Test");
+    cy.get('[data-test="server-search"] > button').click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Test");
+      expect(interception.request.query).to.contain({
+        page: "1",
+        update_usage: "false",
+      });
+    });
+
+    // Check that correct message is shown and no servers are displayed
+    cy.contains("admin.servers.no_data_filtered").should("be.visible");
+    cy.get('[data-test="server-item"]').should("have.length", 0);
+
+    // Check with no servers available
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = [];
+      servers.meta.from = null;
+      servers.meta.per_page = 1;
+      servers.meta.to = null;
+      servers.meta.total = 0;
+      servers.meta.total_no_filter = 0;
+
+      cy.intercept("GET", "api/v1/sertvers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-search"] > input').clear();
+    cy.get('[data-test="server-search"] > input').type("Test2");
+    cy.get('[data-test="server-search"] > input').type("{enter}");
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Test2");
+      expect(interception.request.query).to.contain({
+        page: "1",
+        update_usage: "false",
+      });
+    });
+
+    // Check that correct message is shown and no servers are displayed
+    cy.contains("admin.servers.no_data").should("be.visible");
+    cy.get('[data-test="server-item"]').should("have.length", 0);
+
+    // Check with 2 servers on 2 pages
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+      servers.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-search"] > input').clear();
+    cy.get('[data-test="server-search"] > input').type("Server");
+    cy.get('[data-test="server-search"] > button').click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Server");
+      expect(interception.request.query).to.contain({
+        page: "1",
+        update_usage: "false",
+      });
+    });
+
+    // Check that correct server is shown
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 01");
+
+    // Check that pagination shows the correct number of pages and switch to next page
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(1, 2);
+      servers.meta.current_page = 2;
+      servers.meta.from = 2;
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 1;
+      servers.meta.to = 2;
+      servers.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    // Click on button for next page (eq(1) needed because there are two paginator components
+    // (first one for small devices second one for larger devices))
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check if the search query stays the same after changing the page
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Server");
+      expect(interception.request.query).to.contain({
+        page: "2",
+        update_usage: "false",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.get('[data-test="server-search"] > input').should(
+      "have.value",
+      "Server",
+    );
+
+    // Check that correct user is shown
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 02");
+
+    // Change search query and make sure that the page is reset
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+      servers.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-search"] > input').clear();
+    cy.get('[data-test="server-search"] > input').type("Se");
+    cy.get('[data-test="server-search"] > button').click();
+
+    // Check that servers are loaded with the page reset to the first page
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Se");
+      expect(interception.request.query).to.contain({
+        page: "1",
+        update_usage: "false",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("sort servers", function () {
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "name",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct columns are sortable and correct sorting type is shown
+    cy.get('[data-test="server-header-cell"]').should("have.length", 8);
+    cy.get('[data-test="server-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "true");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(1)
+      .should("have.text", "admin.servers.status")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(2)
+      .should("have.text", "admin.servers.connection")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(3)
+      .should("have.text", "admin.servers.version")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(4)
+      .should("have.text", "admin.servers.meeting_count")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(5)
+      .should("have.text", "admin.servers.participant_count")
+      .and("have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(6)
+      .should("have.text", "admin.servers.video_count")
+      .and("have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(7)
+      .should("have.text", "app.actions")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+
+    // Change sorting type and respond with 4 servers on 4 different pages
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-header-cell"]').eq(1).click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "status",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true");
+
+    // Check that correct server is shown
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 01");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 4);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(1, 2);
+      servers.meta.current_page = 2;
+      servers.meta.from = 2;
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays  the same
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "status",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="server-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct user is shown
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 02");
+
+    // Change sorting direction and make sure that the page is reset
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-header-cell"]').eq(1).click();
+
+    // Check that servers are loaded with the page reset to the first page
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "status",
+        sort_direction: "desc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct server is shown
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 01");
+
+    // Change sorting type again
+    cy.get('[data-test="server-header-cell"]').eq(3).click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "version",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(3)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Switch to next page
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(1, 2);
+      servers.meta.current_page = 2;
+      servers.meta.from = 2;
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "version",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="server-header-cell"]')
+      .eq(3)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct server is shown
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 02");
+
+    // Change sorting and make sure that the page is reset
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-header-cell"]').eq(4).click();
+
+    // Check that servers are loaded with the page reset to the first page
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "meeting_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-header-cell"]')
+      .eq(3)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Change sorting again
+    cy.get('[data-test="server-header-cell"]').eq(5).click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "participant_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(5)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Change sorting again
+    cy.get('[data-test="server-header-cell"]').eq(6).click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "video_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-header-cell"]')
+      .eq(5)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(6)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+  });
+
+  it("check button visibility with view permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="servers-add-button"]').should("not.exist");
+
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/1");
+        cy.get('[data-test="servers-edit-button"]').should("not.exist");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/2");
+        cy.get('[data-test="servers-edit-button"]').should("not.exist");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/3");
+        cy.get('[data-test="servers-edit-button"]').should("not.exist");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/4");
+        cy.get('[data-test="servers-edit-button" ]').should("not.exist");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="servers-add-button"]').should("not.exist");
+
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/1");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/1/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/2");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/2/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/3");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/3/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/4");
+        cy.get('[data-test="servers-edit-button" ]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/4/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with add permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="servers-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/servers/new");
+
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/1");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/1/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/2");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/2/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/3");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/3/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/4");
+        cy.get('[data-test="servers-edit-button" ]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/4/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with all permissions", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+        "servers.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="servers-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/servers/new");
+
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/1");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/1/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/2");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/2/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/3");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/3/edit");
+        cy.get('[data-test="servers-delete-button"]').should("be.visible");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/4");
+        cy.get('[data-test="servers-edit-button" ]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/4/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersIndex.cy.js b/tests/Frontend/e2e/AdminUsersIndex.cy.js
index 963c67929..2366a7c7b 100644
--- a/tests/Frontend/e2e/AdminUsersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndex.cy.js
@@ -400,7 +400,6 @@ describe("Admin users index", function () {
   it("load users page out of bounds", function () {
     cy.fixture("users.json").then((users) => {
       users.data = users.data.slice(0, 1);
-      users.data[0].role = 3;
       users.meta.last_page = 2;
       users.meta.per_page = 1;
       users.meta.to = 1;
@@ -708,7 +707,7 @@ describe("Admin users index", function () {
 
     // Check with 2 users on 2 pages
     cy.fixture("users.json").then((users) => {
-      users.data.slice(0, 1);
+      users.data = users.data.slice(0, 1);
       users.meta.last_page = 2;
       users.meta.per_page = 1;
       users.meta.to = 1;
@@ -1452,6 +1451,7 @@ describe("Admin users index", function () {
     });
 
     cy.visit("/admin/users");
+    cy.wait("@usersRequest");
 
     cy.get('[data-test="users-add-button"]').should("not.exist");
     cy.get('[data-test="user-item"]').should("have.length", 3);
@@ -1497,6 +1497,7 @@ describe("Admin users index", function () {
       currentUser.data.permissions = [
         "admin.view",
         "users.viewAny",
+        "users.view",
         "users.update",
         "roles.viewAny",
       ];
@@ -1526,7 +1527,7 @@ describe("Admin users index", function () {
     cy.get('[data-test="user-item"]')
       .eq(1)
       .within(() => {
-        cy.get('[data-test="users-view-button"]').should("not.exist");
+        cy.get('[data-test="users-view-button"]').should("be.visible");
         cy.get('[data-test="users-edit-button"]')
           .should("be.visible")
           .and("have.attr", "href", "/admin/users/2/edit");
@@ -1539,7 +1540,7 @@ describe("Admin users index", function () {
     cy.get('[data-test="user-item"]')
       .eq(2)
       .within(() => {
-        cy.get('[data-test="users-view-button"]').should("not.exist");
+        cy.get('[data-test="users-view-button"]').should("be.visible");
         cy.get('[data-test="users-edit-button"]')
           .should("be.visible")
           .and("have.attr", "href", "/admin/users/3/edit");
@@ -1547,7 +1548,7 @@ describe("Admin users index", function () {
         cy.get('[data-test="users-reset-password-button"]').should("not.exist");
       });
 
-    // Check with local users disabled
+    // Check with local users disabled (Reset password button should not be visible)
     cy.intercept("GET", "api/v1/config", { fixture: "config.json" });
 
     cy.reload();
@@ -1571,7 +1572,7 @@ describe("Admin users index", function () {
     cy.get('[data-test="user-item"]')
       .eq(1)
       .within(() => {
-        cy.get('[data-test="users-view-button"]').should("not.exist");
+        cy.get('[data-test="users-view-button"]').should("be.visible");
         cy.get('[data-test="users-edit-button"]')
           .should("be.visible")
           .and("have.attr", "href", "/admin/users/2/edit");
@@ -1582,7 +1583,7 @@ describe("Admin users index", function () {
     cy.get('[data-test="user-item"]')
       .eq(2)
       .within(() => {
-        cy.get('[data-test="users-view-button"]').should("not.exist");
+        cy.get('[data-test="users-view-button"]').should("be.visible");
         cy.get('[data-test="users-edit-button"]')
           .should("be.visible")
           .and("have.attr", "href", "/admin/users/3/edit");
@@ -1591,69 +1592,14 @@ describe("Admin users index", function () {
       });
   });
 
-  it("check button visibility with delete permission", function () {
-    cy.fixture("currentUser.json").then((currentUser) => {
-      currentUser.data.permissions = [
-        "admin.view",
-        "users.viewAny",
-        "users.delete",
-        "roles.viewAny",
-      ];
-      cy.intercept("GET", "api/v1/currentUser", {
-        statusCode: 200,
-        body: currentUser,
-      });
-
-      cy.visit("/admin/users");
-
-      cy.get('[data-test="users-add-button"]').should("not.exist");
-      cy.get('[data-test="user-item"]').should("have.length", 3);
-      // Check that delete button for current user does not exist
-      cy.get('[data-test="user-item"]')
-        .eq(0)
-        .within(() => {
-          cy.get('[data-test="users-view-button"]')
-            .should("be.visible")
-            .and("have.attr", "href", "/admin/users/1");
-          cy.get('[data-test="users-edit-button"]')
-            .should("be.visible")
-            .and("have.attr", "href", "/admin/users/1/edit");
-          cy.get('[data-test="users-delete-button"]').should("not.exist");
-          cy.get('[data-test="users-reset-password-button"]').should(
-            "not.exist",
-          );
-        });
-
-      cy.get('[data-test="user-item"]')
-        .eq(1)
-        .within(() => {
-          cy.get('[data-test="users-view-button"]').should("not.exist");
-          cy.get('[data-test="users-edit-button"]').should("not.exist");
-          cy.get('[data-test="users-delete-button"]').should("be.visible");
-          cy.get('[data-test="users-reset-password-button"]').should(
-            "not.exist",
-          );
-        });
-
-      cy.get('[data-test="user-item"]')
-        .eq(2)
-        .within(() => {
-          cy.get('[data-test="users-view-button"]').should("not.exist");
-          cy.get('[data-test="users-edit-button"]').should("not.exist");
-          cy.get('[data-test="users-delete-button"]').should("be.visible");
-          cy.get('[data-test="users-reset-password-button"]').should(
-            "not.exist",
-          );
-        });
-    });
-  });
-
   it("check button visibility with add permission", function () {
     // Check with local users enabled
     cy.fixture("currentUser.json").then((currentUser) => {
       currentUser.data.permissions = [
         "admin.view",
         "users.viewAny",
+        "users.view",
+        "users.update",
         "users.create",
         "roles.viewAny",
       ];
@@ -1664,6 +1610,7 @@ describe("Admin users index", function () {
     });
 
     cy.visit("/admin/users");
+    cy.wait("@usersRequest");
 
     cy.get('[data-test="users-add-button"]')
       .should("be.visible")
@@ -1685,17 +1632,27 @@ describe("Admin users index", function () {
     cy.get('[data-test="user-item"]')
       .eq(1)
       .within(() => {
-        cy.get('[data-test="users-view-button"]').should("not.exist");
-        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2/edit");
         cy.get('[data-test="users-delete-button"]').should("not.exist");
-        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
       });
 
     cy.get('[data-test="user-item"]')
       .eq(2)
       .within(() => {
-        cy.get('[data-test="users-view-button"]').should("not.exist");
-        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3/edit");
         cy.get('[data-test="users-delete-button"]').should("not.exist");
         cy.get('[data-test="users-reset-password-button"]').should("not.exist");
       });
@@ -1723,8 +1680,12 @@ describe("Admin users index", function () {
     cy.get('[data-test="user-item"]')
       .eq(1)
       .within(() => {
-        cy.get('[data-test="users-view-button"]').should("not.exist");
-        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2/edit");
         cy.get('[data-test="users-delete-button"]').should("not.exist");
         cy.get('[data-test="users-reset-password-button"]').should("not.exist");
       });
@@ -1732,10 +1693,83 @@ describe("Admin users index", function () {
     cy.get('[data-test="user-item"]')
       .eq(2)
       .within(() => {
-        cy.get('[data-test="users-view-button"]').should("not.exist");
-        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3/edit");
         cy.get('[data-test="users-delete-button"]').should("not.exist");
         cy.get('[data-test="users-reset-password-button"]').should("not.exist");
       });
   });
+
+  it("check button visibility with all permissions", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.delete",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+
+      cy.visit("/admin/users");
+      cy.wait("@usersRequest");
+
+      cy.get('[data-test="users-add-button"]').should("be.visible");
+      cy.get('[data-test="user-item"]').should("have.length", 3);
+      // Check that delete button for current user does not exist
+      cy.get('[data-test="user-item"]')
+        .eq(0)
+        .within(() => {
+          cy.get('[data-test="users-view-button"]')
+            .should("be.visible")
+            .and("have.attr", "href", "/admin/users/1");
+          cy.get('[data-test="users-edit-button"]')
+            .should("be.visible")
+            .and("have.attr", "href", "/admin/users/1/edit");
+          cy.get('[data-test="users-delete-button"]').should("not.exist");
+          cy.get('[data-test="users-reset-password-button"]').should(
+            "not.exist",
+          );
+        });
+
+      cy.get('[data-test="user-item"]')
+        .eq(1)
+        .within(() => {
+          cy.get('[data-test="users-view-button"]')
+            .should("be.visible")
+            .and("have.attr", "href", "/admin/users/2");
+          cy.get('[data-test="users-edit-button"]')
+            .should("be.visible")
+            .and("have.attr", "href", "/admin/users/2/edit");
+          cy.get('[data-test="users-delete-button"]').should("be.visible");
+          cy.get('[data-test="users-reset-password-button"]').should(
+            "be.visible",
+          );
+        });
+
+      cy.get('[data-test="user-item"]')
+        .eq(2)
+        .within(() => {
+          cy.get('[data-test="users-view-button"]')
+            .should("be.visible")
+            .and("have.attr", "href", "/admin/users/3");
+          cy.get('[data-test="users-edit-button"]')
+            .should("be.visible")
+            .and("have.attr", "href", "/admin/users/3/edit");
+          cy.get('[data-test="users-delete-button"]').should("be.visible");
+          cy.get('[data-test="users-reset-password-button"]').should(
+            "not.exist",
+          );
+        });
+    });
+  });
 });
diff --git a/tests/Frontend/fixtures/servers.json b/tests/Frontend/fixtures/servers.json
new file mode 100644
index 000000000..973e48f96
--- /dev/null
+++ b/tests/Frontend/fixtures/servers.json
@@ -0,0 +1,88 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "Server 01",
+      "description": "Testserver 01",
+      "strength": 1,
+      "status": 1,
+      "health": 1,
+      "participant_count": 10,
+      "listener_count": 5,
+      "voice_participant_count": 5,
+      "video_count": 5,
+      "meeting_count": 2,
+      "own_meeting_count": 2,
+      "version": "2.4.5",
+      "model_name": "Server",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    },
+    {
+      "id": 2,
+      "name": "Server 02",
+      "description": "Testserver 02",
+      "strength": 1,
+      "status": 1,
+      "health": 0,
+      "participant_count": 50,
+      "listener_count": 25,
+      "voice_participant_count": 30,
+      "video_count": 5,
+      "meeting_count": 10,
+      "own_meeting_count": 9,
+      "version": null,
+      "model_name": "Server",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    },
+    {
+      "id": 3,
+      "name": "Server 03",
+      "description": "Testserver 03",
+      "strength": 1,
+      "status": -1,
+      "health": -1,
+      "participant_count": null,
+      "listener_count": null,
+      "voice_participant_count": null,
+      "video_count": null,
+      "meeting_count": null,
+      "own_meeting_count": null,
+      "version": null,
+      "model_name": "Server",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    },
+    {
+      "id": 4,
+      "name": "Server 04",
+      "description": "Testserver 04",
+      "strength": 1,
+      "status": 0,
+      "health": 1,
+      "participant_count": null,
+      "listener_count": null,
+      "voice_participant_count": null,
+      "video_count": null,
+      "meeting_count": null,
+      "own_meeting_count": null,
+      "version": null,
+      "model_name": "Server",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    }
+  ],
+  "links": {
+    "first": "http://localhost/api/v1/servers?page=1",
+    "last": "http://localhost/api/v1/servers?page=1",
+    "prev": null,
+    "next": null
+  },
+  "meta": {
+    "current_page": 1,
+    "from": 1,
+    "last_page": 1,
+    "path": "http://localhost/api/v1/servers",
+    "per_page": 15,
+    "to": 2,
+    "total": 4,
+    "total_no_filter": 4
+  }
+}
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index ab6033798..e2fb514b4 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -227,3 +227,15 @@ Cypress.Commands.add("interceptAdminUsersViewRequests", () => {
   cy.intercept("GET", "api/v1/getTimezones", { fixture: "timezones.json" });
   cy.intercept("GET", "api/v1/sessions", { fixture: "sessions.json" });
 });
+
+/**
+ * Intercept all requests that are needed when visiting the admin servers view page
+ * @memberof cy
+ * @method interceptAdminServersIndexRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminServersIndexRequests", () => {
+  cy.intercept("GET", "api/v1/servers*", {
+    fixture: "servers.json",
+  }).as("serversRequest");
+});

From aaf7cbbc31f468d8072adf899dca5e6aa4691ccb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Sat, 7 Dec 2024 21:57:30 +0100
Subject: [PATCH 13/79] Improve AdminUsers tests

---
 tests/Frontend/e2e/AdminUsersEditBase.cy.js   |   8 +-
 tests/Frontend/e2e/AdminUsersEditEmail.cy.js  |   1 +
 tests/Frontend/e2e/AdminUsersEditOthers.cy.js |   1 +
 tests/Frontend/e2e/AdminUsersIndex.cy.js      |   2 +-
 .../e2e/AdminUsersIndexUserActions.cy.js      |   4 +-
 tests/Frontend/e2e/AdminUsersView.cy.js       | 124 +++++++++++++-----
 6 files changed, 103 insertions(+), 37 deletions(-)

diff --git a/tests/Frontend/e2e/AdminUsersEditBase.cy.js b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
index 882e8febf..c84035458 100644
--- a/tests/Frontend/e2e/AdminUsersEditBase.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
@@ -50,7 +50,9 @@ describe("Admin users edit base", function () {
       .should("be.visible")
       .and("include.text", "app.firstname")
       .within(() => {
-        cy.get("#firstname").should("have.value", "Laura");
+        cy.get("#firstname")
+          .should("have.value", "Laura")
+          .and("not.be.disabled");
         cy.get("#firstname").clear();
         cy.get("#firstname").type("Juan");
       });
@@ -60,7 +62,9 @@ describe("Admin users edit base", function () {
       .should("be.visible")
       .and("include.text", "app.lastname")
       .within(() => {
-        cy.get("#lastname").should("have.value", "Rivera");
+        cy.get("#lastname")
+          .should("have.value", "Rivera")
+          .and("not.be.disabled");
         cy.get("#lastname").clear();
         cy.get("#lastname").type("Walter");
       });
diff --git a/tests/Frontend/e2e/AdminUsersEditEmail.cy.js b/tests/Frontend/e2e/AdminUsersEditEmail.cy.js
index f118dd168..88d520e80 100644
--- a/tests/Frontend/e2e/AdminUsersEditEmail.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditEmail.cy.js
@@ -50,6 +50,7 @@ describe("Admin users edit email", function () {
       .within(() => {
         cy.get("#email")
           .should("have.value", "LauraWRivera@domain.tld")
+          .and("not.be.disabled")
           .clear();
         cy.get("#email").type("laura.rivera@example.com");
       });
diff --git a/tests/Frontend/e2e/AdminUsersEditOthers.cy.js b/tests/Frontend/e2e/AdminUsersEditOthers.cy.js
index fc816c707..6020a7c25 100644
--- a/tests/Frontend/e2e/AdminUsersEditOthers.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditOthers.cy.js
@@ -44,6 +44,7 @@ describe("Admin users edit others", function () {
       .and("include.text", "admin.users.skip_check_audio")
       .find("#bbb_skip_check_audio")
       .should("not.be.checked")
+      .and("not.be.disabled")
       .click();
 
     // Save changes
diff --git a/tests/Frontend/e2e/AdminUsersIndex.cy.js b/tests/Frontend/e2e/AdminUsersIndex.cy.js
index 2366a7c7b..d940ac946 100644
--- a/tests/Frontend/e2e/AdminUsersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndex.cy.js
@@ -73,7 +73,7 @@ describe("Admin users index", function () {
       .find(".multiselect__tags")
       .should("include.text", "admin.users.role_filter");
     cy.get('[data-test="role-dropdown"]').should(
-      "not.have.class",
+      "have.class",
       "multiselect--disabled",
     );
 
diff --git a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
index af0256a1e..f4595623e 100644
--- a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
@@ -1,6 +1,6 @@
 import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
 
-describe("Admin users index", function () {
+describe("Admin users index user actions", function () {
   beforeEach(function () {
     cy.init();
     cy.interceptAdminUsersIndexRequests();
@@ -344,6 +344,7 @@ describe("Admin users index", function () {
       .click();
 
     cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
 
     // Reload and open edit page for current user but without view permission
     cy.fixture("currentUser.json").then((currentUser) => {
@@ -372,5 +373,6 @@ describe("Admin users index", function () {
       .click();
 
     cy.url().should("include", "/admin/users/1");
+    cy.url().should("not.include", "/edit");
   });
 });
diff --git a/tests/Frontend/e2e/AdminUsersView.cy.js b/tests/Frontend/e2e/AdminUsersView.cy.js
index 8e298b79b..eb0b7c033 100644
--- a/tests/Frontend/e2e/AdminUsersView.cy.js
+++ b/tests/Frontend/e2e/AdminUsersView.cy.js
@@ -101,25 +101,65 @@ describe("Admin users view", function () {
 
     // Check that user data is shown and all inputs are disabled
     // Base tab
-    cy.get("#firstname").should("have.value", "Laura").and("be.disabled");
-    cy.get("#lastname").should("have.value", "Rivera").and("be.disabled");
-    cy.get("#authenticator")
-      .should("have.value", "admin.users.authenticator.local")
-      .and("be.disabled");
+    cy.get('[data-test="firstname-field"]')
+      .should("be.visible")
+      .and("include.text", "app.firstname")
+      .within(() => {
+        cy.get("#firstname").should("have.value", "Laura").and("be.disabled");
+      });
+
+    cy.get('[data-test="lastname-field"]')
+      .should("be.visible")
+      .and("include.text", "app.lastname")
+      .within(() => {
+        cy.get("#lastname").should("have.value", "Rivera").and("be.disabled");
+      });
+
+    cy.get('[data-test="authenticator-field"]')
+      .should("be.visible")
+      .and("include.text", "auth.authenticator")
+      .within(() => {
+        cy.get("#authenticator")
+          .should("have.value", "admin.users.authenticator.local")
+          .and("be.disabled");
+      });
 
     // Check that profile image buttons are hidden
-    cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
-    cy.get('[data-test="delete-image-button"]').should("not.exist");
-    cy.get('[data-test="undo-delete-button"]').should("not.exist");
-    cy.get('[data-test="upload-file-input"]').should("not.exist");
+    cy.get('[data-test="profile-image-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.image.title")
+      .within(() => {
+        cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+        cy.get('[data-test="delete-image-button"]').should("not.exist");
+        cy.get('[data-test="undo-delete-button"]').should("not.exist");
+        cy.get('[data-test="upload-file-input"]').should("not.exist");
+      });
 
-    cy.get('[data-test="locale-dropdown"]').within(() => {
-      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
-    });
+    cy.get('[data-test="locale-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.user_locale")
+      .within(() => {
+        cy.get('[data-test="locale-dropdown"]').within(() => {
+          cy.get(".p-select-label").should(
+            "have.attr",
+            "aria-disabled",
+            "true",
+          );
+        });
+      });
 
-    cy.get('[data-test="timezone-dropdown"]').within(() => {
-      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
-    });
+    cy.get('[data-test="timezone-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.timezone")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown"]').within(() => {
+          cy.get(".p-select-label").should(
+            "have.attr",
+            "aria-disabled",
+            "true",
+          );
+        });
+      });
 
     // Check that save button is hidden
     cy.get('[data-test="user-tab-profile-save-button"]').should("not.exist");
@@ -127,9 +167,18 @@ describe("Admin users view", function () {
     // Email tab
     cy.get('[data-test="email-tab-button"]').click();
 
-    cy.get("#email")
-      .should("have.value", "LauraWRivera@domain.tld")
-      .and("be.disabled");
+    cy.get('[data-test="email-tab-current-password-field"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="email-field"]')
+      .should("be.visible")
+      .and("include.text", "app.email")
+      .within(() => {
+        cy.get("#email")
+          .should("have.value", "LauraWRivera@domain.tld")
+          .and("be.disabled");
+      });
 
     // Check that save button is hidden
     cy.get('[data-test="user-tab-email-save-button"]').should("not.exist");
@@ -137,20 +186,25 @@ describe("Admin users view", function () {
     // Security tab
     cy.get('[data-test="security-tab-button"]').click();
 
-    cy.get('[data-test="role-dropdown"]')
-      .should("have.class", "multiselect--disabled")
+    cy.get('[data-test="roles-field"]')
+      .should("be.visible")
+      .and("include.text", "app.roles")
       .within(() => {
-        cy.get('[data-test="role-chip"]').should("have.length", 2);
-        cy.get('[data-test="role-chip"]')
-          .eq(0)
-          .should("include.text", "Students")
-          .find('[data-test="remove-role-button"]')
-          .should("not.exist");
-        cy.get('[data-test="role-chip"]')
-          .eq(1)
-          .should("include.text", "Staff")
-          .find('[data-test="remove-role-button"]')
-          .should("not.exist");
+        cy.get('[data-test="role-dropdown"]')
+          .should("have.class", "multiselect--disabled")
+          .within(() => {
+            cy.get('[data-test="role-chip"]').should("have.length", 2);
+            cy.get('[data-test="role-chip"]')
+              .eq(0)
+              .should("include.text", "Students")
+              .find('[data-test="remove-role-button"]')
+              .should("not.exist");
+            cy.get('[data-test="role-chip"]')
+              .eq(1)
+              .should("include.text", "Staff")
+              .find('[data-test="remove-role-button"]')
+              .should("not.exist");
+          });
       });
 
     // Check that role save button is hidden
@@ -173,8 +227,12 @@ describe("Admin users view", function () {
 
     // Check others tab
     cy.get('[data-test="others-tab-button"]').click();
-
-    cy.get("#bbb_skip_check_audio").should("not.be.checked").and("be.disabled");
+    cy.get('[data-test="bbb-skip-check-audio-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.skip_check_audio")
+      .find("#bbb_skip_check_audio")
+      .should("not.be.checked")
+      .and("be.disabled");
 
     // Check that others save button is hidden
     cy.get('[data-test="user-tab-others-save-button"]').should("not.exist");

From aeb9ee0f4419b4b88fab814b3b003cddb3782aed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Sun, 8 Dec 2024 20:26:39 +0100
Subject: [PATCH 14/79] Continue adding AdminServers tests (index, view, new)

---
 resources/js/views/AdminServersView.vue       |  66 +-
 tests/Frontend/e2e/AdminServersIndex.cy.js    |  33 +-
 .../e2e/AdminServersIndexServerActions.cy.js  | 389 +++++++++
 tests/Frontend/e2e/AdminServersNew.cy.js      | 401 +++++++++
 tests/Frontend/e2e/AdminServersView.cy.js     | 761 ++++++++++++++++++
 .../e2e/AdminServersViewServerActions.cy.js   | 430 ++++++++++
 tests/Frontend/e2e/AdminUsersIndex.cy.js      |   2 +-
 tests/Frontend/e2e/AdminUsersNew.cy.js        |   7 +-
 tests/Frontend/e2e/AdminUsersView.cy.js       |  21 +-
 tests/Frontend/fixtures/server.json           |  21 +
 .../support/commands/interceptCommands.js     |  14 +-
 11 files changed, 2118 insertions(+), 27 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminServersIndexServerActions.cy.js
 create mode 100644 tests/Frontend/e2e/AdminServersNew.cy.js
 create mode 100644 tests/Frontend/e2e/AdminServersView.cy.js
 create mode 100644 tests/Frontend/e2e/AdminServersViewServerActions.cy.js
 create mode 100644 tests/Frontend/fixtures/server.json

diff --git a/resources/js/views/AdminServersView.vue b/resources/js/views/AdminServersView.vue
index bc424d64b..5cd6904f1 100644
--- a/resources/js/views/AdminServersView.vue
+++ b/resources/js/views/AdminServersView.vue
@@ -10,6 +10,7 @@
           severity="secondary"
           :label="$t('app.cancel_editing')"
           icon="fa-solid fa-times"
+          data-test="servers-cancel-edit-button"
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', model)"
@@ -19,6 +20,7 @@
           severity="info"
           :label="$t('app.edit')"
           icon="fa-solid fa-edit"
+          data-test="servers-edit-button"
         />
         <SettingsServersDeleteButton
           v-if="userPermissions.can('delete', model) && isDisabled"
@@ -42,7 +44,7 @@
         class="flex flex-col gap-4"
         @submit.prevent="saveServer"
       >
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="name-field">
           <label class="col-span-12 md:col-span-4 md:mb-0" for="name">{{
             $t("app.model_name")
           }}</label>
@@ -58,7 +60,10 @@
             <FormError :errors="formErrors.fieldError('name')" />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="description-field"
+        >
           <label class="col-span-12 md:col-span-4 md:mb-0" for="description">{{
             $t("app.description")
           }}</label>
@@ -74,7 +79,7 @@
             <FormError :errors="formErrors.fieldError('description')" />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="version-field">
           <label class="col-span-12 md:col-span-4 md:mb-0" for="version">{{
             $t("admin.servers.version")
           }}</label>
@@ -88,7 +93,7 @@
             />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="base-url-field">
           <label class="col-span-12 md:col-span-4 md:mb-0" for="base_url">{{
             $t("admin.servers.base_url")
           }}</label>
@@ -106,7 +111,7 @@
             <FormError :errors="formErrors.fieldError('base_url')" />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="secret-field">
           <label class="col-span-12 md:col-span-4 md:mb-0" for="secret">{{
             $t("admin.servers.secret")
           }}</label>
@@ -124,7 +129,10 @@
             <FormError :errors="formErrors.fieldError('secret')" />
           </div>
         </div>
-        <fieldset class="field grid grid-cols-12 gap-4">
+        <fieldset
+          class="field grid grid-cols-12 gap-4"
+          data-test="strength-field"
+        >
           <legend class="col-span-12 md:col-span-4 md:mb-0">
             {{ $t("admin.servers.strength") }}
           </legend>
@@ -137,6 +145,12 @@
               :stars="10"
               aria-describedby="strength-help"
               class="flex justify-between border border-surface-300 px-6 py-3 rounded-border dark:border-surface-700"
+              data-test="strength-rating"
+              :pt="{
+                option: {
+                  'data-test': 'strength-rating-option',
+                },
+              }"
             />
             <small id="strength-help">{{
               $t("admin.servers.strength_description")
@@ -145,7 +159,7 @@
           </div>
         </fieldset>
 
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="status-field">
           <label id="status-label" class="col-span-12 md:col-span-4 md:mb-0">{{
             $t("admin.servers.status")
           }}</label>
@@ -154,6 +168,7 @@
               <Select
                 v-model="model.status"
                 aria-labelledby="status-label"
+                data-test="status-dropdown"
                 :options="serverStatusOptions"
                 option-label="name"
                 option-value="value"
@@ -161,13 +176,24 @@
                 :invalid="formErrors.fieldInvalid('status')"
                 class="w-full"
                 name="status"
+                :pt="{
+                  listContainer: {
+                    'data-test': 'status-dropdown-items',
+                  },
+                  option: {
+                    'data-test': 'status-dropdown-option',
+                  },
+                }"
               />
             </div>
             <FormError :errors="formErrors.fieldError('status')" />
           </div>
         </div>
 
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="health-status-field"
+        >
           <label class="col-span-12 md:col-span-4 md:mb-0" for="healthStatus">{{
             $t("admin.servers.connection")
           }}</label>
@@ -184,6 +210,7 @@
                 :label="$t('admin.servers.test_connection')"
                 icon="fa-solid fa-link"
                 severity="info"
+                data-test="servers-test-connection-button"
                 @click="testConnection()"
               />
             </InputGroup>
@@ -199,6 +226,7 @@
               :label="$t('app.save')"
               icon="fa-solid fa-save"
               type="submit"
+              data-test="servers-save-button"
             />
           </div>
         </div>
@@ -218,7 +246,10 @@
           </div>
         </div>
 
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="meeting-count-field"
+        >
           <label class="col-span-12 md:col-span-4 md:mb-0" for="meetingCount">{{
             $t("admin.servers.meeting_count")
           }}</label>
@@ -236,7 +267,10 @@
             }}</small>
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="own-meeting-count-field"
+        >
           <label
             class="col-span-12 md:col-span-4 md:mb-0"
             for="ownMeetingCount"
@@ -256,7 +290,10 @@
             }}</small>
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="participant-count-field"
+        >
           <label
             class="col-span-12 md:col-span-4 md:mb-0"
             for="participantCount"
@@ -273,7 +310,10 @@
             />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="video-count-field"
+        >
           <label class="col-span-12 md:col-span-4 md:mb-0" for="videoCount">{{
             $t("admin.servers.video_count")
           }}</label>
@@ -291,6 +331,7 @@
         <div
           v-if="userPermissions.can('update', model)"
           class="field grid grid-cols-12 gap-4"
+          data-test="panic-field"
         >
           <label class="col-span-12 md:col-span-4 md:mb-0" for="panic">{{
             $t("admin.servers.panic")
@@ -304,6 +345,7 @@
                 aria-describedby="panic-help"
                 icon="fa-solid fa-exclamation-triangle"
                 severity="danger"
+                data-test="servers-panic-button"
                 @click="panic()"
               />
             </div>
diff --git a/tests/Frontend/e2e/AdminServersIndex.cy.js b/tests/Frontend/e2e/AdminServersIndex.cy.js
index 5875b6b98..a020ac242 100644
--- a/tests/Frontend/e2e/AdminServersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminServersIndex.cy.js
@@ -1,6 +1,6 @@
 import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
 
-describe("Admin users index", function () {
+describe("Admin servers index", function () {
   beforeEach(function () {
     cy.init();
     cy.interceptAdminServersIndexRequests();
@@ -690,7 +690,7 @@ describe("Admin users index", function () {
       "Server",
     );
 
-    // Check that correct user is shown
+    // Check that correct server is shown
     cy.get('[data-test="server-item"]').should("have.length", 1);
     cy.get('[data-test="server-item"]')
       .eq(0)
@@ -862,7 +862,7 @@ describe("Admin users index", function () {
       .should("have.attr", "data-p-sorted", "true")
       .and("have.attr", "aria-sort", "ascending");
 
-    // Check that correct user is shown
+    // Check that correct server is shown
     cy.get('[data-test="server-item"]').should("have.length", 1);
     cy.get('[data-test="server-item"]')
       .eq(0)
@@ -1143,9 +1143,11 @@ describe("Admin users index", function () {
       .within(() => {
         cy.get('[data-test="servers-view-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/1");
         cy.get('[data-test="servers-edit-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/1/edit");
         cy.get('[data-test="servers-delete-button"]').should("not.exist");
       });
@@ -1155,9 +1157,11 @@ describe("Admin users index", function () {
       .within(() => {
         cy.get('[data-test="servers-view-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/2");
         cy.get('[data-test="servers-edit-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/2/edit");
         cy.get('[data-test="servers-delete-button"]').should("not.exist");
       });
@@ -1167,9 +1171,11 @@ describe("Admin users index", function () {
       .within(() => {
         cy.get('[data-test="servers-view-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/3");
         cy.get('[data-test="servers-edit-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/3/edit");
         cy.get('[data-test="servers-delete-button"]').should("not.exist");
       });
@@ -1179,9 +1185,11 @@ describe("Admin users index", function () {
       .within(() => {
         cy.get('[data-test="servers-view-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/4");
         cy.get('[data-test="servers-edit-button" ]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/4/edit");
         cy.get('[data-test="servers-delete-button"]').should("not.exist");
       });
@@ -1207,6 +1215,7 @@ describe("Admin users index", function () {
 
     cy.get('[data-test="servers-add-button"]')
       .should("be.visible")
+      .and("not.be.disabled")
       .and("have.attr", "href", "/admin/servers/new");
 
     cy.get('[data-test="server-item"]').should("have.length", 4);
@@ -1216,9 +1225,11 @@ describe("Admin users index", function () {
       .within(() => {
         cy.get('[data-test="servers-view-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/1");
         cy.get('[data-test="servers-edit-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/1/edit");
         cy.get('[data-test="servers-delete-button"]').should("not.exist");
       });
@@ -1228,9 +1239,11 @@ describe("Admin users index", function () {
       .within(() => {
         cy.get('[data-test="servers-view-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/2");
         cy.get('[data-test="servers-edit-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/2/edit");
         cy.get('[data-test="servers-delete-button"]').should("not.exist");
       });
@@ -1240,9 +1253,11 @@ describe("Admin users index", function () {
       .within(() => {
         cy.get('[data-test="servers-view-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/3");
         cy.get('[data-test="servers-edit-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/3/edit");
         cy.get('[data-test="servers-delete-button"]').should("not.exist");
       });
@@ -1252,15 +1267,17 @@ describe("Admin users index", function () {
       .within(() => {
         cy.get('[data-test="servers-view-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/4");
         cy.get('[data-test="servers-edit-button" ]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/4/edit");
         cy.get('[data-test="servers-delete-button"]').should("not.exist");
       });
   });
 
-  it("check button visibility with all permissions", function () {
+  it("check button visibility with delete permission", function () {
     cy.fixture("currentUser.json").then((currentUser) => {
       currentUser.data.permissions = [
         "admin.view",
@@ -1290,9 +1307,11 @@ describe("Admin users index", function () {
       .within(() => {
         cy.get('[data-test="servers-view-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/1");
         cy.get('[data-test="servers-edit-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/1/edit");
         cy.get('[data-test="servers-delete-button"]').should("not.exist");
       });
@@ -1302,9 +1321,11 @@ describe("Admin users index", function () {
       .within(() => {
         cy.get('[data-test="servers-view-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/2");
         cy.get('[data-test="servers-edit-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/2/edit");
         cy.get('[data-test="servers-delete-button"]').should("not.exist");
       });
@@ -1314,9 +1335,11 @@ describe("Admin users index", function () {
       .within(() => {
         cy.get('[data-test="servers-view-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/3");
         cy.get('[data-test="servers-edit-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/3/edit");
         cy.get('[data-test="servers-delete-button"]').should("be.visible");
       });
@@ -1326,9 +1349,11 @@ describe("Admin users index", function () {
       .within(() => {
         cy.get('[data-test="servers-view-button"]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/4");
         cy.get('[data-test="servers-edit-button" ]')
           .should("be.visible")
+          .and("not.be.disabled")
           .and("have.attr", "href", "/admin/servers/4/edit");
         cy.get('[data-test="servers-delete-button"]').should("not.exist");
       });
diff --git a/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js b/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js
new file mode 100644
index 000000000..0571bef24
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js
@@ -0,0 +1,389 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin servers index server actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServersIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+        "servers.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete server", function () {
+    cy.fixture("servers.json").then((servers) => {
+      servers.data[3].status = -1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+    cy.visit("admin/servers");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-item"]')
+      .eq(3)
+      .find('[data-test="servers-delete-button"]')
+      .click();
+
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="servers-delete-dialog"]')
+      .should("include.text", "admin.servers.delete.title")
+      .should(
+        "include.text",
+        'admin.servers.delete.confirm_{"name":"Server 04"}',
+      );
+
+    // Confirm delete of server
+    const deleteServerRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/servers/4",
+      { statusCode: 204 },
+      "deleteServerRequest",
+    );
+
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 3);
+      servers.meta.to = 3;
+      servers.meta.total = 3;
+      servers.meta.total_no_filter = 3;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("not.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteServerRequest.sendResponse();
+      });
+
+    cy.wait("@deleteServerRequest");
+    cy.wait("@serversRequest");
+
+    // Check that user was deleted
+    cy.get('[data-test="server-item"]').should("have.length", 3);
+
+    // Check that dialog is closed
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+
+    // Reopen dialog for different user
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .find('[data-test="servers-delete-button"]')
+      .click();
+
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="servers-delete-dialog"]')
+      .should("include.text", "admin.servers.delete.title")
+      .should(
+        "include.text",
+        'admin.servers.delete.confirm_{"name":"Server 03"}',
+      );
+
+    // Cancel delete of user
+    cy.get('[data-test="dialog-cancel-button"]').click();
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+  });
+
+  // ToDo 404 error, 403 error after adjustments
+  it("delete server errors", function () {
+    cy.visit("admin/servers");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .find('[data-test="servers-delete-button"]')
+      .click();
+
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/servers/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteServerRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/servers/3", {
+      statusCode: 401,
+    }).as("deleteServerRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("reload servers", function () {
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        update_usage: "false",
+        page: "1",
+      });
+    });
+
+    // Check that usage is shown correctly
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').eq(4).should("have.text", "2");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "10");
+        cy.get('[data-test="server-item-cell"]').eq(6).should("have.text", "5");
+      });
+
+    // Reload with update usage and check that query is correct and respond with 4 servers on 4 different pages
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.data[0].meeting_count = 3;
+      servers.data[0].participant_count = 50;
+      servers.data[0].video_count = 6;
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    // Reload with update usage
+    cy.get('[data-test="servers-reload-usage-button"]').click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        update_usage: "true",
+        page: "1",
+      });
+    });
+
+    // Check that usage is shown correctly
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').eq(4).should("have.text", "3");
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "50");
+        cy.get('[data-test="server-item-cell"]').eq(6).should("have.text", "6");
+      });
+
+    // Change page and check that usage is not updated
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(1, 2);
+      servers.meta.current_page = 2;
+      servers.meta.from = 2;
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        update_usage: "false",
+        page: "2",
+      });
+    });
+
+    // Check that usage is shown correctly
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]')
+          .eq(4)
+          .should("have.text", "10");
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "50");
+        cy.get('[data-test="server-item-cell"]').eq(6).should("have.text", "5");
+      });
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 4);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Reload with update usage again and check that page stays the same
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(1, 2);
+      servers.data[0].meeting_count = 6;
+      servers.data[0].participant_count = 60;
+      servers.data[0].video_count = 10;
+      servers.meta.current_page = 2;
+      servers.meta.from = 2;
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+    cy.get('[data-test="servers-reload-usage-button"]').click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        update_usage: "true",
+        page: "2",
+      });
+    });
+
+    // Check that usage is shown correctly
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').eq(4).should("have.text", "6");
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "60");
+        cy.get('[data-test="server-item-cell"]')
+          .eq(6)
+          .should("have.text", "10");
+      });
+
+    cy.get('[data-test="paginator-page"]').should("have.length", 4);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Reload without update usage and check that page stays the same
+    cy.get('[data-test="servers-reload-no-usage-button"]').click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        update_usage: "false",
+        page: "2",
+      });
+    });
+
+    // Check that usage is shown correctly
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').eq(4).should("have.text", "6");
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "60");
+        cy.get('[data-test="server-item-cell"]')
+          .eq(6)
+          .should("have.text", "10");
+      });
+
+    cy.get('[data-test="paginator-page"]').should("have.length", 4);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("open add new server page", function () {
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="servers-add-button"]').click();
+
+    cy.url().should("include", "/admin/servers/new");
+  });
+
+  it("open edit server page", function () {
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    cy.interceptAdminServersViewRequests();
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .find('[data-test="servers-edit-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/servers/1/edit");
+  });
+
+  it("open view server page", function () {
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    cy.interceptAdminServersViewRequests();
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .find('[data-test="servers-view-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/servers/1");
+    cy.url().should("not.include", "/edit");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServersNew.cy.js b/tests/Frontend/e2e/AdminServersNew.cy.js
new file mode 100644
index 000000000..ecbdf0902
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServersNew.cy.js
@@ -0,0 +1,401 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin servers view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+        "servers.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that  is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/servers/new");
+  });
+
+  it("visit with user without permission to add new servers", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers/new");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/users");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("add new server", function () {
+    cy.visit("/admin/servers/new");
+
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "").type("Server 01");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "")
+          .type("Testserver 01 for testing purposes");
+      });
+
+    cy.get('[data-test="version-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.version")
+      .within(() => {
+        cy.get("#version").should("have.value", "---").and("be.disabled");
+      });
+
+    cy.get('[data-test="base-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.base_url")
+      .within(() => {
+        cy.get("#base_url")
+          .should("have.value", "")
+          .type("https://localhost/bigbluebutton");
+      });
+
+    cy.get('[data-test="secret-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.secret")
+      .within(() => {
+        cy.get("#secret").should("have.value", "").type("Secret123456789");
+      });
+
+    cy.get('[data-test="strength-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.strength")
+      .and("include.text", "admin.servers.strength_description")
+      .within(() => {
+        cy.get('[data-test="strength-rating"]').should(
+          "not.have.class",
+          "p-disabled",
+        );
+
+        cy.get('[data-test="strength-rating-option"]').should(
+          "have.length",
+          10,
+        );
+
+        // Check that correct options are active
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", "false");
+        }
+
+        // Click on one of the options
+        cy.get('[data-test="strength-rating-option"]').eq(5).click();
+
+        // Check that correct options are active
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", i <= 5 ? "true" : "false");
+        }
+      });
+
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.status")
+      .within(() => {
+        cy.get('[data-test="status-dropdown"]')
+          .should("not.include.text", "admin.servers")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "not.have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+
+        cy.get('[data-test="status-dropdown"]').click();
+      });
+
+    cy.get('[data-test="status-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="status-dropdown-option"]').should("have.length", 3);
+
+        cy.get('[data-test="status-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.servers.enabled");
+        cy.get('[data-test="status-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.servers.draining");
+        cy.get('[data-test="status-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.servers.disabled");
+
+        cy.get('[data-test="status-dropdown-option"]').eq(0).click();
+      });
+
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-dropdown"]').should(
+      "have.text",
+      "admin.servers.enabled",
+    );
+
+    cy.get('[data-test="health-status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.connection")
+      .within(() => {
+        cy.get("#healthStatus")
+          .should("have.value", "admin.servers.unknown")
+          .and("be.disabled");
+        cy.get('[data-test="servers-test-connection-button"]')
+          .should("be.visible")
+          .and("have.text", "admin.servers.test_connection")
+          .and("not.be.disabled");
+      });
+
+    // Check that other fields are hidden
+    cy.get('[data-test="meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="own-meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="participant-count-field"]').should("not.exist");
+
+    cy.get('[data-test="video-count-field"]').should("not.exist");
+
+    // Check that panic button is hidden (missing permissions)
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Save new server
+    cy.fixture("server.json").then((server) => {
+      server.data.id = 30;
+      server.data.description = "Testserver 01 for testing purposes";
+      server.data.secret = "Secret123456789";
+      server.data.strength = 6;
+
+      const newServerRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/servers",
+        {
+          statusCode: 201,
+          body: server,
+        },
+        "newServerRequest",
+      );
+
+      cy.intercept("GET", "api/v1/servers/30", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+      cy.get('[data-test="servers-save-button"]')
+        .should("be.visible")
+        .and("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      // Check that fields are disabled
+      cy.get("#name").should("be.disabled");
+      cy.get("#description").should("be.disabled");
+      cy.get("#version").should("be.disabled");
+      cy.get("#base_url").should("be.disabled");
+      cy.get("#secret").should("be.disabled");
+      cy.get('[data-test="strength-rating"]').should(
+        "have.class",
+        "p-disabled",
+      );
+      cy.get('[data-test="status-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+      cy.get("#healthStatus").and("be.disabled");
+      cy.get('[data-test="servers-test-connection-button"]').should(
+        "be.disabled",
+      );
+
+      cy.get('[data-test="servers-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newServerRequest.sendResponse();
+        });
+
+      cy.wait("@newServerRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          base_url: "https://localhost/bigbluebutton",
+          description: "Testserver 01 for testing purposes",
+          id: null,
+          name: "Server 01",
+          secret: "Secret123456789",
+          status: 1,
+          strength: 6,
+        });
+      });
+
+      cy.wait("@serverRequest");
+
+      // Check that redirect to server view worked
+      cy.url().should("include", "/admin/servers/30");
+    });
+  });
+
+  // ToDo 403 error after adjusted
+  it("add new server errors", function () {
+    cy.visit("/admin/servers/new");
+
+    // Set values
+    cy.get("#name").should("have.value", "").type("Server 01");
+    cy.get("#description")
+      .should("have.value", "")
+      .type("Testserver 01 for testing purposes");
+    cy.get("#base_url")
+      .should("have.value", "")
+      .type("https://localhost/bigbluebutton");
+    cy.get("#secret").should("have.value", "").type("Secret123456789");
+    cy.get('[data-test="strength-rating-option"]').eq(5).click();
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-dropdown"]').click();
+    cy.get('[data-test="status-dropdown-items"]').should("be.visible");
+    cy.get('[data-test="status-dropdown-option"]').eq(0).click();
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/servers", {
+      statusCode: 422,
+      body: {
+        errors: {
+          name: ["The name field is required."],
+          description: ["The description field is required."],
+          base_url: ["The base url field is required."],
+          secret: ["The secret field is required."],
+          strength: ["The strength field is required."],
+          status: ["The status field is required."],
+        },
+      },
+    }).as("newServerRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@newServerRequest");
+
+    // Check error messages
+    cy.get('[data-test="name-field"]').should(
+      "include.text",
+      "The name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "include.text",
+      "The description field is required.",
+    );
+
+    cy.get('[data-test="base-url-field"]').should(
+      "include.text",
+      "The base url field is required.",
+    );
+
+    cy.get('[data-test="secret-field"]').should(
+      "include.text",
+      "The secret field is required.",
+    );
+
+    cy.get('[data-test="strength-field"]').should(
+      "include.text",
+      "The strength field is required.",
+    );
+
+    cy.get('[data-test="status-field"]').should(
+      "include.text",
+      "The status field is required.",
+    );
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/servers", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("newServerRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@newServerRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="name-field"]').should(
+      "not.include.text",
+      "The name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "not.include.text",
+      "The description field is required.",
+    );
+
+    cy.get('[data-test="base-url-field"]').should(
+      "not.include.text",
+      "The base url field is required.",
+    );
+
+    cy.get('[data-test="secret-field"]').should(
+      "not.include.text",
+      "The secret field is required.",
+    );
+
+    cy.get('[data-test="strength-field"]').should(
+      "not.include.text",
+      "The strength field is required.",
+    );
+
+    cy.get('[data-test="status-field"]').should(
+      "not.include.text",
+      "The status field is required.",
+    );
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/servers", {
+      statusCode: 401,
+    }).as("newServerRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@newServerRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServersView.cy.js b/tests/Frontend/e2e/AdminServersView.cy.js
new file mode 100644
index 000000000..0c0ee1b70
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServersView.cy.js
@@ -0,0 +1,761 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin servers view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/servers/1");
+  });
+
+  it("visit with user without permission to view servers", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "servers.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/servers/1");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check serverView shown correctly (server enabled)", function () {
+    const serverRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/servers/1",
+      { fixture: "server.json" },
+      "serverRequest",
+    );
+    cy.visit("/admin/servers/1");
+
+    // Check loading
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        serverRequest.sendResponse();
+      });
+
+    cy.wait("@serverRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that buttons are still hidden (missing permissions)
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    // Check that server data is shown correctly
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Server 01").and("be.disabled");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "Testserver 01")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="version-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.version")
+      .within(() => {
+        cy.get("#version").should("have.value", "2.4.5").and("be.disabled");
+      });
+
+    cy.get('[data-test="base-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.base_url")
+      .within(() => {
+        cy.get("#base_url")
+          .should("have.value", "https://localhost/bigbluebutton")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="secret-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.secret")
+      .within(() => {
+        cy.get("#secret").should("have.value", "123456789").and("be.disabled");
+      });
+
+    cy.get('[data-test="strength-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.strength")
+      .and("include.text", "admin.servers.strength_description")
+      .within(() => {
+        cy.get('[data-test="strength-rating"]').should(
+          "have.class",
+          "p-disabled",
+        );
+
+        cy.get('[data-test="strength-rating-option"]').should(
+          "have.length",
+          10,
+        );
+
+        // Check that correct options are active
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", i < 2 ? "true" : "false");
+        }
+      });
+
+    cy.get('[data-test="status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.status")
+      .within(() => {
+        cy.get('[data-test="status-dropdown"]')
+          .should("have.text", "admin.servers.enabled")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+    cy.get('[data-test="health-status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.connection")
+      .within(() => {
+        cy.get("#healthStatus")
+          .should("have.value", "admin.servers.online")
+          .and("be.disabled");
+        cy.get('[data-test="servers-test-connection-button"]')
+          .should("be.visible")
+          .and("have.text", "admin.servers.test_connection")
+          .and("not.be.disabled");
+      });
+
+    cy.get('[data-test="meeting-count-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.meeting_count")
+      .and("include.text", "admin.servers.meeting_description")
+      .within(() => {
+        cy.get("#meetingCount").should("have.value", "3").and("be.disabled");
+      });
+
+    cy.get('[data-test="own-meeting-count-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.own_meeting_count")
+      .and("include.text", "admin.servers.own_meeting_description")
+      .within(() => {
+        cy.get("#ownMeetingCount").should("have.value", "2").and("be.disabled");
+      });
+
+    cy.get('[data-test="participant-count-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.participant_count")
+      .within(() => {
+        cy.get("#participantCount")
+          .should("have.value", "14")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="video-count-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.video_count")
+      .within(() => {
+        cy.get("#videoCount").should("have.value", "7").and("be.disabled");
+      });
+
+    // Check that panic button is hidden (missing permissions)
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("check serverView shown correctly (server draining)", function () {
+    cy.fixture("server.json").then((server) => {
+      server.data.status = 0;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check that buttons are hidden (missing permissions)
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    // Check that server data is shown correctly
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Server 01").and("be.disabled");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "Testserver 01")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="version-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.version")
+      .within(() => {
+        cy.get("#version").should("have.value", "2.4.5").and("be.disabled");
+      });
+
+    cy.get('[data-test="base-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.base_url")
+      .within(() => {
+        cy.get("#base_url")
+          .should("have.value", "https://localhost/bigbluebutton")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="secret-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.secret")
+      .within(() => {
+        cy.get("#secret").should("have.value", "123456789").and("be.disabled");
+      });
+
+    cy.get('[data-test="strength-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.strength")
+      .and("include.text", "admin.servers.strength_description")
+      .within(() => {
+        cy.get('[data-test="strength-rating"]').should(
+          "have.class",
+          "p-disabled",
+        );
+
+        cy.get('[data-test="strength-rating-option"]').should(
+          "have.length",
+          10,
+        );
+
+        // Check that correct options are active
+        for (let i = 0; i < 2; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", "true");
+        }
+
+        for (let i = 2; i < 10; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", "false");
+        }
+      });
+
+    cy.get('[data-test="status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.status")
+      .within(() => {
+        cy.get('[data-test="status-dropdown"]')
+          .should("have.text", "admin.servers.draining")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+    cy.get('[data-test="health-status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.connection")
+      .within(() => {
+        cy.get("#healthStatus")
+          .should("have.value", "admin.servers.online")
+          .and("be.disabled");
+        cy.get('[data-test="servers-test-connection-button"]')
+          .should("be.visible")
+          .and("have.text", "admin.servers.test_connection")
+          .and("not.be.disabled");
+      });
+
+    cy.get('[data-test="meeting-count-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.meeting_count")
+      .and("include.text", "admin.servers.meeting_description")
+      .within(() => {
+        cy.get("#meetingCount").should("have.value", "3").and("be.disabled");
+      });
+
+    cy.get('[data-test="own-meeting-count-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.own_meeting_count")
+      .and("include.text", "admin.servers.own_meeting_description")
+      .within(() => {
+        cy.get("#ownMeetingCount").should("have.value", "2").and("be.disabled");
+      });
+
+    cy.get('[data-test="participant-count-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.participant_count")
+      .within(() => {
+        cy.get("#participantCount")
+          .should("have.value", "14")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="video-count-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.video_count")
+      .within(() => {
+        cy.get("#videoCount").should("have.value", "7").and("be.disabled");
+      });
+
+    // Check that panic button is hidden (missing permissions)
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("check serverView shown correctly (server disabled)", function () {
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check that buttons are hidden (missing permissions)
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    // Check that server data is shown correctly
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Server 01").and("be.disabled");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "Testserver 01")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="version-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.version")
+      .within(() => {
+        cy.get("#version").should("have.value", "2.4.5").and("be.disabled");
+      });
+
+    cy.get('[data-test="base-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.base_url")
+      .within(() => {
+        cy.get("#base_url")
+          .should("have.value", "https://localhost/bigbluebutton")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="secret-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.secret")
+      .within(() => {
+        cy.get("#secret").should("have.value", "123456789").and("be.disabled");
+      });
+
+    cy.get('[data-test="strength-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.strength")
+      .and("include.text", "admin.servers.strength_description")
+      .within(() => {
+        cy.get('[data-test="strength-rating"]').should(
+          "have.class",
+          "p-disabled",
+        );
+
+        cy.get('[data-test="strength-rating-option"]').should(
+          "have.length",
+          10,
+        );
+
+        // Check that correct options are active
+        for (let i = 0; i < 2; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", "true");
+        }
+
+        for (let i = 2; i < 10; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", "false");
+        }
+      });
+
+    cy.get('[data-test="status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.status")
+      .within(() => {
+        cy.get('[data-test="status-dropdown"]')
+          .should("have.text", "admin.servers.disabled")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+    cy.get('[data-test="health-status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.connection")
+      .within(() => {
+        cy.get("#healthStatus")
+          .should("have.value", "admin.servers.online")
+          .and("be.disabled");
+        cy.get('[data-test="servers-test-connection-button"]')
+          .should("be.visible")
+          .and("have.text", "admin.servers.test_connection")
+          .and("not.be.disabled");
+      });
+
+    cy.get('[data-test="meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="own-meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="participant-count-field"]').should("not.exist");
+
+    cy.get('[data-test="video-count-field"]').should("not.exist");
+
+    // Check that panic button is hidden (missing permissions)
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check with server enabled
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/servers/1/edit");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "admin.servers.panic");
+
+    // Reload page but with server draining
+    cy.fixture("server.json").then((server) => {
+      server.data.status = 0;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server draining
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/servers/1/edit");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "admin.servers.panic");
+
+    // Reload page but with server disabled
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server disabled
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/servers/1/edit");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+        "servers.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check with server enabled
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/servers/1/edit");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "admin.servers.panic");
+
+    // Reload page but with server draining
+    cy.fixture("server.json").then((server) => {
+      server.data.status = 0;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server draining
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/servers/1/edit");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "admin.servers.panic");
+
+    // Reload page but with server disabled
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server disabled
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/servers/1/edit");
+    cy.get('[data-test="servers-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("open view errors", function () {
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverRequest");
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 200,
+      fixture: "server.json",
+    }).as("serverRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@serverRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Reload page with 404 errors
+    cy.interceptAdminServersIndexRequests();
+
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("serverRequest");
+
+    cy.reload();
+
+    cy.wait("@serverRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/servers/1");
+    cy.url().should("include", "/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 401,
+    }).as("serverRequest");
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/1");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServersViewServerActions.cy.js b/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
new file mode 100644
index 000000000..8fc566d8b
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
@@ -0,0 +1,430 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin servers view server actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+        "servers.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete server", function () {
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="servers-delete-button"]').click();
+
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="servers-delete-dialog"]')
+      .should("include.text", "admin.servers.delete.title")
+      .should(
+        "include.text",
+        'admin.servers.delete.confirm_{"name":"Server 01"}',
+      );
+
+    // Confirm delete of server
+    const deleteServerRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/servers/1",
+      { statusCode: 204 },
+      "deleteServerRequest",
+    );
+
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(1, 4);
+      servers.meta.to = 3;
+      servers.meta.total = 3;
+      servers.meta.total_no_filter = 3;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("not.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteServerRequest.sendResponse();
+      });
+
+    cy.wait("@deleteServerRequest");
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/servers/1");
+    cy.url().should("include", "/admin/servers");
+
+    // Check that server was deleted
+    cy.get('[data-test="server-item"]').should("have.length", 3);
+
+    // Check that dialog is closed
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+  });
+
+  //ToDo 404 error, 403 error after adjustments
+  it("delete server errors", function () {
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="servers-delete-button"]').click();
+
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/servers/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteServerRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/servers/1", {
+      statusCode: 401,
+    }).as("deleteServerRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/1");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check connection", function () {
+    cy.visit("/admin/servers/1");
+    cy.wait("@serverRequest");
+
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.online")
+      .and("be.disabled");
+
+    // Check connection
+    const checkConnectionRequest = interceptIndefinitely(
+      "POST",
+      "api/v1/servers/check",
+      {
+        statusCode: 200,
+        body: {
+          connection_ok: false,
+          secret_ok: false,
+        },
+      },
+      "checkConnectionRequest",
+    );
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled")
+      .click();
+
+    // Check loading (offline)
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.disabled")
+      .then(() => {
+        checkConnectionRequest.sendResponse();
+      });
+
+    cy.wait("@checkConnectionRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        base_url: "https://localhost/bigbluebutton",
+        secret: "123456789",
+      });
+    });
+
+    // Check that loading is finished
+    cy.get('[data-test="servers-test-connection-button"]').should(
+      "not.be.disabled",
+    );
+
+    // Check that connection status is updated
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.offline")
+      .and("be.disabled");
+
+    cy.get('[data-test="health-status-field"]').should(
+      "include.text",
+      "admin.servers.offline_reason.connection",
+    );
+
+    // Check connection again (wrong  secret)
+    cy.intercept("POST", "api/v1/servers/check", {
+      statusCode: 200,
+      body: {
+        connection_ok: true,
+        secret_ok: false,
+      },
+    }).as("checkConnectionRequest");
+
+    cy.get('[data-test="servers-test-connection-button"]').click();
+
+    cy.wait("@checkConnectionRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        base_url: "https://localhost/bigbluebutton",
+        secret: "123456789",
+      });
+    });
+
+    // Check that connection status is updated
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.offline")
+      .and("be.disabled");
+
+    cy.get('[data-test="health-status-field"]').should(
+      "include.text",
+      "admin.servers.offline_reason.secret",
+    );
+
+    // Check connection again (valid connection)
+    cy.intercept("POST", "api/v1/servers/check", {
+      statusCode: 200,
+      body: {
+        connection_ok: true,
+        secret_ok: true,
+      },
+    }).as("checkConnectionRequest");
+
+    cy.get('[data-test="servers-test-connection-button"]').click();
+
+    cy.wait("@checkConnectionRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        base_url: "https://localhost/bigbluebutton",
+        secret: "123456789",
+      });
+    });
+
+    // Check that connection status is updated
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.online")
+      .and("be.disabled");
+
+    cy.get('[data-test="health-status-field"]').should(
+      "not.include.text",
+      "admin.servers.offline_reason",
+    );
+  });
+
+  // ToDo 500 error, 401 error after adjustments???
+  it("check connection errors", function () {
+    cy.visit("/admin/servers/1");
+    cy.wait("@serverRequest");
+
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.online")
+      .and("be.disabled");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/servers/check", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("checkConnectionRequest");
+
+    cy.get('[data-test="servers-test-connection-button"]').click();
+
+    cy.wait("@checkConnectionRequest");
+
+    // Check that connection status is updated
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.unknown")
+      .and("be.disabled");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/servers/check", {
+      statusCode: 401,
+    }).as("checkConnectionRequest");
+
+    cy.get('[data-test="servers-test-connection-button"]').click();
+
+    cy.wait("@checkConnectionRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/1");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("panic", function () {
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    const panicRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/servers/1/panic",
+      {
+        statusCode: 200,
+        body: {
+          total: 5,
+          success: 3,
+        },
+      },
+      "panicRequest",
+    );
+
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+      server.data.health = null;
+      server.data.participant_count = null;
+      server.data.listener_count = null;
+      server.data.voice_participant_count = null;
+      server.data.video_count = null;
+      server.data.meeting_count = null;
+      server.data.own_meeting_count = 0;
+      server.data.version = null;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.get('[data-test="servers-panic-button"]').click();
+
+    cy.get('[data-test="servers-panic-button"]')
+      .should("be.disabled")
+      .then(() => {
+        panicRequest.sendResponse();
+      });
+
+    cy.wait("@panicRequest");
+    cy.wait("@serverRequest");
+
+    // Check that toast message is shown
+    cy.checkToastMessage([
+      'admin.servers.flash.panic.description_{"total":5,"success":3}',
+      "admin.servers.flash.panic.title",
+    ]);
+
+    // Check that server status is updated
+    cy.get('[data-test="status-dropdown"]').should(
+      "have.text",
+      "admin.servers.disabled",
+    );
+
+    // Check that server health is updated
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.unknown")
+      .and("be.disabled");
+
+    cy.get('[data-test="meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="own-meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="participant-count-field"]').should("not.exist");
+
+    cy.get('[data-test="video-count-field"]').should("not.exist");
+
+    // Check that panic button is hidden (missing permissions)
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  // ToDo 500 error, 401 error after adjustments???
+  it("panic errors", function () {
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check with 500 error
+    cy.intercept("GET", "api/v1/servers/1/panic", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("panicRequest");
+
+    cy.get('[data-test="servers-panic-button"]').click();
+
+    cy.wait("@panicRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/servers/1/panic", {
+      statusCode: 401,
+    }).as("panicRequest");
+
+    cy.get('[data-test="servers-panic-button"]').click();
+
+    cy.wait("@panicRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/1");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  // ToDo switch between edit and view
+});
diff --git a/tests/Frontend/e2e/AdminUsersIndex.cy.js b/tests/Frontend/e2e/AdminUsersIndex.cy.js
index d940ac946..cc3aba264 100644
--- a/tests/Frontend/e2e/AdminUsersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndex.cy.js
@@ -1704,7 +1704,7 @@ describe("Admin users index", function () {
       });
   });
 
-  it("check button visibility with all permissions", function () {
+  it("check button visibility with delete permission", function () {
     cy.fixture("currentUser.json").then((currentUser) => {
       currentUser.data.permissions = [
         "admin.view",
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index 02b8ff881..990ac5ad2 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -42,7 +42,6 @@ describe("Admin users new", function () {
         "users.viewAny",
         "users.view",
         "users.update",
-        "users.delete",
         "roles.viewAny",
       ];
       cy.intercept("GET", "api/v1/currentUser", {
@@ -278,8 +277,7 @@ describe("Admin users new", function () {
       });
 
     // Save new user
-
-    cy.fixture("userDataCurrentUser.json").then((user) => {
+    cy.fixture("userDataUser.json").then((user) => {
       user.data.id = 20;
       user.data.firstname = "Max";
       user.data.email = "Doe";
@@ -559,7 +557,7 @@ describe("Admin users new", function () {
     cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
 
     // Save new user
-    cy.fixture("userDataCurrentUser.json").then((user) => {
+    cy.fixture("userDataUser.json").then((user) => {
       user.data.id = 20;
       user.data.firstname = "Max";
       user.data.email = "Doe";
@@ -785,6 +783,7 @@ describe("Admin users new", function () {
 
     cy.wait("@newUserRequest");
 
+    // Check that redirect worked and error message is shown
     cy.url().should("include", "/login?redirect=/admin/users/new");
 
     cy.checkToastMessage("app.flash.unauthenticated");
diff --git a/tests/Frontend/e2e/AdminUsersView.cy.js b/tests/Frontend/e2e/AdminUsersView.cy.js
index eb0b7c033..7d4a1b2f8 100644
--- a/tests/Frontend/e2e/AdminUsersView.cy.js
+++ b/tests/Frontend/e2e/AdminUsersView.cy.js
@@ -309,7 +309,6 @@ describe("Admin users view", function () {
         "admin.view",
         "users.viewAny",
         "users.view",
-        "users.create",
         "users.update",
         "roles.viewAny",
       ];
@@ -326,9 +325,12 @@ describe("Admin users view", function () {
     cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
     cy.get('[data-test="users-edit-button"]')
       .should("be.visible")
+      .and("not.be.disabled")
       .and("include.text", "app.edit")
       .and("have.attr", "href", "/admin/users/2/edit");
-    cy.get('[data-test="users-reset-password-button"]').should("be.visible");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
     cy.get('[data-test="users-delete-button"]').should("not.exist");
   });
 
@@ -339,6 +341,7 @@ describe("Admin users view", function () {
         "users.viewAny",
         "users.view",
         "users.create",
+        "users.update",
         "users.delete",
         "roles.viewAny",
       ];
@@ -353,9 +356,17 @@ describe("Admin users view", function () {
     cy.wait("@userRequest");
 
     cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
-    cy.get('[data-test="users-edit-button"]').should("not.exist");
-    cy.get('[data-test="users-reset-password-button"]').should("not.exist");
-    cy.get('[data-test="users-delete-button"]').should("be.visible");
+    cy.get('[data-test="users-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/users/2/edit");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
   });
 
   it("open view errors", function () {
diff --git a/tests/Frontend/fixtures/server.json b/tests/Frontend/fixtures/server.json
new file mode 100644
index 000000000..257ee832b
--- /dev/null
+++ b/tests/Frontend/fixtures/server.json
@@ -0,0 +1,21 @@
+{
+  "data": {
+    "id": 1,
+    "name": "Server 01",
+    "description": "Testserver 01",
+    "base_url": "https://localhost/bigbluebutton",
+    "secret": "123456789",
+    "strength": 2,
+    "status": 1,
+    "health": 1,
+    "participant_count": 14,
+    "listener_count": 7,
+    "voice_participant_count": 7,
+    "video_count": 7,
+    "meeting_count": 3,
+    "own_meeting_count": 2,
+    "version": "2.4.5",
+    "model_name": "Server",
+    "updated_at": "2020-12-21T13:43:21.000000Z"
+  }
+}
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index e2fb514b4..acb27cb27 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -229,7 +229,7 @@ Cypress.Commands.add("interceptAdminUsersViewRequests", () => {
 });
 
 /**
- * Intercept all requests that are needed when visiting the admin servers view page
+ * Intercept all requests that are needed when visiting the admin servers index page
  * @memberof cy
  * @method interceptAdminServersIndexRequests
  * @returns void
@@ -239,3 +239,15 @@ Cypress.Commands.add("interceptAdminServersIndexRequests", () => {
     fixture: "servers.json",
   }).as("serversRequest");
 });
+
+/**
+ * Intercept all requests that are needed when visiting the admin servers view page
+ * @memberof cy
+ * @method interceptAdminServersViewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminServersViewRequests", () => {
+  cy.intercept("GET", "api/v1/servers/1*", {
+    fixture: "server.json",
+  }).as("serverRequest");
+});

From 8431985d9c1f156faa0896ee5e127b9053275a06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 9 Dec 2024 20:18:56 +0100
Subject: [PATCH 15/79] Continue adding AdminServers tests (edit) and improve
 tests

---
 resources/js/views/AdminServersView.vue       |  16 +-
 tests/Frontend/e2e/AdminServersEdit.cy.js     | 799 ++++++++++++++++++
 tests/Frontend/e2e/AdminServersNew.cy.js      |  56 +-
 tests/Frontend/e2e/AdminServersView.cy.js     |   3 +-
 .../e2e/AdminServersViewServerActions.cy.js   | 159 +++-
 tests/Frontend/e2e/AdminUsersEdit.cy.js       |  26 +-
 .../e2e/AdminUsersViewUserActions.cy.js       |  62 +-
 7 files changed, 1066 insertions(+), 55 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminServersEdit.cy.js

diff --git a/resources/js/views/AdminServersView.vue b/resources/js/views/AdminServersView.vue
index 5cd6904f1..7760fb0a9 100644
--- a/resources/js/views/AdminServersView.vue
+++ b/resources/js/views/AdminServersView.vue
@@ -355,7 +355,21 @@
           </div>
         </div>
       </div>
-      <ConfirmDialog></ConfirmDialog>
+      <ConfirmDialog
+        data-test="stale-server-dialog"
+        :pt="{
+          pcAcceptButton: {
+            root: {
+              'data-test': 'stale-dialog-accept-button',
+            },
+          },
+          pcRejectButton: {
+            root: {
+              'data-test': 'stale-dialog-reject-button',
+            },
+          },
+        }"
+      ></ConfirmDialog>
     </OverlayComponent>
   </div>
 </template>
diff --git a/tests/Frontend/e2e/AdminServersEdit.cy.js b/tests/Frontend/e2e/AdminServersEdit.cy.js
new file mode 100644
index 000000000..ebd724926
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServersEdit.cy.js
@@ -0,0 +1,799 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+describe("Admin servers edit", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/servers/1");
+  });
+
+  it("visit with user without permission to edit servers", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("edit server", function () {
+    const serverRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/servers/1",
+      { fixture: "server.json" },
+      "serverRequest",
+    );
+
+    cy.visit("/admin/servers/1/edit");
+
+    // Check loading
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        serverRequest.sendResponse();
+      });
+
+    cy.wait("@serverRequest");
+
+    // Check that loading is donw
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that buttons are still hidden (missing permissions)
+    cy.get('[data-test="servers-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Change server settings
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name")
+          .should("not.be.disabled")
+          .and("have.value", "Server 01")
+          .clear();
+        cy.get("#name").type("Server 02");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("not.be.disabled")
+          .and("have.value", "Testserver 01")
+          .clear();
+        cy.get("#description").type("Testserver 02 for testing purposes");
+      });
+
+    cy.get('[data-test="version-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.version")
+      .within(() => {
+        cy.get("#version").should("have.value", "2.4.5").and("be.disabled");
+      });
+
+    cy.get('[data-test="base-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.base_url")
+      .within(() => {
+        cy.get("#base_url")
+          .should("not.be.disabled")
+          .and("have.value", "https://localhost/bigbluebutton")
+          .clear();
+        cy.get("#base_url").type("https://localhost/bigbluebutton2");
+      });
+
+    cy.get('[data-test="secret-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.secret")
+      .within(() => {
+        cy.get("#secret")
+          .should("not.be.disabled")
+          .and("have.value", "123456789")
+          .clear();
+        cy.get("#secret").type("Secret123456789");
+      });
+
+    cy.get('[data-test="strength-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.strength")
+      .and("include.text", "admin.servers.strength_description")
+      .within(() => {
+        cy.get('[data-test="strength-rating"]').should(
+          "not.have.class",
+          "p-disabled",
+        );
+
+        cy.get('[data-test="strength-rating-option"]').should(
+          "have.length",
+          10,
+        );
+
+        // Check that correct options are active
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", i < 2 ? "true" : "false");
+        }
+
+        // Click on one of the options
+        cy.get('[data-test="strength-rating-option"]').eq(5).click();
+
+        // Check that correct options are active
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", i <= 5 ? "true" : "false");
+        }
+      });
+
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.status")
+      .within(() => {
+        cy.get('[data-test="status-dropdown"]')
+          .should("have.text", "admin.servers.enabled")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "not.have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+
+        cy.get('[data-test="status-dropdown"]').click();
+      });
+
+    cy.get('[data-test="status-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="status-dropdown-option"]').should("have.length", 3);
+
+        cy.get('[data-test="status-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.servers.enabled");
+        cy.get('[data-test="status-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.servers.draining");
+        cy.get('[data-test="status-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.servers.disabled");
+
+        cy.get('[data-test="status-dropdown-option"]').eq(2).click();
+      });
+
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-dropdown"]').should(
+      "have.text",
+      "admin.servers.disabled",
+    );
+
+    cy.get('[data-test="health-status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.connection")
+      .within(() => {
+        cy.get("#healthStatus")
+          .should("have.value", "admin.servers.online")
+          .and("be.disabled");
+        cy.get('[data-test="servers-test-connection-button"]')
+          .should("be.visible")
+          .and("have.text", "admin.servers.test_connection")
+          .and("not.be.disabled");
+      });
+
+    // Check that other fields are hidden
+    cy.get('[data-test="meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="own-meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="participant-count-field"]').should("not.exist");
+
+    cy.get('[data-test="video-count-field"]').should("not.exist");
+
+    // Check that panic button is hidden
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Save changes
+    cy.fixture("server.json").then((server) => {
+      server.data.name = "Server 02";
+      server.data.description = "Testserver 02 for testing purposes";
+      server.data.base_url = "https://localhost/bigbluebutton2";
+      server.data.secret = "Secret123456789";
+      server.data.strength = 6;
+      server.data.status = -1;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/servers/1",
+        {
+          statusCode: 200,
+          body: server,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+      cy.get('[data-test="servers-save-button"]')
+        .should("be.visible")
+        .and("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      // Check that fields are disabled
+      cy.get("#name").should("be.disabled");
+      cy.get("#description").should("be.disabled");
+      cy.get("#version").should("be.disabled");
+      cy.get("#base_url").should("be.disabled");
+      cy.get("#secret").should("be.disabled");
+      cy.get('[data-test="strength-rating"]').should(
+        "have.class",
+        "p-disabled",
+      );
+      cy.get('[data-test="status-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+      cy.get("#healthStatus").and("be.disabled");
+      cy.get('[data-test="servers-test-connection-button"]').should(
+        "be.disabled",
+      );
+
+      cy.get('[data-test="servers-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql(server.data);
+      });
+    });
+
+    cy.wait("@serverRequest");
+
+    // Check that redirect to server view worked
+    cy.url().should("include", "/admin/servers/1");
+    cy.url().should("not.include", "/edit");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+        "servers.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers/1/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check with server enabled
+    cy.get('[data-test="servers-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Reload page but with server draining
+    cy.fixture("server.json").then((server) => {
+      server.data.status = 0;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server draining
+    cy.get('[data-test="servers-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Reload page but with server disabled
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server disabled
+    cy.get('[data-test="servers-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("load server errors", function () {
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverRequest");
+
+    cy.visit("/admin/servers/1/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 200,
+      fixture: "server.json",
+    }).as("serverRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@serverRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Reload page with 404 errors
+    cy.interceptAdminServersIndexRequests();
+
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("serverRequest");
+
+    cy.reload();
+
+    cy.wait("@serverRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/servers/1");
+    cy.url().should("include", "/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 401,
+    }).as("serverRequest");
+
+    cy.visit("/admin/servers/1/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/1/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("save changes errors", function () {
+    cy.visit("/admin/servers/1/edit");
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/servers/1", {
+      statusCode: 422,
+      body: {
+        errors: {
+          name: ["The name field is required."],
+          description: ["The description field is required."],
+          base_url: ["The base url field is required."],
+          secret: ["The secret field is required."],
+          strength: ["The strength field is required."],
+          status: ["The status field is required."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error messages
+    cy.get('[data-test="name-field"]').should(
+      "include.text",
+      "The name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "include.text",
+      "The description field is required.",
+    );
+
+    cy.get('[data-test="base-url-field"]').should(
+      "include.text",
+      "The base url field is required.",
+    );
+
+    cy.get('[data-test="secret-field"]').should(
+      "include.text",
+      "The secret field is required.",
+    );
+
+    cy.get('[data-test="strength-field"]').should(
+      "include.text",
+      "The strength field is required.",
+    );
+
+    cy.get('[data-test="status-field"]').should(
+      "include.text",
+      "The status field is required.",
+    );
+
+    // Set values
+    cy.get("#name")
+      .should("not.be.disabled")
+      .and("have.value", "Server 01")
+      .clear();
+    cy.get("#name").type("Server 02");
+    cy.get("#description")
+      .should("not.be.disabled")
+      .and("have.value", "Testserver 01")
+      .clear();
+    cy.get("#description").type("Testserver 02 for testing purposes");
+    cy.get("#base_url")
+      .should("not.be.disabled")
+      .and("have.value", "https://localhost/bigbluebutton")
+      .clear();
+    cy.get("#base_url").type("https://localhost/bigbluebutton2");
+    cy.get("#secret")
+      .should("not.be.disabled")
+      .and("have.value", "123456789")
+      .clear();
+    cy.get("#secret").type("Secret123456789");
+    for (let i = 0; i < 10; i++) {
+      cy.get('[data-test="strength-rating-option"]')
+        .eq(i)
+        .should("have.attr", "data-p-active", i < 2 ? "true" : "false");
+    }
+    cy.get('[data-test="strength-rating-option"]').eq(5).click();
+    cy.get('[data-test="status-dropdown"]').should(
+      "include.text",
+      "admin.servers.enabled",
+    );
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-dropdown"]').click();
+    cy.get('[data-test="status-dropdown-items"]').should("be.visible");
+    cy.get('[data-test="status-dropdown-option"]').eq(2).click();
+
+    // Check with 500 error
+    cy.intercept("PUT", "api/v1/servers/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="name-field"]').should(
+      "not.include.text",
+      "The name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "not.include.text",
+      "The description field is required.",
+    );
+
+    cy.get('[data-test="base-url-field"]').should(
+      "not.include.text",
+      "The base url field is required.",
+    );
+
+    cy.get('[data-test="secret-field"]').should(
+      "not.include.text",
+      "The secret field is required.",
+    );
+
+    cy.get('[data-test="strength-field"]').should(
+      "not.include.text",
+      "The strength field is required.",
+    );
+
+    cy.get('[data-test="status-field"]').should(
+      "not.include.text",
+      "The status field is required.",
+    );
+
+    // Check with 428 error (stale error)
+    cy.fixture("server.json").then((server) => {
+      server.data.name = "Server 03";
+      server.data.description = "Testserver 03 for testing purposes";
+      server.data.base_url = "https://localhost/bigbluebutton3";
+      server.data.secret = "Secret987654321";
+      server.data.strength = 5;
+      server.data.status = 1;
+
+      cy.intercept("PUT", "api/v1/servers/1", {
+        statusCode: 428,
+        body: {
+          new_model: server.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-server-dialog"]').should("not.exist");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-server-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Reload
+    cy.get('[data-test="stale-dialog-reject-button"]').click();
+
+    cy.get('[data-test="stale-server-dialog"]').should("not.exist");
+
+    // Check that correct data is shown
+    cy.get("#name").should("have.value", "Server 03");
+    cy.get("#description").should(
+      "have.value",
+      "Testserver 03 for testing purposes",
+    );
+    cy.get("#base_url").should(
+      "have.value",
+      "https://localhost/bigbluebutton3",
+    );
+    cy.get("#secret").should("have.value", "Secret987654321");
+    for (let i = 0; i < 10; i++) {
+      cy.get('[data-test="strength-rating-option"]')
+        .eq(i)
+        .should("have.attr", "data-p-active", i < 5 ? "true" : "false");
+    }
+    cy.get('[data-test="status-dropdown"]').should(
+      "include.text",
+      "admin.servers.enabled",
+    );
+
+    // Trigger 428 error (stale error) again
+    cy.fixture("server.json").then((server) => {
+      server.data.name = "Server 04";
+      server.data.description = "Testserver 04 for testing purposes";
+      server.data.base_url = "https://localhost/bigbluebutton4";
+      server.data.secret = "123456789Secret";
+      server.data.strength = 4;
+      server.data.status = 10;
+
+      cy.intercept("PUT", "api/v1/servers/1", {
+        statusCode: 428,
+        body: {
+          new_model: server.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-server-dialog"]').should("not.exist");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-server-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Overwrite
+    cy.fixture("server.json").then((server) => {
+      server.data.name = "Server 03";
+      server.data.description = "Testserver 03 for testing purposes";
+      server.data.base_url = "https://localhost/bigbluebutton3";
+      server.data.secret = "Secret987654321";
+      server.data.strength = 5;
+      server.data.status = 1;
+
+      cy.intercept("PUT", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("saveChangesRequest");
+
+      cy.get('[data-test="stale-dialog-accept-button"]').click();
+
+      // Check that correct data is sent
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql(server.data);
+      });
+    });
+
+    // Check that redirect worked
+    cy.url().should("include", "/admin/servers/1");
+    cy.url().should("not.include", "/edit");
+
+    // Reload
+    cy.visit("/admin/servers/1/edit");
+
+    // Check with 404 error
+    cy.interceptAdminServersIndexRequests();
+    cy.intercept("PUT", "api/v1/servers/1", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/servers/1/edit");
+    cy.url().should("include", "/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload
+    cy.visit("/admin/servers/1/edit");
+
+    // Check with 401 error
+    cy.intercept("PUT", "api/v1/servers/1", {
+      statusCode: 401,
+    }).as("newServerRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@newServerRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/1/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServersNew.cy.js b/tests/Frontend/e2e/AdminServersNew.cy.js
index ecbdf0902..367123b8d 100644
--- a/tests/Frontend/e2e/AdminServersNew.cy.js
+++ b/tests/Frontend/e2e/AdminServersNew.cy.js
@@ -246,24 +246,24 @@ describe("Admin servers view", function () {
         .then(() => {
           newServerRequest.sendResponse();
         });
+    });
 
-      cy.wait("@newServerRequest").then((interception) => {
-        expect(interception.request.body).to.eql({
-          base_url: "https://localhost/bigbluebutton",
-          description: "Testserver 01 for testing purposes",
-          id: null,
-          name: "Server 01",
-          secret: "Secret123456789",
-          status: 1,
-          strength: 6,
-        });
+    cy.wait("@newServerRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        base_url: "https://localhost/bigbluebutton",
+        description: "Testserver 01 for testing purposes",
+        id: null,
+        name: "Server 01",
+        secret: "Secret123456789",
+        status: 1,
+        strength: 6,
       });
+    });
 
-      cy.wait("@serverRequest");
+    cy.wait("@serverRequest");
 
-      // Check that redirect to server view worked
-      cy.url().should("include", "/admin/servers/30");
-    });
+    // Check that redirect to server view worked
+    cy.url().should("include", "/admin/servers/30");
   });
 
   // ToDo 403 error after adjusted
@@ -384,6 +384,34 @@ describe("Admin servers view", function () {
       "The status field is required.",
     );
 
+    // Check with 404 error
+    cy.interceptAdminServersIndexRequests();
+    cy.intercept("POST", "api/v1/servers", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("newServerRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@newServerRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/servers/new");
+    cy.url().should("include", "/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload
+    cy.visit("/admin/servers/new");
+
     // Check with 401 error
     cy.intercept("POST", "api/v1/servers", {
       statusCode: 401,
diff --git a/tests/Frontend/e2e/AdminServersView.cy.js b/tests/Frontend/e2e/AdminServersView.cy.js
index 0c0ee1b70..7e445c051 100644
--- a/tests/Frontend/e2e/AdminServersView.cy.js
+++ b/tests/Frontend/e2e/AdminServersView.cy.js
@@ -353,6 +353,7 @@ describe("Admin servers view", function () {
   it("check serverView shown correctly (server disabled)", function () {
     cy.fixture("server.json").then((server) => {
       server.data.status = -1;
+      server.data.health = 0;
 
       cy.intercept("GET", "api/v1/servers/1", {
         statusCode: 200,
@@ -458,7 +459,7 @@ describe("Admin servers view", function () {
       .and("include.text", "admin.servers.connection")
       .within(() => {
         cy.get("#healthStatus")
-          .should("have.value", "admin.servers.online")
+          .should("have.value", "admin.servers.unhealthy")
           .and("be.disabled");
         cy.get('[data-test="servers-test-connection-button"]')
           .should("be.visible")
diff --git a/tests/Frontend/e2e/AdminServersViewServerActions.cy.js b/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
index 8fc566d8b..0d9425174 100644
--- a/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
+++ b/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
@@ -426,5 +426,162 @@ describe("Admin servers view server actions", function () {
     cy.checkToastMessage("app.flash.unauthenticated");
   });
 
-  // ToDo switch between edit and view
+  it("switch between edit and view", function () {
+    cy.visit("/admin/servers/1/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check values and change them
+    cy.get("#name")
+      .should("not.be.disabled")
+      .and("have.value", "Server 01")
+      .clear();
+    cy.get("#name").type("Server 02");
+    cy.get("#description")
+      .should("not.be.disabled")
+      .and("have.value", "Testserver 01")
+      .clear();
+    cy.get("#description").type("Testserver 02 for testing purposes");
+    cy.get("#base_url")
+      .should("not.be.disabled")
+      .and("have.value", "https://localhost/bigbluebutton")
+      .clear();
+    cy.get("#base_url").type("https://localhost/bigbluebutton2");
+    cy.get("#secret")
+      .should("not.be.disabled")
+      .and("have.value", "123456789")
+      .clear();
+    cy.get("#secret").type("Secret123456789");
+    cy.get('[data-test="strength-rating"]').should(
+      "not.have.class",
+      "p-disabled",
+    );
+    for (let i = 0; i < 10; i++) {
+      cy.get('[data-test="strength-rating-option"]')
+        .eq(i)
+        .should("have.attr", "data-p-active", i < 2 ? "true" : "false");
+    }
+    cy.get('[data-test="strength-rating-option"]').eq(5).click();
+    cy.get('[data-test="status-dropdown"]')
+      .should("include.text", "admin.servers.enabled")
+      .within(() => {
+        cy.get(".p-select-label").should(
+          "not.have.attr",
+          "aria-disabled",
+          "true",
+        );
+      });
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-dropdown"]').click();
+    cy.get('[data-test="status-dropdown-items"]').should("be.visible");
+    cy.get('[data-test="status-dropdown-option"]').eq(2).click();
+
+    // Check that other fields are hidden
+    cy.get('[data-test="meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="own-meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="participant-count-field"]').should("not.exist");
+
+    cy.get('[data-test="video-count-field"]').should("not.exist");
+
+    // Check that panic button is hidden
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Switch to view
+    cy.get('[data-test="servers-cancel-edit-button"]').click();
+
+    // Check if redirected to view page
+    cy.url().should("include", "/admin/servers/1");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check that changes were not saved
+    cy.get("#name").should("be.disabled").and("have.value", "Server 01");
+    cy.get("#description")
+      .should("be.disabled")
+      .and("have.value", "Testserver 01");
+    cy.get("#base_url")
+      .should("be.disabled")
+      .and("have.value", "https://localhost/bigbluebutton");
+    cy.get("#secret").should("be.disabled").and("have.value", "123456789");
+    cy.get('[data-test="strength-rating"]').should("have.class", "p-disabled");
+    for (let i = 0; i < 10; i++) {
+      cy.get('[data-test="strength-rating-option"]')
+        .eq(i)
+        .should("have.attr", "data-p-active", i < 2 ? "true" : "false");
+    }
+    cy.get('[data-test="status-dropdown"]')
+      .should("include.text", "admin.servers.enabled")
+      .within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+    // Check that other fields and panic button are shown
+    cy.get("#meetingCount")
+      .should("have.value", "3")
+      .and("be.visible")
+      .and("be.disabled");
+    cy.get("#ownMeetingCount")
+      .should("have.value", "2")
+      .and("be.visible")
+      .and("be.disabled");
+    cy.get("#participantCount")
+      .should("have.value", "14")
+      .and("be.visible")
+      .and("be.disabled");
+    cy.get("#videoCount")
+      .should("have.value", "7")
+      .and("be.visible")
+      .and("be.disabled");
+    cy.get('[data-test="servers-panic-button"]').should("be.visible");
+
+    // Switch back to edit
+    cy.get('[data-test="servers-edit-button"]').click();
+
+    // Check if redirected to edit page
+    cy.url().should("include", "/admin/servers/1/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check that original values are shown
+    cy.get("#name").should("not.be.disabled").and("have.value", "Server 01");
+    cy.get("#description")
+      .should("not.be.disabled")
+      .and("have.value", "Testserver 01");
+    cy.get("#base_url")
+      .should("not.be.disabled")
+      .and("have.value", "https://localhost/bigbluebutton");
+    cy.get("#secret").should("not.be.disabled").and("have.value", "123456789");
+    cy.get('[data-test="strength-rating"]').should(
+      "not.have.class",
+      "p-disabled",
+    );
+    for (let i = 0; i < 10; i++) {
+      cy.get('[data-test="strength-rating-option"]')
+        .eq(i)
+        .should("have.attr", "data-p-active", i < 2 ? "true" : "false");
+    }
+    cy.get('[data-test="status-dropdown"]')
+      .should("include.text", "admin.servers.enabled")
+      .within(() => {
+        cy.get(".p-select-label").should(
+          "not.have.attr",
+          "aria-disabled",
+          "true",
+        );
+      });
+    // Check that other fields are hidden
+    cy.get('[data-test="meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="own-meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="participant-count-field"]').should("not.exist");
+
+    cy.get('[data-test="video-count-field"]').should("not.exist");
+
+    // Check that panic button is hidden
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
 });
diff --git a/tests/Frontend/e2e/AdminUsersEdit.cy.js b/tests/Frontend/e2e/AdminUsersEdit.cy.js
index 175facb09..7e30eb78d 100644
--- a/tests/Frontend/e2e/AdminUsersEdit.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEdit.cy.js
@@ -31,11 +31,10 @@ describe("Admin users edit", function () {
   });
 
   it("visit with user that is not logged in", function () {
-    cy.testVisitWithoutCurrentUser("/admin/users/1");
+    cy.testVisitWithoutCurrentUser("/admin/users/2/edit");
   });
 
   it("visit with user without permission to edit users", function () {
-    // Check with missing users.edit permission
     cy.fixture("currentUser.json").then((currentUser) => {
       currentUser.data.permissions = [
         "admin.view",
@@ -57,29 +56,6 @@ describe("Admin users edit", function () {
     // Check if welcome page is shown
     cy.url().should("not.include", "/admin/users/2/edit");
     cy.get("h1").should("be.visible").and("include.text", "home.title");
-
-    // Check with missing users.view permission
-    cy.fixture("currentUser.json").then((currentUser) => {
-      currentUser.data.permissions = [
-        "admin.view",
-        "users.viewAny",
-        "users.edit",
-        "users.create",
-        "roles.viewAny",
-      ];
-      cy.intercept("GET", "api/v1/currentUser", {
-        statusCode: 200,
-        body: currentUser,
-      });
-    });
-
-    cy.visit("/admin/users/2/edit");
-
-    cy.checkToastMessage("app.flash.unauthorized");
-
-    // Check if welcome page is shown
-    cy.url().should("not.include", "/admin/users/2/edit");
-    cy.get("h1").should("be.visible").and("include.text", "home.title");
   });
 
   it("visit edit user page", function () {
diff --git a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
index 6fce9c093..123e591ed 100644
--- a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
+++ b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
@@ -327,15 +327,23 @@ describe("Admin users view user actions", function () {
 
     cy.wait("@userRequest");
 
-    // Check that changed were not saved
-    cy.get("#firstname").should("have.value", "Laura");
-    cy.get("#lastname").should("have.value", "Rivera");
+    // Check that changes were not saved
+    cy.get("#firstname").should("have.value", "Laura").and("be.disabled");
+    cy.get("#lastname").should("have.value", "Rivera").and("be.disabled");
     cy.get('[data-test="profile-image-preview"]').should("not.exist");
     cy.get('[data-test="default-profile-image-preview"]')
       .should("be.visible")
       .and("include.text", "LR");
-    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
-    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
+    cy.get('[data-test="locale-dropdown"]')
+      .should("have.text", "English")
+      .within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
 
     // Switch to edit again
     cy.get('[data-test="users-edit-button"]').click();
@@ -345,14 +353,34 @@ describe("Admin users view user actions", function () {
     cy.wait("@userRequest");
 
     // Check that original values are shown
-    cy.get("#firstname").should("have.value", "Laura");
-    cy.get("#lastname").should("have.value", "Rivera");
+    cy.get("#firstname")
+      .should("have.value", "Laura")
+      .should("not.be.disabled");
+    cy.get("#lastname")
+      .should("have.value", "Rivera")
+      .should("not.be.disabled");
     cy.get('[data-test="profile-image-preview"]').should("not.exist");
     cy.get('[data-test="default-profile-image-preview"]')
       .should("be.visible")
       .and("include.text", "LR");
-    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
-    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
+    cy.get('[data-test="locale-dropdown"]')
+      .should("have.text", "English")
+      .within(() => {
+        cy.get(".p-select-label").should(
+          "not.have.attr",
+          "aria-disabled",
+          "true",
+        );
+      });
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .within(() => {
+        cy.get(".p-select-label").should(
+          "not.have.attr",
+          "aria-disabled",
+          "true",
+        );
+      });
 
     // Check email tab
     cy.get('[data-test="email-tab-button"]').click();
@@ -372,7 +400,9 @@ describe("Admin users view user actions", function () {
     // Switch to email tab and check that changes are not saved
     cy.get('[data-test="email-tab-button"]').click();
 
-    cy.get("#email").should("have.value", "LauraWRivera@domain.tld");
+    cy.get("#email")
+      .should("have.value", "LauraWRivera@domain.tld")
+      .should("be.disabled");
 
     // Switch back to edit
     cy.get('[data-test="users-edit-button"]').click();
@@ -385,7 +415,9 @@ describe("Admin users view user actions", function () {
     cy.get('[data-test="email-tab-button"]').click();
 
     // Check that original values are shown
-    cy.get("#email").should("have.value", "LauraWRivera@domain.tld");
+    cy.get("#email")
+      .should("have.value", "LauraWRivera@domain.tld")
+      .should("not.be.disabled");
 
     // Check security tab
     cy.get('[data-test="security-tab-button"]').click();
@@ -520,7 +552,9 @@ describe("Admin users view user actions", function () {
     // Switch to others tab and check if changes are not saved
     cy.get('[data-test="others-tab-button"]').click();
 
-    cy.get("#bbb_skip_check_audio").should("not.be.checked");
+    cy.get("#bbb_skip_check_audio")
+      .should("not.be.checked")
+      .should("be.disabled");
 
     // Switch back to edit page
     cy.get('[data-test="users-edit-button"]').click();
@@ -533,6 +567,8 @@ describe("Admin users view user actions", function () {
     cy.get('[data-test="others-tab-button"]').click();
 
     // Check that original value is shown
-    cy.get("#bbb_skip_check_audio").should("not.be.checked");
+    cy.get("#bbb_skip_check_audio")
+      .should("not.be.checked")
+      .should("not.be.disabled");
   });
 });

From c503b84c41114e7d7618ebda67ca5ed768c1638b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 11 Dec 2024 13:10:26 +0100
Subject: [PATCH 16/79] Improve tests

---
 tests/Frontend/e2e/AdminServersEdit.cy.js     |  4 +-
 .../e2e/AdminServersIndexServerActions.cy.js  |  1 -
 tests/Frontend/e2e/AdminServersNew.cy.js      |  3 +-
 .../e2e/AdminServersViewServerActions.cy.js   |  3 -
 tests/Frontend/e2e/AdminUsersEditBase.cy.js   | 57 +++++++++++++------
 tests/Frontend/e2e/AdminUsersEditEmail.cy.js  |  6 ++
 tests/Frontend/e2e/AdminUsersEditOthers.cy.js | 40 +++++++------
 .../Frontend/e2e/AdminUsersEditSecurity.cy.js | 17 ++++++
 tests/Frontend/e2e/AdminUsersIndex.cy.js      |  1 -
 .../e2e/AdminUsersIndexUserActions.cy.js      |  2 -
 tests/Frontend/e2e/AdminUsersNew.cy.js        |  1 -
 .../e2e/AdminUsersViewUserActions.cy.js       |  2 -
 12 files changed, 88 insertions(+), 49 deletions(-)

diff --git a/tests/Frontend/e2e/AdminServersEdit.cy.js b/tests/Frontend/e2e/AdminServersEdit.cy.js
index ebd724926..6db55ff2a 100644
--- a/tests/Frontend/e2e/AdminServersEdit.cy.js
+++ b/tests/Frontend/e2e/AdminServersEdit.cy.js
@@ -70,7 +70,7 @@ describe("Admin servers edit", function () {
 
     cy.wait("@serverRequest");
 
-    // Check that loading is donw
+    // Check that loading is done
     cy.get('[data-test="overlay"]').should("not.exist");
 
     // Check that buttons are still hidden (missing permissions)
@@ -166,7 +166,7 @@ describe("Admin servers edit", function () {
         for (let i = 0; i < 10; i++) {
           cy.get('[data-test="strength-rating-option"]')
             .eq(i)
-            .should("have.attr", "data-p-active", i <= 5 ? "true" : "false");
+            .should("have.attr", "data-p-active", i < 6 ? "true" : "false");
         }
       });
 
diff --git a/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js b/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js
index 0571bef24..06b4cfd11 100644
--- a/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js
+++ b/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js
@@ -115,7 +115,6 @@ describe("Admin servers index server actions", function () {
     cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
   });
 
-  // ToDo 404 error, 403 error after adjustments
   it("delete server errors", function () {
     cy.visit("admin/servers");
     cy.wait("@serversRequest");
diff --git a/tests/Frontend/e2e/AdminServersNew.cy.js b/tests/Frontend/e2e/AdminServersNew.cy.js
index 367123b8d..5ab49d635 100644
--- a/tests/Frontend/e2e/AdminServersNew.cy.js
+++ b/tests/Frontend/e2e/AdminServersNew.cy.js
@@ -120,7 +120,7 @@ describe("Admin servers view", function () {
         for (let i = 0; i < 10; i++) {
           cy.get('[data-test="strength-rating-option"]')
             .eq(i)
-            .should("have.attr", "data-p-active", i <= 5 ? "true" : "false");
+            .should("have.attr", "data-p-active", i < 6 ? "true" : "false");
         }
       });
 
@@ -266,7 +266,6 @@ describe("Admin servers view", function () {
     cy.url().should("include", "/admin/servers/30");
   });
 
-  // ToDo 403 error after adjusted
   it("add new server errors", function () {
     cy.visit("/admin/servers/new");
 
diff --git a/tests/Frontend/e2e/AdminServersViewServerActions.cy.js b/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
index 0d9425174..7bbd93d19 100644
--- a/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
+++ b/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
@@ -96,7 +96,6 @@ describe("Admin servers view server actions", function () {
     cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
   });
 
-  //ToDo 404 error, 403 error after adjustments
   it("delete server errors", function () {
     cy.fixture("server.json").then((server) => {
       server.data.status = -1;
@@ -265,7 +264,6 @@ describe("Admin servers view server actions", function () {
     );
   });
 
-  // ToDo 500 error, 401 error after adjustments???
   it("check connection errors", function () {
     cy.visit("/admin/servers/1");
     cy.wait("@serverRequest");
@@ -387,7 +385,6 @@ describe("Admin servers view server actions", function () {
     cy.get('[data-test="servers-panic-button"]').should("not.exist");
   });
 
-  // ToDo 500 error, 401 error after adjustments???
   it("panic errors", function () {
     cy.visit("/admin/servers/1");
 
diff --git a/tests/Frontend/e2e/AdminUsersEditBase.cy.js b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
index c84035458..d900b2ba9 100644
--- a/tests/Frontend/e2e/AdminUsersEditBase.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
@@ -572,6 +572,44 @@ describe("Admin users edit base", function () {
       "The timezone field is required.",
     );
 
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-profile-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="firstname-field"]').should(
+      "not.include.text",
+      "The firstname field is required.",
+    );
+
+    cy.get('[data-test="lastname-field"]').should(
+      "not.include.text",
+      "The lastname field is required.",
+    );
+
+    cy.get('[data-test="locale-field"]').should(
+      "not.include.text",
+      "The user locale field is required.",
+    );
+
+    cy.get('[data-test="timezone-field"]').should(
+      "not.include.text",
+      "The timezone field is required.",
+    );
+
     // Check with 428 error (stale error)
     cy.fixture("userDataUser.json").then((user) => {
       user.data.firstname = "Juan";
@@ -614,23 +652,6 @@ describe("Admin users edit base", function () {
     // Visit edit page again
     cy.visit("/admin/users/2/edit");
 
-    // Check with 500 error
-    cy.intercept("POST", "api/v1/users/2", {
-      statusCode: 500,
-      body: {
-        message: "Test",
-      },
-    }).as("saveChangesRequest");
-
-    cy.get('[data-test="user-tab-profile-save-button"]').click();
-
-    cy.wait("@saveChangesRequest");
-
-    cy.checkToastMessage([
-      'app.flash.server_error.message_{"message":"Test"}',
-      'app.flash.server_error.error_code_{"statusCode":500}',
-    ]);
-
     // Check with 404 error
     cy.interceptAdminUsersIndexRequests();
 
@@ -756,7 +777,7 @@ describe("Admin users edit base", function () {
       .find(".p-select-label")
       .should("have.attr", "aria-disabled", "true");
 
-    // Reload timezones withouth error
+    // Reload timezones without error
     cy.intercept("GET", "api/v1/getTimezones", {
       fixture: "timezones.json",
     }).as("timezonesRequest");
diff --git a/tests/Frontend/e2e/AdminUsersEditEmail.cy.js b/tests/Frontend/e2e/AdminUsersEditEmail.cy.js
index 88d520e80..927fdc84c 100644
--- a/tests/Frontend/e2e/AdminUsersEditEmail.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditEmail.cy.js
@@ -143,6 +143,12 @@ describe("Admin users edit email", function () {
       'app.flash.server_error.error_code_{"statusCode":500}',
     ]);
 
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="email-field"]').should(
+      "not.include.text",
+      "The email field is required.",
+    );
+
     // Check with 404 error
     cy.interceptAdminUsersIndexRequests();
 
diff --git a/tests/Frontend/e2e/AdminUsersEditOthers.cy.js b/tests/Frontend/e2e/AdminUsersEditOthers.cy.js
index 6020a7c25..ea55d4af6 100644
--- a/tests/Frontend/e2e/AdminUsersEditOthers.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditOthers.cy.js
@@ -118,6 +118,29 @@ describe("Admin users edit others", function () {
       "The bbb skip check audio field is required.",
     );
 
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-others-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="bbb-skip-check-audio-field"]').should(
+      "not.include.text",
+      "The bbb skip check audio field is required.",
+    );
+
     // Check with 428 error (stale error)
     cy.fixture("userDataUser.json").then((user) => {
       user.data.bbb_skip_check_audio = true;
@@ -158,23 +181,6 @@ describe("Admin users edit others", function () {
     cy.visit("/admin/users/2/edit");
     cy.get('[data-test="others-tab-button"]').click();
 
-    // Check with 500 error
-    cy.intercept("POST", "api/v1/users/2", {
-      statusCode: 500,
-      body: {
-        message: "Test",
-      },
-    }).as("saveChangesRequest");
-
-    cy.get('[data-test="user-tab-others-save-button"]').click();
-
-    cy.wait("@saveChangesRequest");
-
-    cy.checkToastMessage([
-      'app.flash.server_error.message_{"message":"Test"}',
-      'app.flash.server_error.error_code_{"statusCode":500}',
-    ]);
-
     // Check with 404 error
     cy.interceptAdminUsersIndexRequests();
 
diff --git a/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
index c6a0c9ee1..451aa07fc 100644
--- a/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
@@ -417,6 +417,12 @@ describe("Admin users edit email", function () {
       'app.flash.server_error.error_code_{"statusCode":500}',
     ]);
 
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="roles-field"]').should(
+      "not.include.text",
+      "The roles field is required.",
+    );
+
     // Check with 428 error (stale error)
     cy.fixture("userDataUser.json").then((user) => {
       user.data.roles = [
@@ -625,6 +631,17 @@ describe("Admin users edit email", function () {
       'app.flash.server_error.error_code_{"statusCode":500}',
     ]);
 
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="new-password-field"]').should(
+      "not.include.text",
+      "The New password field is required.",
+    );
+
+    cy.get('[data-test="new-password-confirmation-field"]').should(
+      "not.include.text",
+      "The New password confirmation field is required.",
+    );
+
     // Check with 404 error
     cy.get('[data-test="new-password-field"]')
       .should("have.value", "")
diff --git a/tests/Frontend/e2e/AdminUsersIndex.cy.js b/tests/Frontend/e2e/AdminUsersIndex.cy.js
index cc3aba264..568ef0e15 100644
--- a/tests/Frontend/e2e/AdminUsersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndex.cy.js
@@ -31,7 +31,6 @@ describe("Admin users index", function () {
     cy.testVisitWithoutCurrentUser("/admin/users");
   });
 
-  // ToDo think about creating custom command for this
   it("visit with user without permission to view users", function () {
     // Check with missing users.viewAny permission
     cy.fixture("currentUser.json").then((currentUser) => {
diff --git a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
index f4595623e..5ad37315e 100644
--- a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
@@ -118,7 +118,6 @@ describe("Admin users index user actions", function () {
     cy.get('[data-test="users-delete-dialog"]').should("not.exist");
   });
 
-  // ToDo 404 error, 403 error after adjustments
   it("delete user errors", function () {
     cy.visit("/admin/users");
 
@@ -223,7 +222,6 @@ describe("Admin users index user actions", function () {
     cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
   });
 
-  // ToDo 404 error, 403 error after adjustments
   it("reset password errors", function () {
     cy.visit("/admin/users");
 
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index 990ac5ad2..6f0edbbe0 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -637,7 +637,6 @@ describe("Admin users new", function () {
     cy.url().should("include", "/admin/users/20");
   });
 
-  // ToDo 403 error after adjusted
   it("add new user errors", function () {
     cy.visit("/admin/users/new");
 
diff --git a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
index 123e591ed..e7529566c 100644
--- a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
+++ b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
@@ -97,7 +97,6 @@ describe("Admin users view user actions", function () {
     cy.get('[data-test="users-delete-dialog"]').should("not.exist");
   });
 
-  // ToDo 404 error, 403 error after adjustments
   it("delete user errors", function () {
     cy.visit("/admin/users/2");
 
@@ -194,7 +193,6 @@ describe("Admin users view user actions", function () {
     cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
   });
 
-  //ToDo 404 error, 403 error after adjustments
   it("reset password errors", function () {
     cy.visit("/admin/users/2");
 

From d172bf6576093aa7e6e5b6ba704678403c1f55bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 11 Dec 2024 14:01:37 +0100
Subject: [PATCH 17/79] Improve tests

---
 tests/Frontend/e2e/AdminServersEdit.cy.js | 32 +++++------------------
 1 file changed, 6 insertions(+), 26 deletions(-)

diff --git a/tests/Frontend/e2e/AdminServersEdit.cy.js b/tests/Frontend/e2e/AdminServersEdit.cy.js
index 6db55ff2a..52a5fdbbf 100644
--- a/tests/Frontend/e2e/AdminServersEdit.cy.js
+++ b/tests/Frontend/e2e/AdminServersEdit.cy.js
@@ -90,10 +90,7 @@ describe("Admin servers edit", function () {
       .should("be.visible")
       .and("include.text", "app.model_name")
       .within(() => {
-        cy.get("#name")
-          .should("not.be.disabled")
-          .and("have.value", "Server 01")
-          .clear();
+        cy.get("#name").and("have.value", "Server 01").clear();
         cy.get("#name").type("Server 02");
       });
 
@@ -101,10 +98,7 @@ describe("Admin servers edit", function () {
       .should("be.visible")
       .and("include.text", "app.description")
       .within(() => {
-        cy.get("#description")
-          .should("not.be.disabled")
-          .and("have.value", "Testserver 01")
-          .clear();
+        cy.get("#description").and("have.value", "Testserver 01").clear();
         cy.get("#description").type("Testserver 02 for testing purposes");
       });
 
@@ -120,7 +114,6 @@ describe("Admin servers edit", function () {
       .and("include.text", "admin.servers.base_url")
       .within(() => {
         cy.get("#base_url")
-          .should("not.be.disabled")
           .and("have.value", "https://localhost/bigbluebutton")
           .clear();
         cy.get("#base_url").type("https://localhost/bigbluebutton2");
@@ -130,10 +123,7 @@ describe("Admin servers edit", function () {
       .should("be.visible")
       .and("include.text", "admin.servers.secret")
       .within(() => {
-        cy.get("#secret")
-          .should("not.be.disabled")
-          .and("have.value", "123456789")
-          .clear();
+        cy.get("#secret").and("have.value", "123456789").clear();
         cy.get("#secret").type("Secret123456789");
       });
 
@@ -542,25 +532,15 @@ describe("Admin servers edit", function () {
     );
 
     // Set values
-    cy.get("#name")
-      .should("not.be.disabled")
-      .and("have.value", "Server 01")
-      .clear();
+    cy.get("#name").and("have.value", "Server 01").clear();
     cy.get("#name").type("Server 02");
-    cy.get("#description")
-      .should("not.be.disabled")
-      .and("have.value", "Testserver 01")
-      .clear();
+    cy.get("#description").and("have.value", "Testserver 01").clear();
     cy.get("#description").type("Testserver 02 for testing purposes");
     cy.get("#base_url")
-      .should("not.be.disabled")
       .and("have.value", "https://localhost/bigbluebutton")
       .clear();
     cy.get("#base_url").type("https://localhost/bigbluebutton2");
-    cy.get("#secret")
-      .should("not.be.disabled")
-      .and("have.value", "123456789")
-      .clear();
+    cy.get("#secret").and("have.value", "123456789").clear();
     cy.get("#secret").type("Secret123456789");
     for (let i = 0; i < 10; i++) {
       cy.get('[data-test="strength-rating-option"]')

From b24960be3221f6901cd8c11f0ce3981259b082bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 11 Dec 2024 15:29:50 +0100
Subject: [PATCH 18/79] Improve tests

---
 tests/Frontend/e2e/AdminServersView.cy.js | 177 +---------------------
 1 file changed, 8 insertions(+), 169 deletions(-)

diff --git a/tests/Frontend/e2e/AdminServersView.cy.js b/tests/Frontend/e2e/AdminServersView.cy.js
index 7e445c051..bdd5eb105 100644
--- a/tests/Frontend/e2e/AdminServersView.cy.js
+++ b/tests/Frontend/e2e/AdminServersView.cy.js
@@ -218,75 +218,7 @@ describe("Admin servers view", function () {
     cy.get('[data-test="servers-delete-button"]').should("not.exist");
     cy.get('[data-test="servers-save-button"]').should("not.exist");
 
-    // Check that server data is shown correctly
-    cy.get('[data-test="name-field"]')
-      .should("be.visible")
-      .and("include.text", "app.model_name")
-      .within(() => {
-        cy.get("#name").should("have.value", "Server 01").and("be.disabled");
-      });
-
-    cy.get('[data-test="description-field"]')
-      .should("be.visible")
-      .and("include.text", "app.description")
-      .within(() => {
-        cy.get("#description")
-          .should("have.value", "Testserver 01")
-          .and("be.disabled");
-      });
-
-    cy.get('[data-test="version-field"]')
-      .should("be.visible")
-      .and("include.text", "admin.servers.version")
-      .within(() => {
-        cy.get("#version").should("have.value", "2.4.5").and("be.disabled");
-      });
-
-    cy.get('[data-test="base-url-field"]')
-      .should("be.visible")
-      .and("include.text", "admin.servers.base_url")
-      .within(() => {
-        cy.get("#base_url")
-          .should("have.value", "https://localhost/bigbluebutton")
-          .and("be.disabled");
-      });
-
-    cy.get('[data-test="secret-field"]')
-      .should("be.visible")
-      .and("include.text", "admin.servers.secret")
-      .within(() => {
-        cy.get("#secret").should("have.value", "123456789").and("be.disabled");
-      });
-
-    cy.get('[data-test="strength-field"]')
-      .should("be.visible")
-      .and("include.text", "admin.servers.strength")
-      .and("include.text", "admin.servers.strength_description")
-      .within(() => {
-        cy.get('[data-test="strength-rating"]').should(
-          "have.class",
-          "p-disabled",
-        );
-
-        cy.get('[data-test="strength-rating-option"]').should(
-          "have.length",
-          10,
-        );
-
-        // Check that correct options are active
-        for (let i = 0; i < 2; i++) {
-          cy.get('[data-test="strength-rating-option"]')
-            .eq(i)
-            .should("have.attr", "data-p-active", "true");
-        }
-
-        for (let i = 2; i < 10; i++) {
-          cy.get('[data-test="strength-rating-option"]')
-            .eq(i)
-            .should("have.attr", "data-p-active", "false");
-        }
-      });
-
+    // Check that changed fields are shown correctly
     cy.get('[data-test="status-field"]')
       .should("be.visible")
       .and("include.text", "admin.servers.status")
@@ -314,37 +246,11 @@ describe("Admin servers view", function () {
           .and("not.be.disabled");
       });
 
-    cy.get('[data-test="meeting-count-field"]')
-      .should("be.visible")
-      .and("include.text", "admin.servers.meeting_count")
-      .and("include.text", "admin.servers.meeting_description")
-      .within(() => {
-        cy.get("#meetingCount").should("have.value", "3").and("be.disabled");
-      });
-
-    cy.get('[data-test="own-meeting-count-field"]')
-      .should("be.visible")
-      .and("include.text", "admin.servers.own_meeting_count")
-      .and("include.text", "admin.servers.own_meeting_description")
-      .within(() => {
-        cy.get("#ownMeetingCount").should("have.value", "2").and("be.disabled");
-      });
-
-    cy.get('[data-test="participant-count-field"]')
-      .should("be.visible")
-      .and("include.text", "admin.servers.participant_count")
-      .within(() => {
-        cy.get("#participantCount")
-          .should("have.value", "14")
-          .and("be.disabled");
-      });
-
-    cy.get('[data-test="video-count-field"]')
-      .should("be.visible")
-      .and("include.text", "admin.servers.video_count")
-      .within(() => {
-        cy.get("#videoCount").should("have.value", "7").and("be.disabled");
-      });
+    // Check that additional fields are shown
+    cy.get('[data-test="meeting-count-field"]').should("be.visible");
+    cy.get('[data-test="own-meeting-count-field"]').should("be.visible");
+    cy.get('[data-test="participant-count-field"]').should("be.visible");
+    cy.get('[data-test="video-count-field"]').should("be.visible");
 
     // Check that panic button is hidden (missing permissions)
     cy.get('[data-test="servers-panic-button"]').should("not.exist");
@@ -371,75 +277,7 @@ describe("Admin servers view", function () {
     cy.get('[data-test="servers-delete-button"]').should("not.exist");
     cy.get('[data-test="servers-save-button"]').should("not.exist");
 
-    // Check that server data is shown correctly
-    cy.get('[data-test="name-field"]')
-      .should("be.visible")
-      .and("include.text", "app.model_name")
-      .within(() => {
-        cy.get("#name").should("have.value", "Server 01").and("be.disabled");
-      });
-
-    cy.get('[data-test="description-field"]')
-      .should("be.visible")
-      .and("include.text", "app.description")
-      .within(() => {
-        cy.get("#description")
-          .should("have.value", "Testserver 01")
-          .and("be.disabled");
-      });
-
-    cy.get('[data-test="version-field"]')
-      .should("be.visible")
-      .and("include.text", "admin.servers.version")
-      .within(() => {
-        cy.get("#version").should("have.value", "2.4.5").and("be.disabled");
-      });
-
-    cy.get('[data-test="base-url-field"]')
-      .should("be.visible")
-      .and("include.text", "admin.servers.base_url")
-      .within(() => {
-        cy.get("#base_url")
-          .should("have.value", "https://localhost/bigbluebutton")
-          .and("be.disabled");
-      });
-
-    cy.get('[data-test="secret-field"]')
-      .should("be.visible")
-      .and("include.text", "admin.servers.secret")
-      .within(() => {
-        cy.get("#secret").should("have.value", "123456789").and("be.disabled");
-      });
-
-    cy.get('[data-test="strength-field"]')
-      .should("be.visible")
-      .and("include.text", "admin.servers.strength")
-      .and("include.text", "admin.servers.strength_description")
-      .within(() => {
-        cy.get('[data-test="strength-rating"]').should(
-          "have.class",
-          "p-disabled",
-        );
-
-        cy.get('[data-test="strength-rating-option"]').should(
-          "have.length",
-          10,
-        );
-
-        // Check that correct options are active
-        for (let i = 0; i < 2; i++) {
-          cy.get('[data-test="strength-rating-option"]')
-            .eq(i)
-            .should("have.attr", "data-p-active", "true");
-        }
-
-        for (let i = 2; i < 10; i++) {
-          cy.get('[data-test="strength-rating-option"]')
-            .eq(i)
-            .should("have.attr", "data-p-active", "false");
-        }
-      });
-
+    // Check that changed fields are shown correctly
     cy.get('[data-test="status-field"]')
       .should("be.visible")
       .and("include.text", "admin.servers.status")
@@ -454,6 +292,7 @@ describe("Admin servers view", function () {
             );
           });
       });
+
     cy.get('[data-test="health-status-field"]')
       .should("be.visible")
       .and("include.text", "admin.servers.connection")

From ce0497b5a95a08321c95d885e243c06b3ac04960 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:14:05 +0100
Subject: [PATCH 19/79] Fix overlays not shown after loading error

---
 resources/js/views/AdminServerPoolsView.vue | 2 +-
 resources/js/views/AdminServersView.vue     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/views/AdminServerPoolsView.vue b/resources/js/views/AdminServerPoolsView.vue
index 425d7a883..19620f853 100644
--- a/resources/js/views/AdminServerPoolsView.vue
+++ b/resources/js/views/AdminServerPoolsView.vue
@@ -30,7 +30,7 @@
       </div>
     </div>
 
-    <OverlayComponent :show="isBusy">
+    <OverlayComponent :show="isBusy || modelLoadingError">
       <template #overlay>
         <LoadingRetryButton
           :error="modelLoadingError"
diff --git a/resources/js/views/AdminServersView.vue b/resources/js/views/AdminServersView.vue
index 2ef6d4964..8cad65e21 100644
--- a/resources/js/views/AdminServersView.vue
+++ b/resources/js/views/AdminServersView.vue
@@ -29,7 +29,7 @@
       </div>
     </div>
 
-    <OverlayComponent :show="isBusy">
+    <OverlayComponent :show="isBusy || modelLoadingError">
       <template #overlay>
         <LoadingRetryButton
           :error="modelLoadingError"

From 55c44c501ba54be21296ddf50772ac285806203c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:23:11 +0100
Subject: [PATCH 20/79] Fix search not disabled during loading (index pages)

---
 resources/js/views/AdminRolesIndex.vue       | 2 ++
 resources/js/views/AdminRoomTypesIndex.vue   | 2 ++
 resources/js/views/AdminServerPoolsIndex.vue | 2 ++
 resources/js/views/AdminServersIndex.vue     | 2 ++
 4 files changed, 8 insertions(+)

diff --git a/resources/js/views/AdminRolesIndex.vue b/resources/js/views/AdminRolesIndex.vue
index 2946d536b..6a16366ea 100644
--- a/resources/js/views/AdminRolesIndex.vue
+++ b/resources/js/views/AdminRolesIndex.vue
@@ -5,11 +5,13 @@
         <InputGroup>
           <InputText
             v-model="filter"
+            :disabled="isBusy"
             :placeholder="$t('app.search')"
             @keyup.enter="loadData(1)"
           />
           <Button
             v-tooltip="$t('app.search')"
+            :disabled="isBusy"
             :aria-label="$t('app.search')"
             severity="primary"
             icon="fa-solid fa-magnifying-glass"
diff --git a/resources/js/views/AdminRoomTypesIndex.vue b/resources/js/views/AdminRoomTypesIndex.vue
index 9db8862e4..63ec93d8d 100644
--- a/resources/js/views/AdminRoomTypesIndex.vue
+++ b/resources/js/views/AdminRoomTypesIndex.vue
@@ -5,11 +5,13 @@
         <InputGroup>
           <InputText
             v-model="nameSearch"
+            :disabled="isBusy"
             :placeholder="$t('app.search')"
             @keyup.enter="filters['name'].value = nameSearch"
           />
           <Button
             v-tooltip="$t('app.search')"
+            :disabled="isBusy"
             :aria-label="$t('app.search')"
             icon="fa-solid fa-magnifying-glass"
             severity="primary"
diff --git a/resources/js/views/AdminServerPoolsIndex.vue b/resources/js/views/AdminServerPoolsIndex.vue
index 5124dee7a..ed28cf2f6 100644
--- a/resources/js/views/AdminServerPoolsIndex.vue
+++ b/resources/js/views/AdminServerPoolsIndex.vue
@@ -5,11 +5,13 @@
         <InputGroup>
           <InputText
             v-model="filter"
+            :disabled="isBusy"
             :placeholder="$t('app.search')"
             @keyup.enter="loadData(1)"
           />
           <Button
             v-tooltip="$t('app.search')"
+            :disabled="isBusy"
             :aria-label="$t('app.search')"
             severity="primary"
             icon="fa-solid fa-magnifying-glass"
diff --git a/resources/js/views/AdminServersIndex.vue b/resources/js/views/AdminServersIndex.vue
index d896d736d..a5c29a9a2 100644
--- a/resources/js/views/AdminServersIndex.vue
+++ b/resources/js/views/AdminServersIndex.vue
@@ -5,11 +5,13 @@
         <InputGroup>
           <InputText
             v-model="filter"
+            :disabled="isBusy"
             :placeholder="$t('app.search')"
             @keyup.enter="loadData(1, false)"
           />
           <Button
             v-tooltip="$t('app.search')"
+            :disabled="isBusy"
             :aria-label="$t('app.search')"
             icon="fa-solid fa-magnifying-glass"
             severity="primary"

From 7de6e89c4d08551197e2c2d97bae74e52570db8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 16 Dec 2024 09:34:31 +0100
Subject: [PATCH 21/79] Fix dialog buttons not disabled correctly during
 actions on admin pages

---
 resources/js/components/SettingsRolesDeleteButton.vue        | 1 +
 resources/js/components/SettingsRoomTypesDeleteButton.vue    | 1 +
 resources/js/components/SettingsServerPoolsDeleteButton.vue  | 1 +
 resources/js/components/SettingsServersDeleteButton.vue      | 1 +
 resources/js/components/SettingsUsersDeleteButton.vue        | 1 +
 resources/js/components/SettingsUsersResetPasswordButton.vue | 1 +
 6 files changed, 6 insertions(+)

diff --git a/resources/js/components/SettingsRolesDeleteButton.vue b/resources/js/components/SettingsRolesDeleteButton.vue
index 24e1a167f..18fddf9a5 100644
--- a/resources/js/components/SettingsRolesDeleteButton.vue
+++ b/resources/js/components/SettingsRolesDeleteButton.vue
@@ -25,6 +25,7 @@
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
         @click="modalVisible = false"
       />
diff --git a/resources/js/components/SettingsRoomTypesDeleteButton.vue b/resources/js/components/SettingsRoomTypesDeleteButton.vue
index 9eaa96204..bcbcbcd42 100644
--- a/resources/js/components/SettingsRoomTypesDeleteButton.vue
+++ b/resources/js/components/SettingsRoomTypesDeleteButton.vue
@@ -61,6 +61,7 @@
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
         @click="modalVisible = false"
       />
diff --git a/resources/js/components/SettingsServerPoolsDeleteButton.vue b/resources/js/components/SettingsServerPoolsDeleteButton.vue
index 66b5df7ae..d81caf2fa 100644
--- a/resources/js/components/SettingsServerPoolsDeleteButton.vue
+++ b/resources/js/components/SettingsServerPoolsDeleteButton.vue
@@ -42,6 +42,7 @@
     <template v-if="deleteFailedRoomTypes == null" #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
         @click="modalVisible = false"
       />
diff --git a/resources/js/components/SettingsServersDeleteButton.vue b/resources/js/components/SettingsServersDeleteButton.vue
index a48968165..93c15728c 100644
--- a/resources/js/components/SettingsServersDeleteButton.vue
+++ b/resources/js/components/SettingsServersDeleteButton.vue
@@ -23,6 +23,7 @@
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
         @click="modalVisible = false"
       />
diff --git a/resources/js/components/SettingsUsersDeleteButton.vue b/resources/js/components/SettingsUsersDeleteButton.vue
index 46f6aa725..73e040e54 100644
--- a/resources/js/components/SettingsUsersDeleteButton.vue
+++ b/resources/js/components/SettingsUsersDeleteButton.vue
@@ -39,6 +39,7 @@
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
         @click="modalVisible = false"
       />
diff --git a/resources/js/components/SettingsUsersResetPasswordButton.vue b/resources/js/components/SettingsUsersResetPasswordButton.vue
index bee1b1139..c3a4110b8 100644
--- a/resources/js/components/SettingsUsersResetPasswordButton.vue
+++ b/resources/js/components/SettingsUsersResetPasswordButton.vue
@@ -42,6 +42,7 @@
       <Button
         :label="$t('app.no')"
         severity="secondary"
+        :disabled="isBusy"
         @click="modalVisible = false"
       />
       <Button

From fa6a61cafbfeaf13178b433228cc235b2936bfcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 16 Dec 2024 16:17:48 +0100
Subject: [PATCH 22/79] Fix add server pool button visibility/permission

---
 resources/js/views/AdminServerPoolsIndex.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/views/AdminServerPoolsIndex.vue b/resources/js/views/AdminServerPoolsIndex.vue
index ed28cf2f6..0614efaa4 100644
--- a/resources/js/views/AdminServerPoolsIndex.vue
+++ b/resources/js/views/AdminServerPoolsIndex.vue
@@ -20,7 +20,7 @@
         </InputGroup>
       </div>
       <Button
-        v-if="userPermissions.can('create', 'ServerPolicy')"
+        v-if="userPermissions.can('create', 'ServerPoolPolicy')"
         v-tooltip="$t('admin.server_pools.new')"
         as="router-link"
         icon="fa-solid fa-plus"

From 8fe0961b82b883e88a430d6b28505ca157aae01e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 16 Dec 2024 09:15:41 +0100
Subject: [PATCH 23/79] Start adding AdminServerPools tests (index)

---
 .../SettingsServerPoolsDeleteButton.vue       |  11 +
 resources/js/views/AdminServerPoolsIndex.vue  |  27 +-
 resources/js/views/AdminServerPoolsView.vue   |  19 +-
 .../Frontend/e2e/AdminServerPoolsIndex.cy.js  | 963 ++++++++++++++++++
 ...minServerPoolsIndexServerPoolActions.cy.js | 218 ++++
 tests/Frontend/e2e/AdminServersIndex.cy.js    |  56 +-
 .../e2e/AdminServersIndexServerActions.cy.js  |   6 +-
 .../e2e/AdminServersViewServerActions.cy.js   |   2 +-
 tests/Frontend/e2e/AdminUsersIndex.cy.js      |  26 +-
 .../e2e/AdminUsersIndexUserActions.cy.js      |   4 +-
 .../e2e/AdminUsersViewUserActions.cy.js       |   4 +-
 tests/Frontend/fixtures/serverPools.json      |  29 +
 tests/Frontend/fixtures/servers.json          |   7 -
 .../support/commands/interceptCommands.js     |  12 +
 14 files changed, 1334 insertions(+), 50 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
 create mode 100644 tests/Frontend/e2e/AdminServerPoolsIndexServerPoolActions.cy.js
 create mode 100644 tests/Frontend/fixtures/serverPools.json

diff --git a/resources/js/components/SettingsServerPoolsDeleteButton.vue b/resources/js/components/SettingsServerPoolsDeleteButton.vue
index 66b5df7ae..ae9e03971 100644
--- a/resources/js/components/SettingsServerPoolsDeleteButton.vue
+++ b/resources/js/components/SettingsServerPoolsDeleteButton.vue
@@ -5,6 +5,7 @@
     :disabled="isBusy"
     icon="fa-solid fa-trash"
     severity="danger"
+    data-test="server-pools-delete-button"
     @click="showModal"
   />
 
@@ -18,6 +19,14 @@
     :header="$t('admin.server_pools.delete.title')"
     :style="{ width: '500px' }"
     modal
+    data-test="server-pools-delete-dialog"
+    :pt="{
+      pcCloseButton: {
+        root: {
+          'data-test': 'dialog-header-close-button',
+        },
+      },
+    }"
   >
     <span>
       {{ $t("admin.server_pools.delete.confirm", { name: props.name }) }}
@@ -43,12 +52,14 @@
       <Button
         :label="$t('app.no')"
         severity="secondary"
+        data-test="dialog-cancel-button"
         @click="modalVisible = false"
       />
       <Button
         :label="$t('app.yes')"
         :loading="isBusy"
         severity="danger"
+        data-test="dialog-continue-button"
         @click="deleteServerPool"
       />
     </template>
diff --git a/resources/js/views/AdminServerPoolsIndex.vue b/resources/js/views/AdminServerPoolsIndex.vue
index 5124dee7a..c8270730a 100644
--- a/resources/js/views/AdminServerPoolsIndex.vue
+++ b/resources/js/views/AdminServerPoolsIndex.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="mb-6 flex flex-col justify-between md:flex-row">
       <div>
-        <InputGroup>
+        <InputGroup data-test="server-pool-search">
           <InputText
             v-model="filter"
             :placeholder="$t('app.search')"
@@ -24,6 +24,7 @@
         icon="fa-solid fa-plus"
         :aria-label="$t('admin.server_pools.new')"
         :to="{ name: 'admin.server_pools.new' }"
+        data-test="server-pools-add-button"
       />
     </div>
 
@@ -44,6 +45,28 @@
       striped-rows
       :pt="{
         table: 'table-auto lg:table-fixed',
+        bodyRow: {
+          'data-test': 'server-pool-item',
+        },
+        mask: {
+          'data-test': 'overlay',
+        },
+        column: {
+          bodyCell: {
+            'data-test': 'server-pool-item-cell',
+          },
+          headerCell: {
+            'data-test': 'server-pool-header-cell',
+          },
+        },
+        pcPaginator: {
+          page: {
+            'data-test': 'paginator-page',
+          },
+          next: {
+            'data-test': 'paginator-next-button',
+          },
+        },
       }"
       @update:first="paginator.setFirst($event)"
       @page="onPage"
@@ -95,6 +118,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-eye"
+              data-test="server-pools-view-button"
             />
             <Button
               v-if="userPermissions.can('update', slotProps.data)"
@@ -112,6 +136,7 @@
               }"
               severity="info"
               icon="fa-solid fa-edit"
+              data-test="server-pools-edit-button"
             />
             <SettingsServerPoolsDeleteButton
               v-if="userPermissions.can('delete', slotProps.data)"
diff --git a/resources/js/views/AdminServerPoolsView.vue b/resources/js/views/AdminServerPoolsView.vue
index f3a5b5a32..e1f4c1eb0 100644
--- a/resources/js/views/AdminServerPoolsView.vue
+++ b/resources/js/views/AdminServerPoolsView.vue
@@ -10,6 +10,7 @@
           severity="secondary"
           :label="$t('app.cancel_editing')"
           icon="fa-solid fa-times"
+          data-test="server-pools-cancel-edit-button"
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', model)"
@@ -19,6 +20,7 @@
           severity="info"
           icon="fa-solid fa-edit"
           :label="$t('app.edit')"
+          data-test="server-pools-edit-button"
         />
         <SettingsServerPoolsDeleteButton
           v-if="userPermissions.can('delete', model)"
@@ -43,7 +45,7 @@
         class="flex flex-col gap-4"
         @submit.prevent="saveServerPool"
       >
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="name-field">
           <label for="name" class="col-span-12 md:col-span-4 md:mb-0">{{
             $t("app.model_name")
           }}</label>
@@ -59,7 +61,10 @@
             <FormError :errors="formErrors.fieldError('name')" />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="description-field"
+        >
           <label for="description" class="col-span-12 md:col-span-4 md:mb-0">{{
             $t("app.description")
           }}</label>
@@ -75,7 +80,7 @@
             <FormError :errors="formErrors.fieldError('description')" />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="server-field">
           <label id="servers-label" class="col-span-12 md:col-span-4 md:mb-0">{{
             $t("app.servers")
           }}</label>
@@ -84,6 +89,7 @@
               <multiselect
                 ref="serversMultiselectRef"
                 v-model="model.servers"
+                data-test="server-dropdown"
                 aria-labelledby="servers-label"
                 :placeholder="$t('admin.server_pools.select_servers')"
                 track-by="id"
@@ -112,7 +118,7 @@
                   {{ option.name }}
                 </template>
                 <template #tag="{ option, remove }">
-                  <Chip :label="option.name">
+                  <Chip :label="option.name" data-test="server-chip">
                     <span>{{ option.name }}</span>
                     <Button
                       v-if="!viewOnly"
@@ -124,6 +130,7 @@
                           name: option.name,
                         })
                       "
+                      data-test="remove-server-button"
                       @click="remove(option)"
                     />
                   </Chip>
@@ -135,6 +142,7 @@
                     severity="secondary"
                     icon="fa-solid fa-arrow-left"
                     :label="$t('app.previous_page')"
+                    data-test="previous-page-button"
                     @click="loadServers(Math.max(1, serversCurrentPage - 1))"
                   />
                   <Button
@@ -143,6 +151,7 @@
                     severity="secondary"
                     icon="fa-solid fa-arrow-right"
                     :label="$t('app.next_page')"
+                    data-test="next-page-button"
                     @click="loadServers(serversCurrentPage + 1)"
                   />
                 </template>
@@ -152,6 +161,7 @@
                 outlined
                 severity="secondary"
                 icon="fa-solid fa-sync"
+                data-test="servers-reload-button"
                 @click="loadServers(serversCurrentPage)"
               />
             </InputGroup>
@@ -170,6 +180,7 @@
               type="submit"
               icon="fa-solid fa-save"
               :label="$t('app.save')"
+              data-test="server-pools-save-button"
             />
           </div>
         </div>
diff --git a/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
new file mode 100644
index 000000000..6a5ff1992
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
@@ -0,0 +1,963 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin server pools index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServerPoolsIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "serverPools.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/server_pools");
+  });
+
+  it("visit with user without permission to view server pools", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+    cy.visit("/admin/server_pools");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/servers");
+    cy.get("h1").should("be.visible").and("contain", "home.title");
+  });
+
+  it("load server pools", function () {
+    const serverPoolRequest = interceptIndefinitely(
+      "GET",
+      "api/vi/serverPools*",
+      { fixture: "serverPools.json" },
+      "serverPoolsRequest",
+    );
+
+    cy.visit("/admin/server_pools");
+
+    // Test loading
+    cy.get('[data-test="server-pool-search"]').within(() => {
+      cy.get("input").should("be.visible").and("be.disabled");
+      cy.get("button").should("be.visible").and("be.disabled");
+    });
+
+    cy.get('[data-test="server-pools-add-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        serverPoolRequest.sendResponse();
+      });
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that loading is over
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-search"]')
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("be.visible").and("not.be.disabled");
+        cy.get("button").should("be.visible").and("not.be.disabled");
+      });
+
+    cy.get('[data-test="server-pools-add-button"]').should("not.exist");
+
+    // Check that headers are displayed correctly
+    cy.get('[data-test="server-pool-header-cell"]').should("have.length", 3);
+
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name");
+
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.text", "admin.server_pools.server_count");
+
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(2)
+      .should("have.text", "app.actions");
+
+    // Check that server pools are displayed correctly
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-pool-item-cell"]')
+          .eq(0)
+          .should("have.text", "Test");
+        cy.get('[data-test="server-pool-item-cell"]')
+          .eq(1)
+          .should("have.text", "2");
+        cy.get('[data-test="server-pool-item-cell"]')
+          .eq(2)
+          .within(() => {
+            cy.get('[data-test="server-pools-view-button"]').should(
+              "not.exist",
+            );
+            cy.get('[data-test="server-pools-edit-button"]').should(
+              "not.exist",
+            );
+            cy.get('[data-test="server-pools-delete-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="server-pool-item-cell"]')
+          .eq(0)
+          .should("have.text", "Production");
+        cy.get('[data-test="server-pool-item-cell"]')
+          .eq(1)
+          .should("have.text", "1");
+        cy.get('[data-test="server-pool-item-cell"]')
+          .eq(2)
+          .within(() => {
+            cy.get('[data-test="server-pools-view-button"]').should(
+              "not.exist",
+            );
+            cy.get('[data-test="server-pools-edit-button"]').should(
+              "not.exist",
+            );
+            cy.get('[data-test="server-pools-delete-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+  });
+
+  it("load server pools errors", function () {
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolsRequest");
+
+    cy.visit("/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="server-pool-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("include.text", "app.reload")
+      .click();
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check if server pool is shown and contains the correct data
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Test");
+
+    // Switch to next page with general error
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolsRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="server-pool-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("include.text", "app.reload")
+      .click();
+
+    // Check that page is reset
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check if server pool is shown and contains the correct data
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Test");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page with 401 error
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 401,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolsRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Reload page with 401 error
+    cy.visit("/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load server pools page out of bounds", function () {
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest");
+
+    // Switch to next page but respond with no server pools on second page
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = [];
+      serverPools.meta.current_page = 2;
+      serverPools.meta.from = null;
+      serverPools.meta.per_page = 2;
+      serverPools.meta.to = null;
+
+      const emptyServerPoolsRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/serverPools*",
+        { body: serverPools },
+        "serverPoolsRequest",
+      );
+
+      cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        fixture: "serverPools.json",
+      })
+        .as("serverPoolsRequest")
+        .then(() => {
+          emptyServerPoolsRequest.sendResponse();
+        });
+    });
+
+    // Wait for first request and check that page 8is still the same
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Wait for second request and check that page is reset
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that pagination is shown correctly
+    cy.get('[data-test="paginator-page"]').should("have.length", 1);
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("server pools search", function () {
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query.name).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check with no server pools found for this search query
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = [];
+      serverPools.meta.from = null;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = null;
+      serverPools.meta.total = 0;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-search"] > input').should("have.value", "");
+    cy.get('[data-test="server-pool-search"] > input').type("Test");
+    cy.get('[data-test="server-pool-search"] > button').click();
+
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Test");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no server pools are displayed
+    cy.contains("admin.server_pools.no_data_filtered").should("be.visible");
+    cy.get('[data-test="server-pool-item"]').should("have.length", 0);
+
+    // Check with no server pools available
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = [];
+      serverPools.meta.from = null;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = null;
+      serverPools.meta.total = 0;
+      serverPools.meta.total_no_filter = 0;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-search"] > input').clear();
+    cy.get('[data-test="server-pool-search"] > input').type("Test2");
+    cy.get('[data-test="server-pool-search"] > input').type("{enter}");
+
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Test2");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no server pools are displayed
+    cy.contains("admin.server_pools.no_data").should("be.visible");
+    cy.get('[data-test="server-pool-item"]').should("have.length", 0);
+
+    // Check with 2 server pools on 2 pages
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-search"] > input').clear();
+    cy.get('[data-test="server-pool-search"] > input').type("T");
+    cy.get('[data-test="server-pool-search"] > button').click();
+
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("T");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct server pool is shown
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Test");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(1, 2);
+      serverPools.meta.current_page = 2;
+      serverPools.meta.from = 2;
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    // Click on button for next page (eq(1) needed because there are two paginator components
+    // (first one for small devices second one for larger devices))
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check if search query stays the same after changing the page
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("T");
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    cy.get('[data-test="server-pool-search"] >input').should("have.value", "T");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that correct server pool is shown
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Production");
+
+    // Change search query and make sure that the page is reset
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-search"] > input').type("e");
+    cy.get('[data-test="server-pool-search"] > button').click();
+
+    // Check that server pools are loaded with the page reset to the first page
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Te");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("sort server pools", function () {
+    cy.visit("admin/server_pools");
+
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "name",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct columns are sortable and correct sorting type is shown
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "true");
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.text", "admin.server_pools.server_count")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(2)
+      .should("have.text", "app.actions")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+
+    // Change sorting type and respond with 2 servers on 2 different pages
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-header-cell"]').eq(1).click();
+
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "servers_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true");
+
+    // Check that correct server pool is shown
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Test");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(1, 2);
+      serverPools.meta.current_page = 2;
+      serverPools.meta.from = 2;
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "servers_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct server pool is shown
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Production");
+
+    // Change sorting direction and make sure that the page is reset
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-header-cell"]').eq(1).click();
+
+    // Check that server pools are loaded with the page reset to the first page
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "servers_count",
+        sort_direction: "desc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct server pool is shown
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Test");
+
+    // Switch to next page
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(1, 2);
+      serverPools.meta.current_page = 2;
+      serverPools.meta.from = 2;
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "servers_count",
+        sort_direction: "desc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct server pool is shown
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Production");
+
+    // Change sorting and make sure that the page is reset
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-header-cell"]').eq(0).click();
+
+    // Check that server pools are loaded with the page reset to the first page
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "name",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+  });
+
+  it("check button visibility with view permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.view",
+        "serverPools.viewAny",
+        "serverPools.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pools-add-button"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1");
+        cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+        cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2");
+        cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+        cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.view",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pools-add-button"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1");
+        cy.get('[data-test="server-pools-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1/edit");
+        cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2");
+        cy.get('[data-test="server-pools-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2/edit");
+        cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with add permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.view",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pools-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/server_pools/new");
+
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1");
+        cy.get('[data-test="server-pools-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1/edit");
+        cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2");
+        cy.get('[data-test="server-pools-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2/edit");
+        cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.view",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+        "serverPools.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pools-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/server_pools/new");
+
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1");
+        cy.get('[data-test="server-pools-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1/edit");
+        cy.get('[data-test="server-pools-delete-button"]').should("be.visible");
+      });
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2");
+        cy.get('[data-test="server-pools-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2/edit");
+        cy.get('[data-test="server-pools-delete-button"]').should("be.visible");
+      });
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServerPoolsIndexServerPoolActions.cy.js b/tests/Frontend/e2e/AdminServerPoolsIndexServerPoolActions.cy.js
new file mode 100644
index 000000000..0d0dac91d
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServerPoolsIndexServerPoolActions.cy.js
@@ -0,0 +1,218 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin server pools index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServerPoolsIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.view",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+        "serverPools.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete server pool", function () {
+    cy.visit("/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .find('[data-test="server-pools-delete-button"]')
+      .click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="server-pools-delete-dialog"]')
+      .should("include.text", "admin.server_pools.delete.title")
+      .should(
+        "include.text",
+        'admin.server_pools.delete.confirm_{"name":"Test"}',
+      );
+
+    // Confirm delete of server pool
+    const deleteServerPoolRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/serverPools/1",
+      { statusCode: 204 },
+      "deleteServerPoolRequest",
+    );
+
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(1, 2);
+      serverPools.meta.to = 1;
+      serverPools.meta.total = 1;
+      serverPools.meta.total_no_filter = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .and("be.disabled");
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteServerPoolRequest.sendResponse();
+      });
+
+    cy.wait("@deleteServerPoolRequest");
+    cy.wait("@serverPoolsRequest");
+
+    // Check that server pool was deleted
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+
+    // Check that dialog is closed
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    // Reopen dialog for different user
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .find('[data-test="server-pools-delete-button"]')
+      .click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="server-pools-delete-dialog"]')
+      .should("include.text", "admin.server_pools.delete.title")
+      .should(
+        "include.text",
+        'admin.server_pools.delete.confirm_{"name":"Production"}',
+      );
+
+    // Cancel delete of server pool
+    cy.get('[data-test="dialog-cancel-button"]').click();
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+  });
+
+  it("delete server pool errors", function () {
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .find('[data-test="server-pools-delete-button"]')
+      .click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check room type attached (428 error)
+    cy.intercept("DELETE", "api/v1/serverPools/1", {
+      statusCode: 428,
+      body: {
+        error: 428,
+        message: "app.errors.server_pool_delete_failed",
+        room_types: [
+          {
+            id: 1,
+            name: "Lecture",
+            description: null,
+            color: "#80BA27",
+            model_name: "RoomType",
+            updated_at: "2021-01-12T14:35:11.000000Z",
+          },
+          {
+            id: 2,
+            name: "Meeting",
+            description: null,
+            color: "#4a5c66",
+            model_name: "RoomType",
+            updated_at: "2021-01-12T14:35:11.000000Z",
+          },
+        ],
+      },
+    });
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check that error is shown correctly
+    cy.get('[data-test="server-pools-delete-dialog"]')
+      .should("include.text", "admin.server_pools.delete.failed")
+      .and("include.text", "Lecture")
+      .and("include.text", "Meeting");
+
+    // Check that action buttons are hidden
+    cy.get('[data-test="dialog-cancel-button"]').should("not.exist");
+    cy.get('[data-test="dialog-continue-button"]').should("not.exist");
+
+    // Close dialog
+    cy.get('[data-test="dialog-header-close-button"]').click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    // Open dialog again
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .find('[data-test="server-pools-delete-button"]')
+      .click();
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/serverPools/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteServerPoolRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerPoolRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/serverPools/1", {
+      statusCode: 401,
+    }).as("deleteServerPoolRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerPoolRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  // ToDo open add new server page
+  // ToDo open edit server page
+  // ToDo open view server page
+});
diff --git a/tests/Frontend/e2e/AdminServersIndex.cy.js b/tests/Frontend/e2e/AdminServersIndex.cy.js
index a020ac242..f70e28efd 100644
--- a/tests/Frontend/e2e/AdminServersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminServersIndex.cy.js
@@ -52,8 +52,8 @@ describe("Admin servers index", function () {
     cy.get('[data-test="server-search"]')
       .eq(0)
       .within(() => {
-        cy.get("input").should("be.disabled");
-        cy.get("button").should("be.disabled");
+        cy.get("input").should("be.visible").and("be.disabled");
+        cy.get("button").should("be.visible").and("be.disabled");
       });
 
     cy.get('[data-test="servers-reload-usage-button"]')
@@ -63,28 +63,34 @@ describe("Admin servers index", function () {
       "be.disabled",
     );
 
+    cy.get('[data-test="servers-add-button"]').should("not.exist");
+
+    cy.contains("admin.servers.usage_info").should("be.visible");
+
     cy.get('[data-test="overlay"]')
       .should("be.visible")
       .then(() => {
         serversRequest.sendResponse();
       });
 
-    cy.contains("admin.servers.usage_info").should("be.visible");
+    cy.wait("@serversRequest");
 
     // Check that loading is over
     cy.get('[data-test="overlay"]').should("not.exist");
 
     cy.get('[data-test="server-search"]').within(() => {
-      cy.get("input").should("not.be.disabled");
-      cy.get("button").should("not.be.disabled");
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
     });
 
-    cy.get('[data-test="servers-reload-usage-button"]').should(
-      "not.be.disabled",
-    );
-    cy.get('[data-test="servers-reload-no-usage-button"]').should(
-      "not.be.disabled",
-    );
+    cy.get('[data-test="servers-reload-usage-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="servers-reload-no-usage-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-add-button"]').should("not.exist");
 
     cy.contains("admin.servers.usage_info").should("be.visible");
 
@@ -322,8 +328,8 @@ describe("Admin servers index", function () {
     cy.get('[data-test="server-search"]')
       .eq(0)
       .within(() => {
-        cy.get("input").should("not.be.disabled");
-        cy.get("button").should("not.be.disabled");
+        cy.get("input").should("be.visible").and("not.be.disabled");
+        cy.get("button").should("be.visible").and("not.be.disabled");
       });
 
     cy.get('[data-test="servers-reload-usage-button"]').should(
@@ -394,8 +400,8 @@ describe("Admin servers index", function () {
     cy.get('[data-test="server-search"]')
       .eq(0)
       .within(() => {
-        cy.get("input").should("not.be.disabled");
-        cy.get("button").should("not.be.disabled");
+        cy.get("input").should("be.visible").and("not.be.disabled");
+        cy.get("button").should("be.visible").and("not.be.disabled");
       });
 
     cy.get('[data-test="servers-reload-usage-button"]').should(
@@ -539,6 +545,12 @@ describe("Admin servers index", function () {
         page: "1",
       });
     });
+
+    // Check that pagination is shown correctly
+    cy.get('[data-test="paginator-page"]').should("have.length", 1);
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
   });
 
   it("server search", function () {
@@ -590,7 +602,7 @@ describe("Admin servers index", function () {
       servers.meta.total = 0;
       servers.meta.total_no_filter = 0;
 
-      cy.intercept("GET", "api/v1/sertvers*", {
+      cy.intercept("GET", "api/v1/servers*", {
         statusCode: 200,
         body: servers,
       }).as("serversRequest");
@@ -644,7 +656,7 @@ describe("Admin servers index", function () {
       .eq(0)
       .should("include.text", "Server 01");
 
-    // Check that pagination shows the correct number of pages and switch to next page
+    // Check that pagination shows the correct number of pages
     cy.get('[data-test="paginator-page"]').should("have.length", 2);
 
     // Check that correct pagination is active
@@ -680,16 +692,16 @@ describe("Admin servers index", function () {
       });
     });
 
-    // Check that correct pagination is active
-    cy.get('[data-test="paginator-page"]')
-      .eq(1)
-      .should("have.attr", "data-p-active", "true");
-
     cy.get('[data-test="server-search"] > input').should(
       "have.value",
       "Server",
     );
 
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
     // Check that correct server is shown
     cy.get('[data-test="server-item"]').should("have.length", 1);
     cy.get('[data-test="server-item"]')
diff --git a/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js b/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js
index 06b4cfd11..6e27caece 100644
--- a/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js
+++ b/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js
@@ -78,7 +78,7 @@ describe("Admin servers index server actions", function () {
     // Check loading
     cy.get('[data-test="dialog-cancel-button"]')
       .should("have.text", "app.no")
-      .should("not.disabled");
+      .should("be.disabled");
     cy.get('[data-test="dialog-continue-button"]')
       .should("be.disabled")
       .then(() => {
@@ -88,7 +88,7 @@ describe("Admin servers index server actions", function () {
     cy.wait("@deleteServerRequest");
     cy.wait("@serversRequest");
 
-    // Check that user was deleted
+    // Check that server was deleted
     cy.get('[data-test="server-item"]').should("have.length", 3);
 
     // Check that dialog is closed
@@ -110,7 +110,7 @@ describe("Admin servers index server actions", function () {
         'admin.servers.delete.confirm_{"name":"Server 03"}',
       );
 
-    // Cancel delete of user
+    // Cancel delete of server
     cy.get('[data-test="dialog-cancel-button"]').click();
     cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
   });
diff --git a/tests/Frontend/e2e/AdminServersViewServerActions.cy.js b/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
index 7bbd93d19..e70b5bf38 100644
--- a/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
+++ b/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
@@ -75,7 +75,7 @@ describe("Admin servers view server actions", function () {
     // Check loading
     cy.get('[data-test="dialog-cancel-button"]')
       .should("have.text", "app.no")
-      .should("not.disabled");
+      .should("be.disabled");
     cy.get('[data-test="dialog-continue-button"]')
       .should("be.disabled")
       .then(() => {
diff --git a/tests/Frontend/e2e/AdminUsersIndex.cy.js b/tests/Frontend/e2e/AdminUsersIndex.cy.js
index 568ef0e15..366d39297 100644
--- a/tests/Frontend/e2e/AdminUsersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndex.cy.js
@@ -64,8 +64,8 @@ describe("Admin users index", function () {
     cy.get("[data-test=user-search]")
       .eq(0)
       .within(() => {
-        cy.get("input").should("be.disabled");
-        cy.get("button").should("be.disabled");
+        cy.get("input").should("be.visible").and("be.disabled");
+        cy.get("button").should("be.visible").and("be.disabled");
       });
 
     cy.get('[data-test="role-dropdown"]')
@@ -76,6 +76,8 @@ describe("Admin users index", function () {
       "multiselect--disabled",
     );
 
+    cy.get('[data-test="users-add-button"]').should("not.exist");
+
     cy.get('[data-test="overlay"]')
       .should("be.visible")
       .then(() => {
@@ -90,8 +92,8 @@ describe("Admin users index", function () {
     cy.get("[data-test=user-search]")
       .eq(0)
       .within(() => {
-        cy.get("input").should("not.be.disabled");
-        cy.get("button").should("not.be.disabled");
+        cy.get("input").should("be.visible").and("not.be.disabled");
+        cy.get("button").should("be.visible").and("not.be.disabled");
       });
 
     cy.get('[data-test="role-dropdown"]')
@@ -102,6 +104,8 @@ describe("Admin users index", function () {
       "multiselect--disabled",
     );
 
+    cy.get('[data-test="users-add-button"]').should("not.exist");
+
     // Check that headers are displayed correctly
     cy.get('[data-test="user-header-cell"]').should("have.length", 7);
 
@@ -256,8 +260,8 @@ describe("Admin users index", function () {
     cy.get("[data-test=user-search]")
       .eq(0)
       .within(() => {
-        cy.get("input").should("not.be.disabled");
-        cy.get("button").should("not.be.disabled");
+        cy.get("input").should("be.visible").and("not.be.disabled");
+        cy.get("button").should("be.visible").and("not.be.disabled");
       });
 
     cy.get('[data-test="role-dropdown"]')
@@ -324,8 +328,8 @@ describe("Admin users index", function () {
     cy.get("[data-test=user-search]")
       .eq(0)
       .within(() => {
-        cy.get("input").should("not.be.disabled");
-        cy.get("button").should("not.be.disabled");
+        cy.get("input").should("be.visible").and("not.be.disabled");
+        cy.get("button").should("be.visible").and("not.be.disabled");
       });
 
     cy.get('[data-test="role-dropdown"]')
@@ -466,6 +470,12 @@ describe("Admin users index", function () {
         page: "1",
       });
     });
+
+    // Check that pagination is shown correctly
+    cy.get('[data-test="paginator-page"]').should("have.length", 1);
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
   });
 
   it("load roles errors", function () {
diff --git a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
index 5ad37315e..2ce6964a3 100644
--- a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
@@ -81,7 +81,7 @@ describe("Admin users index user actions", function () {
     // Check loading
     cy.get('[data-test="dialog-cancel-button"]')
       .should("have.text", "app.no")
-      .should("not.disabled");
+      .should("be.disabled");
     cy.get('[data-test="dialog-continue-button"]')
       .should("be.disabled")
       .then(() => {
@@ -204,7 +204,7 @@ describe("Admin users index user actions", function () {
     // Check loading
     cy.get('[data-test="dialog-cancel-button"]')
       .should("have.text", "app.no")
-      .should("not.disabled");
+      .should("be.disabled");
     cy.get('[data-test="dialog-continue-button"]')
       .should("be.disabled")
       .then(() => {
diff --git a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
index e7529566c..e8fd6467e 100644
--- a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
+++ b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
@@ -76,7 +76,7 @@ describe("Admin users view user actions", function () {
     // Check loading
     cy.get('[data-test="dialog-cancel-button"]')
       .should("have.text", "app.no")
-      .should("not.disabled");
+      .should("be.disabled");
     cy.get('[data-test="dialog-continue-button"]')
       .should("be.disabled")
       .then(() => {
@@ -175,7 +175,7 @@ describe("Admin users view user actions", function () {
     // Check loading
     cy.get('[data-test="dialog-cancel-button"]')
       .should("have.text", "app.no")
-      .should("not.disabled");
+      .should("be.disabled");
     cy.get('[data-test="dialog-continue-button"]')
       .should("be.disabled")
       .then(() => {
diff --git a/tests/Frontend/fixtures/serverPools.json b/tests/Frontend/fixtures/serverPools.json
new file mode 100644
index 000000000..886f6db98
--- /dev/null
+++ b/tests/Frontend/fixtures/serverPools.json
@@ -0,0 +1,29 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "Test",
+      "description": "Pool for testing",
+      "servers_count": 2,
+      "model_name": "ServerPool",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    },
+    {
+      "id": 2,
+      "name": "Production",
+      "description": "Pool for production",
+      "servers_count": 1,
+      "model_name": "ServerPool",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    }
+  ],
+  "meta": {
+    "current_page": 1,
+    "from": 1,
+    "last_page": 1,
+    "per_page": 15,
+    "to": 2,
+    "total": 2,
+    "total_no_filter": 2
+  }
+}
diff --git a/tests/Frontend/fixtures/servers.json b/tests/Frontend/fixtures/servers.json
index 973e48f96..87a4acad7 100644
--- a/tests/Frontend/fixtures/servers.json
+++ b/tests/Frontend/fixtures/servers.json
@@ -69,17 +69,10 @@
       "updated_at": "2020-12-21T13:43:21.000000Z"
     }
   ],
-  "links": {
-    "first": "http://localhost/api/v1/servers?page=1",
-    "last": "http://localhost/api/v1/servers?page=1",
-    "prev": null,
-    "next": null
-  },
   "meta": {
     "current_page": 1,
     "from": 1,
     "last_page": 1,
-    "path": "http://localhost/api/v1/servers",
     "per_page": 15,
     "to": 2,
     "total": 4,
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index acb27cb27..a148c4033 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -251,3 +251,15 @@ Cypress.Commands.add("interceptAdminServersViewRequests", () => {
     fixture: "server.json",
   }).as("serverRequest");
 });
+
+/**
+ * Intercept all requests that are needed when visiting the admin server pools index page
+ * @memberof cy
+ * @method interceptAdminServerPoolsIndexRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminServerPoolsIndexRequests", () => {
+  cy.intercept("GET", "api/v1/serverPools*", {
+    fixture: "serverPools.json",
+  }).as("serverPoolsRequest");
+});

From d92b2982cc5a858b0fe7f132140f3f54caa061a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Tue, 17 Dec 2024 14:56:33 +0100
Subject: [PATCH 24/79] Continue adding AdminServerPools tests (index, view)

---
 .../Frontend/e2e/AdminServerPoolsIndex.cy.js  |   8 +-
 ...minServerPoolsIndexServerPoolActions.cy.js |  49 ++-
 tests/Frontend/e2e/AdminServerPoolsView.cy.js | 313 ++++++++++++++++++
 ...dminServerPoolsViewServerPoolActions.cy.js | 181 ++++++++++
 tests/Frontend/e2e/AdminServersNew.cy.js      |   5 +
 tests/Frontend/e2e/AdminServersView.cy.js     |   1 +
 tests/Frontend/e2e/AdminUsersView.cy.js       |  58 ++++
 tests/Frontend/fixtures/serverPool.json       |  46 +++
 .../support/commands/interceptCommands.js     |  28 ++
 9 files changed, 680 insertions(+), 9 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminServerPoolsView.cy.js
 create mode 100644 tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js
 create mode 100644 tests/Frontend/fixtures/serverPool.json

diff --git a/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
index 6a5ff1992..d97aec88d 100644
--- a/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
@@ -775,7 +775,7 @@ describe("Admin server pools index", function () {
     cy.fixture("currentUser.json").then((currentUser) => {
       currentUser.data.permissions = [
         "admin.view",
-        "servers.view",
+        "servers.viewAny",
         "serverPools.viewAny",
         "serverPools.view",
       ];
@@ -817,7 +817,7 @@ describe("Admin server pools index", function () {
     cy.fixture("currentUser.json").then((currentUser) => {
       currentUser.data.permissions = [
         "admin.view",
-        "servers.view",
+        "servers.viewAny",
         "serverPools.viewAny",
         "serverPools.view",
         "serverPools.update",
@@ -864,7 +864,7 @@ describe("Admin server pools index", function () {
     cy.fixture("currentUser.json").then((currentUser) => {
       currentUser.data.permissions = [
         "admin.view",
-        "servers.view",
+        "servers.viewAny",
         "serverPools.viewAny",
         "serverPools.view",
         "serverPools.update",
@@ -914,7 +914,7 @@ describe("Admin server pools index", function () {
     cy.fixture("currentUser.json").then((currentUser) => {
       currentUser.data.permissions = [
         "admin.view",
-        "servers.view",
+        "servers.viewAny",
         "serverPools.viewAny",
         "serverPools.view",
         "serverPools.update",
diff --git a/tests/Frontend/e2e/AdminServerPoolsIndexServerPoolActions.cy.js b/tests/Frontend/e2e/AdminServerPoolsIndexServerPoolActions.cy.js
index 0d0dac91d..b55176956 100644
--- a/tests/Frontend/e2e/AdminServerPoolsIndexServerPoolActions.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsIndexServerPoolActions.cy.js
@@ -1,6 +1,6 @@
 import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
 
-describe("Admin server pools index", function () {
+describe("Admin server pools index server pool actions", function () {
   beforeEach(function () {
     cy.init();
     cy.interceptAdminServerPoolsIndexRequests();
@@ -8,7 +8,7 @@ describe("Admin server pools index", function () {
     cy.fixture("currentUser.json").then((currentUser) => {
       currentUser.data.permissions = [
         "admin.view",
-        "servers.view",
+        "servers.viewAny",
         "serverPools.viewAny",
         "serverPools.view",
         "serverPools.update",
@@ -212,7 +212,46 @@ describe("Admin server pools index", function () {
     cy.checkToastMessage("app.flash.unauthenticated");
   });
 
-  // ToDo open add new server page
-  // ToDo open edit server page
-  // ToDo open view server page
+  it("open add new server pool page", function () {
+    cy.visit("/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.interceptAdminServerPoolsNewRequests();
+
+    cy.get('[data-test="server-pools-add-button"]').click();
+
+    cy.url().should("include", "/admin/server_pools/new");
+  });
+
+  it("open edit server pool page", function () {
+    cy.visit("/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.interceptAdminServerPoolsViewRequests();
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .find('[data-test="server-pools-edit-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/server_pools/1/edit");
+  });
+
+  it("open view server pool page", function () {
+    cy.visit("/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.interceptAdminServerPoolsViewRequests();
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .find('[data-test="server-pools-view-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/server_pools/1");
+    cy.url().should("not.include", "/edit");
+  });
 });
diff --git a/tests/Frontend/e2e/AdminServerPoolsView.cy.js b/tests/Frontend/e2e/AdminServerPoolsView.cy.js
new file mode 100644
index 000000000..fb04e7ac2
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServerPoolsView.cy.js
@@ -0,0 +1,313 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin server pools view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServerPoolsViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user tha is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/server_pools/1");
+  });
+
+  it("visit with user without permission to view server pools", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "serverPools.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools/1");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/servers/1");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check serverPoolView shown correctly", function () {
+    const serverPoolRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/serverPools/1",
+      { fixture: "serverPool.json" },
+      "serverPoolRequest",
+    );
+
+    cy.visit("/admin/server_pools/1");
+
+    // Check loading
+    cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-save-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        serverPoolRequest.sendResponse();
+      });
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that buttons are still hidden
+    cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-save-button"]').should("not.exist");
+
+    // Check that server pool data is shown correctly
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Test").and("be.disabled");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "Pool for testing")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="server-field"]')
+      .should("be.visible")
+      .and("include.text", "app.servers")
+      .within(() => {
+        cy.get('[data-test="server-dropdown"]')
+          .should("have.class", "multiselect--disabled")
+          .within(() => {
+            cy.get('[data-test="server-chip"]').should("have.length", 2);
+            cy.get('[data-test="server-chip"]')
+              .eq(0)
+              .should("include.text", "Server 01")
+              .find('[data-test="remove-server-button"]')
+              .should("not.exist");
+            cy.get('[data-test="server-chip"]')
+              .eq(1)
+              .should("include.text", "Server 02")
+              .find('[data-test="remove-server-button"]')
+              .should("not.exist");
+          });
+      });
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools/1");
+
+    cy.wait("@serverPoolRequest");
+
+    cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/server_pools/1/edit");
+    cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-save-button"]').should("not.exist");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+        "serverPools.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools/1");
+
+    cy.wait("@serverPoolRequest");
+
+    cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/server_pools/1/edit");
+    cy.get('[data-test="server-pools-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="server-pools-save-button"]').should("not.exist");
+  });
+
+  it("open view errors", function () {
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolRequest");
+
+    cy.visit("/admin/server_pools/1");
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 200,
+      fixture: "serverPool.json",
+    }).as("serverPoolRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // reload page with 404 errors
+    cy.interceptAdminServerPoolsIndexRequests();
+
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("serverPoolRequest");
+
+    cy.reload();
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/server_pools/1");
+    cy.url().should("include", "/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 401,
+    }).as("serverPoolRequest");
+
+    cy.visit("/admin/server_pools/1");
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/1");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load servers errors", function () {
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serversRequest");
+
+    cy.visit("/admin/server_pools/1");
+
+    cy.wait("@serverPoolRequest");
+
+    cy.wait("@serversRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    // Reload servers without errors
+    cy.intercept("GET", "api/v1/servers*", {
+      fixture: "servers.json",
+    }).as("serversRequest");
+
+    cy.get('[data-test="servers-reload-button"]').click();
+
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="servers-reload-button"]').should("not.exist");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 401,
+    }).as("serversRequest");
+
+    cy.reload();
+
+    cy.wait("@serverPoolRequest");
+
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/1");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js b/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js
new file mode 100644
index 000000000..981bbf360
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js
@@ -0,0 +1,181 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin server pools view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServerPoolsViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+        "serverPools.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete server pool", function () {
+    cy.visit("/admin/server_pools/1");
+
+    cy.wait("@serverPoolRequest");
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-pools-delete-button"]').click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="server-pools-delete-dialog"]')
+      .should("include.text", "admin.server_pools.delete.title")
+      .should(
+        "include.text",
+        'admin.server_pools.delete.confirm_{"name":"Test"}',
+      );
+
+    // Confirm delete of server pool
+    const deleteServerPoolRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/serverPools/1",
+      { statusCode: 204 },
+      "deleteServerPoolRequest",
+    );
+
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(1, 2);
+      serverPools.meta.to = 1;
+      serverPools.meta.total = 1;
+      serverPools.meta.total_no_filter = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .and("be.disabled");
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteServerPoolRequest.sendResponse();
+      });
+
+    cy.wait("@deleteServerPoolRequest");
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/server_pools/1");
+    cy.url().should("include", "/admin/server_pools");
+  });
+
+  it("delete server pool errors", function () {
+    cy.visit("/admin/server_pools/1");
+    cy.wait("@serverPoolRequest");
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-pools-delete-button"]').click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check room type attached (428 error)
+    cy.intercept("DELETE", "api/v1/serverPools/1", {
+      statusCode: 428,
+      body: {
+        error: 428,
+        message: "app.errors.server_pool_delete_failed",
+        room_types: [
+          {
+            id: 1,
+            name: "Lecture",
+            description: null,
+            color: "#80BA27",
+            model_name: "RoomType",
+            updated_at: "2021-01-12T14:35:11.000000Z",
+          },
+          {
+            id: 2,
+            name: "Meeting",
+            description: null,
+            color: "#4a5c66",
+            model_name: "RoomType",
+            updated_at: "2021-01-12T14:35:11.000000Z",
+          },
+        ],
+      },
+    });
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check that error is shown correctly
+    cy.get('[data-test="server-pools-delete-dialog"]')
+      .should("include.text", "admin.server_pools.delete.failed")
+      .and("include.text", "Lecture")
+      .and("include.text", "Meeting");
+
+    // Check that action buttons are hidden
+    cy.get('[data-test="dialog-cancel-button"]').should("not.exist");
+    cy.get('[data-test="dialog-continue-button"]').should("not.exist");
+
+    // Close dialog
+    cy.get('[data-test="dialog-header-close-button"]').click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    // Open dialog again
+    cy.get('[data-test="server-pools-delete-button"]').click();
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/serverPools/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteServerPoolRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerPoolRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/serverPools/1", {
+      statusCode: 401,
+    }).as("deleteServerPoolRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerPoolRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/1");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  // ToDo switch between edit and view
+});
diff --git a/tests/Frontend/e2e/AdminServersNew.cy.js b/tests/Frontend/e2e/AdminServersNew.cy.js
index 5ab49d635..cd828e0b9 100644
--- a/tests/Frontend/e2e/AdminServersNew.cy.js
+++ b/tests/Frontend/e2e/AdminServersNew.cy.js
@@ -52,6 +52,11 @@ describe("Admin servers view", function () {
   it("add new server", function () {
     cy.visit("/admin/servers/new");
 
+    // Check that header buttons are hidden
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+
     cy.get('[data-test="name-field"]')
       .should("be.visible")
       .and("include.text", "app.model_name")
diff --git a/tests/Frontend/e2e/AdminServersView.cy.js b/tests/Frontend/e2e/AdminServersView.cy.js
index bdd5eb105..0ecb18b18 100644
--- a/tests/Frontend/e2e/AdminServersView.cy.js
+++ b/tests/Frontend/e2e/AdminServersView.cy.js
@@ -558,6 +558,7 @@ describe("Admin servers view", function () {
 
     // Check that overlay is not shown anymore
     cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
 
     // Reload page with 404 errors
     cy.interceptAdminServersIndexRequests();
diff --git a/tests/Frontend/e2e/AdminUsersView.cy.js b/tests/Frontend/e2e/AdminUsersView.cy.js
index 7d4a1b2f8..2e0e861de 100644
--- a/tests/Frontend/e2e/AdminUsersView.cy.js
+++ b/tests/Frontend/e2e/AdminUsersView.cy.js
@@ -404,6 +404,7 @@ describe("Admin users view", function () {
 
     // Check that overlay is not shown anymore
     cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
 
     // Reload page with 404 errors
     cy.interceptAdminUsersIndexRequests();
@@ -445,4 +446,61 @@ describe("Admin users view", function () {
 
     cy.checkToastMessage("app.flash.unauthenticated");
   });
+
+  it("load timezones error", function () {
+    cy.intercept("GET", "api/v1/getTimezones", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("timezonesRequest");
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.wait("@timezonesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "admin.users.timezone")
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true");
+
+    // Reload timezones without error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      fixture: "timezones.json",
+    }).as("timezonesRequest");
+
+    cy.get('[data-test="timezone-reload-button"]').click();
+
+    cy.wait("@timezonesRequest");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true");
+
+    cy.get('[data-test="timezone-reload-button"]').should("not.exist");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      statusCode: 401,
+    }).as("timezonesRequest");
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    cy.wait("@timezonesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
 });
diff --git a/tests/Frontend/fixtures/serverPool.json b/tests/Frontend/fixtures/serverPool.json
new file mode 100644
index 000000000..a4450b506
--- /dev/null
+++ b/tests/Frontend/fixtures/serverPool.json
@@ -0,0 +1,46 @@
+{
+  "data": {
+    "id": 1,
+    "name": "Test",
+    "description": "Pool for testing",
+    "server_count": 2,
+    "servers": [
+      {
+        "id": 1,
+        "name": "Server 01",
+        "description": "Testserver 01",
+        "strength": 1,
+        "status": 1,
+        "health": 1,
+        "participant_count": 10,
+        "listener_count": 5,
+        "voice_participant_count": 5,
+        "video_count": 5,
+        "meeting_count": 2,
+        "own_meeting_count": 2,
+        "version": "2.4.5",
+        "model_name": "Server",
+        "updated_at": "2020-12-21T13:43:21.000000Z"
+      },
+      {
+        "id": 2,
+        "name": "Server 02",
+        "description": "Testserver 02",
+        "strength": 1,
+        "status": 1,
+        "health": 0,
+        "participant_count": 50,
+        "listener_count": 25,
+        "voice_participant_count": 30,
+        "video_count": 5,
+        "meeting_count": 10,
+        "own_meeting_count": 9,
+        "version": null,
+        "model_name": "Server",
+        "updated_at": "2020-12-21T13:43:21.000000Z"
+      }
+    ],
+    "model_name": "ServerPool",
+    "updated_at": "2020-12-21T13:43:21.000000Z"
+  }
+}
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index a148c4033..33829dabf 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -263,3 +263,31 @@ Cypress.Commands.add("interceptAdminServerPoolsIndexRequests", () => {
     fixture: "serverPools.json",
   }).as("serverPoolsRequest");
 });
+
+/**
+ * Intercept all requests that are needed when visiting the admin server pools view page
+ * @memberof cy
+ * @method interceptAdminServerPoolsViewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminServerPoolsViewRequests", () => {
+  cy.intercept("GET", "api/v1/serverPools/1*", {
+    fixture: "serverPool.json",
+  }).as("serverPoolRequest");
+
+  cy.intercept("GET", "api/v1/servers*", {
+    fixture: "servers.json",
+  }).as("serversRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin server pools view page
+ * @memberof cy
+ * @method interceptAdminServerPoolsNewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminServerPoolsNewRequests", () => {
+  cy.intercept("GET", "api/v1/servers*", {
+    fixture: "servers.json",
+  }).as("serversRequest");
+});

From 3a35f1b930d3e01d702b3d6dbcac0e28aebaf35d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 18 Dec 2024 12:45:08 +0100
Subject: [PATCH 25/79] Continue adding AdminServerPools tests (new, edit)

---
 resources/js/views/AdminServerPoolsView.vue   |  16 +-
 tests/Frontend/e2e/AdminServerPoolsEdit.cy.js | 838 ++++++++++++++++++
 tests/Frontend/e2e/AdminServerPoolsNew.cy.js  | 653 ++++++++++++++
 ...dminServerPoolsViewServerPoolActions.cy.js | 138 ++-
 tests/Frontend/e2e/AdminServersEdit.cy.js     | 374 ++++----
 .../e2e/AdminServersViewServerActions.cy.js   |  13 +
 tests/Frontend/e2e/AdminUsersEdit.cy.js       |  33 +-
 .../Frontend/e2e/AdminUsersEditSecurity.cy.js |   2 -
 tests/Frontend/e2e/AdminUsersNew.cy.js        |  46 +-
 .../e2e/AdminUsersViewUserActions.cy.js       |  59 ++
 tests/Frontend/fixtures/servers.json          |   2 +-
 11 files changed, 1937 insertions(+), 237 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
 create mode 100644 tests/Frontend/e2e/AdminServerPoolsNew.cy.js

diff --git a/resources/js/views/AdminServerPoolsView.vue b/resources/js/views/AdminServerPoolsView.vue
index e1f4c1eb0..d97395186 100644
--- a/resources/js/views/AdminServerPoolsView.vue
+++ b/resources/js/views/AdminServerPoolsView.vue
@@ -186,7 +186,21 @@
         </div>
       </form>
     </OverlayComponent>
-    <ConfirmDialog></ConfirmDialog>
+    <ConfirmDialog
+      data-test="stale-server-pool-dialog"
+      :pt="{
+        pcAcceptButton: {
+          root: {
+            'data-test': 'stale-dialog-accept-button',
+          },
+        },
+        pcRejectButton: {
+          root: {
+            'data-test': 'stale-dialog-reject-button',
+          },
+        },
+      }"
+    ></ConfirmDialog>
   </div>
 </template>
 
diff --git a/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
new file mode 100644
index 000000000..e3dde9a68
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
@@ -0,0 +1,838 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin server pools edit", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServerPoolsViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/server_pools/1");
+  });
+
+  it("visit with user without permission to edit server pools", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+
+      cy.visit("/admin/server_pools/1/edit");
+
+      cy.checkToastMessage("app.flash.unauthorized");
+
+      // Check if welcome page is shown
+      cy.url().should("not.include", "/admin/server_pools/1/edit");
+      cy.get("h1").should("be.visible").and("include.text", "home.title");
+    });
+  });
+
+  it("edit server pool", function () {
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 2);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    const serverPoolRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/serverPools/1",
+      { fixture: "serverPool.json" },
+      "serverPoolRequest",
+    );
+
+    cy.visit("/admin/server_pools/1/edit");
+
+    // Check loading
+    cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-save-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        serverPoolRequest.sendResponse();
+      });
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that correct buttons are shown
+    cy.get('[data-test="server-pools-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/server_pools/1");
+    cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Change server pool settings
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Test").clear();
+        cy.get("#name").type("Server Pool 1");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description").should("have.value", "Pool for testing").clear();
+        cy.get("#description").type("Server Pool 1 description");
+      });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-field"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="server-dropdown"]').within(() => {
+          cy.get('[data-test="server-chip"]').should("have.length", 2);
+
+          cy.get('[data-test="server-chip"]')
+            .eq(0)
+            .should("include.text", "Server 01")
+            .find('[data-test="remove-server-button"]')
+            .should("be.visible");
+
+          cy.get('[data-test="server-chip"]')
+            .eq(1)
+            .should("include.text", "Server 02")
+            .find('[data-test="remove-server-button"]')
+            .should("be.visible");
+        });
+        cy.get('[data-test="server-dropdown"]').click();
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 4);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Server 01")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Server 02")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "admin.servers.no_data")
+      .and("not.be.visible");
+
+    // Switch to next page
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(2, 4);
+      servers.meta.current_page = 2;
+      servers.meta.from = 3;
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 4;
+
+      const serversRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/servers*",
+        {
+          statusCode: 200,
+          body: servers,
+        },
+        "serversRequest",
+      );
+
+      cy.get(".multiselect__content")
+        .should("be.visible")
+        .within(() => {
+          cy.get('[data-test="previous-page-button"]')
+            .should("include.text", "app.previous_page")
+            .and("be.disabled");
+          cy.get('[data-test="next-page-button"]')
+            .should("include.text", "app.next_page")
+            .and("not.be.disabled");
+
+          cy.get('[data-test="next-page-button"]').click();
+
+          // Check loading
+          cy.get('[data-test="previous-page-button"]').should("be.disabled");
+          cy.get('[data-test="next-page-button"]').should("be.disabled");
+        });
+
+      cy.get('[data-test="server-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+
+      cy.get('[data-test="server-pools-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          serversRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@serversRequest");
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    // Check that correct options are shown
+    cy.get(".multiselect__option").should("have.length", 4);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Server 03")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Server 04")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "admin.servers.no_data")
+      .and("not.be.visible");
+
+    // Select servers
+    cy.get(".multiselect__option").eq(0).click();
+    cy.get(".multiselect__option").eq(1).click();
+
+    // Check that servers are shown and remove one server
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="server-dropdown"]').within(() => {
+      cy.get('[data-test="server-chip"]').should("have.length", 4);
+      cy.get('[data-test="server-chip"]')
+        .eq(0)
+        .should("include.text", "Server 01")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(1)
+        .should("include.text", "Server 02")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(2)
+        .should("include.text", "Server 03")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(3)
+        .should("include.text", "Server 04")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(1)
+        .find('[data-test="remove-server-button"]')
+        .click();
+    });
+
+    // Check that dropdown is hidden
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Save changes
+    cy.fixture("servers.json").then((servers) => {
+      cy.fixture("serverPool.json").then((serverPool) => {
+        serverPool.data.name = "Server Pool 1";
+        serverPool.data.description = "Server Pool 1 description";
+        serverPool.data.servers = servers.data.filter(
+          (server) => server.id !== 2,
+        );
+
+        const saveChangesRequest = interceptIndefinitely(
+          "PUT",
+          "api/v1/serverPools/1",
+          {
+            statusCode: 200,
+            body: serverPool,
+          },
+          "saveChangesRequest",
+        );
+
+        cy.intercept("GET", "api/v1/serverPools/1", {
+          statusCode: 200,
+          body: serverPool,
+        }).as("serverPoolRequest");
+
+        cy.get('[data-test="overlay"]').should("not.exist");
+
+        cy.get('[data-test="server-pools-save-button"]')
+          .should("be.visible")
+          .and("have.text", "app.save")
+          .click();
+
+        // Check loading
+        cy.get('[data-test="overlay"]').should("be.visible");
+
+        // Check that fields are disabled
+        cy.get("#name").should("be.disabled");
+        cy.get("#description").should("be.disabled");
+
+        cy.get('[data-test="server-dropdown"]').should(
+          "have.class",
+          "multiselect--disabled",
+        );
+
+        cy.get('[data-test="server-pools-save-button"]')
+          .should("be.disabled")
+          .then(() => {
+            saveChangesRequest.sendResponse();
+          });
+
+        const serverPoolRequestData = { ...serverPool.data };
+        serverPoolRequestData.servers = [1, 3, 4];
+
+        cy.wait("@saveChangesRequest").then((interception) => {
+          expect(interception.request.body).to.eql(serverPoolRequestData);
+        });
+      });
+    });
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    // Check that redirect to server pool view worked
+    cy.url().should("include", "/admin/server_pools/1");
+    cy.url().should("not.include", "/edit");
+  });
+
+  it("save changes errors", function () {
+    cy.visit("/admin/server_pools/1/edit");
+
+    // Set values
+    cy.get("#name").clear();
+    cy.get("#description").clear();
+    cy.get("#description").type("Server Pool 1 description");
+    cy.get('[data-test="server-dropdown"]').click();
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").eq(0).click();
+    cy.get(".multiselect__select").click();
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/serverPools/1", {
+      statusCode: 422,
+      body: {
+        message: "The given data was invalid.",
+        errors: {
+          name: ["The Name field is required."],
+          description: [
+            "The Description must not be greater than 255 characters.",
+          ],
+          servers: ["The server with the ID 1 could not be found."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that error messages are shown
+    cy.get('[data-test="name-field"]').should(
+      "include.text",
+      "The Name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "include.text",
+      "The Description must not be greater than 255 characters.",
+    );
+
+    cy.get('[data-test="server-field"]').should(
+      "include.text",
+      "The server with the ID 1 could not be found.",
+    );
+
+    cy.get("#name").type("Server Pool 1");
+
+    // Check with 500 error
+    cy.intercept("PUT", "api/v1/serverPools/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="name-field"]').should(
+      "not.include.text",
+      "The Name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "not.include.text",
+      "The Description must not be greater than 255 characters.",
+    );
+
+    cy.get('[data-test="server-field"]').should(
+      "not.include.text",
+      "The server with the ID 1 could not be found.",
+    );
+
+    // Check with 428 error (stale error)
+    cy.fixture("serverPool.json").then((serverPool) => {
+      serverPool.data.name = "Server Pool 1";
+      serverPool.data.description = "Server Pool 1 description";
+      serverPool.data.servers = serverPool.data.servers.slice(0, 1);
+
+      cy.intercept("PUT", "api/v1/serverPools/1", {
+        statusCode: 428,
+        body: {
+          new_model: serverPool.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-server-pool-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-server-pool-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Reload
+    cy.get('[data-test="stale-dialog-reject-button"]').click();
+
+    cy.get('[data-test="stale-server-pool-dialog"]').should("not.exist");
+
+    // Check that correct data is shown
+    cy.get("#name").should("have.value", "Server Pool 1");
+    cy.get("#description").should("have.value", "Server Pool 1 description");
+
+    cy.get('[data-test="server-chip"]').should("have.length", 1);
+
+    cy.get('[data-test="server-chip"]')
+      .eq(0)
+      .should("include.text", "Server 01");
+
+    // Trigger 428 error (stale error) again
+    cy.fixture("serverPool.json").then((serverPool) => {
+      serverPool.data.name = "Server Pool 1";
+      serverPool.data.description = "Server Pool 1 description";
+      serverPool.data.servers = serverPool.data.servers.slice(0, 1);
+
+      cy.intercept("PUT", "api/v1/serverPools/1", {
+        statusCode: 428,
+        body: {
+          new_model: serverPool.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-server-pool-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-server-pool-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Overwrite
+    cy.fixture("serverPool.json").then((serverPool) => {
+      serverPool.data.name = "Server Pool 1";
+      serverPool.data.description = "Server Pool 1 description";
+      serverPool.data.servers = serverPool.data.servers.slice(0, 1);
+
+      cy.intercept("PUT", "api/v1/serverPools/1", {
+        statusCode: 200,
+        body: serverPool,
+      }).as("saveChangesRequest");
+
+      cy.get('[data-test="stale-dialog-accept-button"]').click();
+
+      const serverPoolRequestData = { ...serverPool.data };
+      serverPoolRequestData.servers = [1];
+
+      // Check that correct data is sent
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql(serverPoolRequestData);
+      });
+    });
+
+    // Check that redirect worked
+    cy.url().should("include", "/admin/server_pools/1");
+    cy.url().should("not.include", "/edit");
+
+    // Reload
+    cy.visit("/admin/server_pools/1/edit");
+
+    // Check with 404 error
+    cy.interceptAdminServerPoolsIndexRequests();
+    cy.intercept("PUT", "api/v1/serverPools/1", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/server_pools/1/edit");
+    cy.url().should("include", "/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload
+    cy.visit("/admin/server_pools/1/edit");
+
+    // Check with 401 error
+    cy.intercept("PUT", "api/v1/serverPools/1", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/1/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+        "serverPools.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-pools-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/server_pools/1");
+    cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="server-pools-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+  });
+
+  it("load server pool errors", function () {
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolRequest");
+
+    cy.visit("/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 200,
+      fixture: "serverPool.json",
+    }).as("serverPoolRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // reload page with 404 errors
+    cy.interceptAdminServerPoolsIndexRequests();
+
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("serverPoolRequest");
+
+    cy.reload();
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/server_pools/1/edit");
+    cy.url().should("include", "/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 401,
+    }).as("serverPoolRequest");
+
+    cy.visit("/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/1/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load servers errors", function () {
+    // Check with 500 error
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serversRequest");
+
+    cy.visit("/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
+
+    // Reload servers without errors
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 2);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="servers-reload-button"]').click();
+
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pools-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="servers-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="server-dropdown"]').click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 4);
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serversRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@serversRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 401,
+    }).as("serversRequest");
+
+    cy.reload();
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/1/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit edit page again with servers
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 2);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.visit("/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 401,
+    }).as("serversRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/1/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServerPoolsNew.cy.js b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
new file mode 100644
index 000000000..82a60fa60
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
@@ -0,0 +1,653 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin server pools new", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServerPoolsNewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+        "serverPools.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/server_pools/new");
+  });
+
+  it("visit with user without permission to add new server pools", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools/new");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/users");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("add new server pool with 1 server", function () {
+    cy.visit("/admin/server_pools/new");
+
+    // Check that header buttons are hidden
+    cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "").type("Server Pool 1");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "")
+          .type("Server Pool 1 description");
+      });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-field"]')
+      .should("be.visible")
+      .and("include.text", "app.servers")
+      .within(() => {
+        cy.get('[data-test="server-dropdown"]').within(() => {
+          cy.get(".multiselect__tags")
+            .should("include.text", "admin.server_pools.select_servers")
+            .click();
+          cy.get('[data-test="server-chip"]').should("have.length", 0);
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 6);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Server 01")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Server 02")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Server 03")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "Server 04")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option")
+      .eq(5)
+      .should("include.text", "admin.servers.no_data")
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option").eq(1).click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="server-dropdown"]').within(() => {
+      cy.get('[data-test="server-chip"]').should("have.length", 1);
+      cy.get('[data-test="server-chip"]')
+        .eq(0)
+        .should("include.text", "Server 02")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible"); // ToDo think about hiding this button
+    });
+
+    // Select second role
+    cy.get(".multiselect__option").eq(2).click();
+
+    // Check that roles are shown and remove second role
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="server-dropdown"]').within(() => {
+      cy.get('[data-test="server-chip"]').should("have.length", 2);
+      cy.get('[data-test="server-chip"]')
+        .eq(0)
+        .should("include.text", "Server 02")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(1)
+        .should("include.text", "Server 03")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible")
+        .click();
+    });
+
+    // Check that dialog is closed
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Save new server pool
+    cy.fixture("serverPool.json").then((serverPool) => {
+      serverPool.data.id = 20;
+      serverPool.data.name = "Server Pool 1";
+      serverPool.data.description = "Server Pool 1 description";
+      serverPool.data.servers = serverPool.data.servers.slice(1, 2);
+
+      const newServerPoolRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/serverPools",
+        {
+          statusCode: 201,
+          body: serverPool,
+        },
+        "newServerPoolRequest",
+      );
+
+      cy.intercept("GET", "api/v1/serverPools/20", {
+        statusCode: 200,
+        body: serverPool,
+      }).as("serverPoolRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+      cy.get('[data-test="server-pools-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get("#name").should("be.disabled");
+      cy.get("#description").should("be.disabled");
+      cy.get('[data-test="server-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+      cy.get('[data-test="server-pools-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newServerPoolRequest.sendResponse();
+        });
+    });
+
+    // Check request data
+    cy.wait("@newServerPoolRequest").then((interception) => {
+      expect(interception.request.body).to.deep.equal({
+        name: "Server Pool 1",
+        description: "Server Pool 1 description",
+        servers: [2],
+      });
+    });
+
+    cy.wait("@serverPoolRequest");
+
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that user page is shown
+    cy.url().should("include", "/admin/server_pools/20");
+  });
+
+  it("add new server pool with several servers", function () {
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 2);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.visit("/admin/server_pools/new");
+
+    cy.wait("@serversRequest");
+
+    cy.get("#name").should("have.value", "").type("Server Pool 1");
+    cy.get("#description")
+      .should("have.value", "")
+      .type("Server Pool 1 description");
+
+    // Check server setting and change it
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-field"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="server-dropdown"]').within(() => {
+          cy.get(".multiselect__tags")
+            .should("include.text", "admin.server_pools.select_servers")
+            .click();
+          cy.get('[data-test="server-chip"]').should("have.length", 0);
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 4);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Server 01")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Server 02")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "admin.servers.no_data")
+      .and("not.be.visible");
+
+    // Select server
+    cy.get(".multiselect__option").eq(0).click();
+
+    // Check that dropdown is still open
+    cy.get(".multiselect__content").should("be.visible");
+
+    // Switch to next page
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(2, 4);
+      servers.meta.current_page = 2;
+      servers.meta.from = 3;
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 4;
+
+      const serversRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/servers*",
+        {
+          statusCode: 200,
+          body: servers,
+        },
+        "serversRequest",
+      );
+
+      cy.get(".multiselect__content")
+        .should("be.visible")
+        .within(() => {
+          cy.get('[data-test="previous-page-button"]')
+            .should("include.text", "app.previous_page")
+            .and("be.disabled");
+          cy.get('[data-test="next-page-button"]')
+            .should("include.text", "app.next_page")
+            .and("not.be.disabled");
+
+          cy.get('[data-test="next-page-button"]').click();
+
+          // Check loading
+          cy.get('[data-test="previous-page-button"]').should("be.disabled");
+          cy.get('[data-test="next-page-button"]').should("be.disabled");
+        });
+
+      cy.get('[data-test="server-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+
+      cy.get('[data-test="server-pools-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          serversRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@serversRequest");
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    // Check that correct options are shown
+    cy.get(".multiselect__option").should("have.length", 4);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Server 03")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Server 04")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "admin.servers.no_data")
+      .and("not.be.visible");
+
+    // Select servers
+    cy.get(".multiselect__option").eq(1).click();
+
+    // Check that servers are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="server-dropdown"]').within(() => {
+      cy.get('[data-test="server-chip"]').should("have.length", 2);
+      cy.get('[data-test="server-chip"]')
+        .eq(0)
+        .should("include.text", "Server 01")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(1)
+        .should("include.text", "Server 04")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+    });
+
+    // Close dialog
+    cy.get(".multiselect__select").click();
+
+    // Check that dialog is closed
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Save new server pool
+    cy.fixture("servers.json").then((servers) => {
+      cy.fixture("serverPool.json").then((serverPool) => {
+        serverPool.data.id = 20;
+        serverPool.data.name = "Server Pool 1";
+        serverPool.data.description = "Server Pool 1 description";
+        serverPool.data.servers = servers.data.filter(
+          (server) => server.id === 1 || server.id === 4,
+        );
+
+        cy.intercept("POST", "api/v1/serverPools", {
+          statusCode: 201,
+          body: serverPool,
+        }).as("newServerPoolRequest");
+
+        cy.intercept("GET", "api/v1/serverPools/20", {
+          statusCode: 200,
+          body: serverPool,
+        }).as("serverPoolRequest");
+      });
+    });
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    // Check request data
+    cy.wait("@newServerPoolRequest").then((interception) => {
+      expect(interception.request.body).to.deep.equal({
+        name: "Server Pool 1",
+        description: "Server Pool 1 description",
+        servers: [1, 4],
+      });
+    });
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that user page is shown
+    cy.url().should("include", "/admin/server_pools/20");
+  });
+
+  it("add new server pool errors", function () {
+    cy.visit("/admin/server_pools/new");
+
+    // Set values
+    cy.get("#description").type("Server Pool 1 description");
+    cy.get('[data-test="server-dropdown"]').click();
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").eq(0).click();
+    cy.get(".multiselect__select").click();
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/serverPools", {
+      statusCode: 422,
+      body: {
+        message: "The given data was invalid.",
+        errors: {
+          name: ["The Name field is required."],
+          description: [
+            "The Description must not be greater than 255 characters.",
+          ],
+          servers: ["The server with the ID 1 could not be found."],
+        },
+      },
+    }).as("newServerPoolRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@newServerPoolRequest");
+
+    // Check that error messages are shown
+    cy.get('[data-test="name-field"]').should(
+      "include.text",
+      "The Name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "include.text",
+      "The Description must not be greater than 255 characters.",
+    );
+
+    cy.get('[data-test="server-field"]').should(
+      "include.text",
+      "The server with the ID 1 could not be found.",
+    );
+
+    cy.get("#name").type("Server Pool 1");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/serverPools", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("newServerPoolRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@newServerPoolRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="name-field"]').should(
+      "not.include.text",
+      "The Name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "not.include.text",
+      "The Description must not be greater than 255 characters.",
+    );
+
+    cy.get('[data-test="server-field"]').should(
+      "not.include.text",
+      "The server with the ID 1 could not be found.",
+    );
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/serverPools", {
+      statusCode: 401,
+    }).as("newServerPoolRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@newServerPoolRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load servers errors", function () {
+    // Check with 500 error
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serversRequest");
+
+    cy.visit("/admin/server_pools/new");
+
+    cy.wait("@serversRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
+
+    // Reload servers without errors
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 2);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="servers-reload-button"]').click();
+
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="servers-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="server-pools-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="server-dropdown"]').click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 4);
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serversRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@serversRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 401,
+    }).as("serversRequest");
+
+    cy.reload();
+
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit page again with servers
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 2);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.visit("/admin/server_pools/new");
+
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 401,
+    }).as("serversRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js b/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js
index 981bbf360..73a23e515 100644
--- a/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js
@@ -177,5 +177,141 @@ describe("Admin server pools view", function () {
     cy.checkToastMessage("app.flash.unauthenticated");
   });
 
-  // ToDo switch between edit and view
+  it("switch between edit and view", function () {
+    cy.visit("/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    // Check values and change them
+    cy.get("#name").should("not.be.disabled").and("have.value", "Test").clear();
+    cy.get("#name").type("Server Pool 1");
+
+    cy.get("#description")
+      .should("not.be.disabled")
+      .and("have.value", "Pool for testing")
+      .clear();
+    cy.get("#description").type("Server Pool 1 description");
+
+    cy.get('[data-test="server-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="server-chip"]').should("have.length", 2);
+        cy.get('[data-test="server-chip"]')
+          .eq(0)
+          .should("include.text", "Server 01")
+          .find('[data-test="remove-server-button"]')
+          .should("be.visible");
+        cy.get('[data-test="server-chip"]')
+          .eq(1)
+          .should("include.text", "Server 02")
+          .find('[data-test="remove-server-button"]')
+          .should("be.visible");
+      });
+
+    cy.get('[data-test="server-dropdown"]').click();
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").eq(2).click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="server-dropdown"]').within(() => {
+      cy.get('[data-test="server-chip"]').should("have.length", 3);
+      cy.get('[data-test="server-chip"]')
+        .eq(0)
+        .should("include.text", "Server 01")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(1)
+        .should("include.text", "Server 02")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+      cy.get('[data-test="server-chip"]')
+        .eq(2)
+        .should("include.text", "Server 03")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+    });
+
+    // Close dropdown
+    cy.get(".multiselect__select").click();
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Check that save button is shown
+    cy.get('[data-test="server-pools-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Switch to view
+    cy.get('[data-test="server-pools-cancel-edit-button"]').click();
+
+    // Check if redirected to view page
+    cy.url().should("include", "/admin/server_pools/1");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    // Check that changes were not saved
+    cy.get("#name").should("be.disabled").and("have.value", "Test");
+    cy.get("#description")
+      .should("be.disabled")
+      .and("have.value", "Pool for testing");
+
+    cy.get('[data-test="server-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="server-chip"]').should("have.length", 2);
+        cy.get('[data-test="server-chip"]')
+          .eq(0)
+          .should("include.text", "Server 01")
+          .find('[data-test="remove-server-button"]')
+          .should("not.exist");
+        cy.get('[data-test="server-chip"]')
+          .eq(1)
+          .should("include.text", "Server 02")
+          .find('[data-test="remove-server-button"]')
+          .should("not.exist");
+      });
+
+    // Check that save button is hidden
+    cy.get('[data-test="server-pools-save-button"]').should("not.exist");
+
+    // Switch back to edit
+    cy.get('[data-test="server-pools-edit-button"]').click();
+
+    // Check if redirected to edit page
+    cy.url().should("include", "/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    // Check that original values are shown
+    cy.get("#name").should("not.be.disabled").and("have.value", "Test");
+    cy.get("#description")
+      .should("not.be.disabled")
+      .and("have.value", "Pool for testing");
+
+    cy.get('[data-test="server-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="server-chip"]').should("have.length", 2);
+        cy.get('[data-test="server-chip"]')
+          .eq(0)
+          .should("include.text", "Server 01")
+          .find('[data-test="remove-server-button"]')
+          .should("be.visible");
+        cy.get('[data-test="server-chip"]')
+          .eq(1)
+          .should("include.text", "Server 02")
+          .find('[data-test="remove-server-button"]')
+          .should("be.visible");
+      });
+
+    // Check that save button is shown
+    cy.get('[data-test="server-pools-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+  });
 });
diff --git a/tests/Frontend/e2e/AdminServersEdit.cy.js b/tests/Frontend/e2e/AdminServersEdit.cy.js
index 52a5fdbbf..bd796bf8e 100644
--- a/tests/Frontend/e2e/AdminServersEdit.cy.js
+++ b/tests/Frontend/e2e/AdminServersEdit.cy.js
@@ -20,7 +20,7 @@ describe("Admin servers edit", function () {
   });
 
   it("visit with user that is not logged in", function () {
-    cy.testVisitWithoutCurrentUser("/admin/servers/1");
+    cy.testVisitWithoutCurrentUser("/admin/servers/1/edit");
   });
 
   it("visit with user without permission to edit servers", function () {
@@ -77,7 +77,8 @@ describe("Admin servers edit", function () {
     cy.get('[data-test="servers-cancel-edit-button"]')
       .should("be.visible")
       .and("not.be.disabled")
-      .and("include.text", "app.cancel_editing");
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/servers/1");
     cy.get('[data-test="servers-edit-button"]').should("not.exist");
     cy.get('[data-test="servers-delete-button"]').should("not.exist");
     cy.get('[data-test="servers-save-button"]')
@@ -297,187 +298,6 @@ describe("Admin servers edit", function () {
     cy.url().should("not.include", "/edit");
   });
 
-  it("check button visibility with delete permission", function () {
-    cy.fixture("currentUser.json").then((currentUser) => {
-      currentUser.data.permissions = [
-        "admin.view",
-        "servers.viewAny",
-        "servers.view",
-        "servers.update",
-        "servers.create",
-        "servers.delete",
-      ];
-      cy.intercept("GET", "api/v1/currentUser", {
-        statusCode: 200,
-        body: currentUser,
-      });
-    });
-
-    cy.visit("/admin/servers/1/edit");
-
-    cy.wait("@serverRequest");
-
-    // Check with server enabled
-    cy.get('[data-test="servers-cancel-edit-button"]')
-      .should("be.visible")
-      .and("not.be.disabled")
-      .and("include.text", "app.cancel_editing");
-    cy.get('[data-test="servers-edit-button"]').should("not.exist");
-    cy.get('[data-test="servers-delete-button"]').should("not.exist");
-    cy.get('[data-test="servers-save-button"]')
-      .should("be.visible")
-      .and("not.be.disabled")
-      .and("include.text", "app.save");
-
-    cy.get('[data-test="servers-test-connection-button"]')
-      .should("be.visible")
-      .and("have.text", "admin.servers.test_connection")
-      .and("not.be.disabled");
-
-    cy.get('[data-test="servers-panic-button"]').should("not.exist");
-
-    // Reload page but with server draining
-    cy.fixture("server.json").then((server) => {
-      server.data.status = 0;
-
-      cy.intercept("GET", "api/v1/servers/1", {
-        statusCode: 200,
-        body: server,
-      }).as("serverRequest");
-    });
-
-    cy.reload();
-
-    // Check with server draining
-    cy.get('[data-test="servers-cancel-edit-button"]')
-      .should("be.visible")
-      .and("not.be.disabled")
-      .and("include.text", "app.cancel_editing");
-    cy.get('[data-test="servers-edit-button"]').should("not.exist");
-    cy.get('[data-test="servers-delete-button"]').should("not.exist");
-    cy.get('[data-test="servers-save-button"]')
-      .should("be.visible")
-      .and("not.be.disabled")
-      .and("include.text", "app.save");
-
-    cy.get('[data-test="servers-test-connection-button"]')
-      .should("be.visible")
-      .and("have.text", "admin.servers.test_connection")
-      .and("not.be.disabled");
-
-    cy.get('[data-test="servers-panic-button"]').should("not.exist");
-
-    // Reload page but with server disabled
-    cy.fixture("server.json").then((server) => {
-      server.data.status = -1;
-
-      cy.intercept("GET", "api/v1/servers/1", {
-        statusCode: 200,
-        body: server,
-      }).as("serverRequest");
-    });
-
-    cy.reload();
-
-    // Check with server disabled
-    cy.get('[data-test="servers-cancel-edit-button"]')
-      .should("be.visible")
-      .and("not.be.disabled")
-      .and("include.text", "app.cancel_editing");
-    cy.get('[data-test="servers-edit-button"]').should("not.exist");
-    cy.get('[data-test="servers-delete-button"]')
-      .should("be.visible")
-      .and("not.be.disabled");
-    cy.get('[data-test="servers-save-button"]')
-      .should("be.visible")
-      .and("not.be.disabled")
-      .and("include.text", "app.save");
-
-    cy.get('[data-test="servers-test-connection-button"]')
-      .should("be.visible")
-      .and("have.text", "admin.servers.test_connection")
-      .and("not.be.disabled");
-
-    cy.get('[data-test="servers-panic-button"]').should("not.exist");
-  });
-
-  it("load server errors", function () {
-    cy.intercept("GET", "api/v1/servers/1", {
-      statusCode: 500,
-      body: {
-        message: "Test",
-      },
-    }).as("serverRequest");
-
-    cy.visit("/admin/servers/1/edit");
-
-    cy.wait("@serverRequest");
-
-    // Check that overlay is shown
-    cy.get('[data-test="overlay"]').should("be.visible");
-
-    // Check that error message is shown
-    cy.checkToastMessage([
-      'app.flash.server_error.message_{"message":"Test"}',
-      'app.flash.server_error.error_code_{"statusCode":500}',
-    ]);
-
-    // Reload with correct data
-    cy.intercept("GET", "api/v1/servers/1", {
-      statusCode: 200,
-      fixture: "server.json",
-    }).as("serverRequest");
-
-    cy.get('[data-test="loading-retry-button"]')
-      .should("be.visible")
-      .and("have.text", "app.reload")
-      .click();
-
-    cy.wait("@serverRequest");
-
-    // Check that overlay is not shown anymore
-    cy.get('[data-test="overlay"]').should("not.exist");
-
-    // Reload page with 404 errors
-    cy.interceptAdminServersIndexRequests();
-
-    cy.intercept("GET", "api/v1/servers/1", {
-      statusCode: 404,
-      body: {
-        message: "No query results for model",
-      },
-    }).as("serverRequest");
-
-    cy.reload();
-
-    cy.wait("@serverRequest");
-
-    // Check that redirect worked
-    cy.url().should("not.include", "/admin/servers/1");
-    cy.url().should("include", "/admin/servers");
-
-    cy.wait("@serversRequest");
-
-    cy.checkToastMessage([
-      'app.flash.server_error.message_{"message":"No query results for model"}',
-      'app.flash.server_error.error_code_{"statusCode":404}',
-    ]);
-
-    // Reload page with 401 error
-    cy.intercept("GET", "api/v1/servers/1", {
-      statusCode: 401,
-    }).as("serverRequest");
-
-    cy.visit("/admin/servers/1/edit");
-
-    cy.wait("@serverRequest");
-
-    // Check that redirect worked and error message is shown
-    cy.url().should("include", "/login?redirect=/admin/servers/1/edit");
-
-    cy.checkToastMessage("app.flash.unauthenticated");
-  });
-
   it("save changes errors", function () {
     cy.visit("/admin/servers/1/edit");
 
@@ -765,11 +585,195 @@ describe("Admin servers edit", function () {
     // Check with 401 error
     cy.intercept("PUT", "api/v1/servers/1", {
       statusCode: 401,
-    }).as("newServerRequest");
+    }).as("saveChangesRequest");
 
     cy.get('[data-test="servers-save-button"]').click();
 
-    cy.wait("@newServerRequest");
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/1/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+        "servers.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers/1/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check with server enabled
+    cy.get('[data-test="servers-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/servers/1");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Reload page but with server draining
+    cy.fixture("server.json").then((server) => {
+      server.data.status = 0;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server draining
+    cy.get('[data-test="servers-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/servers/1");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Reload page but with server disabled
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server disabled
+    cy.get('[data-test="servers-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/servers/1");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("load server errors", function () {
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverRequest");
+
+    cy.visit("/admin/servers/1/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 200,
+      fixture: "server.json",
+    }).as("serverRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@serverRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Reload page with 404 errors
+    cy.interceptAdminServersIndexRequests();
+
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("serverRequest");
+
+    cy.reload();
+
+    cy.wait("@serverRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/servers/1");
+    cy.url().should("include", "/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 401,
+    }).as("serverRequest");
+
+    cy.visit("/admin/servers/1/edit");
+
+    cy.wait("@serverRequest");
 
     // Check that redirect worked and error message is shown
     cy.url().should("include", "/login?redirect=/admin/servers/1/edit");
diff --git a/tests/Frontend/e2e/AdminServersViewServerActions.cy.js b/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
index e70b5bf38..5e3f3a9a7 100644
--- a/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
+++ b/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
@@ -485,6 +485,11 @@ describe("Admin servers view server actions", function () {
     // Check that panic button is hidden
     cy.get('[data-test="servers-panic-button"]').should("not.exist");
 
+    // Check that save button is shown
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
     // Switch to view
     cy.get('[data-test="servers-cancel-edit-button"]').click();
 
@@ -534,6 +539,9 @@ describe("Admin servers view server actions", function () {
       .and("be.disabled");
     cy.get('[data-test="servers-panic-button"]').should("be.visible");
 
+    // Check that save button is hidden
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
     // Switch back to edit
     cy.get('[data-test="servers-edit-button"]').click();
 
@@ -580,5 +588,10 @@ describe("Admin servers view server actions", function () {
 
     // Check that panic button is hidden
     cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Check that save button is shown
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
   });
 });
diff --git a/tests/Frontend/e2e/AdminUsersEdit.cy.js b/tests/Frontend/e2e/AdminUsersEdit.cy.js
index 7e30eb78d..92e5bb603 100644
--- a/tests/Frontend/e2e/AdminUsersEdit.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEdit.cy.js
@@ -90,11 +90,20 @@ describe("Admin users edit", function () {
 
     cy.get('[data-test="overlay"]').should("not.exist");
 
-    cy.get('[data-test="users-cancel-edit-button"]').should("be.visible");
+    cy.get('[data-test="users-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/users/2");
     cy.get('[data-test="users-edit-button"]').should("not.exist");
-    cy.get('[data-test="users-reset-password-button"]').should("be.visible");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
     cy.get('[data-test="users-delete-button"]').should("not.exist");
-    cy.get('[data-test="user-tab-profile-save-button"]').should("be.visible");
+    cy.get('[data-test="user-tab-profile-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
 
     cy.get('[data-test="base-tab-button"]').should("be.visible");
     cy.get('[data-test="email-tab-button"]').should("be.visible");
@@ -123,11 +132,21 @@ describe("Admin users edit", function () {
 
     cy.wait("@userRequest");
 
-    cy.get('[data-test="users-cancel-edit-button"]').should("be.visible");
+    cy.get('[data-test="users-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/users/2");
     cy.get('[data-test="users-edit-button"]').should("not.exist");
-    cy.get('[data-test="users-reset-password-button"]').should("be.visible");
-    cy.get('[data-test="users-delete-button"]').should("be.visible");
-    cy.get('[data-test="user-tab-profile-save-button"]').should("be.visible");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="user-tab-profile-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
   });
 
   it("visit edit user page errors", function () {
diff --git a/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
index 451aa07fc..20c4ab19d 100644
--- a/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
@@ -791,8 +791,6 @@ describe("Admin users edit email", function () {
 
     cy.wait("@rolesRequest");
 
-    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
-
     // Check that redirect worked and error message is shown
     cy.url().should("include", "/login?redirect=/admin/users/2/edit");
 
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index 6f0edbbe0..e5d26a76a 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -572,51 +572,19 @@ describe("Admin users new", function () {
         },
       ];
 
-      const newUserRequest = interceptIndefinitely(
-        "POST",
-        "api/v1/users",
-        {
-          statusCode: 201,
-          body: user,
-        },
-        "newUserRequest",
-      );
+      cy.intercept("POST", "api/v1/users", {
+        statusCode: 201,
+        body: user,
+      }).as("newUserRequest");
 
       cy.intercept("GET", "api/v1/users/20", {
         statusCode: 200,
         body: user,
       }).as("userRequest");
-
-      cy.get('[data-test="overlay"]').should("not.exist");
-      cy.get('[data-test="users-new-save-button"]').click();
-
-      // Check loading
-      cy.get('[data-test="overlay"]').should("be.visible");
-      cy.get("#firstname").should("be.disabled");
-      cy.get("#lastname").should("be.disabled");
-      cy.get("#email").should("be.disabled");
-      cy.get('[data-test="locale-dropdown"]').within(() => {
-        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
-      });
-
-      cy.get('[data-test="timezone-dropdown"]').within(() => {
-        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
-      });
-      cy.get('[data-test="role-dropdown"]').should(
-        "have.class",
-        "multiselect--disabled",
-      );
-      cy.get("#generate_password").should("be.disabled");
-      cy.get("#new_password").should("not.exist");
-      cy.get("#new_password_confirmation").should("not.exist");
-
-      cy.get('[data-test="users-new-save-button"]')
-        .should("be.disabled")
-        .then(() => {
-          newUserRequest.sendResponse();
-        });
     });
 
+    cy.get('[data-test="users-new-save-button"]').click();
+
     // Check request data
     cy.wait("@newUserRequest").then((interception) => {
       expect(interception.request.body).to.eql({
@@ -631,8 +599,6 @@ describe("Admin users new", function () {
     });
     cy.wait("@userRequest");
 
-    cy.get('[data-test="overlay"]').should("not.exist");
-
     // Check that user page is shown
     cy.url().should("include", "/admin/users/20");
   });
diff --git a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
index e8fd6467e..ee6c7c586 100644
--- a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
+++ b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
@@ -316,6 +316,11 @@ describe("Admin users view user actions", function () {
       "Europe/Berlin",
     );
 
+    // Check that save button is shown
+    cy.get('[data-test="user-tab-profile-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
     // Switch to view
     cy.get('[data-test="users-cancel-edit-button"]').click();
 
@@ -343,6 +348,9 @@ describe("Admin users view user actions", function () {
         cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
       });
 
+    // Check that save button is hidden
+    cy.get('[data-test="user-tab-profile-save-button"]').should("not.exist");
+
     // Switch to edit again
     cy.get('[data-test="users-edit-button"]').click();
 
@@ -380,12 +388,22 @@ describe("Admin users view user actions", function () {
         );
       });
 
+    // Check that save button is shown
+    cy.get('[data-test="user-tab-profile-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
     // Check email tab
     cy.get('[data-test="email-tab-button"]').click();
 
     // Change value of email field
     cy.get("#email").should("have.value", "LauraWRivera@domain.tld").type("e");
 
+    // Check that save button is shown
+    cy.get('[data-test="user-tab-email-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
     // Switch to view
     cy.get('[data-test="users-cancel-edit-button"]').click();
 
@@ -402,6 +420,9 @@ describe("Admin users view user actions", function () {
       .should("have.value", "LauraWRivera@domain.tld")
       .should("be.disabled");
 
+    // Check that save button is hidden
+    cy.get('[data-test="user-tab-email-save-button"]').should("not.exist");
+
     // Switch back to edit
     cy.get('[data-test="users-edit-button"]').click();
 
@@ -417,6 +438,11 @@ describe("Admin users view user actions", function () {
       .should("have.value", "LauraWRivera@domain.tld")
       .should("not.be.disabled");
 
+    // Check that save button is shown
+    cy.get('[data-test="user-tab-email-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
     // Check security tab
     cy.get('[data-test="security-tab-button"]').click();
 
@@ -471,6 +497,14 @@ describe("Admin users view user actions", function () {
     cy.get("#new_password").type("secretPassword123#");
     cy.get("#new_password_confirmation").type("secretPassword123#");
 
+    // Check that save buttons are shown
+    cy.get('[data-test="users-roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="change-password-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
     // Switch to view
     cy.get('[data-test="users-cancel-edit-button"]').click();
 
@@ -503,6 +537,10 @@ describe("Admin users view user actions", function () {
 
     cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
 
+    // Check that save buttons are hidden
+    cy.get('[data-test="users-roles-save-button"]').should("not.exist");
+    cy.get('[data-test="change-password-save-button"]').should("not.exist");
+
     // Switch back to edit page
     cy.get('[data-test="users-edit-button"]').click();
 
@@ -532,12 +570,25 @@ describe("Admin users view user actions", function () {
     cy.get("#new_password").should("have.value", "");
     cy.get("#new_password_confirmation").should("have.value", "");
 
+    // Check that save buttons are shown
+    cy.get('[data-test="users-roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="change-password-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
     // Check other tab
     cy.get('[data-test="others-tab-button"]').click();
 
     // Change value of bbb_skip_check_audio
     cy.get("#bbb_skip_check_audio").click();
 
+    // Check that save button is shown
+    cy.get('[data-test="user-tab-others-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
     // Switch to view
     cy.get('[data-test="users-cancel-edit-button"]').click();
 
@@ -554,6 +605,9 @@ describe("Admin users view user actions", function () {
       .should("not.be.checked")
       .should("be.disabled");
 
+    // Check that save button is hidden
+    cy.get('[data-test="user-tab-others-save-button"]').should("not.exist");
+
     // Switch back to edit page
     cy.get('[data-test="users-edit-button"]').click();
 
@@ -568,5 +622,10 @@ describe("Admin users view user actions", function () {
     cy.get("#bbb_skip_check_audio")
       .should("not.be.checked")
       .should("not.be.disabled");
+
+    // Check that save button is shown
+    cy.get('[data-test="user-tab-others-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
   });
 });
diff --git a/tests/Frontend/fixtures/servers.json b/tests/Frontend/fixtures/servers.json
index 87a4acad7..79cde5db5 100644
--- a/tests/Frontend/fixtures/servers.json
+++ b/tests/Frontend/fixtures/servers.json
@@ -74,7 +74,7 @@
     "from": 1,
     "last_page": 1,
     "per_page": 15,
-    "to": 2,
+    "to": 4,
     "total": 4,
     "total_no_filter": 4
   }

From 7cae7f3f2e3d92ff0bad74d91d1212c30a7f52fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 18 Dec 2024 16:55:28 +0100
Subject: [PATCH 26/79] Fix AdminServerPoolsView server multiselect not
 disabled while loading

---
 resources/js/views/AdminServerPoolsView.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/resources/js/views/AdminServerPoolsView.vue b/resources/js/views/AdminServerPoolsView.vue
index 19620f853..248491709 100644
--- a/resources/js/views/AdminServerPoolsView.vue
+++ b/resources/js/views/AdminServerPoolsView.vue
@@ -97,7 +97,11 @@
                 :show-labels="false"
                 :options="servers"
                 :disabled="
-                  isBusy || modelLoadingError || serversLoadingError || viewOnly
+                  isBusy ||
+                  modelLoadingError ||
+                  serversLoading ||
+                  serversLoadingError ||
+                  viewOnly
                 "
                 :loading="serversLoading"
                 :allow-empty="true"

From 87fca1a1f8c3b3be59b7302b0f66b2a262871b5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 18 Dec 2024 16:56:46 +0100
Subject: [PATCH 27/79] Fix AdminServerPoolsView server form error message

---
 resources/js/views/AdminServerPoolsView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/views/AdminServerPoolsView.vue b/resources/js/views/AdminServerPoolsView.vue
index 248491709..9bd719364 100644
--- a/resources/js/views/AdminServerPoolsView.vue
+++ b/resources/js/views/AdminServerPoolsView.vue
@@ -159,8 +159,8 @@
                 @click="loadServers(serversCurrentPage)"
               />
             </InputGroup>
+            <FormError :errors="formErrors.fieldError('servers', true)" />
           </div>
-          <FormError :errors="formErrors.fieldError('servers', true)" />
         </div>
         <div v-if="!viewOnly">
           <div class="flex justify-end">

From 64fd3622c865c8532f54c88dbe9d555cf06806bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 18 Dec 2024 16:57:35 +0100
Subject: [PATCH 28/79] Fix AdminServerPoolsView handleStaleError

---
 resources/js/views/AdminServerPoolsView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/views/AdminServerPoolsView.vue b/resources/js/views/AdminServerPoolsView.vue
index 9bd719364..e953feb23 100644
--- a/resources/js/views/AdminServerPoolsView.vue
+++ b/resources/js/views/AdminServerPoolsView.vue
@@ -379,7 +379,7 @@ function handleStaleError(staleError) {
     },
     reject: () => {
       model.value = staleError.new_model;
-      name.value = staleError.newMember.name;
+      name.value = staleError.new_model.name;
     },
   });
 }

From 0d1485d619feda16ce42e8a836e7d30f9d926db8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Fri, 20 Dec 2024 10:53:16 +0100
Subject: [PATCH 29/79] Adjust admin server pools tests

---
 tests/Frontend/e2e/AdminServerPoolsEdit.cy.js |  1 -
 .../Frontend/e2e/AdminServerPoolsIndex.cy.js  |  1 -
 tests/Frontend/e2e/AdminServerPoolsView.cy.js | 59 -------------------
 ...dminServerPoolsViewServerPoolActions.cy.js |  1 -
 4 files changed, 62 deletions(-)

diff --git a/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
index e3dde9a68..72366dc00 100644
--- a/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
@@ -342,7 +342,6 @@ describe("Admin server pools edit", function () {
     });
 
     cy.wait("@serverPoolRequest");
-    cy.wait("@serversRequest");
 
     // Check that redirect to server pool view worked
     cy.url().should("include", "/admin/server_pools/1");
diff --git a/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
index d97aec88d..65fc761c3 100644
--- a/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
@@ -775,7 +775,6 @@ describe("Admin server pools index", function () {
     cy.fixture("currentUser.json").then((currentUser) => {
       currentUser.data.permissions = [
         "admin.view",
-        "servers.viewAny",
         "serverPools.viewAny",
         "serverPools.view",
       ];
diff --git a/tests/Frontend/e2e/AdminServerPoolsView.cy.js b/tests/Frontend/e2e/AdminServerPoolsView.cy.js
index fb04e7ac2..018959d77 100644
--- a/tests/Frontend/e2e/AdminServerPoolsView.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsView.cy.js
@@ -8,7 +8,6 @@ describe("Admin server pools view", function () {
     cy.fixture("currentUser.json").then((currentUser) => {
       currentUser.data.permissions = [
         "admin.view",
-        "servers.viewAny",
         "serverPools.viewAny",
         "serverPools.view",
       ];
@@ -252,62 +251,4 @@ describe("Admin server pools view", function () {
 
     cy.checkToastMessage("app.flash.unauthenticated");
   });
-
-  it("load servers errors", function () {
-    cy.intercept("GET", "api/v1/servers*", {
-      statusCode: 500,
-      body: {
-        message: "Test",
-      },
-    }).as("serversRequest");
-
-    cy.visit("/admin/server_pools/1");
-
-    cy.wait("@serverPoolRequest");
-
-    cy.wait("@serversRequest");
-
-    // Check that error message is shown
-    cy.checkToastMessage([
-      'app.flash.server_error.message_{"message":"Test"}',
-      'app.flash.server_error.error_code_{"statusCode":500}',
-    ]);
-
-    cy.get('[data-test="server-dropdown"]').should(
-      "have.class",
-      "multiselect--disabled",
-    );
-
-    // Reload servers without errors
-    cy.intercept("GET", "api/v1/servers*", {
-      fixture: "servers.json",
-    }).as("serversRequest");
-
-    cy.get('[data-test="servers-reload-button"]').click();
-
-    cy.wait("@serversRequest");
-
-    cy.get('[data-test="server-dropdown"]').should(
-      "have.class",
-      "multiselect--disabled",
-    );
-
-    cy.get('[data-test="servers-reload-button"]').should("not.exist");
-
-    // Check with 401 error
-    cy.intercept("GET", "api/v1/servers*", {
-      statusCode: 401,
-    }).as("serversRequest");
-
-    cy.reload();
-
-    cy.wait("@serverPoolRequest");
-
-    cy.wait("@serversRequest");
-
-    // Check that redirect worked and error message is shown
-    cy.url().should("include", "/login?redirect=/admin/server_pools/1");
-
-    cy.checkToastMessage("app.flash.unauthenticated");
-  });
 });
diff --git a/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js b/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js
index 73a23e515..bc47f80a0 100644
--- a/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js
@@ -251,7 +251,6 @@ describe("Admin server pools view", function () {
     cy.url().should("not.include", "/edit");
 
     cy.wait("@serverPoolRequest");
-    cy.wait("@serversRequest");
 
     // Check that changes were not saved
     cy.get("#name").should("be.disabled").and("have.value", "Test");

From 674bb51ab5a5bcd5d8cda80218ce6ca7936401bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Fri, 27 Dec 2024 15:14:04 +0100
Subject: [PATCH 30/79] Start adding AdminRoomTypes tests

---
 resources/js/components/ColorSelect.vue       |    1 +
 resources/js/components/RoomTypeBadge.vue     |    1 +
 .../SettingsRoomTypesDeleteButton.vue         |   15 +-
 resources/js/views/AdminRoomTypesIndex.vue    |   27 +-
 resources/js/views/AdminRoomTypesView.vue     |  217 +-
 tests/Frontend/e2e/AdminRoomTypesEdit.cy.js   | 2115 +++++++++++++++++
 tests/Frontend/e2e/AdminRoomTypesIndex.cy.js  |  495 ++++
 .../AdminRoomTypesIndexRoomTypeActions.cy.js  |  523 ++++
 tests/Frontend/e2e/AdminRoomTypesNew.cy.js    | 1775 ++++++++++++++
 tests/Frontend/e2e/AdminRoomTypesView.cy.js   |  693 ++++++
 .../AdminRoomTypesViewRoomTypeActions.cy.js   |  912 +++++++
 tests/Frontend/e2e/AdminServerPoolsEdit.cy.js |    2 +-
 .../Frontend/e2e/AdminServerPoolsIndex.cy.js  |    4 +-
 tests/Frontend/e2e/AdminServerPoolsNew.cy.js  |    4 +-
 tests/Frontend/e2e/AdminServerPoolsView.cy.js |    4 +-
 tests/Frontend/e2e/AdminUsersNew.cy.js        |    6 +-
 tests/Frontend/fixtures/config.json           |    3 +-
 tests/Frontend/fixtures/roomType.json         |   58 +
 tests/Frontend/fixtures/roomTypes.json        |   16 +-
 .../commands/adminRoomTypesCommands.js        |   27 +
 .../support/commands/interceptCommands.js     |   48 +
 tests/Frontend/support/e2e.js                 |   14 +
 22 files changed, 6893 insertions(+), 67 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
 create mode 100644 tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
 create mode 100644 tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js
 create mode 100644 tests/Frontend/e2e/AdminRoomTypesNew.cy.js
 create mode 100644 tests/Frontend/e2e/AdminRoomTypesView.cy.js
 create mode 100644 tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
 create mode 100644 tests/Frontend/fixtures/roomType.json
 create mode 100644 tests/Frontend/support/commands/adminRoomTypesCommands.js

diff --git a/resources/js/components/ColorSelect.vue b/resources/js/components/ColorSelect.vue
index aa9aa94e0..80fcb66e0 100644
--- a/resources/js/components/ColorSelect.vue
+++ b/resources/js/components/ColorSelect.vue
@@ -10,6 +10,7 @@
         selected: isColorSelected(color),
         'pointer-events-none cursor-not-allowed opacity-80': props.disabled,
       }"
+      data-test="color-button"
       @click="selectColor(color)"
     >
       <div class="overlay">
diff --git a/resources/js/components/RoomTypeBadge.vue b/resources/js/components/RoomTypeBadge.vue
index fb5b8b9d8..17c6f7920 100644
--- a/resources/js/components/RoomTypeBadge.vue
+++ b/resources/js/components/RoomTypeBadge.vue
@@ -5,6 +5,7 @@
     :pt="{
       root: { style: { background: roomType.color } },
     }"
+    data-test="room-type-badge"
   >
     {{ roomType.name }}
   </Tag>
diff --git a/resources/js/components/SettingsRoomTypesDeleteButton.vue b/resources/js/components/SettingsRoomTypesDeleteButton.vue
index c00e435e5..c0f6de690 100644
--- a/resources/js/components/SettingsRoomTypesDeleteButton.vue
+++ b/resources/js/components/SettingsRoomTypesDeleteButton.vue
@@ -5,6 +5,7 @@
     :disabled="isBusy"
     severity="danger"
     icon="fa-solid fa-trash"
+    data-test="room-types-delete-button"
     @click="showModal"
   />
 
@@ -18,18 +19,20 @@
     :dismissable-mask="!isBusy"
     :closeable="!isBusy"
     :draggable="false"
+    data-test="room-types-delete-dialog"
   >
     <span>
       {{ $t("admin.room_types.delete.confirm", { name: props.name }) }}
     </span>
     <Divider />
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-2" data-test="replacement-room-type-field">
       <label for="replacement-room-type">{{
         $t("admin.room_types.delete.replacement")
       }}</label>
       <Select
         id="replacement-room-type"
         v-model.number="replacement"
+        data-test="replacement-room-type-dropdown"
         autofocus
         :disabled="isBusy"
         :loading="loadingRoomTypes"
@@ -42,6 +45,14 @@
         option-label="text"
         aria-describedby="replacement-help"
         show-clear
+        :pt="{
+          listContainer: {
+            'data-test': 'replacement-room-type-dropdown-items',
+          },
+          option: {
+            'data-test': 'replacement-room-type-dropdown-option',
+          },
+        }"
       >
         <template #clearicon="{ clearCallback }">
           <span
@@ -62,12 +73,14 @@
       <Button
         :label="$t('app.no')"
         severity="secondary"
+        data-test="dialog-cancel-button"
         @click="modalVisible = false"
       />
       <Button
         :label="$t('app.yes')"
         severity="danger"
         :loading="isBusy"
+        data-test="dialog-continue-button"
         @click="deleteRoomType"
       />
     </template>
diff --git a/resources/js/views/AdminRoomTypesIndex.vue b/resources/js/views/AdminRoomTypesIndex.vue
index 9db8862e4..5de95158b 100644
--- a/resources/js/views/AdminRoomTypesIndex.vue
+++ b/resources/js/views/AdminRoomTypesIndex.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="mb-6 flex flex-col justify-between md:flex-row">
       <div>
-        <InputGroup>
+        <InputGroup data-test="room-type-search">
           <InputText
             v-model="nameSearch"
             :placeholder="$t('app.search')"
@@ -23,6 +23,7 @@
         as="router-link"
         icon="fa-solid fa-plus"
         :to="{ name: 'admin.room_types.new' }"
+        data-test="room-types-add-button"
       />
     </div>
 
@@ -40,6 +41,28 @@
       :rows="settingsStore.getSetting('general.pagination_page_size')"
       :pt="{
         table: 'table-auto lg:table-fixed',
+        bodyRow: {
+          'data-test': 'room-type-item',
+        },
+        mask: {
+          'data-test': 'overlay',
+        },
+        column: {
+          bodyCell: {
+            'data-test': 'room-type-item-cell',
+          },
+          headerCell: {
+            'data-test': 'room-type-header-cell',
+          },
+        },
+        pcPaginator: {
+          page: {
+            'data-test': 'paginator-page',
+          },
+          next: {
+            'data-test': 'paginator-next-button',
+          },
+        },
       }"
     >
       <template #empty>
@@ -84,6 +107,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-eye"
+              data-test="room-types-view-button"
             />
             <Button
               v-if="userPermissions.can('update', slotProps.data)"
@@ -101,6 +125,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-edit"
+              data-test="room-types-edit-button"
             />
             <SettingsRoomTypesDeleteButton
               v-if="userPermissions.can('delete', slotProps.data)"
diff --git a/resources/js/views/AdminRoomTypesView.vue b/resources/js/views/AdminRoomTypesView.vue
index 61edb4c9e..22631a221 100644
--- a/resources/js/views/AdminRoomTypesView.vue
+++ b/resources/js/views/AdminRoomTypesView.vue
@@ -10,6 +10,7 @@
           :to="{ name: 'admin.room_types.view', params: { id: model.id } }"
           :label="$t('app.cancel_editing')"
           icon="fa-solid fa-times"
+          data-test="room-types-cancel-edit-button"
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', model)"
@@ -19,6 +20,7 @@
           :to="{ name: 'admin.room_types.edit', params: { id: model.id } }"
           :label="$t('app.edit')"
           icon="fa-solid fa-edit"
+          data-test="room-types-edit-button"
         />
         <SettingsRoomTypesDeleteButton
           v-if="userPermissions.can('delete', model)"
@@ -39,7 +41,10 @@
         <!-- General room type settings -->
         <AdminPanel :title="$t('rooms.settings.general.title')">
           <!-- Room type name -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="room-type-name-field"
+          >
             <label
               for="room-type-name"
               class="col-span-12 md:col-span-4 md:mb-0"
@@ -59,7 +64,10 @@
           </div>
 
           <!-- Room type description -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="description-field"
+          >
             <label
               for="description"
               class="col-span-12 md:col-span-4 md:mb-0"
@@ -78,7 +86,10 @@
           </div>
 
           <!-- Room type color -->
-          <fieldset class="field grid grid-cols-12 gap-4">
+          <fieldset
+            class="field grid grid-cols-12 gap-4"
+            data-test="color-field"
+          >
             <legend class="col-span-12 items-start md:col-span-4 md:mb-0">
               {{ $t("admin.room_types.color") }}
             </legend>
@@ -105,7 +116,7 @@
           </fieldset>
 
           <!-- Preview -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="preview-field">
             <label class="col-span-12 md:col-span-4 md:mb-0">{{
               $t("admin.room_types.preview")
             }}</label>
@@ -115,7 +126,10 @@
           </div>
 
           <!-- Server pool for this room type -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="server-pool-field"
+          >
             <label
               id="server-pool-label"
               class="col-span-12 items-start md:col-span-4 md:mb-0"
@@ -126,6 +140,7 @@
                 <multiselect
                   ref="serverPoolMultiselectRef"
                   v-model="model.server_pool"
+                  data-test="server-pool-dropdown"
                   aria-labelledby="server-pool-label"
                   :placeholder="$t('admin.room_types.select_server_pool')"
                   track-by="id"
@@ -165,6 +180,7 @@
                         outlined
                         icon="fa-solid fa-arrow-left"
                         :label="$t('app.previous_page')"
+                        data-test="previous-page-button"
                         @click="
                           loadServerPools(
                             Math.max(1, serverPoolsCurrentPage - 1),
@@ -179,6 +195,7 @@
                         outlined
                         icon="fa-solid fa-arrow-right"
                         :label="$t('app.next_page')"
+                        data-test="next-page-button"
                         @click="loadServerPools(serverPoolsCurrentPage + 1)"
                       />
                     </div>
@@ -189,6 +206,7 @@
                   severity="secondary"
                   outlined
                   icon="fa-solid fa-sync"
+                  data-test="server-pools-reload-button"
                   @click="loadServerPools(serverPoolsCurrentPage)"
                 />
               </InputGroup>
@@ -200,7 +218,7 @@
           </div>
 
           <!-- Option to restrict the usage of this room type to selected roles-->
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="restrict-field">
             <label
               for="restrict"
               class="col-span-12 items-start md:col-span-4 md:mb-0"
@@ -224,7 +242,11 @@
           </div>
 
           <!-- Selection of the roles -->
-          <div v-if="model.restrict" class="field grid grid-cols-12 gap-4">
+          <div
+            v-if="model.restrict"
+            class="field grid grid-cols-12 gap-4"
+            data-test="role-field"
+          >
             <label id="roles-label" class="col-span-12 md:col-span-4 md:mb-0">{{
               $t("app.roles")
             }}</label>
@@ -242,7 +264,10 @@
           </div>
 
           <!-- Maximum number of participants -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="max-participants-field"
+          >
             <label
               for="max-participants"
               class="col-span-12 items-start md:col-span-4 md:mb-0"
@@ -268,7 +293,10 @@
           </div>
 
           <!-- Maximum duration -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="max-duration-field"
+          >
             <label
               for="max-duration"
               class="col-span-12 items-start md:col-span-4 md:mb-0"
@@ -302,7 +330,10 @@
           </h4>
 
           <!-- Has access code setting (defines if the room should have an access code) -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="has-access-code-field"
+          >
             <label
               for="has-access-code-default"
               class="col-span-12 items-center md:col-span-4 md:m-0"
@@ -329,7 +360,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="has-access-code-enforced"
+                  data-test="has-access-code-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -345,7 +376,10 @@
           </div>
 
           <!-- Allow guests to access the room -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="allow-guests-field"
+          >
             <label
               for="allow-guests-default"
               class="col-span-12 items-center md:col-span-4 md:m-0"
@@ -371,7 +405,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="allow-guests-enforced"
+                  data-test="allow-guests-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -395,7 +429,10 @@
             {{ $t("rooms.settings.video_conference.title") }}
           </h4>
 
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="everyone-can-start-field"
+          >
             <label
               for="everyone-can-start-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -427,7 +464,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="everyone-can-start-enforced"
+                  data-test="everyone-can-start-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -444,7 +481,10 @@
           </div>
 
           <!-- Mute everyone*s microphone on meeting join -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="mute-on-start-field"
+          >
             <label
               for="mute-on-start-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -470,7 +510,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="mute-on-start-enforced"
+                  data-test="mute-on-start-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -487,14 +527,17 @@
           </div>
 
           <!-- Usage of the waiting room/guest lobby -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="lobby-field">
             <label class="col-span-12 items-center md:col-span-4 md:mb-0">{{
               $t("rooms.settings.video_conference.lobby.title")
             }}</label>
             <div class="col-span-12 mb-2 md:col-span-8">
               <div class="flex flex-row items-center justify-between">
                 <div class="flex flex-col gap-2">
-                  <div class="flex items-center gap-2">
+                  <div
+                    class="flex items-center gap-2"
+                    data-test="lobby-disabled-field"
+                  >
                     <RadioButton
                       v-model.number="model.lobby_default"
                       :disabled="isBusy || modelLoadingError || viewOnly"
@@ -504,7 +547,10 @@
                     />
                     <label for="lobby-disabled">{{ $t("app.disabled") }}</label>
                   </div>
-                  <div class="flex items-center gap-2">
+                  <div
+                    class="flex items-center gap-2"
+                    data-test="lobby-enabled-field"
+                  >
                     <RadioButton
                       v-model.number="model.lobby_default"
                       :disabled="isBusy || modelLoadingError || viewOnly"
@@ -514,7 +560,10 @@
                     />
                     <label for="lobby-enabled">{{ $t("app.enabled") }}</label>
                   </div>
-                  <div class="flex items-center gap-2">
+                  <div
+                    class="flex items-center gap-2"
+                    data-test="lobby-only-for-guests-field"
+                  >
                     <RadioButton
                       v-model.number="model.lobby_default"
                       :disabled="isBusy || modelLoadingError || viewOnly"
@@ -541,7 +590,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="lobby-enforced"
+                  data-test="lobby-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -567,7 +616,10 @@
           </h4>
 
           <!-- Record attendance of users and guests -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="record-attendance-field"
+          >
             <label
               for="record-attendance-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -597,7 +649,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="record-attendance-enforced"
+                  data-test="record-attendance-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -614,7 +666,7 @@
           </div>
 
           <!-- Record video-conf -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="record-field">
             <label
               for="record-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -642,7 +694,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="record-attendance-enforced"
+                  data-test="record-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -657,7 +709,10 @@
           </div>
 
           <!-- Auto start recording video-conf -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="auto-start-recording-field"
+          >
             <label
               for="auto-start-recording-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -687,7 +742,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="record-attendance-enforced"
+                  data-test="auto-start-recording-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -713,7 +768,10 @@
           </h4>
 
           <!-- Disable the ability to use the webcam for non moderator-uses, can be changed during the meeting -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="disable-cam-field"
+          >
             <label
               for="disable-cam-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -747,7 +805,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="disable-cam-enforced"
+                  data-test="disable-cam-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -771,7 +829,10 @@
           Disable the ability to see the webcam of non moderator-users, moderators can see all webcams,
           can be changed during the meeting
           -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="webcams-only-for-moderator-field"
+          >
             <label
               for="webcams-only-for-moderator-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -808,7 +869,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="webcams-only-for-moderator-enforced"
+                  data-test="webcams-only-for-moderator-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -829,7 +890,10 @@
           </div>
 
           <!-- Disable the ability to use the microphone for non moderator-uses, can be changed during the meeting -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="disable-mic-field"
+          >
             <label
               for="disable-mic-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -863,7 +927,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="disable-mic-enforced"
+                  data-test="disable-mic-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -884,7 +948,10 @@
           </div>
 
           <!-- Disable the ability to send messages via the public chat for non moderator-uses, can be changed during the meeting -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="disable-public-chat-field"
+          >
             <label
               for="disable-public-chat-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -922,7 +989,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="disable-public-chat-enforced"
+                  data-test="disable-public-chat-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -951,7 +1018,10 @@
           private chats with the moderators is still possible
           can be changed during the meeting
           -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="disable-private-chat-field"
+          >
             <label
               for="disable-private-chat-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -989,7 +1059,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="disable-private-chat-enforced"
+                  data-test="disable-private-chat-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -1014,7 +1084,10 @@
           </div>
 
           <!-- Disable the ability to edit the notes for non moderator-uses, can be changed during the meeting -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="disable-note-field"
+          >
             <label
               for="disable-note-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -1050,7 +1123,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="disable-note-enforced"
+                  data-test="disable-note-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -1071,7 +1144,10 @@
           </div>
 
           <!-- Disable the ability to see a list of all participants for non moderator-uses, can be changed during the meeting -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="hide-user-list-field"
+          >
             <label
               for="hide-user-list-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -1107,7 +1183,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="hide-user-list-enforced"
+                  data-test="hide-user-list-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -1137,7 +1213,10 @@
           </h4>
 
           <!-- Allow users to become room members -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="allow-membership-field"
+          >
             <label
               for="allow-membership-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -1165,7 +1244,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="allow-membership-enforced"
+                  data-test="allow-membership-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -1182,7 +1261,10 @@
           </div>
 
           <!-- Default user role for logged in users only -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="default-role-field"
+          >
             <label
               id="default-role-label"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -1209,6 +1291,13 @@
                   aria-labelledby="default-role-label"
                   option-label="label"
                   option-value="role"
+                  :pt="{
+                    pcToggleButton: {
+                      root: {
+                        'data-test': 'default-role-default-button',
+                      },
+                    },
+                  }"
                 />
                 <ToggleButton
                   v-model="model.default_role_enforced"
@@ -1222,7 +1311,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="default-role-enforced"
+                  data-test="default-role-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -1244,7 +1333,10 @@
           </h4>
 
           <!-- Room visibility setting -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="visibility-field"
+          >
             <label
               id="visibility-label"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -1272,6 +1364,13 @@
                   aria-labelledby="visibility-label"
                   option-label="label"
                   option-value="visibility"
+                  :pt="{
+                    pcToggleButton: {
+                      root: {
+                        'data-test': 'visibility-default-button',
+                      },
+                    },
+                  }"
                 />
                 <ToggleButton
                   v-model="model.visibility_enforced"
@@ -1285,7 +1384,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="visibility-enforced"
+                  data-test="visibility-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -1305,7 +1404,10 @@
         <!-- BBB api settings -->
         <AdminPanel :title="$t('admin.room_types.bbb_api.title')">
           <!-- Create meeting plugin config -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="create-parameters-field"
+          >
             <label
               for="create-parameters"
               class="col-span-12 items-start md:col-span-4 md:mb-0"
@@ -1350,12 +1452,27 @@
               type="submit"
               icon="fa-solid fa-save"
               :label="$t('app.save')"
+              data-test="room-types-save-button"
             />
           </div>
         </div>
       </form>
     </OverlayComponent>
-    <ConfirmDialog></ConfirmDialog>
+    <ConfirmDialog
+      data-test="stale-room-type-dialog"
+      :pt="{
+        pcAcceptButton: {
+          root: {
+            'data-test': 'stale-dialog-accept-button',
+          },
+        },
+        pcRejectButton: {
+          root: {
+            'data-test': 'stale-dialog-reject-button',
+          },
+        },
+      }"
+    ></ConfirmDialog>
   </div>
 </template>
 
diff --git a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
new file mode 100644
index 000000000..3c9b07d64
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
@@ -0,0 +1,2115 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin room types edit", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRoomTypesViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/room_types/3/edit");
+  });
+
+  it("visit with user without permission to edit room types", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roomTypes.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/room_types/3/edit");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("edit room type", function () {
+    const roomTypeRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roomTypes/3",
+      { fixture: "roomType.json" },
+      "roomTypeRequest",
+    );
+
+    cy.visit("/admin/room_types/3/edit");
+
+    // Check loading
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+    cy.get('[data-test="room-types-save-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        roomTypeRequest.sendResponse();
+      });
+
+    cy.wait("@roomTypeRequest");
+    cy.wait("@serverPoolsRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that correct buttons are shown
+    cy.get('[data-test="room-types-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/room_types/3");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+    cy.get('[data-test="room-types-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Change room type settings
+    cy.get('[data-test="room-type-name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#room-type-name").should("have.value", "Exam").clear();
+        cy.get("#room-type-name").type("Exam 01");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "Room type description for room type Exam")
+          .clear();
+        cy.get("#description").type(
+          "New room type description for room type Exam 01",
+        );
+      });
+
+    cy.get('[data-test="color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.color")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "not.have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and("not.have.class", "selected");
+        }
+
+        // Clear custom color and check that color buttons are not selected
+        cy.get("#custom-color")
+          .should("have.value", "#4a5c66")
+          .and("not.be.disabled")
+          .clear();
+
+        // Set custom color and check that color buttons is selected
+        cy.get("#custom-color").type("#06b6d4");
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 2 ? "have.class" : "not.have.class", "selected");
+        }
+
+        // Click on color button and check that color buttons is selected
+        cy.get('[data-test="color-button"]').eq(7).click();
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 7 ? "have.class" : "not.have.class", "selected");
+        }
+
+        cy.get("#custom-color").should("have.value", "#ef4444");
+      });
+
+    cy.get('[data-test="preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.preview")
+      .within(() => {
+        cy.get('[data-test="room-type-badge"]')
+          .should("have.css", "background-color", "rgb(239, 68, 68)")
+          .and("have.text", "Exam 01");
+      });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-pool-field"]')
+      .should("be.visible")
+      .and("include.text", "app.server_pool")
+      .within(() => {
+        cy.get('[data-test="server-pool-dropdown"]').within(() => {
+          cy.get(".multiselect__tags").should("include.text", "Test").click();
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 4);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Test")
+      .and("be.visible")
+      .and("have.class", "multiselect__option--selected");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Production")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "admin.server_pools.no_data")
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option").eq(1).click();
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Production");
+    });
+
+    cy.get('[data-test="restrict-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.restrict")
+      .within(() => {
+        cy.get("#restrict").should("not.be.checked").and("not.be.disabled");
+      });
+
+    cy.get('[data-test="role-field"]').should("not.exist");
+
+    cy.get('[data-test="max-participants-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.max_participants")
+      .within(() => {
+        cy.get("#max-participants").should("have.value", "100").clear();
+        cy.get("#max-participants").type("50");
+      });
+
+    cy.get('[data-test="max-duration-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.max_duration")
+      .within(() => {
+        cy.get("#max-duration").should("have.value", "120 min.").clear();
+        cy.get("#max-duration").type("60");
+      });
+
+    // Change default and enforced values
+    cy.contains("admin.room_types.default_room_settings.title").should(
+      "be.visible",
+    );
+    cy.contains("rooms.settings.general.title").should("be.visible");
+
+    cy.get('[data-test="has-access-code-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.general.has_access_code")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "has-access-code",
+          true,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#has-access-code-default").click();
+    cy.get('[data-test="has-access-code-enforced"]').click();
+
+    cy.get('[data-test="allow-guests-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.general.allow_guests")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "allow-guests",
+          true,
+          true,
+          false,
+        );
+      });
+
+    cy.get("#allow-guests-default").click();
+    cy.get('[data-test="allow-guests-enforced"]').click();
+
+    cy.contains("rooms.settings.video_conference.title").should("be.visible");
+
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.everyone_can_start")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "everyone-can-start",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#everyone-can-start-default").click();
+    cy.get('[data-test="everyone-can-start-enforced"]').click();
+
+    cy.get('[data-test="mute-on-start-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.mute_on_start")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "mute-on-start",
+          true,
+          true,
+          false,
+        );
+      });
+
+    cy.get("#mute-on-start-default").click();
+    cy.get('[data-test="mute-on-start-enforced"]').click();
+
+    cy.get('[data-test="lobby-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.lobby.title")
+      .within(() => {
+        cy.get('[data-test="lobby-disabled-field"]')
+          .should("be.visible")
+          .and("include.text", "app.disabled")
+          .within(() => {
+            cy.get("#lobby-disabled")
+              .should("not.be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="lobby-enabled-field"]')
+          .should("be.visible")
+          .and("include.text", "app.enabled")
+          .within(() => {
+            cy.get("#lobby-enabled")
+              .should("not.be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="lobby-only-for-guests-field"]')
+          .should("be.visible")
+          .and(
+            "include.text",
+            "rooms.settings.video_conference.lobby.only_for_guests_enabled",
+          )
+          .within(() => {
+            cy.get("#lobby-only-for-guests")
+              .should("be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="lobby-enforced"]').should(
+          "have.text",
+          "admin.room_types.default_room_settings.enforced",
+        );
+      });
+
+    cy.get("#lobby-disabled").click();
+    cy.get('[data-test="lobby-enforced"]').click();
+
+    cy.contains("rooms.settings.recordings.title").should("be.visible");
+
+    cy.get('[data-test="record-attendance-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_attendance")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record-attendance",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#record-attendance-default").click();
+    cy.get('[data-test="record-attendance-enforced"]').click();
+
+    cy.get('[data-test="record-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_video_conference")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#record-default").click();
+    cy.get('[data-test="record-enforced"]').click();
+
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.auto_start_recording")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "auto-start-recording",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#auto-start-recording-default").click();
+    cy.get('[data-test="auto-start-recording-enforced"]').click();
+
+    cy.contains("rooms.settings.restrictions.title").should("be.visible");
+
+    cy.get('[data-test="disable-cam-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_cam",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-cam",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#disable-cam-default").click();
+    cy.get('[data-test="disable-cam-enforced"]').click();
+
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.webcams_only_for_moderator",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "webcams-only-for-moderator",
+          true,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#webcams-only-for-moderator-default").click();
+    cy.get('[data-test="webcams-only-for-moderator-enforced"]').click();
+
+    cy.get('[data-test="disable-mic-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_mic",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-mic",
+          false,
+          true,
+          false,
+        );
+      });
+
+    cy.get("#disable-mic-default").click();
+    cy.get('[data-test="disable-mic-enforced"]').click();
+
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_public_chat",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-public-chat",
+          true,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#disable-public-chat-default").click();
+    cy.get('[data-test="disable-public-chat-enforced"]').click();
+
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_private_chat",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-private-chat",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#disable-private-chat-default").click();
+    cy.get('[data-test="disable-private-chat-enforced"]').click();
+
+    cy.get('[data-test="disable-note-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_note",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-note",
+          true,
+          true,
+          false,
+        );
+      });
+
+    cy.get("#disable-note-default").click();
+    cy.get('[data-test="disable-note-enforced"]').click();
+
+    cy.get('[data-test="hide-user-list-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_hide_user_list",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "hide-user-list",
+          true,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#hide-user-list-default").click();
+    cy.get('[data-test="hide-user-list-enforced"]').click();
+
+    cy.contains("rooms.settings.participants.title").should("be.visible");
+
+    cy.get('[data-test="allow-membership-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.participants.allow_membership")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "allow-membership",
+          false,
+          true,
+          false,
+        );
+      });
+
+    cy.get("#allow-membership-default").click();
+    cy.get('[data-test="allow-membership-enforced"]').click();
+
+    cy.get('[data-test="default-role-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.participants.default_role.title")
+      .and(
+        "include.text",
+        "rooms.settings.participants.default_role.only_logged_in",
+      )
+      .within(() => {
+        cy.get('[data-test="default-role-default-button"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="default-role-default-button"]')
+          .eq(0)
+          .should("have.text", "rooms.roles.participant")
+          .should("have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="default-role-default-button"]')
+          .eq(1)
+          .should("have.text", "rooms.roles.moderator")
+          .should("not.have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="default-role-enforced"]').should(
+          "have.text",
+          "admin.room_types.default_room_settings.default",
+        );
+      });
+
+    cy.get('[data-test="default-role-default-button"]').eq(1).click();
+    cy.get('[data-test="default-role-enforced"]').click();
+
+    cy.contains("rooms.settings.advanced.title").should("be.visible");
+
+    cy.get('[data-test="visibility-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.advanced.visibility")
+      .within(() => {
+        cy.get('[data-test="visibility-default-button"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="visibility-default-button"]')
+          .eq(0)
+          .should("have.text", "rooms.settings.advanced.visibility.private")
+          .should("not.have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="visibility-default-button"]')
+          .eq(1)
+          .should("have.text", "rooms.settings.advanced.visibility.public")
+          .should("have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="visibility-enforced"]').should(
+          "have.text",
+          "admin.room_types.default_room_settings.default",
+        );
+      });
+
+    cy.get('[data-test="visibility-default-button"]').eq(0).click();
+    cy.get('[data-test="visibility-enforced"]').click();
+
+    // Change other settings
+    cy.contains("admin.room_types.bbb_api.title").should("be.visible");
+
+    cy.get('[data-test="create-parameters-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.bbb_api.create_parameters")
+      .and(
+        "include.text",
+        "admin.room_types.bbb_api.create_parameters_description",
+      )
+      .within(() => {
+        cy.get("#create-parameters")
+          .should(
+            "have.value",
+            "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+          )
+          .clear();
+
+        cy.get("#create-parameters").type("meetingLayout=PRESENTATION_FOCUS");
+      });
+
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.name = "Exam 01";
+      roomType.data.description =
+        "New room type description for room type Exam 01";
+      roomType.data.color = "#ef4444";
+      roomType.data.server_pool = {
+        id: 2,
+        name: "Production",
+        description: "Pool for production",
+        servers_count: 1,
+        model_name: "ServerPool",
+        updated_at: "2020-12-21T13:43:21.000000Z",
+      };
+      roomType.data.max_participants = 50;
+      roomType.data.max_duration = 60;
+      roomType.data.create_parameters = "meetingLayout=PRESENTATION_FOCUS";
+      roomType.data.restrict = false;
+      roomType.data.roles = [];
+      roomType.data.mute_on_start_default = false;
+      roomType.data.mute_on_start_enforced = false;
+      roomType.data.lock_settings_disable_cam_default = true;
+      roomType.data.lock_settings_disable_cam_enforced = true;
+      roomType.data.webcams_only_for_moderator_default = false;
+      roomType.data.webcams_only_for_moderator_enforced = true;
+      roomType.data.lock_settings_disable_mic_default = true;
+      roomType.data.lock_settings_disable_mic_enforced = false;
+      roomType.data.lock_settings_disable_private_chat_default = true;
+      roomType.data.lock_settings_disable_private_chat_enforced = true;
+      roomType.data.lock_settings_disable_public_chat_default = false;
+      roomType.data.lock_settings_disable_public_chat_enforced = true;
+      roomType.data.lock_settings_disable_note_default = false;
+      roomType.data.lock_settings_disable_note_enforced = false;
+      roomType.data.lock_settings_hide_user_list_default = false;
+      roomType.data.lock_settings_hide_user_list_enforced = true;
+      roomType.data.everyone_can_start_default = true;
+      roomType.data.everyone_can_start_enforced = true;
+      roomType.data.allow_membership_default = true;
+      roomType.data.allow_membership_enforced = false;
+      roomType.data.allow_guests_default = false;
+      roomType.data.allow_guests_enforced = false;
+      roomType.data.default_role_default = 2;
+      roomType.data.default_role_enforced = true;
+      roomType.data.lobby_default = 0;
+      roomType.data.lobby_enforced = false;
+      roomType.data.visibility_default = 0;
+      roomType.data.visibility_enforced = true;
+      roomType.data.record_attendance_default = true;
+      roomType.data.record_attendance_enforced = true;
+      roomType.data.record_default = true;
+      roomType.data.record_enforced = true;
+      roomType.data.auto_start_recording_default = true;
+      roomType.data.auto_start_recording_enforced = true;
+      roomType.data.has_access_code_default = false;
+      roomType.data.has_access_code_enforced = true;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/roomTypes/3",
+        {
+          statusCode: 201,
+          body: roomType,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get("#room-type-name").should("be.disabled");
+      cy.get("#description").should("be.disabled");
+      for (let i = 0; i < 10; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should("have.attr", "role", "button")
+          .and(
+            "have.class",
+            "pointer-events-none cursor-not-allowed opacity-80",
+          );
+      }
+      cy.get("#custom-color").should("be.disabled");
+      cy.get('[data-test="server-pool-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+
+      cy.get("#restrict").should("be.disabled");
+
+      cy.get("#max-participants").should("be.disabled");
+      cy.get("#max-duration").should("be.disabled");
+
+      cy.get("#has-access-code-default").should("be.disabled");
+      cy.get('[data-test="has-access-code-enforced"]').should("be.disabled");
+      cy.get("#allow-guests-default").should("be.disabled");
+      cy.get('[data-test="allow-guests-enforced"]').should("be.disabled");
+      cy.get("#everyone-can-start-default").should("be.disabled");
+      cy.get('[data-test="everyone-can-start-enforced"]').should("be.disabled");
+      cy.get("#mute-on-start-default").should("be.disabled");
+      cy.get('[data-test="mute-on-start-enforced"]').should("be.disabled");
+      cy.get("#lobby-disabled").should("be.disabled");
+      cy.get("#lobby-enabled").should("be.disabled");
+      cy.get("#lobby-only-for-guests").should("be.disabled");
+      cy.get('[data-test="lobby-enforced"]').should("be.disabled");
+      cy.get("#record-attendance-default").should("be.disabled");
+      cy.get('[data-test="record-attendance-enforced"]').should("be.disabled");
+      cy.get("#record-default").should("be.disabled");
+      cy.get('[data-test="record-enforced"]').should("be.disabled");
+      cy.get("#auto-start-recording-default").should("be.disabled");
+      cy.get('[data-test="auto-start-recording-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-cam-default").should("be.disabled");
+      cy.get('[data-test="disable-cam-enforced"]').should("be.disabled");
+      cy.get("#webcams-only-for-moderator-default").should("be.disabled");
+      cy.get('[data-test="webcams-only-for-moderator-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-mic-default").should("be.disabled");
+      cy.get('[data-test="disable-mic-enforced"]').should("be.disabled");
+      cy.get("#disable-public-chat-default").should("be.disabled");
+      cy.get('[data-test="disable-public-chat-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-private-chat-default").should("be.disabled");
+      cy.get('[data-test="disable-private-chat-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-note-default").should("be.disabled");
+      cy.get('[data-test="disable-note-enforced"]').should("be.disabled");
+      cy.get("#hide-user-list-default").should("be.disabled");
+      cy.get('[data-test="hide-user-list-enforced"]').should("be.disabled");
+      cy.get("#allow-membership-default").should("be.disabled");
+      cy.get('[data-test="allow-membership-enforced"]').should("be.disabled");
+      cy.get('[data-test="default-role-default-button"]').should(
+        "have.length",
+        2,
+      );
+      cy.get('[data-test="default-role-default-button"]')
+        .eq(0)
+        .should("be.disabled");
+      cy.get('[data-test="default-role-default-button"]')
+        .eq(1)
+        .should("be.disabled");
+      cy.get('[data-test="default-role-enforced"]').should("be.disabled");
+      cy.get('[data-test="visibility-default-button"]').should(
+        "have.length",
+        2,
+      );
+      cy.get('[data-test="visibility-default-button"]')
+        .eq(0)
+        .should("be.disabled");
+      cy.get('[data-test="visibility-default-button"]')
+        .eq(1)
+        .should("be.disabled");
+      cy.get('[data-test="visibility-enforced"]').should("be.disabled");
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+
+      const roomTypeRequestData = { ...roomType.data };
+      roomTypeRequestData.server_pool = roomTypeRequestData.server_pool.id;
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql(roomTypeRequestData);
+      });
+    });
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that room type view page is shown
+    cy.url().should("include", "/admin/room_types/3");
+    cy.url().should("not.include", "/edit");
+  });
+
+  it("edit room type with restrictions", function () {
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Admin",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+    });
+
+    cy.visit("/admin/room_types/3/edit");
+    cy.wait("@roomTypeRequest");
+    cy.wait("@serverPoolsRequest");
+    cy.wait("@userRolesRequest");
+
+    cy.get('[data-test="restrict-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.restrict")
+      .within(() => {
+        cy.get("#restrict").should("be.checked").and("not.be.disabled");
+      });
+
+    // Check role setting and change it
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="role-field"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]').within(() => {
+          cy.get('[data-test="role-chip"]').should("have.length", 2);
+          cy.get('[data-test="role-chip"]')
+            .eq(0)
+            .should("include.text", "Admin")
+            .find('[data-test="remove-role-button"]')
+            .should("be.visible");
+
+          cy.get('[data-test="role-chip"]')
+            .eq(1)
+            .should("include.text", "Staff")
+            .find('[data-test="remove-role-button"]')
+            .should("be.visible");
+        });
+        cy.get('[data-test="role-dropdown"]').click();
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 5);
+        cy.get(".multiselect__option")
+          .eq(0)
+          .should("include.text", "Admin")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(1)
+          .should("include.text", "Staff")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(2)
+          .should("include.text", "Students")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(3)
+          .should(
+            "include.text",
+            "No elements found. Consider changing the search query.",
+          )
+          .and("not.be.visible");
+        cy.get(".multiselect__option")
+          .eq(4)
+          .should("include.text", "admin.roles.no_data")
+          .and("not.be.visible");
+      });
+
+    // Switch to next page
+    const userRoleRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 200,
+        body: {
+          data: [
+            {
+              id: 4,
+              name: "Dean",
+              default: false,
+              updated_at: "2021-01-08T15:51:08.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 5,
+              name: "Faculty",
+              default: false,
+              updated_at: "2021-03-19T09:12:44.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 6,
+              name: "Manager",
+              default: false,
+              updated_at: "2021-05-22T11:55:21.000000Z",
+              model_name: "Role",
+              room_limit: -1,
+            },
+          ],
+          meta: {
+            current_page: 2,
+            from: 4,
+            last_page: 2,
+            per_page: 3,
+            to: 6,
+            total: 6,
+          },
+        },
+      },
+      "userRolesRequest",
+    );
+
+    cy.get(".multiselect__content")
+      .eq(1)
+
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]')
+          .should("include.text", "app.previous_page")
+          .and("be.disabled");
+        cy.get('[data-test="next-page-button"]')
+          .should("include.text", "app.next_page")
+          .and("not.be.disabled");
+
+        cy.get('[data-test="next-page-button"]').click();
+
+        // Check loading
+        cy.get('[data-test="previous-page-button"]').should("be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]')
+      .should("be.disabled")
+      .then(() => {
+        userRoleRequest.sendResponse();
+      });
+
+    cy.wait("@userRolesRequest");
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+
+        cy.get(".multiselect__option").should("have.length", 5);
+        cy.get(".multiselect__option")
+          .eq(0)
+          .should("include.text", "Dean")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(1)
+          .should("include.text", "Faculty")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(2)
+          .should("include.text", "Manager")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(3)
+          .should(
+            "include.text",
+            "No elements found. Consider changing the search query.",
+          )
+          .and("not.be.visible");
+        cy.get(".multiselect__option")
+          .eq(4)
+          .should("include.text", "admin.roles.no_data")
+          .and("not.be.visible");
+
+        // Select roles
+        cy.get(".multiselect__option").eq(0).click();
+        cy.get(".multiselect__option").eq(2).click();
+      });
+
+    // Check that roles are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 4);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Admin")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+      cy.get('[data-test="role-chip"]')
+        .eq(2)
+        .should("include.text", "Dean")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(3)
+        .should("include.text", "Manager")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      // Remove roles
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .find('[data-test="remove-role-button"]')
+        .click();
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .find('[data-test="remove-role-button"]')
+        .click();
+    });
+
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 2,
+          name: "Staff",
+        },
+        {
+          id: 6,
+          name: "Manager",
+        },
+      ];
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/roomTypes/3",
+        {
+          statusCode: 201,
+          body: roomType,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      cy.get("#restrict").should("be.disabled");
+      cy.get('[data-test="role-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+
+      const roomTypeRequestData = { ...roomType.data };
+      roomTypeRequestData.server_pool = roomTypeRequestData.server_pool.id;
+      roomTypeRequestData.roles = roomTypeRequestData.roles.map(
+        (role) => role.id,
+      );
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql(roomTypeRequestData);
+      });
+    });
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that room type view page is shown
+    cy.url().should("include", "/admin/room_types/3");
+    cy.url().should("not.include", "/edit");
+  });
+
+  it("edit room type errors", function () {
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Admin",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+    });
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+    cy.wait("@serverPoolsRequest");
+    cy.wait("@userRolesRequest");
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/roomTypes/3", {
+      statusCode: 422,
+      body: {
+        message: "The given data was invalid.",
+        errors: {
+          name: ["The name field is required."],
+          description: ["The description field is required."],
+          color: ["The color field is required."],
+          server_pool: ["The server pool field is required."],
+          max_participants: ["The max participants field is required."],
+          max_duration: ["The max duration field is required."],
+          create_parameters: ["The create parameters field is required."],
+          roles: ["The roles field is required."],
+          has_access_code_default: [
+            "The has access code default field is required.",
+          ],
+          has_access_code_enforced: [
+            "The has access code enforced field is required.",
+          ],
+          allow_guests_default: ["The allow guests default field is required."],
+          allow_guests_enforced: [
+            "The allow guests enforced field is required.",
+          ],
+          everyone_can_start_default: [
+            "The everyone can start default field is required.",
+          ],
+          everyone_can_start_enforced: [
+            "The everyone can start enforced field is required.",
+          ],
+          mute_on_start_default: [
+            "The mute on start default field is required.",
+          ],
+          mute_on_start_enforced: [
+            "The mute on start enforced field is required.",
+          ],
+          lobby_default: ["The lobby default field is required."],
+          lobby_enforced: ["The lobby enforced field is required."],
+          record_attendance_default: [
+            "The record attendance default field is required.",
+          ],
+          record_attendance_enforced: [
+            "The record attendance enforced field is required.",
+          ],
+          record_default: ["The record default field is required."],
+          record_enforced: ["The record enforced field is required."],
+          auto_start_recording_default: [
+            "The auto start recording default field is required.",
+          ],
+          auto_start_recording_enforced: [
+            "The auto start recording enforced field is required.",
+          ],
+          lock_settings_disable_cam_default: [
+            "The lock settings disable cam default field is required.",
+          ],
+          lock_settings_disable_cam_enforced: [
+            "The lock settings disable cam enforced field is required.",
+          ],
+          webcams_only_for_moderator_default: [
+            "The webcams only for moderator default field is required.",
+          ],
+          webcams_only_for_moderator_enforced: [
+            "The webcams only for moderator enforced field is required.",
+          ],
+          lock_settings_disable_mic_default: [
+            "The lock settings disable mic default field is required.",
+          ],
+          lock_settings_disable_mic_enforced: [
+            "The lock settings disable mic enforced field is required.",
+          ],
+          lock_settings_disable_public_chat_default: [
+            "The lock settings disable public chat default field is required.",
+          ],
+          lock_settings_disable_public_chat_enforced: [
+            "The lock settings disable public chat enforced field is required.",
+          ],
+          lock_settings_disable_private_chat_default: [
+            "The lock settings disable private chat default field is required.",
+          ],
+          lock_settings_disable_private_chat_enforced: [
+            "The lock settings disable private chat enforced field is required.",
+          ],
+          lock_settings_disable_note_default: [
+            "The lock settings disable note default field is required.",
+          ],
+          lock_settings_disable_note_enforced: [
+            "The lock settings disable note enforced field is required.",
+          ],
+          lock_settings_hide_user_list_default: [
+            "The lock settings hide user list default field is required.",
+          ],
+          lock_settings_hide_user_list_enforced: [
+            "The lock settings hide user list enforced field is required.",
+          ],
+          allow_membership_default: [
+            "The allow membership default field is required.",
+          ],
+          allow_membership_enforced: [
+            "The allow membership enforced field is required.",
+          ],
+          default_role_default: ["The default role default field is required."],
+          default_role_enforced: [
+            "The default role enforced field is required.",
+          ],
+          visibility_default: ["The visibility default field is required."],
+          visibility_enforced: ["The visibility enforced field is required."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error messages
+    cy.get('[data-test="room-type-name-field"]').should(
+      "include.text",
+      "The name field is required.",
+    );
+    cy.get('[data-test="description-field"]').should(
+      "include.text",
+      "The description field is required.",
+    );
+    cy.get('[data-test="color-field"]').should(
+      "include.text",
+      "The color field is required.",
+    );
+    cy.get('[data-test="server-pool-field"]').should(
+      "include.text",
+      "The server pool field is required.",
+    );
+    cy.get('[data-test="max-participants-field"]').should(
+      "include.text",
+      "The max participants field is required.",
+    );
+    cy.get('[data-test="max-duration-field"]').should(
+      "include.text",
+      "The max duration field is required.",
+    );
+    cy.get('[data-test="create-parameters-field"]').should(
+      "include.text",
+      "The create parameters field is required.",
+    );
+    cy.get('[data-test="role-field"]').should(
+      "include.text",
+      "The roles field is required.",
+    );
+    cy.get('[data-test="has-access-code-field"]')
+      .should("include.text", "The has access code default field is required.")
+      .and("include.text", "The has access code enforced field is required.");
+    cy.get('[data-test="allow-guests-field"]')
+      .should("include.text", "The allow guests default field is required.")
+      .and("include.text", "The allow guests enforced field is required.");
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should(
+        "include.text",
+        "The everyone can start default field is required.",
+      )
+      .and(
+        "include.text",
+        "The everyone can start enforced field is required.",
+      );
+    cy.get('[data-test="mute-on-start-field"]')
+      .should("include.text", "The mute on start default field is required.")
+      .and("include.text", "The mute on start enforced field is required.");
+    cy.get('[data-test="lobby-field"]')
+      .should("include.text", "The lobby default field is required.")
+      .and("include.text", "The lobby enforced field is required.");
+    cy.get('[data-test="record-attendance-field"]')
+      .should(
+        "include.text",
+        "The record attendance default field is required.",
+      )
+      .and("include.text", "The record attendance enforced field is required.");
+    cy.get('[data-test="record-field"]')
+      .should("include.text", "The record default field is required.")
+      .and("include.text", "The record enforced field is required.");
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should(
+        "include.text",
+        "The auto start recording default field is required.",
+      )
+      .and(
+        "include.text",
+        "The auto start recording enforced field is required.",
+      );
+    cy.get('[data-test="disable-cam-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable cam default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable cam enforced field is required.",
+      );
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should(
+        "include.text",
+        "The webcams only for moderator default field is required.",
+      )
+      .and(
+        "include.text",
+        "The webcams only for moderator enforced field is required.",
+      );
+    cy.get('[data-test="disable-mic-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable mic default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable mic enforced field is required.",
+      );
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable public chat default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable public chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable private chat default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable private chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-note-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable note default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable note enforced field is required.",
+      );
+    cy.get('[data-test="hide-user-list-field"]')
+      .should(
+        "include.text",
+        "The lock settings hide user list default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings hide user list enforced field is required.",
+      );
+    cy.get('[data-test="allow-membership-field"]')
+      .should("include.text", "The allow membership default field is required.")
+      .and("include.text", "The allow membership enforced field is required.");
+    cy.get('[data-test="default-role-field"]')
+      .should("include.text", "The default role default field is required.")
+      .and("include.text", "The default role enforced field is required.");
+    cy.get('[data-test="visibility-field"]')
+      .should("include.text", "The visibility default field is required.")
+      .and("include.text", "The visibility enforced field is required.");
+
+    // Check with 500 error
+    cy.intercept("PUT", "api/v1/roomTypes/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="room-type-name-field"]').should(
+      "not.include.text",
+      "The name field is required.",
+    );
+    cy.get('[data-test="description-field"]').should(
+      "not.include.text",
+      "The description field is required.",
+    );
+    cy.get('[data-test="color-field"]').should(
+      "not.include.text",
+      "The color field is required.",
+    );
+    cy.get('[data-test="server-pool-field"]').should(
+      "not.include.text",
+      "The server pool field is required.",
+    );
+    cy.get('[data-test="max-participants-field"]').should(
+      "not.include.text",
+      "The max participants field is required.",
+    );
+    cy.get('[data-test="max-duration-field"]').should(
+      "not.include.text",
+      "The max duration field is required.",
+    );
+    cy.get('[data-test="create-parameters-field"]').should(
+      "not.include.text",
+      "The create parameters field is required.",
+    );
+    cy.get('[data-test="role-field"]').should(
+      "not.include.text",
+      "The roles field is required.",
+    );
+    cy.get('[data-test="has-access-code-field"]')
+      .should(
+        "not.include.text",
+        "The has access code default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The has access code enforced field is required.",
+      );
+    cy.get('[data-test="allow-guests-field"]')
+      .should("not.include.text", "The allow guests default field is required.")
+      .and("not.include.text", "The allow guests enforced field is required.");
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should(
+        "not.include.text",
+        "The everyone can start default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The everyone can start enforced field is required.",
+      );
+    cy.get('[data-test="mute-on-start-field"]')
+      .should(
+        "not.include.text",
+        "The mute on start default field is required.",
+      )
+      .and("not.include.text", "The mute on start enforced field is required.");
+    cy.get('[data-test="lobby-field"]')
+      .should("not.include.text", "The lobby default field is required.")
+      .and("not.include.text", "The lobby enforced field is required.");
+    cy.get('[data-test="record-attendance-field"]')
+      .should(
+        "not.include.text",
+        "The record attendance default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The record attendance enforced field is required.",
+      );
+    cy.get('[data-test="record-field"]')
+      .should("not.include.text", "The record default field is required.")
+      .and("not.include.text", "The record enforced field is required.");
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should(
+        "not.include.text",
+        "The auto start recording default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The auto start recording enforced field is required.",
+      );
+    cy.get('[data-test="disable-cam-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable cam default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable cam enforced field is required.",
+      );
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should(
+        "not.include.text",
+        "The webcams only for moderator default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The webcams only for moderator enforced field is required.",
+      );
+    cy.get('[data-test="disable-mic-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable mic default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable mic enforced field is required.",
+      );
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable public chat default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable public chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable private chat default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable private chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-note-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable note default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable note enforced field is required.",
+      );
+    cy.get('[data-test="hide-user-list-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings hide user list default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings hide user list enforced field is required.",
+      );
+    cy.get('[data-test="allow-membership-field"]')
+      .should(
+        "not.include.text",
+        "The allow membership default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The allow membership enforced field is required.",
+      );
+    cy.get('[data-test="default-role-field"]')
+      .should("not.include.text", "The default role default field is required.")
+      .and("not.include.text", "The default role enforced field is required.");
+    cy.get('[data-test="visibility-field"]')
+      .should("not.include.text", "The visibility default field is required.")
+      .and("not.include.text", "The visibility enforced field is required.");
+
+    // Check with 428 error (stale error)
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.name = "Exam 01";
+      roomType.data.description =
+        "New room type description for room type Exam 01";
+      roomType.data.color = "#ef4444";
+      roomType.data.server_pool = {
+        id: 2,
+        name: "Production",
+        description: "Pool for production",
+        servers_count: 1,
+        model_name: "ServerPool",
+        updated_at: "2020-12-21T13:43:21.000000Z",
+      };
+      roomType.data.max_participants = 50;
+      roomType.data.max_duration = 60;
+      roomType.data.create_parameters = "meetingLayout=PRESENTATION_FOCUS";
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Admin",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+      roomType.data.mute_on_start_default = false;
+      roomType.data.mute_on_start_enforced = false;
+      roomType.data.lock_settings_disable_cam_default = true;
+      roomType.data.lock_settings_disable_cam_enforced = true;
+      roomType.data.webcams_only_for_moderator_default = false;
+      roomType.data.webcams_only_for_moderator_enforced = true;
+      roomType.data.lock_settings_disable_mic_default = true;
+      roomType.data.lock_settings_disable_mic_enforced = false;
+      roomType.data.lock_settings_disable_private_chat_default = true;
+      roomType.data.lock_settings_disable_private_chat_enforced = true;
+      roomType.data.lock_settings_disable_public_chat_default = false;
+      roomType.data.lock_settings_disable_public_chat_enforced = true;
+      roomType.data.lock_settings_disable_note_default = false;
+      roomType.data.lock_settings_disable_note_enforced = false;
+      roomType.data.lock_settings_hide_user_list_default = false;
+      roomType.data.lock_settings_hide_user_list_enforced = true;
+      roomType.data.everyone_can_start_default = true;
+      roomType.data.everyone_can_start_enforced = true;
+      roomType.data.allow_membership_default = true;
+      roomType.data.allow_membership_enforced = false;
+      roomType.data.allow_guests_default = false;
+      roomType.data.allow_guests_enforced = false;
+      roomType.data.default_role_default = 2;
+      roomType.data.default_role_enforced = true;
+      roomType.data.lobby_default = 0;
+      roomType.data.lobby_enforced = false;
+      roomType.data.visibility_default = 0;
+      roomType.data.visibility_enforced = true;
+      roomType.data.record_attendance_default = true;
+      roomType.data.record_attendance_enforced = true;
+      roomType.data.record_default = true;
+      roomType.data.record_enforced = true;
+      roomType.data.auto_start_recording_default = true;
+      roomType.data.auto_start_recording_enforced = true;
+      roomType.data.has_access_code_default = false;
+      roomType.data.has_access_code_enforced = true;
+
+      cy.intercept("PUT", "api/v1/roomTypes/3", {
+        statusCode: 428,
+        body: {
+          new_model: roomType.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-room-type-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-room-type-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Reload
+    cy.get('[data-test="stale-dialog-reject-button"]').click();
+
+    cy.get('[data-test="stale-room-type-dialog"]').should("not.exist");
+
+    // Check that correct data is shown
+    cy.get("#room-type-name").should("have.value", "Exam 01");
+    cy.get("#description").should(
+      "have.value",
+      "New room type description for room type Exam 01",
+    );
+    cy.get("#custom-color").should("have.value", "#ef4444");
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Production");
+    });
+    cy.get("#restrict").should("be.checked");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Admin")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+    cy.get("#max-participants").should("have.value", "50");
+    cy.get("#max-duration").should("have.value", "60 min.");
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "has-access-code",
+      false,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-guests",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "everyone-can-start",
+      true,
+      true,
+      false,
+    );
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "mute-on-start",
+      false,
+      false,
+      false,
+    );
+
+    cy.get("#lobby-disabled").should("be.checked");
+    cy.get('[data-test="lobby-enforced"]').should(
+      "have.text",
+      "admin.room_types.default_room_settings.default",
+    );
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record-attendance",
+      true,
+      true,
+      false,
+    );
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record",
+      true,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "auto-start-recording",
+      true,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-cam",
+      true,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "webcams-only-for-moderator",
+      false,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-mic",
+      true,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-public-chat",
+      false,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-private-chat",
+      true,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-note",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "hide-user-list",
+      false,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-membership",
+      true,
+      false,
+      false,
+    );
+
+    cy.get('[data-test="default-role-default-button"]')
+      .eq(1)
+      .should("have.text", "rooms.roles.moderator")
+      .should("have.attr", "aria-pressed", "true");
+
+    cy.get('[data-test="default-role-enforced"]').should(
+      "have.text",
+      "admin.room_types.default_room_settings.enforced",
+    );
+
+    cy.get('[data-test="visibility-default-button"]')
+      .eq(0)
+      .should("have.text", "rooms.settings.advanced.visibility.private")
+      .should("have.attr", "aria-pressed", "true");
+    cy.get('[data-test="visibility-enforced"]').should(
+      "have.text",
+      "admin.room_types.default_room_settings.enforced",
+    );
+    cy.get("#create-parameters").should(
+      "have.value",
+      "meetingLayout=PRESENTATION_FOCUS",
+    );
+
+    // Trigger 428 error (stale error) again
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.name = "Exam 02";
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Admin",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+
+      cy.intercept("PUT", "api/v1/roomTypes/3", {
+        statusCode: 428,
+        body: {
+          new_model: roomType.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-room-type-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-room-type-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Overwrite
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.name = "Exam 01";
+      roomType.data.description =
+        "New room type description for room type Exam 01";
+      roomType.data.color = "#ef4444";
+      roomType.data.server_pool = {
+        id: 2,
+        name: "Production",
+        description: "Pool for production",
+        servers_count: 1,
+        model_name: "ServerPool",
+        updated_at: "2020-12-21T13:43:21.000000Z",
+      };
+      roomType.data.max_participants = 50;
+      roomType.data.max_duration = 60;
+      roomType.data.create_parameters = "meetingLayout=PRESENTATION_FOCUS";
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Admin",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+      roomType.data.mute_on_start_default = false;
+      roomType.data.mute_on_start_enforced = false;
+      roomType.data.lock_settings_disable_cam_default = true;
+      roomType.data.lock_settings_disable_cam_enforced = true;
+      roomType.data.webcams_only_for_moderator_default = false;
+      roomType.data.webcams_only_for_moderator_enforced = true;
+      roomType.data.lock_settings_disable_mic_default = true;
+      roomType.data.lock_settings_disable_mic_enforced = false;
+      roomType.data.lock_settings_disable_private_chat_default = true;
+      roomType.data.lock_settings_disable_private_chat_enforced = true;
+      roomType.data.lock_settings_disable_public_chat_default = false;
+      roomType.data.lock_settings_disable_public_chat_enforced = true;
+      roomType.data.lock_settings_disable_note_default = false;
+      roomType.data.lock_settings_disable_note_enforced = false;
+      roomType.data.lock_settings_hide_user_list_default = false;
+      roomType.data.lock_settings_hide_user_list_enforced = true;
+      roomType.data.everyone_can_start_default = true;
+      roomType.data.everyone_can_start_enforced = true;
+      roomType.data.allow_membership_default = true;
+      roomType.data.allow_membership_enforced = false;
+      roomType.data.allow_guests_default = false;
+      roomType.data.allow_guests_enforced = false;
+      roomType.data.default_role_default = 2;
+      roomType.data.default_role_enforced = true;
+      roomType.data.lobby_default = 0;
+      roomType.data.lobby_enforced = false;
+      roomType.data.visibility_default = 0;
+      roomType.data.visibility_enforced = true;
+      roomType.data.record_attendance_default = true;
+      roomType.data.record_attendance_enforced = true;
+      roomType.data.record_default = true;
+      roomType.data.record_enforced = true;
+      roomType.data.auto_start_recording_default = true;
+      roomType.data.auto_start_recording_enforced = true;
+      roomType.data.has_access_code_default = false;
+      roomType.data.has_access_code_enforced = true;
+
+      cy.intercept("PUT", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("saveChangesRequest");
+
+      cy.get('[data-test="stale-dialog-accept-button"]').click();
+
+      const roomTypeRequestData = { ...roomType.data };
+      roomTypeRequestData.server_pool = roomTypeRequestData.server_pool.id;
+      roomTypeRequestData.roles = roomTypeRequestData.roles.map(
+        (role) => role.id,
+      );
+
+      // Check that correct data is sent
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql(roomTypeRequestData);
+      });
+    });
+
+    // Check that redirect worked
+    cy.url().should("include", "/admin/room_types/3");
+    cy.url().should("not.include", "/edit");
+
+    // Reload
+    cy.visit("/admin/room_types/3/edit");
+
+    // Check with 404 error
+    cy.interceptAdminRoomTypesIndexRequests();
+    cy.intercept("PUT", "api/v1/roomTypes/3", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/room_types/3/edit");
+    cy.url().should("include", "/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload
+    cy.visit("/admin/room_types/3/edit");
+
+    // Check with 401 error
+    cy.intercept("PUT", "api/v1/roomTypes/3", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load room type errors", function () {
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("roomTypeRequest");
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 200,
+      fixture: "roomType.json",
+    }).as("roomTypeRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload page with 404 error
+    cy.interceptAdminRoomTypesIndexRequests();
+
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("roomTypeRequest");
+
+    cy.reload();
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/room_types/3/edit");
+    cy.url().should("include", "/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 401,
+    }).as("roomTypeRequest");
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+        "roomTypes.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/room_types/3");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="room-types-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js b/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
new file mode 100644
index 000000000..558a1f2cb
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
@@ -0,0 +1,495 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin room types index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRoomTypesIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roomTypes.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/room_types");
+  });
+
+  it("load room types", function () {
+    const roomTypesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roomTypes*",
+      { fixture: "roomTypes.json" },
+      "roomTypesRequest",
+    );
+    cy.visit("/admin/room_types");
+
+    // Test loading
+    cy.get('[data-test="room-type-search"]').within(() => {
+      cy.get("input").should("be.visible").and("be.disabled");
+      cy.get("button").should("be.visible").and("be.disabled");
+    });
+
+    cy.get('[data-test="room-types-add-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        roomTypesRequest.sendResponse();
+      });
+
+    cy.wait("@roomTypesRequest");
+
+    // Check that loading is over
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get('[data-test="room-type-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.get('[data-test="room-types-add-button"]').should("not.exist");
+
+    // Check that table headers are displayed correctly
+    cy.get('[data-test="room-type-header-cell"]').should("have.length", 2);
+
+    cy.get('[data-test="room-type-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name");
+
+    cy.get('[data-test="room-type-header-cell"]')
+      .eq(1)
+      .should("have.text", "app.actions");
+
+    // Check that room types are displayed correctly
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="room-type-item-cell"]')
+          .eq(0)
+          .should("have.text", "Exam");
+        cy.get('[data-test="room-type-item-cell"]')
+          .eq(1)
+          .within(() => {
+            cy.get('[data-test="room-types-view-button"]').should("not.exist");
+            cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+            cy.get('[data-test="room-types-delete-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="room-type-item-cell"]')
+          .eq(0)
+          .should("have.text", "Lecture");
+        cy.get('[data-test="room-type-item-cell"]')
+          .eq(1)
+          .within(() => {
+            cy.get('[data-test="room-types-view-button"]').should("not.exist");
+            cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+            cy.get('[data-test="room-types-delete-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+  });
+
+  it("load room types errors", function () {
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("roomTypesRequest");
+
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown ToDo this is not implemented yet!!!! so careful when keeping this part of the test !!!!
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="room-type-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+    // ToDo this is not implemented yet!!!! so careful when keeping this part of the test !!!!
+    //  (Only important for 500 error part)
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 200,
+      fixture: "roomTypes.json",
+    }).as("roomTypesRequest");
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roomTypesRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check that room types are shown and contain the correct data
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]').eq(0).should("include.text", "Exam");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Lecture");
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 401,
+    }).as("roomTypesRequest");
+
+    cy.reload();
+
+    cy.wait("@roomTypesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load room types with no data", function () {
+    cy.fixture("roomTypes.json").then((roomTypes) => {
+      roomTypes.data = [];
+      cy.intercept("GET", "api/v1/roomTypes*", {
+        statusCode: 200,
+        body: roomTypes,
+      }).as("roomTypesRequest");
+    });
+
+    cy.visit("/admin/room_types");
+  });
+
+  it("room type search and sorting", function () {
+    cy.visit("/admin/room_types");
+
+    // Check that all room types are shown
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]').eq(0).should("include.text", "Exam");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Lecture");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that correct room types are shown
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .should("include.text", "Meeting");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Seminar");
+
+    // Enter search query with no results
+    cy.get('[data-test="room-type-search"]').within(() => {
+      cy.get("input").type("Search without results");
+      cy.get("button").click();
+    });
+
+    // Check that no room types and correct message are shown
+    cy.get('[data-test="room-type-item"]').should("have.length", 0);
+    cy.contains("admin.room_types.no_data_filtered").should("be.visible");
+
+    // Change search query
+    cy.get('[data-test="room-type-search"]').within(() => {
+      cy.get("input").clear();
+      cy.get("input").type("Exam");
+      cy.get("button").click();
+    });
+
+    // Check that correct room types are shown
+    cy.get('[data-test="room-type-item"]').should("have.length", 1);
+    cy.get('[data-test="room-type-item"]').eq(0).should("include.text", "Exam");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 1);
+
+    // Check that correct pagination is active (page is reset to first page)
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Change search query
+    cy.get('[data-test="room-type-search"]').within(() => {
+      cy.get("input").clear();
+      cy.get("input").type("e");
+      cy.get("input").type("{enter}");
+    });
+
+    // Check that correct room types are shown
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]').eq(0).should("include.text", "Exam");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Lecture");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .should("include.text", "Meeting");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Seminar");
+
+    // Change sort order
+    cy.get('[data-test="room-type-header-cell"]').eq(0).click();
+
+    // Check that correct room types are shown
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .should("include.text", "Seminar");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Meeting");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active (page is reset to first page)
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("check button visibility with view permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roomTypes.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-add-button"]').should("not.exist");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3");
+        cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+        cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1");
+        cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+        cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-add-button"]').should("not.exist");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3");
+        cy.get('[data-test="room-types-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3/edit");
+        cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1");
+        cy.get('[data-test="room-types-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1/edit");
+        cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with add permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types/new");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3");
+        cy.get('[data-test="room-types-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3/edit");
+        cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1");
+        cy.get('[data-test="room-types-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1/edit");
+        cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+        "roomTypes.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types/new");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3");
+        cy.get('[data-test="room-types-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3/edit");
+        cy.get('[data-test="room-types-delete-button"]').should("be.visible");
+      });
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1");
+        cy.get('[data-test="room-types-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1/edit");
+        cy.get('[data-test="room-types-delete-button"]').should("be.visible");
+      });
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js b/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js
new file mode 100644
index 000000000..5c7ad700e
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js
@@ -0,0 +1,523 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin room types index room type actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRoomTypesIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+        "roomTypes.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete room type without replacement", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="room-types-delete-dialog"]')
+      .should("include.text", "admin.room_types.delete.title")
+      .should("include.text", 'admin.room_types.delete.confirm_{"name":"Exam"}')
+      .within(() => {
+        cy.get('[data-test="replacement-room-type-field"]')
+          .should("be.visible")
+          .and("include.text", "admin.room_types.delete.replacement")
+          .and("include.text", "admin.room_types.delete.replacement_info")
+          .within(() => {
+            cy.get('[data-test="replacement-room-type-dropdown"]').should(
+              "have.text",
+              "admin.room_types.delete.no_replacement",
+            );
+
+            cy.get('[data-test="replacement-room-type-dropdown"]').within(
+              () => {
+                cy.get(".p-select-label").should(
+                  "not.have.attr",
+                  "aria-disabled",
+                  "true",
+                );
+              },
+            );
+          });
+      });
+
+    // Confirm delete of room type
+    const deleteRoomTypeRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/roomTypes/3",
+      { statusCode: 204 },
+      "deleteRoomTypeRequest",
+    );
+
+    cy.fixture("roomTypes.json").then((roomTypes) => {
+      roomTypes.data = roomTypes.data.filter((roomType) => roomType.id !== 3);
+
+      cy.intercept("GET", "api/v1/roomTypes", {
+        statusCode: 200,
+        body: roomTypes,
+      }).as("roomTypesRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .and("be.disabled");
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteRoomTypeRequest.sendResponse();
+      });
+
+    cy.wait("@deleteRoomTypeRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        replacement_room_type: null,
+      });
+    });
+    cy.wait("@roomTypesRequest");
+
+    // Check that room type was deleted
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .should("include.text", "Lecture");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Meeting");
+
+    // Check that dialog is closed
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    // Reopen dialog for different room type
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="room-types-delete-dialog"]')
+      .should("include.text", "admin.room_types.delete.title")
+      .should(
+        "include.text",
+        'admin.room_types.delete.confirm_{"name":"Meeting"}',
+      );
+  });
+
+  it("delete room type with replacement", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="replacement-room-type-dropdown-items"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="room-types-delete-dialog"]')
+      .should("include.text", 'admin.room_types.delete.confirm_{"name":"Exam"}')
+      .within(() => {
+        cy.get('[data-test="replacement-room-type-field"]')
+          .should("be.visible")
+          .within(() => {
+            cy.get('[data-test="replacement-room-type-dropdown"]')
+              .should("have.text", "admin.room_types.delete.no_replacement")
+              .click();
+          });
+      });
+
+    // Check that replacement room types are shown correctly
+    cy.get('[data-test="replacement-room-type-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test = "replacement-room-type-dropdown-option"]').should(
+          "have.length",
+          3,
+        );
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "Lecture");
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "Meeting");
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Seminar");
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(1)
+          .click();
+      });
+
+    cy.get('[data-test="replacement-room-type-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="replacement-room-type-dropdown"]').should(
+      "have.text",
+      "Meeting",
+    );
+
+    // Confirm delete of room type
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 204,
+    }).as("deleteRoomTypeRequest");
+
+    cy.fixture("roomTypes.json").then((roomTypes) => {
+      roomTypes.data = roomTypes.data.filter((roomType) => roomType.id !== 3);
+
+      cy.intercept("GET", "api/v1/roomTypes", {
+        statusCode: 200,
+        body: roomTypes,
+      }).as("roomTypesRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check that replacement room type was sent correctly
+    cy.wait("@deleteRoomTypeRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        replacement_room_type: 2,
+      });
+    });
+    cy.wait("@roomTypesRequest");
+
+    // Check that room type was deleted
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .should("include.text", "Lecture");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Meeting");
+
+    // Check that dialog is closed
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+  });
+
+  it("delete room type errors", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check with 422 error (replacement room type needed)
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 422,
+      body: {
+        message:
+          "Replacement room type required! Rooms are still assigned to this room type.",
+        errors: {
+          replacement_room_type: [
+            "Replacement room type required! Rooms are still assigned to this room type.",
+          ],
+        },
+      },
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that dialog stays open and error message is shown
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+    cy.get('[data-test="replacement-room-type-field"]').should(
+      "include.text",
+      "Replacement room type required! Rooms are still assigned to this room type.",
+    );
+
+    // Select replacement room type
+    cy.get('[data-test="replacement-room-type-dropdown"]').click();
+    cy.get('[data-test="replacement-room-type-dropdown-option"]').eq(1).click();
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error message is hidden
+    cy.get('[data-test="replacement-room-type-field"]').should(
+      "not.include.text",
+      "Replacement room type required! Rooms are still assigned to this room type.",
+    );
+
+    // Check with 404 error
+    cy.fixture("roomTypes.json").then((roomTypes) => {
+      roomTypes.data = roomTypes.data.filter((roomType) => roomType.id !== 3);
+
+      cy.intercept("GET", "api/v1/roomTypes", {
+        statusCode: 200,
+        body: roomTypes,
+      }).as("roomTypesRequest");
+    });
+
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that room types get reloaded
+    cy.wait("@roomTypesRequest");
+
+    // Check that dialog is closed
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Check that room type is not there anymore
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .should("include.text", "Lecture");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Meeting");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/roomTypes/1", {
+      statusCode: 401,
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load replacement room types errors", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    // Check with 500 error
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("replacementRoomTypesRequest");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    cy.wait("@replacementRoomTypesRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // ToDo this is not implemented yet!!!! so careful when keeping this part of the test !!!!
+    // Check that dropdown is disabled
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 200,
+      fixture: "roomTypes.json",
+    }).as("replacementRoomTypesRequest");
+
+    cy.get('[data-test="replacement-room-types-reload-button"]')
+      .should("be.visible")
+      .click();
+
+    cy.wait("@replacementRoomTypesRequest");
+
+    // Check that dropdown is enabled again
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label").should(
+        "not.have.attr",
+        "aria-disabled",
+        "true",
+      );
+    });
+
+    cy.get('[data-test="replacement-room-types-reload-button"]').should(
+      "not.exist",
+    );
+
+    // Close dialog and open again with 401 error
+    cy.get('[data-test="dialog-cancel-button"]').click();
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 401,
+    }).as("replacementRoomTypesRequest");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    cy.wait("@replacementRoomTypesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("open add new room type page", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.interceptAdminRoomTypesNewRequests();
+
+    cy.get('[data-test="room-types-add-button"]').click();
+
+    cy.url().should("include", "/admin/room_types/new");
+  });
+
+  it("open edit room type page", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.interceptAdminRoomTypesViewRequests();
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-edit-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/room_types/3/edit");
+  });
+
+  it("open view room type page", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.interceptAdminRoomTypesViewRequests();
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-view-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/room_types/3");
+    cy.url().should("not.include", "/edit");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
new file mode 100644
index 000000000..b027e8813
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
@@ -0,0 +1,1775 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin room types new", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRoomTypesNewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+        "roomTypes.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/room_types/new");
+  });
+
+  it("visit with user without permission to add new room types", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types/new");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/room_types");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("add new room type", function () {
+    cy.visit("/admin/room_types/new");
+
+    // Check that header buttons are hidden
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+
+    cy.get('[data-test="room-type-name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#room-type-name").should("have.value", "").type("Exam 01");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "")
+          .type("Room type description for room type Exam 01");
+      });
+
+    cy.get('[data-test="color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.color")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "not.have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and(i === 0 ? "have.class" : "not.have.class", "selected");
+        }
+
+        // Clear custom color and check that color buttons are not selected
+        cy.get("#custom-color")
+          .should("have.value", "#6366f1")
+          .and("not.be.disabled")
+          .clear();
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("not.have.class", "selected");
+        }
+
+        // Set custom color and check that color buttons is selected
+        cy.get("#custom-color").type("#ef4444");
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 7 ? "have.class" : "not.have.class", "selected");
+        }
+      });
+
+    cy.get('[data-test="preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.preview")
+      .within(() => {
+        cy.get('[data-test="room-type-badge"]')
+          .should("have.css", "background-color", "rgb(239, 68, 68)")
+          .and("have.text", "Exam 01");
+      });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-pool-field"]')
+      .should("be.visible")
+      .and("include.text", "app.server_pool")
+      .within(() => {
+        cy.get('[data-test="server-pool-dropdown"]').within(() => {
+          cy.get(".multiselect__tags")
+            .should("include.text", "admin.room_types.select_server_pool")
+            .click();
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 4);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Test")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Production")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "admin.server_pools.no_data")
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option").eq(1).click();
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Production");
+    });
+
+    cy.get('[data-test="restrict-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.restrict")
+      .within(() => {
+        cy.get("#restrict").should("not.be.checked").and("not.be.disabled");
+      });
+
+    cy.get('[data-test="role-field"]').should("not.exist");
+
+    cy.get('[data-test="max-participants-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.max_participants")
+      .within(() => {
+        cy.get("#max-participants").should("have.value", "").type("100");
+      });
+
+    cy.get('[data-test="max-duration-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.max_duration")
+      .within(() => {
+        cy.get("#max-duration").should("have.value", "").type("120");
+      });
+
+    // Change default and enforced values
+    cy.contains("admin.room_types.default_room_settings.title").should(
+      "be.visible",
+    );
+    cy.contains("rooms.settings.general.title").should("be.visible");
+
+    cy.get('[data-test="has-access-code-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.general.has_access_code")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "has-access-code",
+          true,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="allow-guests-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.general.allow_guests")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "allow-guests",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#allow-guests-default").click();
+    cy.get('[data-test="allow-guests-enforced"]').click();
+
+    cy.contains("rooms.settings.video_conference.title").should("be.visible");
+
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.everyone_can_start")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "everyone-can-start",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="mute-on-start-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.mute_on_start")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "mute-on-start",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#mute-on-start-default").click();
+    cy.get('[data-test="mute-on-start-enforced"]').click();
+
+    cy.get('[data-test="lobby-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.lobby.title")
+      .within(() => {
+        cy.get('[data-test="lobby-disabled-field"]')
+          .should("be.visible")
+          .and("include.text", "app.disabled")
+          .within(() => {
+            cy.get("#lobby-disabled")
+              .should("be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="lobby-enabled-field"]')
+          .should("be.visible")
+          .and("include.text", "app.enabled")
+          .within(() => {
+            cy.get("#lobby-enabled")
+              .should("not.be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="lobby-only-for-guests-field"]')
+          .should("be.visible")
+          .and(
+            "include.text",
+            "rooms.settings.video_conference.lobby.only_for_guests_enabled",
+          )
+          .within(() => {
+            cy.get("#lobby-only-for-guests")
+              .should("not.be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get("#lobby-only-for-guests").click();
+
+        cy.get('[data-test="lobby-enforced"]')
+          .should("have.text", "admin.room_types.default_room_settings.default")
+          .click();
+      });
+
+    cy.contains("rooms.settings.recordings.title").should("be.visible");
+
+    cy.get('[data-test="record-attendance-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_attendance")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record-attendance",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="record-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_video_conference")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="record-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_video_conference")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.auto_start_recording")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "auto-start-recording",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.contains("rooms.settings.restrictions.title").should("be.visible");
+
+    cy.get('[data-test="disable-cam-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_cam",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-cam",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.webcams_only_for_moderator",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "webcams-only-for-moderator",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#webcams-only-for-moderator-default").click();
+
+    cy.get('[data-test="disable-mic-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_mic",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-mic",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="disable-mic-enforced"]').click();
+
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_public_chat",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-public-chat",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#disable-public-chat-default").click();
+
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_private_chat",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-private-chat",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="disable-note-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_note",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-note",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#disable-note-default").click();
+    cy.get('[data-test="disable-note-enforced"]').click();
+
+    cy.get('[data-test="hide-user-list-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_hide_user_list",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "hide-user-list",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#hide-user-list-default").click();
+
+    cy.contains("rooms.settings.participants.title").should("be.visible");
+
+    cy.get('[data-test="allow-membership-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.participants.allow_membership")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "allow-membership",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="allow-membership-enforced"]').click();
+
+    cy.get('[data-test="default-role-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.participants.default_role.title")
+      .and(
+        "include.text",
+        "rooms.settings.participants.default_role.only_logged_in",
+      )
+      .within(() => {
+        cy.get('[data-test="default-role-default-button"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="default-role-default-button"]')
+          .eq(0)
+          .should("have.text", "rooms.roles.participant")
+          .should("have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="default-role-default-button"]')
+          .eq(1)
+          .should("have.text", "rooms.roles.moderator")
+          .should("not.have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="default-role-enforced"]').should(
+          "have.text",
+          "admin.room_types.default_room_settings.default",
+        );
+      });
+
+    cy.contains("rooms.settings.advanced.title").should("be.visible");
+
+    cy.get('[data-test="visibility-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.advanced.visibility")
+      .within(() => {
+        cy.get('[data-test="visibility-default-button"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="visibility-default-button"]')
+          .eq(0)
+          .should("have.text", "rooms.settings.advanced.visibility.private")
+          .should("have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="visibility-default-button"]')
+          .eq(1)
+          .should("have.text", "rooms.settings.advanced.visibility.public")
+          .should("not.have.attr", "aria-pressed", "true")
+          .click();
+
+        cy.get('[data-test="visibility-enforced"]').should(
+          "have.text",
+          "admin.room_types.default_room_settings.default",
+        );
+      });
+
+    // Change other settings
+    cy.contains("admin.room_types.bbb_api.title").should("be.visible");
+
+    cy.get('[data-test="create-parameters-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.bbb_api.create_parameters")
+      .and(
+        "include.text",
+        "admin.room_types.bbb_api.create_parameters_description",
+      )
+      .within(() => {
+        cy.get("#create-parameters")
+          .should("have.value", "")
+          .type(
+            "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+          );
+      });
+
+    // Add new room type
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.id = 30;
+      roomType.data.name = "Exam 01";
+      roomType.data.description = "Room type description for room type Exam 01";
+      roomType.data.color = "#ef4444";
+      roomType.data.server_pool = {
+        id: 2,
+        name: "Production",
+        description: "Pool for production",
+        servers_count: 1,
+        model_name: "ServerPool",
+        updated_at: "2020-12-21T13:43:21.000000Z",
+      };
+
+      const newRoomTypeRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/roomTypes",
+        {
+          statusCode: 201,
+          body: roomType,
+        },
+        "newRoomTypeRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roomTypes/30", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get("#room-type-name").should("be.disabled");
+      cy.get("#description").should("be.disabled");
+      for (let i = 0; i < 10; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should("have.attr", "role", "button")
+          .and(
+            "have.class",
+            "pointer-events-none cursor-not-allowed opacity-80",
+          );
+      }
+      cy.get("#custom-color").should("be.disabled");
+      cy.get('[data-test="server-pool-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+
+      cy.get("#restrict").should("be.disabled");
+
+      cy.get("#max-participants").should("be.disabled");
+      cy.get("#max-duration").should("be.disabled");
+
+      cy.get("#has-access-code-default").should("be.disabled");
+      cy.get('[data-test="has-access-code-enforced"]').should("be.disabled");
+      cy.get("#allow-guests-default").should("be.disabled");
+      cy.get('[data-test="allow-guests-enforced"]').should("be.disabled");
+      cy.get("#everyone-can-start-default").should("be.disabled");
+      cy.get('[data-test="everyone-can-start-enforced"]').should("be.disabled");
+      cy.get("#mute-on-start-default").should("be.disabled");
+      cy.get('[data-test="mute-on-start-enforced"]').should("be.disabled");
+      cy.get("#lobby-disabled").should("be.disabled");
+      cy.get("#lobby-enabled").should("be.disabled");
+      cy.get("#lobby-only-for-guests").should("be.disabled");
+      cy.get('[data-test="lobby-enforced"]').should("be.disabled");
+      cy.get("#record-attendance-default").should("be.disabled");
+      cy.get('[data-test="record-attendance-enforced"]').should("be.disabled");
+      cy.get("#record-default").should("be.disabled");
+      cy.get('[data-test="record-enforced"]').should("be.disabled");
+      cy.get("#auto-start-recording-default").should("be.disabled");
+      cy.get('[data-test="auto-start-recording-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-cam-default").should("be.disabled");
+      cy.get('[data-test="disable-cam-enforced"]').should("be.disabled");
+      cy.get("#webcams-only-for-moderator-default").should("be.disabled");
+      cy.get('[data-test="webcams-only-for-moderator-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-mic-default").should("be.disabled");
+      cy.get('[data-test="disable-mic-enforced"]').should("be.disabled");
+      cy.get("#disable-public-chat-default").should("be.disabled");
+      cy.get('[data-test="disable-public-chat-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-private-chat-default").should("be.disabled");
+      cy.get('[data-test="disable-private-chat-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-note-default").should("be.disabled");
+      cy.get('[data-test="disable-note-enforced"]').should("be.disabled");
+      cy.get("#hide-user-list-default").should("be.disabled");
+      cy.get('[data-test="hide-user-list-enforced"]').should("be.disabled");
+      cy.get("#allow-membership-default").should("be.disabled");
+      cy.get('[data-test="allow-membership-enforced"]').should("be.disabled");
+      cy.get('[data-test="default-role-default-button"]').should(
+        "have.length",
+        2,
+      );
+      cy.get('[data-test="default-role-default-button"]')
+        .eq(0)
+        .should("be.disabled");
+      cy.get('[data-test="default-role-default-button"]')
+        .eq(1)
+        .should("be.disabled");
+      cy.get('[data-test="default-role-enforced"]').should("be.disabled");
+      cy.get('[data-test="visibility-default-button"]').should(
+        "have.length",
+        2,
+      );
+      cy.get('[data-test="visibility-default-button"]')
+        .eq(0)
+        .should("be.disabled");
+      cy.get('[data-test="visibility-default-button"]')
+        .eq(1)
+        .should("be.disabled");
+      cy.get('[data-test="visibility-enforced"]').should("be.disabled");
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newRoomTypeRequest.sendResponse();
+        });
+
+      const roomTypeRequestData = { ...roomType.data };
+      roomTypeRequestData.server_pool = roomTypeRequestData.server_pool.id;
+      delete roomTypeRequestData.id;
+      delete roomTypeRequestData.model_name;
+
+      cy.wait("@newRoomTypeRequest").then((interception) => {
+        expect(interception.request.body).to.eql(roomTypeRequestData);
+      });
+    });
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that room type page is shown
+    cy.url().should("include", "/admin/room_types/30");
+  });
+
+  it("add new room type with restrictions", function () {
+    cy.visit("/admin/room_types/new");
+
+    // Check that header buttons are hidden
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+
+    cy.get("#room-type-name").should("have.value", "").type("Exam");
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-pool-dropdown"]').click();
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").eq(0).click();
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Test");
+    });
+
+    cy.get('[data-test="restrict-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.restrict")
+      .within(() => {
+        cy.get("#restrict")
+          .should("not.be.checked")
+          .and("not.be.disabled")
+          .click();
+      });
+
+    // Check role setting and change it
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="role-field"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]').within(() => {
+          cy.get(".multiselect__tags")
+            .should("include.text", "admin.roles.select_roles")
+            .click();
+          cy.get('[data-test="role-chip"]').should("have.length", 0);
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 5);
+        cy.get(".multiselect__option")
+          .eq(0)
+          .should("include.text", "Admin")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(1)
+          .should("include.text", "Staff")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(2)
+          .should("include.text", "Students")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(3)
+          .should(
+            "include.text",
+            "No elements found. Consider changing the search query.",
+          )
+          .and("not.be.visible");
+        cy.get(".multiselect__option")
+          .eq(4)
+          .should("include.text", "admin.roles.no_data")
+          .and("not.be.visible");
+      });
+
+    // Switch to next page
+    const userRoleRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 200,
+        body: {
+          data: [
+            {
+              id: 4,
+              name: "Dean",
+              default: false,
+              updated_at: "2021-01-08T15:51:08.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 5,
+              name: "Faculty",
+              default: false,
+              updated_at: "2021-03-19T09:12:44.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 6,
+              name: "Manager",
+              default: false,
+              updated_at: "2021-05-22T11:55:21.000000Z",
+              model_name: "Role",
+              room_limit: -1,
+            },
+          ],
+          meta: {
+            current_page: 2,
+            from: 4,
+            last_page: 2,
+            per_page: 3,
+            to: 6,
+            total: 6,
+          },
+        },
+      },
+      "userRoleRequest",
+    );
+
+    cy.get(".multiselect__content")
+      .eq(1)
+
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]')
+          .should("include.text", "app.previous_page")
+          .and("be.disabled");
+        cy.get('[data-test="next-page-button"]')
+          .should("include.text", "app.next_page")
+          .and("not.be.disabled");
+
+        cy.get('[data-test="next-page-button"]').click();
+
+        // Check loading
+        cy.get('[data-test="previous-page-button"]').should("be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]')
+      .should("be.disabled")
+      .then(() => {
+        userRoleRequest.sendResponse();
+      });
+
+    cy.wait("@userRoleRequest");
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+
+        cy.get(".multiselect__option").should("have.length", 5);
+        cy.get(".multiselect__option")
+          .eq(0)
+          .should("include.text", "Dean")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(1)
+          .should("include.text", "Faculty")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(2)
+          .should("include.text", "Manager")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(3)
+          .should(
+            "include.text",
+            "No elements found. Consider changing the search query.",
+          )
+          .and("not.be.visible");
+        cy.get(".multiselect__option")
+          .eq(4)
+          .should("include.text", "admin.roles.no_data")
+          .and("not.be.visible");
+
+        // Select roles
+        cy.get(".multiselect__option").eq(0).click();
+        cy.get(".multiselect__option").eq(2).click();
+      });
+
+    // Check that roles are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Dean")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Manager")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    // Close dialog
+    cy.get(".multiselect__select").eq(1).click();
+
+    // Check that dialog is closed
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Add new room type
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.id = 30;
+      roomType.data.description = "";
+      roomType.data.color = "#6366f1";
+      roomType.data.server_pool = {
+        id: 1,
+        name: "Test",
+        description: "Pool for testing",
+        servers_count: 2,
+        model_name: "ServerPool",
+        updated_at: "2020-12-21T13:43:21.000000Z",
+      };
+      roomType.data.max_participants = null;
+      roomType.data.max_duration = null;
+      roomType.data.create_parameters = null;
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 4,
+          name: "Dean",
+        },
+        {
+          id: 6,
+          name: "Manager",
+        },
+      ];
+      roomType.data.mute_on_start_default = false;
+      roomType.data.mute_on_start_enforced = false;
+      roomType.data.lock_settings_disable_cam_default = false;
+      roomType.data.lock_settings_disable_cam_enforced = false;
+      roomType.data.webcams_only_for_moderator_default = false;
+      roomType.data.webcams_only_for_moderator_enforced = false;
+      roomType.data.lock_settings_disable_mic_default = false;
+      roomType.data.lock_settings_disable_mic_enforced = false;
+      roomType.data.lock_settings_disable_private_chat_default = false;
+      roomType.data.lock_settings_disable_private_chat_enforced = false;
+      roomType.data.lock_settings_disable_public_chat_default = false;
+      roomType.data.lock_settings_disable_public_chat_enforced = false;
+      roomType.data.lock_settings_disable_note_default = false;
+      roomType.data.lock_settings_disable_note_enforced = false;
+      roomType.data.lock_settings_hide_user_list_default = false;
+      roomType.data.lock_settings_hide_user_list_enforced = false;
+      roomType.data.everyone_can_start_default = false;
+      roomType.data.everyone_can_start_enforced = false;
+      roomType.data.allow_membership_default = false;
+      roomType.data.allow_membership_enforced = false;
+      roomType.data.allow_guests_default = false;
+      roomType.data.allow_guests_enforced = false;
+      roomType.data.default_role_default = 1;
+      roomType.data.default_role_enforced = false;
+      roomType.data.lobby_default = 0;
+      roomType.data.lobby_enforced = false;
+      roomType.data.visibility_default = 0;
+      roomType.data.visibility_enforced = false;
+      roomType.data.record_attendance_default = false;
+      roomType.data.record_attendance_enforced = false;
+      roomType.data.record_default = false;
+      roomType.data.record_enforced = false;
+      roomType.data.auto_start_recording_default = false;
+      roomType.data.auto_start_recording_enforced = false;
+      roomType.data.has_access_code_default = true;
+      roomType.data.has_access_code_enforced = false;
+
+      const newRoomTypeRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/roomTypes",
+        {
+          statusCode: 201,
+          body: roomType,
+        },
+        "newRoomTypeRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roomTypes/30", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      cy.get("#restrict").should("be.disabled");
+      cy.get('[data-test="role-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newRoomTypeRequest.sendResponse();
+        });
+
+      const roomTypeRequestData = { ...roomType.data };
+      roomTypeRequestData.server_pool = roomTypeRequestData.server_pool.id;
+      delete roomTypeRequestData.id;
+      delete roomTypeRequestData.model_name;
+      delete roomTypeRequestData.description;
+      roomTypeRequestData.roles = roomTypeRequestData.roles.map(
+        (role) => role.id,
+      );
+
+      cy.wait("@newRoomTypeRequest").then((interception) => {
+        expect(interception.request.body).to.eql(roomTypeRequestData);
+      });
+    });
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that room type page is shown
+    cy.url().should("include", "/admin/room_types/30");
+  });
+
+  it("add new room type errors", function () {
+    cy.visit("/admin/room_types/new");
+
+    cy.get("#restrict").click();
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/roomTypes", {
+      statusCode: 422,
+      body: {
+        message: "The given data was invalid.",
+        errors: {
+          name: ["The name field is required."],
+          description: ["The description field is required."],
+          color: ["The color field is required."],
+          server_pool: ["The server pool field is required."],
+          max_participants: ["The max participants field is required."],
+          max_duration: ["The max duration field is required."],
+          create_parameters: ["The create parameters field is required."],
+          roles: ["The roles field is required."],
+          has_access_code_default: [
+            "The has access code default field is required.",
+          ],
+          has_access_code_enforced: [
+            "The has access code enforced field is required.",
+          ],
+          allow_guests_default: ["The allow guests default field is required."],
+          allow_guests_enforced: [
+            "The allow guests enforced field is required.",
+          ],
+          everyone_can_start_default: [
+            "The everyone can start default field is required.",
+          ],
+          everyone_can_start_enforced: [
+            "The everyone can start enforced field is required.",
+          ],
+          mute_on_start_default: [
+            "The mute on start default field is required.",
+          ],
+          mute_on_start_enforced: [
+            "The mute on start enforced field is required.",
+          ],
+          lobby_default: ["The lobby default field is required."],
+          lobby_enforced: ["The lobby enforced field is required."],
+          record_attendance_default: [
+            "The record attendance default field is required.",
+          ],
+          record_attendance_enforced: [
+            "The record attendance enforced field is required.",
+          ],
+          record_default: ["The record default field is required."],
+          record_enforced: ["The record enforced field is required."],
+          auto_start_recording_default: [
+            "The auto start recording default field is required.",
+          ],
+          auto_start_recording_enforced: [
+            "The auto start recording enforced field is required.",
+          ],
+          lock_settings_disable_cam_default: [
+            "The lock settings disable cam default field is required.",
+          ],
+          lock_settings_disable_cam_enforced: [
+            "The lock settings disable cam enforced field is required.",
+          ],
+          webcams_only_for_moderator_default: [
+            "The webcams only for moderator default field is required.",
+          ],
+          webcams_only_for_moderator_enforced: [
+            "The webcams only for moderator enforced field is required.",
+          ],
+          lock_settings_disable_mic_default: [
+            "The lock settings disable mic default field is required.",
+          ],
+          lock_settings_disable_mic_enforced: [
+            "The lock settings disable mic enforced field is required.",
+          ],
+          lock_settings_disable_public_chat_default: [
+            "The lock settings disable public chat default field is required.",
+          ],
+          lock_settings_disable_public_chat_enforced: [
+            "The lock settings disable public chat enforced field is required.",
+          ],
+          lock_settings_disable_private_chat_default: [
+            "The lock settings disable private chat default field is required.",
+          ],
+          lock_settings_disable_private_chat_enforced: [
+            "The lock settings disable private chat enforced field is required.",
+          ],
+          lock_settings_disable_note_default: [
+            "The lock settings disable note default field is required.",
+          ],
+          lock_settings_disable_note_enforced: [
+            "The lock settings disable note enforced field is required.",
+          ],
+          lock_settings_hide_user_list_default: [
+            "The lock settings hide user list default field is required.",
+          ],
+          lock_settings_hide_user_list_enforced: [
+            "The lock settings hide user list enforced field is required.",
+          ],
+          allow_membership_default: [
+            "The allow membership default field is required.",
+          ],
+          allow_membership_enforced: [
+            "The allow membership enforced field is required.",
+          ],
+          default_role_default: ["The default role default field is required."],
+          default_role_enforced: [
+            "The default role enforced field is required.",
+          ],
+          visibility_default: ["The visibility default field is required."],
+          visibility_enforced: ["The visibility enforced field is required."],
+        },
+      },
+    }).as("newRoomTypeRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@newRoomTypeRequest");
+
+    // Check error messages
+    cy.get('[data-test="room-type-name-field"]').should(
+      "include.text",
+      "The name field is required.",
+    );
+    cy.get('[data-test="description-field"]').should(
+      "include.text",
+      "The description field is required.",
+    );
+    cy.get('[data-test="color-field"]').should(
+      "include.text",
+      "The color field is required.",
+    );
+    cy.get('[data-test="server-pool-field"]').should(
+      "include.text",
+      "The server pool field is required.",
+    );
+    cy.get('[data-test="max-participants-field"]').should(
+      "include.text",
+      "The max participants field is required.",
+    );
+    cy.get('[data-test="max-duration-field"]').should(
+      "include.text",
+      "The max duration field is required.",
+    );
+    cy.get('[data-test="create-parameters-field"]').should(
+      "include.text",
+      "The create parameters field is required.",
+    );
+    cy.get('[data-test="role-field"]').should(
+      "include.text",
+      "The roles field is required.",
+    );
+    cy.get('[data-test="has-access-code-field"]')
+      .should("include.text", "The has access code default field is required.")
+      .and("include.text", "The has access code enforced field is required.");
+    cy.get('[data-test="allow-guests-field"]')
+      .should("include.text", "The allow guests default field is required.")
+      .and("include.text", "The allow guests enforced field is required.");
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should(
+        "include.text",
+        "The everyone can start default field is required.",
+      )
+      .and(
+        "include.text",
+        "The everyone can start enforced field is required.",
+      );
+    cy.get('[data-test="mute-on-start-field"]')
+      .should("include.text", "The mute on start default field is required.")
+      .and("include.text", "The mute on start enforced field is required.");
+    cy.get('[data-test="lobby-field"]')
+      .should("include.text", "The lobby default field is required.")
+      .and("include.text", "The lobby enforced field is required.");
+    cy.get('[data-test="record-attendance-field"]')
+      .should(
+        "include.text",
+        "The record attendance default field is required.",
+      )
+      .and("include.text", "The record attendance enforced field is required.");
+    cy.get('[data-test="record-field"]')
+      .should("include.text", "The record default field is required.")
+      .and("include.text", "The record enforced field is required.");
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should(
+        "include.text",
+        "The auto start recording default field is required.",
+      )
+      .and(
+        "include.text",
+        "The auto start recording enforced field is required.",
+      );
+    cy.get('[data-test="disable-cam-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable cam default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable cam enforced field is required.",
+      );
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should(
+        "include.text",
+        "The webcams only for moderator default field is required.",
+      )
+      .and(
+        "include.text",
+        "The webcams only for moderator enforced field is required.",
+      );
+    cy.get('[data-test="disable-mic-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable mic default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable mic enforced field is required.",
+      );
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable public chat default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable public chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable private chat default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable private chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-note-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable note default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable note enforced field is required.",
+      );
+    cy.get('[data-test="hide-user-list-field"]')
+      .should(
+        "include.text",
+        "The lock settings hide user list default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings hide user list enforced field is required.",
+      );
+    cy.get('[data-test="allow-membership-field"]')
+      .should("include.text", "The allow membership default field is required.")
+      .and("include.text", "The allow membership enforced field is required.");
+    cy.get('[data-test="default-role-field"]')
+      .should("include.text", "The default role default field is required.")
+      .and("include.text", "The default role enforced field is required.");
+    cy.get('[data-test="visibility-field"]')
+      .should("include.text", "The visibility default field is required.")
+      .and("include.text", "The visibility enforced field is required.");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/roomTypes", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("newRoomTypeRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@newRoomTypeRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="room-type-name-field"]').should(
+      "not.include.text",
+      "The name field is required.",
+    );
+    cy.get('[data-test="description-field"]').should(
+      "not.include.text",
+      "The description field is required.",
+    );
+    cy.get('[data-test="color-field"]').should(
+      "not.include.text",
+      "The color field is required.",
+    );
+    cy.get('[data-test="server-pool-field"]').should(
+      "not.include.text",
+      "The server pool field is required.",
+    );
+    cy.get('[data-test="max-participants-field"]').should(
+      "not.include.text",
+      "The max participants field is required.",
+    );
+    cy.get('[data-test="max-duration-field"]').should(
+      "not.include.text",
+      "The max duration field is required.",
+    );
+    cy.get('[data-test="create-parameters-field"]').should(
+      "not.include.text",
+      "The create parameters field is required.",
+    );
+    cy.get('[data-test="role-field"]').should(
+      "not.include.text",
+      "The roles field is required.",
+    );
+    cy.get('[data-test="has-access-code-field"]')
+      .should(
+        "not.include.text",
+        "The has access code default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The has access code enforced field is required.",
+      );
+    cy.get('[data-test="allow-guests-field"]')
+      .should("not.include.text", "The allow guests default field is required.")
+      .and("not.include.text", "The allow guests enforced field is required.");
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should(
+        "not.include.text",
+        "The everyone can start default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The everyone can start enforced field is required.",
+      );
+    cy.get('[data-test="mute-on-start-field"]')
+      .should(
+        "not.include.text",
+        "The mute on start default field is required.",
+      )
+      .and("not.include.text", "The mute on start enforced field is required.");
+    cy.get('[data-test="lobby-field"]')
+      .should("not.include.text", "The lobby default field is required.")
+      .and("not.include.text", "The lobby enforced field is required.");
+    cy.get('[data-test="record-attendance-field"]')
+      .should(
+        "not.include.text",
+        "The record attendance default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The record attendance enforced field is required.",
+      );
+    cy.get('[data-test="record-field"]')
+      .should("not.include.text", "The record default field is required.")
+      .and("not.include.text", "The record enforced field is required.");
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should(
+        "not.include.text",
+        "The auto start recording default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The auto start recording enforced field is required.",
+      );
+    cy.get('[data-test="disable-cam-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable cam default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable cam enforced field is required.",
+      );
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should(
+        "not.include.text",
+        "The webcams only for moderator default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The webcams only for moderator enforced field is required.",
+      );
+    cy.get('[data-test="disable-mic-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable mic default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable mic enforced field is required.",
+      );
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable public chat default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable public chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable private chat default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable private chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-note-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable note default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable note enforced field is required.",
+      );
+    cy.get('[data-test="hide-user-list-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings hide user list default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings hide user list enforced field is required.",
+      );
+    cy.get('[data-test="allow-membership-field"]')
+      .should(
+        "not.include.text",
+        "The allow membership default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The allow membership enforced field is required.",
+      );
+    cy.get('[data-test="default-role-field"]')
+      .should("not.include.text", "The default role default field is required.")
+      .and("not.include.text", "The default role enforced field is required.");
+    cy.get('[data-test="visibility-field"]')
+      .should("not.include.text", "The visibility default field is required.")
+      .and("not.include.text", "The visibility enforced field is required.");
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/roomTypes", {
+      statusCode: 401,
+    }).as("newRoomTypeRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@newRoomTypeRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load roles errors", function () {
+    // Check with 500 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.visit("/admin/room_types/new");
+
+    cy.get("#restrict").click();
+
+    cy.wait("@rolesRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    // Reload roles without errors
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "userRoles.json",
+    }).as("rolesRequest");
+
+    cy.get('[data-test="roles-reload-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="roles-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 5);
+      });
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="roles-reload-button"]').should("be.visible");
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get("#restrict").click();
+    cy.get("#restrict").click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit new page again with roles
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "userRoles.json",
+    }).as("rolesRequest");
+
+    cy.visit("/admin/room_types/new");
+
+    cy.get("#restrict").click();
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load server pools errors", function () {
+    // Check with 500 error
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolsRequest");
+
+    cy.visit("/admin/room_types/new");
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-pool-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    // Reload server pools without errors
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pools-reload-button"]').click();
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pool-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="server-pools-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-dropdown"]').click();
+
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 3);
+      });
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolsRequest");
+
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-pool-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pools-reload-button"]').should("be.visible");
+
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 401,
+    }).as("serverPoolsRequest");
+
+    cy.reload();
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit new page again with server pools
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.visit("/admin/room_types/new");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pool-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 401,
+    }).as("serverPoolsRequest");
+
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRoomTypesView.cy.js b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
new file mode 100644
index 000000000..49551549c
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
@@ -0,0 +1,693 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin room types view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRoomTypesViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roomTypes.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/room_types/3");
+  });
+
+  it("visit with user without permission to view room types", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roomTypes.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types/3");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/room_types/3");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check roomTypeView shown correctly", function () {
+    const roomTypeRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roomTypes/3",
+      { fixture: "roomType.json" },
+      "roomTypeRequest",
+    );
+
+    cy.visit("/admin/room_types/3");
+
+    // Check loading
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+    cy.get('[data-test="room-types-save-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        roomTypeRequest.sendResponse();
+      });
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that buttons are still hidden
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+    cy.get('[data-test="room-types-save-button"]').should("not.exist");
+
+    // Check that room type data is shown correctly
+    cy.get('[data-test="room-type-name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#room-type-name")
+          .should("have.value", "Exam")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "Room type description for room type Exam")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.color")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and("not.have.class", "selected");
+        }
+
+        cy.get("#custom-color")
+          .should("have.value", "#4a5c66")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.preview")
+      .within(() => {
+        cy.get('[data-test="room-type-badge"]')
+          .should("have.css", "background-color", "rgb(74, 92, 102)")
+          .and("have.text", "Exam");
+      });
+
+    cy.get('[data-test="server-pool-field"]')
+      .should("be.visible")
+      .and("include.text", "app.server_pool")
+      .within(() => {
+        cy.get('[data-test="server-pool-dropdown"]')
+          .should("have.class", "multiselect--disabled")
+          .find(".multiselect__tags")
+          .should("have.text", "Test");
+      });
+
+    cy.get('[data-test="restrict-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.restrict")
+      .within(() => {
+        cy.get("#restrict").should("not.be.checked").and("be.disabled");
+      });
+
+    cy.get('[data-test="role-field"]').should("not.exist");
+
+    cy.get('[data-test="max-participants-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.max_participants")
+      .within(() => {
+        cy.get("#max-participants")
+          .should("have.value", "100")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="max-duration-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.max_duration")
+      .within(() => {
+        cy.get("#max-duration")
+          .should("have.value", "120 min.")
+          .and("be.disabled");
+      });
+
+    // Check default and enforced settings
+    cy.contains("admin.room_types.default_room_settings.title").should(
+      "be.visible",
+    );
+    cy.contains("rooms.settings.general.title").should("be.visible");
+
+    cy.get('[data-test="has-access-code-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.general.has_access_code")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "has-access-code",
+          true,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="allow-guests-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.general.allow_guests")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "allow-guests",
+          true,
+          true,
+          true,
+        );
+      });
+
+    cy.contains("rooms.settings.video_conference.title").should("be.visible");
+
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.everyone_can_start")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "everyone-can-start",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="mute-on-start-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.mute_on_start")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "mute-on-start",
+          true,
+          true,
+          true,
+        );
+      });
+
+    cy.get('[data-test="lobby-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.lobby.title")
+      .within(() => {
+        cy.get('[data-test="lobby-disabled-field"]')
+          .should("be.visible")
+          .and("include.text", "app.disabled")
+          .within(() => {
+            cy.get("#lobby-disabled")
+              .should("not.be.checked")
+              .and("be.disabled");
+          });
+
+        cy.get('[data-test="lobby-enabled-field"]')
+          .should("be.visible")
+          .and("include.text", "app.enabled")
+          .within(() => {
+            cy.get("#lobby-enabled")
+              .should("not.be.checked")
+              .and("be.disabled");
+          });
+
+        cy.get('[data-test="lobby-only-for-guests-field"]')
+          .should("be.visible")
+          .and(
+            "include.text",
+            "rooms.settings.video_conference.lobby.only_for_guests_enabled",
+          )
+          .within(() => {
+            cy.get("#lobby-only-for-guests")
+              .should("be.checked")
+              .and("be.disabled");
+          });
+
+        cy.get('[data-test="lobby-enforced"]').should(
+          "have.text",
+          "admin.room_types.default_room_settings.enforced",
+        );
+      });
+
+    cy.contains("rooms.settings.recordings.title").should("be.visible");
+
+    cy.get('[data-test="record-attendance-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_attendance")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record-attendance",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="record-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_video_conference")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="record-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_video_conference")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.auto_start_recording")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "auto-start-recording",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.contains("rooms.settings.restrictions.title").should("be.visible");
+
+    cy.get('[data-test="disable-cam-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_cam",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-cam",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.webcams_only_for_moderator",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "webcams-only-for-moderator",
+          true,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="disable-mic-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_mic",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-mic",
+          false,
+          true,
+          true,
+        );
+      });
+
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_public_chat",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-public-chat",
+          true,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_private_chat",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-private-chat",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="disable-note-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_note",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-note",
+          true,
+          true,
+          true,
+        );
+      });
+
+    cy.get('[data-test="hide-user-list-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_hide_user_list",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "hide-user-list",
+          true,
+          false,
+          true,
+        );
+      });
+
+    cy.contains("rooms.settings.participants.title").should("be.visible");
+
+    cy.get('[data-test="allow-membership-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.participants.allow_membership")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "allow-membership",
+          false,
+          true,
+          true,
+        );
+      });
+
+    cy.get('[data-test="default-role-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.participants.default_role.title")
+      .and(
+        "include.text",
+        "rooms.settings.participants.default_role.only_logged_in",
+      )
+      .within(() => {
+        cy.get('[data-test="default-role-default-button"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="default-role-default-button"]')
+          .eq(0)
+          .should("have.text", "rooms.roles.participant")
+          .should("have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="default-role-default-button"]')
+          .eq(1)
+          .should("have.text", "rooms.roles.moderator")
+          .should("not.have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="default-role-enforced"]').should(
+          "have.text",
+          "admin.room_types.default_room_settings.default",
+        );
+      });
+
+    cy.contains("rooms.settings.advanced.title").should("be.visible");
+
+    cy.get('[data-test="visibility-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.advanced.visibility")
+      .within(() => {
+        cy.get('[data-test="visibility-default-button"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="visibility-default-button"]')
+          .eq(0)
+          .should("have.text", "rooms.settings.advanced.visibility.private")
+          .should("not.have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="visibility-default-button"]')
+          .eq(1)
+          .should("have.text", "rooms.settings.advanced.visibility.public")
+          .should("have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="visibility-enforced"]').should(
+          "have.text",
+          "admin.room_types.default_room_settings.default",
+        );
+      });
+
+    // Check other settings
+    cy.contains("admin.room_types.bbb_api.title").should("be.visible");
+
+    cy.get('[data-test="create-parameters-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.bbb_api.create_parameters")
+      .and(
+        "include.text",
+        "admin.room_types.bbb_api.create_parameters_description",
+      )
+      .within(() => {
+        cy.get("#create-parameters")
+          .should(
+            "have.value",
+            "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+          )
+          .and("be.disabled");
+      });
+  });
+
+  it("check restrictions shown correctly", function () {
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Admin",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      });
+    });
+
+    cy.visit("/admin/room_types/3");
+
+    cy.get('[data-test="restrict-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.restrict")
+      .within(() => {
+        cy.get("#restrict").should("be.checked").and("be.disabled");
+      });
+
+    cy.get('[data-test="role-field"]')
+      .should("be.visible")
+      .and("include.text", "app.roles")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]')
+          .should("have.class", "multiselect--disabled")
+          .within(() => {
+            cy.get('[data-test="role-chip"]').should("have.length", 2);
+            cy.get('[data-test="role-chip"]')
+              .eq(0)
+              .should("include.text", "Admin")
+              .find('[data-test="remove-server-button"]')
+              .should("not.exist");
+            cy.get('[data-test="role-chip"]')
+              .eq(1)
+              .should("include.text", "Staff")
+              .find('[data-test="remove-server-button"]')
+              .should("not.exist");
+          });
+      });
+  });
+
+  it("open view errors", function () {
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("roomTypeRequest");
+
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 200,
+      fixture: "roomType.json",
+    }).as("roomTypeRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload with 404 error
+    cy.interceptAdminRoomTypesIndexRequests();
+
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("roomTypeRequest");
+
+    cy.reload();
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/room_types/3");
+    cy.url().should("include", "/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 401,
+    }).as("roomTypeRequest");
+
+    cy.visit("admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]')
+      .should("be.visible")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/room_types/3/edit");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+    cy.get('[data-test="room-types-save-button"]').should("not.exist");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+        "roomTypes.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/room_types/3/edit");
+    cy.get('[data-test="room-types-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="room-types-save-button"]').should("not.exist");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
new file mode 100644
index 000000000..d94989763
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
@@ -0,0 +1,912 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin room types view room type actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRoomTypesViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+        "roomTypes.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete room type without replacement", function () {
+    cy.intercept("GET", "api/v1/roomTypes", {
+      fixture: "roomTypes.json",
+    }).as("roomTypesRequest");
+
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-types-delete-button"]').click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="room-types-delete-dialog"]')
+      .should("include.text", "admin.room_types.delete.title")
+      .should("include.text", 'admin.room_types.delete.confirm_{"name":"Exam"}')
+      .within(() => {
+        cy.get('[data-test="replacement-room-type-field"]')
+          .should("be.visible")
+          .and("include.text", "admin.room_types.delete.replacement")
+          .and("include.text", "admin.room_types.delete.replacement_info")
+          .within(() => {
+            cy.get('[data-test="replacement-room-type-dropdown"]').should(
+              "have.text",
+              "admin.room_types.delete.no_replacement",
+            );
+
+            cy.get('[data-test="replacement-room-type-dropdown"]').within(
+              () => {
+                cy.get(".p-select-label").should(
+                  "not.have.attr",
+                  "aria-disabled",
+                  "true",
+                );
+              },
+            );
+          });
+      });
+
+    // Confirm delete of room type
+    const deleteRoomTypeRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/roomTypes/3",
+      { statusCode: 204 },
+      "deleteRoomTypeRequest",
+    );
+
+    cy.fixture("roomTypes.json").then((roomTypes) => {
+      roomTypes.data = roomTypes.data.filter((roomType) => roomType.id !== 3);
+
+      cy.intercept("GET", "api/v1/roomTypes", {
+        statusCode: 200,
+        body: roomTypes,
+      }).as("roomTypesRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .and("be.disabled");
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteRoomTypeRequest.sendResponse();
+      });
+
+    cy.wait("@deleteRoomTypeRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        replacement_room_type: null,
+      });
+    });
+    cy.wait("@roomTypesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/room_types/3");
+    cy.url().should("include", "/admin/room_types");
+  });
+
+  it("delete room type with replacement", function () {
+    cy.intercept("GET", "api/v1/roomTypes", {
+      fixture: "roomTypes.json",
+    }).as("roomTypesRequest");
+
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-types-delete-button"]').click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="replacement-room-type-dropdown-items"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="room-types-delete-dialog"]')
+      .should("include.text", 'admin.room_types.delete.confirm_{"name":"Exam"}')
+      .within(() => {
+        cy.get('[data-test="replacement-room-type-field"]')
+          .should("be.visible")
+          .within(() => {
+            cy.get('[data-test="replacement-room-type-dropdown"]')
+              .should("have.text", "admin.room_types.delete.no_replacement")
+              .click();
+          });
+      });
+
+    // Check that replacement room types are shown correctly
+    cy.get('[data-test="replacement-room-type-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test = "replacement-room-type-dropdown-option"]').should(
+          "have.length",
+          3,
+        );
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "Lecture");
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "Meeting");
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Seminar");
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(1)
+          .click();
+      });
+
+    cy.get('[data-test="replacement-room-type-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="replacement-room-type-dropdown"]').should(
+      "have.text",
+      "Meeting",
+    );
+
+    // Confirm delete of room type
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 204,
+    }).as("deleteRoomTypeRequest");
+
+    cy.fixture("roomTypes.json").then((roomTypes) => {
+      roomTypes.data = roomTypes.data.filter((roomType) => roomType.id !== 3);
+
+      cy.intercept("GET", "api/v1/roomTypes", {
+        statusCode: 200,
+        body: roomTypes,
+      }).as("roomTypesRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check that replacement room type was sent correctly
+    cy.wait("@deleteRoomTypeRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        replacement_room_type: 2,
+      });
+    });
+    cy.wait("@roomTypesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/room_types/3");
+    cy.url().should("include", "/admin/room_types");
+  });
+
+  it("delete room type errors", function () {
+    cy.intercept("GET", "api/v1/roomTypes", {
+      fixture: "roomTypes.json",
+    }).as("roomTypesRequest");
+
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-types-delete-button"]').click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check with 422 error (replacement room type needed)
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 422,
+      body: {
+        message:
+          "Replacement room type required! Rooms are still assigned to this room type.",
+        errors: {
+          replacement_room_type: [
+            "Replacement room type required! Rooms are still assigned to this room type.",
+          ],
+        },
+      },
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that dialog stays open and error message is shown
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+    cy.get('[data-test="replacement-room-type-field"]').should(
+      "include.text",
+      "Replacement room type required! Rooms are still assigned to this room type.",
+    );
+
+    // Select replacement room type
+    cy.get('[data-test="replacement-room-type-dropdown"]').click();
+    cy.get('[data-test="replacement-room-type-dropdown-option"]').eq(1).click();
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error message is hidden
+    cy.get('[data-test="replacement-room-type-field"]').should(
+      "not.include.text",
+      "Replacement room type required! Rooms are still assigned to this room type.",
+    );
+
+    // Check with 404 error //ToDo not implemented yet on view page
+    // cy.intercept("DELETE", "api/v1/roomTypes/3", {
+    //   statusCode: 404,
+    //   body: {
+    //     message: "No query results for model",
+    //   },
+    // }).as("deleteRoomTypeRequest");
+    //
+    // cy.get('[data-test="dialog-continue-button"]').click();
+    //
+    // cy.wait("@deleteRoomTypeRequest");
+    // cy.wait("@roomTypesRequest");
+    //
+    // // Check that redirect worked
+    // cy.url().should("not.include", "/admin/room_types/3");
+    // cy.url().should("include", "/admin/room_types");
+    //
+    // // Check that error message
+    // cy.checkToastMessage([
+    //   'app.flash.server_error.message_{"message":"No query results for model"}',
+    //   'app.flash.server_error.error_code_{"statusCode":404}',
+    // ]);
+    //
+    // // Reload page
+    // cy.visit("/admin/room_types/3");
+    //
+    // cy.wait("@roomTypeRequest");
+    //
+    // cy.get('[data-test="room-types-delete-button"]').click();
+    //
+    // // Check that replacement room types are loaded
+    // cy.wait("@roomTypesRequest");
+    //
+    // cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 401,
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("switch between edit and view", function () {
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Admin",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+    });
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+    cy.wait("@serverPoolsRequest");
+    cy.wait("@userRolesRequest");
+
+    // Check values and change them
+    cy.get("#room-type-name").should("have.value", "Exam").clear();
+    cy.get("#room-type-name").type("Exam 01");
+
+    cy.get("#description")
+      .should("have.value", "Room type description for room type Exam")
+      .clear();
+    cy.get("#description").type(
+      "New room type description for room type Exam 01",
+    );
+
+    cy.get("#custom-color").should("have.value", "#4a5c66").clear();
+    cy.get("#custom-color").type("#ef4444");
+
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Test").click();
+    });
+    cy.get('[data-test="server-pool-dropdown"]').click();
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 4);
+        cy.get(".multiselect__option").eq(1).click();
+      });
+
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Admin")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    cy.get("#restrict").should("be.checked").click();
+
+    cy.get('[data-test="role-field"]').should("not.exist");
+
+    cy.get("#max-participants").should("have.value", "100").clear();
+    cy.get("#max-participants").type("50");
+
+    cy.get("#max-duration").should("have.value", "120 min.").clear();
+    cy.get("#max-duration").type("60");
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "has-access-code",
+      true,
+      false,
+      false,
+    );
+    cy.get("#has-access-code-default").click();
+    cy.get('[data-test="has-access-code-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-guests",
+      true,
+      true,
+      false,
+    );
+    cy.get("#allow-guests-default").click();
+    cy.get('[data-test="allow-guests-enforced"]').click();
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "everyone-can-start",
+      false,
+      false,
+      false,
+    );
+    cy.get("#everyone-can-start-default").click();
+    cy.get('[data-test="everyone-can-start-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "mute-on-start",
+      true,
+      true,
+      false,
+    );
+    cy.get("#mute-on-start-default").click();
+    cy.get('[data-test="mute-on-start-enforced"]').click();
+    cy.get("#lobby-only-for-guests").should("be.checked");
+    cy.get("#lobby-disabled").click();
+    cy.get('[data-test="lobby-enforced"]').click();
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record-attendance",
+      false,
+      false,
+      false,
+    );
+    cy.get("#record-attendance-default").click();
+    cy.get('[data-test="record-attendance-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record",
+      false,
+      false,
+      false,
+    );
+
+    cy.get("#record-default").click();
+    cy.get('[data-test="record-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "auto-start-recording",
+      false,
+      false,
+      false,
+    );
+    cy.get("#auto-start-recording-default").click();
+    cy.get('[data-test="auto-start-recording-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-cam",
+      false,
+      false,
+      false,
+    );
+    cy.get("#disable-cam-default").click();
+    cy.get('[data-test="disable-cam-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "webcams-only-for-moderator",
+      true,
+      false,
+      false,
+    );
+    cy.get("#webcams-only-for-moderator-default").click();
+    cy.get('[data-test="webcams-only-for-moderator-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-mic",
+      false,
+      true,
+      false,
+    );
+    cy.get("#disable-mic-default").click();
+    cy.get('[data-test="disable-mic-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-public-chat",
+      true,
+      false,
+      false,
+    );
+    cy.get("#disable-public-chat-default").click();
+    cy.get('[data-test="disable-public-chat-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-private-chat",
+      false,
+      false,
+      false,
+    );
+    cy.get("#disable-private-chat-default").click();
+    cy.get('[data-test="disable-private-chat-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-note",
+      true,
+      true,
+      false,
+    );
+    cy.get("#disable-note-default").click();
+    cy.get('[data-test="disable-note-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "hide-user-list",
+      true,
+      false,
+      false,
+    );
+    cy.get("#hide-user-list-default").click();
+    cy.get('[data-test="hide-user-list-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-membership",
+      false,
+      true,
+      false,
+    );
+    cy.get("#allow-membership-default").click();
+    cy.get('[data-test="allow-membership-enforced"]').click();
+
+    cy.get('[data-test="default-role-default-button"]')
+      .eq(0)
+      .should("have.attr", "aria-pressed", "true");
+
+    cy.get('[data-test="default-role-default-button"]').eq(1).click();
+    cy.get('[data-test="default-role-enforced"]').click();
+    cy.get('[data-test="visibility-default-button"]')
+      .eq(1)
+      .should("have.attr", "aria-pressed", "true");
+    cy.get('[data-test="visibility-default-button"]').eq(0).click();
+    cy.get('[data-test="visibility-enforced"]').click();
+
+    cy.get("#create-parameters")
+      .should(
+        "have.value",
+        "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+      )
+      .clear();
+
+    cy.get("#create-parameters").type("meetingLayout=PRESENTATION_FOCUS");
+
+    // Check that save button is shown
+    cy.get('[data-test="room-types-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Switch to view
+    cy.get('[data-test="room-types-cancel-edit-button"]').click();
+
+    // Check if redirect worked
+    cy.url().should("include", "/admin/room_types/3");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that changes were not saved
+    cy.get("#room-type-name").should("have.value", "Exam").and("be.disabled");
+    cy.get("#description")
+      .should("have.value", "Room type description for room type Exam")
+      .and("be.disabled");
+    cy.get("#custom-color").should("have.value", "#4a5c66").and("be.disabled");
+    cy.get('[data-test="server-pool-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get(".multiselect__tags").should("include.text", "Test");
+      });
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="role-chip"]').should("have.length", 2);
+        cy.get('[data-test="role-chip"]')
+          .eq(0)
+          .should("include.text", "Admin")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+
+        cy.get('[data-test="role-chip"]')
+          .eq(1)
+          .should("include.text", "Staff")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+      });
+    cy.get("#restrict").should("be.checked").and("be.disabled");
+    cy.get("#max-participants").should("have.value", "100").and("be.disabled");
+    cy.get("#max-duration").should("have.value", "120 min.").and("be.disabled");
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "has-access-code",
+      true,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-guests",
+      true,
+      true,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "everyone-can-start",
+      false,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "mute-on-start",
+      true,
+      true,
+      true,
+    );
+    cy.get("#lobby-disabled").should("not.be.checked").and("be.disabled");
+    cy.get("#lobby-enabled").should("not.be.checked").and("be.disabled");
+    cy.get("#lobby-only-for-guests").should("be.checked").and("be.disabled");
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record-attendance",
+      false,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record",
+      false,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "auto-start-recording",
+      false,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-cam",
+      false,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "webcams-only-for-moderator",
+      true,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-mic",
+      false,
+      true,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-public-chat",
+      true,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-private-chat",
+      false,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-note",
+      true,
+      true,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "hide-user-list",
+      true,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-membership",
+      false,
+      true,
+      true,
+    );
+
+    cy.get('[data-test="default-role-default-button"]')
+      .eq(0)
+      .should("have.attr", "aria-pressed", "true")
+      .and("be.disabled");
+
+    cy.get('[data-test="default-role-default-button"]')
+      .eq(1)
+      .should("not.have.attr", "aria-pressed", "true")
+      .and("be.disabled");
+
+    cy.get('[data-test="visibility-default-button"]')
+      .eq(0)
+      .should("not.have.attr", "aria-pressed", "true")
+      .and("be.disabled");
+
+    cy.get('[data-test="visibility-default-button"]')
+      .eq(1)
+      .should("have.attr", "aria-pressed", "true")
+      .and("be.disabled");
+
+    cy.get("#create-parameters")
+      .should(
+        "have.value",
+        "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+      )
+      .and("be.disabled");
+
+    // Check that save button is not visible
+    cy.get('[data-test="room-types-save-button"]').should("not.exist");
+
+    // Switch back to edit page
+    cy.get('[data-test="room-types-edit-button"]').click();
+
+    // Check if redirect worked
+    cy.url().should("include", "/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+    cy.wait("@serverPoolsRequest");
+    cy.wait("@userRolesRequest");
+
+    // Check that original values are shown
+    cy.get("#room-type-name")
+      .should("have.value", "Exam")
+      .and("not.be.disabled");
+    cy.get("#description")
+      .should("have.value", "Room type description for room type Exam")
+      .and("not.be.disabled");
+    cy.get("#custom-color")
+      .should("have.value", "#4a5c66")
+      .and("not.be.disabled");
+    cy.get('[data-test="server-pool-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get(".multiselect__tags").should("include.text", "Test");
+      });
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="role-chip"]').should("have.length", 2);
+        cy.get('[data-test="role-chip"]')
+          .eq(0)
+          .should("include.text", "Admin")
+          .find('[data-test="remove-role-button"]')
+          .should("be.visible");
+
+        cy.get('[data-test="role-chip"]')
+          .eq(1)
+          .should("include.text", "Staff")
+          .find('[data-test="remove-role-button"]')
+          .should("be.visible");
+      });
+    cy.get("#restrict").should("be.checked").and("not.be.disabled");
+    cy.get("#max-participants")
+      .should("have.value", "100")
+      .and("not.be.disabled");
+    cy.get("#max-duration")
+      .should("have.value", "120 min.")
+      .and("not.be.disabled");
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "has-access-code",
+      true,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-guests",
+      true,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "everyone-can-start",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "mute-on-start",
+      true,
+      true,
+      false,
+    );
+    cy.get("#lobby-disabled").should("not.be.checked").and("not.be.disabled");
+    cy.get("#lobby-enabled").should("not.be.checked").and("not.be.disabled");
+    cy.get("#lobby-only-for-guests")
+      .should("be.checked")
+      .and("not.be.disabled");
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record-attendance",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "auto-start-recording",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-cam",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "webcams-only-for-moderator",
+      true,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-mic",
+      false,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-public-chat",
+      true,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-private-chat",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-note",
+      true,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "hide-user-list",
+      true,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-membership",
+      false,
+      true,
+      false,
+    );
+
+    cy.get('[data-test="default-role-default-button"]')
+      .eq(0)
+      .should("have.attr", "aria-pressed", "true")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="default-role-default-button"]')
+      .eq(1)
+      .should("not.have.attr", "aria-pressed", "true")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="visibility-default-button"]')
+      .eq(0)
+      .should("not.have.attr", "aria-pressed", "true")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="visibility-default-button"]')
+      .eq(1)
+      .should("have.attr", "aria-pressed", "true")
+      .and("not.be.disabled");
+
+    cy.get("#create-parameters")
+      .should(
+        "have.value",
+        "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+      )
+      .and("not.be.disabled");
+
+    // Check that save button is shown
+    cy.get('[data-test="room-types-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
index 72366dc00..1e689f82f 100644
--- a/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
@@ -661,7 +661,7 @@ describe("Admin server pools edit", function () {
     cy.get('[data-test="overlay"]').should("not.exist");
     cy.get('[data-test="loading-retry-button"]').should("not.exist");
 
-    // reload page with 404 errors
+    // Reload page with 404 errors
     cy.interceptAdminServerPoolsIndexRequests();
 
     cy.intercept("GET", "api/v1/serverPools/1", {
diff --git a/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
index 65fc761c3..1d06beb36 100644
--- a/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
@@ -38,7 +38,7 @@ describe("Admin server pools index", function () {
   it("load server pools", function () {
     const serverPoolRequest = interceptIndefinitely(
       "GET",
-      "api/vi/serverPools*",
+      "api/v1/serverPools*",
       { fixture: "serverPools.json" },
       "serverPoolsRequest",
     );
@@ -73,7 +73,7 @@ describe("Admin server pools index", function () {
 
     cy.get('[data-test="server-pools-add-button"]').should("not.exist");
 
-    // Check that headers are displayed correctly
+    // Check that table headers are displayed correctly
     cy.get('[data-test="server-pool-header-cell"]').should("have.length", 3);
 
     cy.get('[data-test="server-pool-header-cell"]')
diff --git a/tests/Frontend/e2e/AdminServerPoolsNew.cy.js b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
index 82a60fa60..4e15bb976 100644
--- a/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
@@ -128,7 +128,7 @@ describe("Admin server pools new", function () {
         .eq(0)
         .should("include.text", "Server 02")
         .find('[data-test="remove-server-button"]')
-        .should("be.visible"); // ToDo think about hiding this button
+        .should("be.visible");
     });
 
     // Select second role
@@ -210,7 +210,7 @@ describe("Admin server pools new", function () {
 
     cy.get('[data-test="overlay"]').should("not.exist");
 
-    // Check that user page is shown
+    // Check that server pool page is shown
     cy.url().should("include", "/admin/server_pools/20");
   });
 
diff --git a/tests/Frontend/e2e/AdminServerPoolsView.cy.js b/tests/Frontend/e2e/AdminServerPoolsView.cy.js
index 018959d77..b427bd15c 100644
--- a/tests/Frontend/e2e/AdminServerPoolsView.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsView.cy.js
@@ -18,7 +18,7 @@ describe("Admin server pools view", function () {
     });
   });
 
-  it("visit with user tha is not logged in", function () {
+  it("visit with user that is not logged in", function () {
     cy.testVisitWithoutCurrentUser("/admin/server_pools/1");
   });
 
@@ -212,7 +212,7 @@ describe("Admin server pools view", function () {
     cy.get('[data-test="overlay"]').should("not.exist");
     cy.get('[data-test="loading-retry-button"]').should("not.exist");
 
-    // reload page with 404 errors
+    // Reload page with 404 errors
     cy.interceptAdminServerPoolsIndexRequests();
 
     cy.intercept("GET", "api/v1/serverPools/1", {
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index e5d26a76a..92989968b 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -899,6 +899,8 @@ describe("Admin users new", function () {
       "multiselect--disabled",
     );
 
+    cy.get('[data-test="roles-reload-button"]').should("be.visible");
+
     cy.get('[data-test="users-new-save-button"]').should("be.disabled");
 
     // Check with 401 error
@@ -910,14 +912,12 @@ describe("Admin users new", function () {
 
     cy.wait("@rolesRequest");
 
-    cy.url().should("include", "/login?redirect=/admin/users/new");
-
     // Check that redirect worked and error message is shown
     cy.url().should("include", "/login?redirect=/admin/users/new");
 
     cy.checkToastMessage("app.flash.unauthenticated");
 
-    // Visit edit page again with roles
+    // Visit new page again with roles
     cy.intercept("GET", "api/v1/roles*", {
       fixture: "userRoles.json",
     }).as("rolesRequest");
diff --git a/tests/Frontend/fixtures/config.json b/tests/Frontend/fixtures/config.json
index c26e9d07b..232c76a03 100644
--- a/tests/Frontend/fixtures/config.json
+++ b/tests/Frontend/fixtures/config.json
@@ -10,7 +10,8 @@
         "fr": "Français"
       },
       "default_locale": "en",
-      "default_timezone": "UTC"
+      "default_timezone": "UTC",
+      "pagination_page_size": 2
     },
     "theme": {
       "primary_color": "#14b8a6",
diff --git a/tests/Frontend/fixtures/roomType.json b/tests/Frontend/fixtures/roomType.json
new file mode 100644
index 000000000..ca8075677
--- /dev/null
+++ b/tests/Frontend/fixtures/roomType.json
@@ -0,0 +1,58 @@
+{
+  "data": {
+    "id": 3,
+    "name": "Exam",
+    "description": "Room type description for room type Exam",
+    "color": "#4a5c66",
+    "model_name": "RoomType",
+    "server_pool": {
+      "id": 1,
+      "name": "Test",
+      "description": "Pool for testing",
+      "servers_count": 2,
+      "model_name": "ServerPool",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    },
+    "max_participants": 100,
+    "max_duration": 120,
+    "create_parameters": "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+    "restrict": false,
+    "roles": [],
+    "mute_on_start_default": true,
+    "mute_on_start_enforced": true,
+    "lock_settings_disable_cam_default": false,
+    "lock_settings_disable_cam_enforced": false,
+    "webcams_only_for_moderator_default": true,
+    "webcams_only_for_moderator_enforced": false,
+    "lock_settings_disable_mic_default": false,
+    "lock_settings_disable_mic_enforced": true,
+    "lock_settings_disable_private_chat_default": false,
+    "lock_settings_disable_private_chat_enforced": false,
+    "lock_settings_disable_public_chat_default": true,
+    "lock_settings_disable_public_chat_enforced": false,
+    "lock_settings_disable_note_default": true,
+    "lock_settings_disable_note_enforced": true,
+    "lock_settings_hide_user_list_default": true,
+    "lock_settings_hide_user_list_enforced": false,
+    "everyone_can_start_default": false,
+    "everyone_can_start_enforced": false,
+    "allow_membership_default": false,
+    "allow_membership_enforced": true,
+    "allow_guests_default": true,
+    "allow_guests_enforced": true,
+    "default_role_default": 1,
+    "default_role_enforced": false,
+    "lobby_default": 2,
+    "lobby_enforced": true,
+    "visibility_default": 1,
+    "visibility_enforced": false,
+    "record_attendance_default": false,
+    "record_attendance_enforced": false,
+    "record_default": false,
+    "record_enforced": false,
+    "auto_start_recording_default": false,
+    "auto_start_recording_enforced": false,
+    "has_access_code_default": true,
+    "has_access_code_enforced": false
+  }
+}
diff --git a/tests/Frontend/fixtures/roomTypes.json b/tests/Frontend/fixtures/roomTypes.json
index 31783be99..02070d3b6 100644
--- a/tests/Frontend/fixtures/roomTypes.json
+++ b/tests/Frontend/fixtures/roomTypes.json
@@ -3,22 +3,30 @@
     {
       "id": 1,
       "name": "Lecture",
-      "color": "#80BA27"
+      "description": null,
+      "color": "#80BA27",
+      "model_name": "RoomType"
     },
     {
       "id": 2,
       "name": "Meeting",
-      "color": "#4a5c66"
+      "description": null,
+      "color": "#4a5c66",
+      "model_name": "RoomType"
     },
     {
       "id": 3,
       "name": "Exam",
-      "color": "#9C132E"
+      "description": null,
+      "color": "#9C132E",
+      "model_name": "RoomType"
     },
     {
       "id": 4,
       "name": "Seminar",
-      "color": "#00B8E4"
+      "description": null,
+      "color": "#00B8E4",
+      "model_name": "RoomType"
     }
   ]
 }
diff --git a/tests/Frontend/support/commands/adminRoomTypesCommands.js b/tests/Frontend/support/commands/adminRoomTypesCommands.js
new file mode 100644
index 000000000..f7a205658
--- /dev/null
+++ b/tests/Frontend/support/commands/adminRoomTypesCommands.js
@@ -0,0 +1,27 @@
+/**
+ * Check if a field for the default room settings inside the room type form is displayed correctly.
+ * @memberof cy
+ * @method roomTypeCheckDefaultRoomSettingCheckboxField
+ * @param  {string} field
+ * @param  {(boolean|string)} value
+ * @param  {boolean} enforced
+ * @param  {boolean} viewOnly
+ * @returns void
+ */
+Cypress.Commands.add(
+  "roomTypeCheckDefaultRoomSettingCheckboxField",
+  (field, value, enforced, viewOny) => {
+    cy.get("#" + field + "-default")
+      .should(value ? "be.checked" : "not.be.checked")
+      .and(viewOny ? "be.disabled" : "not.be.disabled");
+
+    cy.get('[data-test="' + field + '-enforced"]')
+      .should(
+        "have.text",
+        enforced
+          ? "admin.room_types.default_room_settings.enforced"
+          : "admin.room_types.default_room_settings.default",
+      )
+      .and(viewOny ? "be.disabled" : "not.be.disabled");
+  },
+);
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index 33829dabf..67ed187df 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -291,3 +291,51 @@ Cypress.Commands.add("interceptAdminServerPoolsNewRequests", () => {
     fixture: "servers.json",
   }).as("serversRequest");
 });
+
+/**
+ * Intercept all requests that are needed when visiting the admin room types index page
+ * @memberof cy
+ * @method interceptAdminRoomTypesIndexRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminRoomTypesIndexRequests", () => {
+  cy.intercept("GET", "api/v1/roomTypes*", {
+    fixture: "roomTypes.json",
+  }).as("roomTypesRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin room types view page
+ * @memberof cy
+ * @method interceptAdminRoomTypesViewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminRoomTypesViewRequests", () => {
+  cy.intercept("GET", "api/v1/roomTypes/3", {
+    fixture: "roomType.json",
+  }).as("roomTypeRequest");
+
+  cy.intercept("GET", "api/v1/serverPools*", {
+    fixture: "serverPools.json",
+  }).as("serverPoolsRequest");
+
+  cy.intercept("GET", "api/v1/roles*", {
+    fixture: "userRoles.json",
+  }).as("userRolesRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin room types new page
+ * @memberof cy
+ * @method interceptAdminRoomTypesNewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminRoomTypesNewRequests", () => {
+  cy.intercept("GET", "api/v1/serverPools*", {
+    fixture: "serverPools.json",
+  }).as("serverPoolsRequest");
+
+  cy.intercept("GET", "api/v1/roles*", {
+    fixture: "userRoles.json",
+  }).as("userRolesRequest");
+});
diff --git a/tests/Frontend/support/e2e.js b/tests/Frontend/support/e2e.js
index 08c3b79c5..36320a5b3 100644
--- a/tests/Frontend/support/e2e.js
+++ b/tests/Frontend/support/e2e.js
@@ -16,4 +16,18 @@
 import "./commands/generalCommands.js";
 import "./commands/roomCommands.js";
 import "./commands/interceptCommands.js";
+import "./commands/adminRoomTypesCommands.js";
 import "@cypress/code-coverage/support";
+
+// ToDo try to fix error and remove this (admin room types view)
+Cypress.on("uncaught:exception", (err) => {
+  // Check if error should be ignored
+  if (
+    err.message.includes(
+      "ResizeObserver loop completed with undelivered notifications.",
+    )
+  ) {
+    // Ignore the error
+    return false;
+  }
+});

From f113a97bc4f5d937f17bf0a5491d5ad772c5a734 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Tue, 31 Dec 2024 18:24:24 +0100
Subject: [PATCH 31/79] Improve tests

---
 resources/js/components/LoginTabLdap.vue     |   4 +-
 resources/js/components/LoginTabLocal.vue    |   4 +-
 tests/Frontend/e2e/AdminRoomTypesEdit.cy.js  | 385 ++++++++++++++++++-
 tests/Frontend/e2e/AdminRoomTypesIndex.cy.js |   2 +-
 tests/Frontend/e2e/AdminRoomTypesView.cy.js  |  38 +-
 tests/Frontend/e2e/AdminServersIndex.cy.js   |   4 +-
 tests/Frontend/e2e/Login.cy.js               |  39 +-
 tests/Frontend/e2e/RoomsViewGeneral.cy.js    |   2 +-
 8 files changed, 432 insertions(+), 46 deletions(-)

diff --git a/resources/js/components/LoginTabLdap.vue b/resources/js/components/LoginTabLdap.vue
index eb1598132..faa359adc 100644
--- a/resources/js/components/LoginTabLdap.vue
+++ b/resources/js/components/LoginTabLdap.vue
@@ -2,7 +2,7 @@
   <div data-test="login-tab-ldap">
     <h1 class="p-card-title">{{ props.title }}</h1>
     <form @submit.prevent="submit">
-      <div class="flex flex-col gap-2">
+      <div class="flex flex-col gap-2" data-test="username-field">
         <label :for="`${props.id}-username`">{{ props.usernameLabel }}</label>
         <InputText
           :id="`${props.id}-username`"
@@ -24,7 +24,7 @@
         <FormError :errors="props.errors?.username" />
       </div>
 
-      <div class="mt-6 flex flex-col gap-2">
+      <div class="mt-6 flex flex-col gap-2" data-test="password-field">
         <label :for="`${props.id}-password`">{{ props.passwordLabel }}</label>
         <Password
           v-model="password"
diff --git a/resources/js/components/LoginTabLocal.vue b/resources/js/components/LoginTabLocal.vue
index f925be62e..f932de826 100644
--- a/resources/js/components/LoginTabLocal.vue
+++ b/resources/js/components/LoginTabLocal.vue
@@ -2,7 +2,7 @@
   <div data-test="login-tab-local">
     <h1 class="p-card-title">{{ props.title }}</h1>
     <form @submit.prevent="submit">
-      <div class="flex flex-col gap-2">
+      <div class="flex flex-col gap-2" data-test="email-field">
         <label :for="`${props.id}-email`">{{ props.emailLabel }}</label>
         <InputText
           :id="`${props.id}-email`"
@@ -21,7 +21,7 @@
         <FormError :errors="props.errors?.email" />
       </div>
 
-      <div class="mt-6 flex flex-col gap-2">
+      <div class="mt-6 flex flex-col gap-2" data-test="password-field">
         <label :for="`${props.id}-password`">{{ props.passwordLabel }}</label>
         <Password
           v-model="password"
diff --git a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
index 3c9b07d64..fa908608d 100644
--- a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
@@ -328,10 +328,12 @@ describe("Admin room types edit", function () {
               .and("not.be.disabled");
           });
 
-        cy.get('[data-test="lobby-enforced"]').should(
-          "have.text",
-          "admin.room_types.default_room_settings.enforced",
-        );
+        cy.get('[data-test="lobby-enforced"]')
+          .should(
+            "have.text",
+            "admin.room_types.default_room_settings.enforced",
+          )
+          .and("not.be.disabled");
       });
 
     cy.get("#lobby-disabled").click();
@@ -545,17 +547,18 @@ describe("Admin room types edit", function () {
         cy.get('[data-test="default-role-default-button"]')
           .eq(0)
           .should("have.text", "rooms.roles.participant")
-          .should("have.attr", "aria-pressed", "true");
+          .and("have.attr", "aria-pressed", "true")
+          .and("not.be.disabled");
 
         cy.get('[data-test="default-role-default-button"]')
           .eq(1)
           .should("have.text", "rooms.roles.moderator")
-          .should("not.have.attr", "aria-pressed", "true");
+          .and("not.have.attr", "aria-pressed", "true")
+          .and("not.be.disabled");
 
-        cy.get('[data-test="default-role-enforced"]').should(
-          "have.text",
-          "admin.room_types.default_room_settings.default",
-        );
+        cy.get('[data-test="default-role-enforced"]')
+          .should("have.text", "admin.room_types.default_room_settings.default")
+          .and("not.be.disabled");
       });
 
     cy.get('[data-test="default-role-default-button"]').eq(1).click();
@@ -575,17 +578,18 @@ describe("Admin room types edit", function () {
         cy.get('[data-test="visibility-default-button"]')
           .eq(0)
           .should("have.text", "rooms.settings.advanced.visibility.private")
-          .should("not.have.attr", "aria-pressed", "true");
+          .and("not.have.attr", "aria-pressed", "true")
+          .and("not.be.disabled");
 
         cy.get('[data-test="visibility-default-button"]')
           .eq(1)
           .should("have.text", "rooms.settings.advanced.visibility.public")
-          .should("have.attr", "aria-pressed", "true");
+          .and("have.attr", "aria-pressed", "true")
+          .and("not.be.disabled");
 
-        cy.get('[data-test="visibility-enforced"]').should(
-          "have.text",
-          "admin.room_types.default_room_settings.default",
-        );
+        cy.get('[data-test="visibility-enforced"]')
+          .should("have.text", "admin.room_types.default_room_settings.default")
+          .and("not.be.disabled");
       });
 
     cy.get('[data-test="visibility-default-button"]').eq(0).click();
@@ -2112,4 +2116,353 @@ describe("Admin room types edit", function () {
       .and("not.be.disabled")
       .and("include.text", "app.save");
   });
+
+  it("load roles errors", function () {
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Admin",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+    });
+
+    // Check with 500 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+    cy.wait("@rolesRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Admin")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    // Reload roles without errors
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "userRoles.json",
+    }).as("rolesRequest");
+
+    cy.get('[data-test="roles-reload-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Admin")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="roles-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 5);
+      });
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Admin")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    cy.get('[data-test="roles-reload-button"]').should("be.visible");
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get("#restrict").click();
+    cy.get("#restrict").click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit new page again with roles
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "userRoles.json",
+    }).as("rolesRequest");
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load server pools errors", function () {
+    // Check with 500 error
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolsRequest");
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+    cy.wait("@serverPoolsRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-pool-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Test");
+    });
+
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    // Reload server pools without errors
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pools-reload-button"]').click();
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pool-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="server-pools-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-dropdown"]').click();
+
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 3);
+      });
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolsRequest");
+
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-pool-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Test");
+    });
+
+    cy.get('[data-test="server-pools-reload-button"]').should("be.visible");
+
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 401,
+    }).as("serverPoolsRequest");
+
+    cy.reload();
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit new page again with server pools
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pool-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 401,
+    }).as("serverPoolsRequest");
+
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
 });
diff --git a/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js b/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
index 558a1f2cb..433854fd2 100644
--- a/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
@@ -6,7 +6,7 @@ describe("Admin room types index", function () {
     cy.interceptAdminRoomTypesIndexRequests();
 
     cy.fixture("currentUser.json").then((currentUser) => {
-      currentUser.data.permissions = ["admin.view", "roomTypes.viewAny"];
+      currentUser.data.permissions = ["admin.view"];
       cy.intercept("GET", "api/v1/currentUser", {
         statusCode: 200,
         body: currentUser,
diff --git a/tests/Frontend/e2e/AdminRoomTypesView.cy.js b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
index 49551549c..e74d09bee 100644
--- a/tests/Frontend/e2e/AdminRoomTypesView.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
@@ -20,7 +20,7 @@ describe("Admin room types view", function () {
 
   it("visit with user without permission to view room types", function () {
     cy.fixture("currentUser.json").then((currentUser) => {
-      currentUser.data.permissions = ["admin.view", "roomTypes.viewAny"];
+      currentUser.data.permissions = ["admin.view"];
       cy.intercept("GET", "api/v1/currentUser", {
         statusCode: 200,
         body: currentUser,
@@ -247,10 +247,12 @@ describe("Admin room types view", function () {
               .and("be.disabled");
           });
 
-        cy.get('[data-test="lobby-enforced"]').should(
-          "have.text",
-          "admin.room_types.default_room_settings.enforced",
-        );
+        cy.get('[data-test="lobby-enforced"]')
+          .should(
+            "have.text",
+            "admin.room_types.default_room_settings.enforced",
+          )
+          .and("be.disabled");
       });
 
     cy.contains("rooms.settings.recordings.title").should("be.visible");
@@ -440,17 +442,18 @@ describe("Admin room types view", function () {
         cy.get('[data-test="default-role-default-button"]')
           .eq(0)
           .should("have.text", "rooms.roles.participant")
-          .should("have.attr", "aria-pressed", "true");
+          .should("have.attr", "aria-pressed", "true")
+          .and("be.disabled");
 
         cy.get('[data-test="default-role-default-button"]')
           .eq(1)
           .should("have.text", "rooms.roles.moderator")
-          .should("not.have.attr", "aria-pressed", "true");
+          .and("not.have.attr", "aria-pressed", "true")
+          .and("be.disabled");
 
-        cy.get('[data-test="default-role-enforced"]').should(
-          "have.text",
-          "admin.room_types.default_room_settings.default",
-        );
+        cy.get('[data-test="default-role-enforced"]')
+          .should("have.text", "admin.room_types.default_room_settings.default")
+          .and("be.disabled");
       });
 
     cy.contains("rooms.settings.advanced.title").should("be.visible");
@@ -467,17 +470,18 @@ describe("Admin room types view", function () {
         cy.get('[data-test="visibility-default-button"]')
           .eq(0)
           .should("have.text", "rooms.settings.advanced.visibility.private")
-          .should("not.have.attr", "aria-pressed", "true");
+          .and("not.have.attr", "aria-pressed", "true")
+          .and("be.disabled");
 
         cy.get('[data-test="visibility-default-button"]')
           .eq(1)
           .should("have.text", "rooms.settings.advanced.visibility.public")
-          .should("have.attr", "aria-pressed", "true");
+          .and("have.attr", "aria-pressed", "true")
+          .and("be.disabled");
 
-        cy.get('[data-test="visibility-enforced"]').should(
-          "have.text",
-          "admin.room_types.default_room_settings.default",
-        );
+        cy.get('[data-test="visibility-enforced"]')
+          .should("have.text", "admin.room_types.default_room_settings.default")
+          .and("be.disabled");
       });
 
     // Check other settings
diff --git a/tests/Frontend/e2e/AdminServersIndex.cy.js b/tests/Frontend/e2e/AdminServersIndex.cy.js
index f70e28efd..c69373db3 100644
--- a/tests/Frontend/e2e/AdminServersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminServersIndex.cy.js
@@ -521,7 +521,7 @@ describe("Admin servers index", function () {
         servers.meta.total = 2;
         servers.meta.total_no_filter = 2;
 
-        cy.intercept("GET", "api/v1/server*", {
+        cy.intercept("GET", "api/v1/servers*", {
           statusCode: 200,
           body: servers,
         })
@@ -854,7 +854,7 @@ describe("Admin servers index", function () {
 
     cy.get('[data-test="paginator-next-button"]').eq(1).click();
 
-    // Check that sorting stays  the same
+    // Check that sorting stays the same
     cy.wait("@serversRequest").then((interception) => {
       expect(interception.request.query).to.contain({
         page: "2",
diff --git a/tests/Frontend/e2e/Login.cy.js b/tests/Frontend/e2e/Login.cy.js
index 71272c591..74e7dc50b 100644
--- a/tests/Frontend/e2e/Login.cy.js
+++ b/tests/Frontend/e2e/Login.cy.js
@@ -37,8 +37,19 @@ describe("Login", function () {
 
     // Check if ldap login tab is shown correctly and click on login button
     cy.get('[data-test="login-tab-ldap"]').within(() => {
-      cy.get("#ldap-username").type("user");
-      cy.get("#ldap-password").type("password");
+      cy.get('[data-test="username-field"]')
+        .should("be.visible")
+        .and("include.text", "auth.ldap.username")
+        .within(() => {
+          cy.get("#ldap-username").should("have.value", "").type("user");
+        });
+
+      cy.get('[data-test="password-field"]')
+        .should("be.visible")
+        .and("include.text", "auth.password")
+        .within(() => {
+          cy.get("#ldap-password").should("have.value", "").type("password");
+        });
 
       // Intercept requests that will be needed to show the room index page (needed to check redirect)
       cy.intercept("GET", "api/v1/currentUser", {
@@ -142,6 +153,7 @@ describe("Login", function () {
     // Intercept config request to only show local login tab
     cy.fixture("config.json").then((config) => {
       config.data.auth.local = true;
+      config.data.user.password_change_allowed = false;
 
       cy.intercept("GET", "api/v1/config", {
         statusCode: 200,
@@ -169,10 +181,26 @@ describe("Login", function () {
 
     cy.visit("/login");
 
-    // Check if ldap login tab is shown correctly and click on login button
+    // Check if local login tab is shown correctly and click on login button
     cy.get('[data-test="login-tab-local"]').within(() => {
-      cy.get("#local-email").type("john.doe@domain.tld");
-      cy.get("#local-password").type("password");
+      cy.get('[data-test="email-field"]')
+        .should("be.visible")
+        .and("include.text", "app.email")
+        .within(() => {
+          cy.get("#local-email")
+            .should("have.value", "")
+            .type("john.doe@domain.tld");
+        });
+
+      cy.get('[data-test="password-field"]')
+        .should("be.visible")
+        .and("include.text", "auth.password")
+        .within(() => {
+          cy.get("#local-password").should("have.value", "").type("password");
+        });
+
+      // Check that forgot password link is hidden because password change is not allowed
+      cy.get('[data-test="forgot-password-button"]').should("not.exist");
 
       // Intercept requests that will be needed to show the room index page (needed to check redirect)
       cy.intercept("GET", "api/v1/currentUser", {
@@ -183,6 +211,7 @@ describe("Login", function () {
       cy.get('[data-test="login-button"]')
         .should("have.text", "auth.login")
         .click();
+
       // Check if button is disabled after being clicked and loading and send response
       cy.get('[data-test="login-button"]')
         .should("be.disabled")
diff --git a/tests/Frontend/e2e/RoomsViewGeneral.cy.js b/tests/Frontend/e2e/RoomsViewGeneral.cy.js
index 02bbf5833..70b9a5b34 100644
--- a/tests/Frontend/e2e/RoomsViewGeneral.cy.js
+++ b/tests/Frontend/e2e/RoomsViewGeneral.cy.js
@@ -1490,7 +1490,7 @@ describe("Room View general", function () {
     );
 
     // Check that error message is shown and user is redirected to the home page
-    cy.checkToastMessage("app.flash.guests_only", false);
+    cy.checkToastMessage("app.flash.guests_only");
     cy.url().should(
       "not.include",
       "/rooms/abc-def-123/xWDCevVTcMys1ftzt3nFPgU56Wf32fopFWgAEBtklSkFU22z1ntA4fBHsHeMygMiOa9szJbNEfBAgEWSLNWg2gcF65PwPZ2ylPQR",

From cb203bdb9bf0edb89cd150527d80d0ea53534c76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Tue, 31 Dec 2024 18:25:53 +0100
Subject: [PATCH 32/79] Start adding MeetingsIndex tests

---
 resources/js/views/MeetingsIndex.vue          |   28 +-
 tests/Frontend/e2e/MeetingsIndex.cy.js        | 1104 +++++++++++++++++
 tests/Frontend/fixtures/meetings.json         |   67 +
 .../support/commands/interceptCommands.js     |   12 +
 4 files changed, 1210 insertions(+), 1 deletion(-)
 create mode 100644 tests/Frontend/e2e/MeetingsIndex.cy.js
 create mode 100644 tests/Frontend/fixtures/meetings.json

diff --git a/resources/js/views/MeetingsIndex.vue b/resources/js/views/MeetingsIndex.vue
index 4b37c3d6e..62e1535d5 100644
--- a/resources/js/views/MeetingsIndex.vue
+++ b/resources/js/views/MeetingsIndex.vue
@@ -10,7 +10,7 @@
       <template #content>
         <div class="flex justify-between">
           <div>
-            <InputGroup>
+            <InputGroup data-test="meeting-search">
               <InputText
                 v-model="search"
                 :disabled="isBusy"
@@ -32,6 +32,7 @@
               :disabled="isBusy"
               icon="fa-solid fa-sync"
               :loading="isBusy"
+              data-test="meetings-reload-button"
               @click="loadData()"
             />
           </div>
@@ -55,6 +56,30 @@
           "
           :loading="isBusy || loadingError"
           row-hover
+          :pt="{
+            bodyRow: {
+              'data-test': 'meeting-item',
+            },
+            mask: {
+              'data-test': 'overlay',
+            },
+            column: {
+              bodyCell: {
+                'data-test': 'meeting-item-cell',
+              },
+              headerCell: {
+                'data-test': 'meeting-header-cell',
+              },
+            },
+            pcPaginator: {
+              page: {
+                'data-test': 'paginator-page',
+              },
+              next: {
+                'data-test': 'paginator-next-button',
+              },
+            },
+          }"
           @update:first="paginator.setFirst($event)"
           @page="onPage"
           @sort="onSort"
@@ -204,6 +229,7 @@
                     params: { id: slotProps.data.room.id },
                   }"
                   :disabled="true"
+                  data-test="meeting-view-room-button"
                 >
                   <Button
                     v-tooltip="
diff --git a/tests/Frontend/e2e/MeetingsIndex.cy.js b/tests/Frontend/e2e/MeetingsIndex.cy.js
new file mode 100644
index 000000000..a694343e5
--- /dev/null
+++ b/tests/Frontend/e2e/MeetingsIndex.cy.js
@@ -0,0 +1,1104 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Meetings index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptMeetingsIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["rooms.viewAny", "meetings.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/meetings");
+  });
+
+  it("visit with user without permission to view meetings", function () {
+    cy.intercept("GET", "api/v1/currentUser", {
+      statusCode: 200,
+      fixture: "currentUser.json",
+    });
+
+    cy.visit("/meetings");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/meetings");
+    cy.get("h1").should("be.visible").and("contain", "home.title");
+  });
+
+  it("load meetings", function () {
+    const meetingsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/meetings*",
+      { fixture: "meetings.json" },
+      "meetingsRequest",
+    );
+
+    cy.visit("/meetings");
+
+    cy.contains("meetings.currently_running").should("be.visible");
+
+    // Test loading
+    cy.get('[data-test="meeting-search"]').within(() => {
+      cy.get("input").should("be.visible").and("be.disabled");
+      cy.get("button").should("be.visible").and("be.disabled");
+    });
+
+    cy.get('[data-test="meetings-reload-button"]')
+      .should("be.visible")
+      .and("be.disabled");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        meetingsRequest.sendResponse();
+      });
+
+    cy.wait("@meetingsRequest");
+
+    // Check that loading is over
+    cy.get('[data-test="meeting-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.get('[data-test="meetings-reload-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that headers are displayed correctly
+    cy.get('[data-test="meeting-header-cell"]').should("have.length", 9);
+
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(0)
+      .should("have.text", "meetings.start");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(1)
+      .should("have.text", "rooms.name");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(2)
+      .should("have.text", "meetings.owner");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(3)
+      .should("have.text", "app.server");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(4)
+      .within(() => {
+        cy.get(".fa-users").should("be.visible");
+      });
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(5)
+      .within(() => {
+        cy.get(".fa-headphones").should("be.visible");
+      });
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(6)
+      .within(() => {
+        cy.get(".fa-microphone").should("be.visible");
+      });
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(7)
+      .within(() => {
+        cy.get(".fa-video").should("be.visible");
+      });
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(8)
+      .should("have.text", "app.actions");
+
+    // Check that meetings are displayed correctly
+    cy.get('[data-test="meeting-item"]').should("have.length", 3);
+
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="meeting-item-cell"]').should("have.length", 9);
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(0)
+          .should("have.text", "02/12/2021, 19:09");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(1)
+          .should("have.text", "Meeting One");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(2)
+          .should("have.text", "John Doe");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(3)
+          .should("have.text", "Server 01");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(4)
+          .should("have.text", "10");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(5)
+          .should("have.text", "5");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(6)
+          .should("have.text", "5");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(7)
+          .should("have.text", "3");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(8)
+          .within(() => {
+            cy.get('[data-test="meeting-view-room-button"]')
+              .should("be.visible")
+              .and("have.attr", "href", "/rooms/abc-def-123");
+          });
+      });
+
+    cy.get('[data-test="meeting-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="meeting-item-cell"]').should("have.length", 9);
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(0)
+          .should("have.text", "02/12/2021, 19:10");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(1)
+          .should("have.text", "Meeting Two");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(2)
+          .should("have.text", "Max Doe");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(3)
+          .should("have.text", "Server 02");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(4)
+          .should("have.text", "50");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(5)
+          .should("have.text", "30");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(6)
+          .should("have.text", "20");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(7)
+          .should("have.text", "10");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(8)
+          .within(() => {
+            cy.get('[data-test="meeting-view-room-button"]')
+              .should("be.visible")
+              .and("have.attr", "href", "/rooms/def-abc-123");
+          });
+      });
+
+    cy.get('[data-test="meeting-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="meeting-item-cell"]').should("have.length", 9);
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(0)
+          .should("have.text", "02/12/2021, 18:14");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(1)
+          .should("have.text", "Meeting Three");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(2)
+          .should("have.text", "John Doe");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(3)
+          .should("have.text", "Server 01");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(4)
+          .should("include.text", "---");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(5)
+          .should("include.text", "---");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(6)
+          .should("include.text", "---");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(7)
+          .should("include.text", "---");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(8)
+          .within(() => {
+            cy.get('[data-test="meeting-view-room-button"]')
+              .should("be.visible")
+              .and("have.attr", "href", "/rooms/def-abc-456");
+          });
+      });
+  });
+
+  it("load meetings errors", function () {
+    cy.intercept("GET", "api/v1/meetings*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("meetingsRequest");
+
+    cy.visit("/meetings");
+
+    cy.wait("@meetingsRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="meeting-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.get('[data-test="meetings-reload-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Reload with correct data
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("include.text", "app.reload")
+      .click();
+
+    cy.wait("@meetingsRequest");
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check that meeting is shown and contains the correct data
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One");
+
+    // Switch to next page with general error
+    cy.intercept("GET", "api/v1/meetings*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("meetingsRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="meeting-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.get('[data-test="meetings-reload-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Reload with correct data
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("include.text", "app.reload")
+      .click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that meeting is shown and contains the correct data
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page with 401 error
+    cy.intercept("GET", "api/v1/meetings*", {
+      statusCode: 401,
+    }).as("meetingsRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@meetingsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/meetings");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Reload page with 401 error
+    cy.visit("/meetings");
+
+    cy.wait("@meetingsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/meetings");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load meetings page out of bounds", function () {
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 2;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+      meetings.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.visit("/meetings");
+
+    cy.wait("@meetingsRequest");
+
+    // Switch to next page but respond with no meetings on second page
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = [];
+      meetings.meta.current_page = 2;
+      meetings.meta.from = null;
+      meetings.meta.per_page = 2;
+      meetings.meta.to = null;
+      meetings.meta.total = 2;
+      meetings.meta.total_no_filter = 2;
+
+      const emptyMeetingsRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/meetings*",
+        {
+          statusCode: 200,
+          body: meetings,
+        },
+        "meetingsRequest",
+      );
+
+      cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+      cy.fixture("meetings.json").then((meetings) => {
+        meetings.data = meetings.data.slice(0, 2);
+        meetings.meta.per_page = 2;
+        meetings.meta.to = 2;
+        meetings.meta.total = 2;
+        meetings.meta.total_no_filter = 2;
+
+        cy.intercept("GET", "api/v1/meetings*", {
+          statusCode: 200,
+          body: meetings,
+        })
+          .as("meetingsRequest")
+          .then(() => {
+            emptyMeetingsRequest.sendResponse();
+          });
+      });
+    });
+
+    // Wait for first meetings request and check that pge is still the same
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Wait for second request and check that page is reset
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that pagination is shown correctly
+    cy.get('[data-test="paginator-page"]').should("have.length", 1);
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("meeting search", function () {
+    cy.visit("/meetings");
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query.search).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check with no meetings found for this search query
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = [];
+      meetings.meta.from = null;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = null;
+      meetings.meta.total = 0;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-search"] > input').should("have.value", "");
+    cy.get('[data-test="meeting-search"] > input').type("Test");
+    cy.get('[data-test="meeting-search"] > button').click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query.search).to.eql("Test");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no meetings are displayed
+    cy.contains("meetings.no_data_filtered").should("be.visible");
+    cy.get('[data-test="meeting-item"]').should("have.length", 0);
+
+    // Check with no meetings available
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = [];
+      meetings.meta.from = null;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = null;
+      meetings.meta.total = 0;
+      meetings.meta.total_no_filter = 0;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-search"] > input').clear();
+    cy.get('[data-test="meeting-search"] > input').type("Test2");
+    cy.get('[data-test="meeting-search"] > input').type("{enter}");
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query.search).to.eql("Test2");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no meetings are displayed
+    cy.contains("meetings.no_data").should("be.visible");
+    cy.get('[data-test="meeting-item"]').should("have.length", 0);
+
+    // Check with 2 meetings on 2 pages
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 2;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+      meetings.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-search"] > input').clear();
+    cy.get('[data-test="meeting-search"] > input').type("Meeting");
+    cy.get('[data-test="meeting-search"] > button').click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query.search).to.eql("Meeting");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(1, 2);
+      meetings.meta.current_page = 2;
+      meetings.meta.from = 2;
+      meetings.meta.last_page = 2;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 2;
+      meetings.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    // Click on button for next page (eq(1) needed because there are two paginator components
+    // (first one for small devices second one for larger devices))
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check if search query stays the same after changing the page
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query.search).to.eql("Meeting");
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    cy.get('[data-test="meeting-search"] > input').should(
+      "have.value",
+      "Meeting",
+    );
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:10")
+      .and("include.text", "Meeting Two");
+
+    // Change search query and make sure that the page is reset
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 2;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+      meetings.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-search"] > input').clear();
+    cy.get('[data-test="meeting-search"] > input').type("Meet");
+    cy.get('[data-test="meeting-search"] > button').click();
+
+    // Check that meetings are loaded with the page reset to the first page
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query.search).to.eql("Meet");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("sort meetings", function () {
+    cy.visit("/meetings");
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "start",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct columns are sortable and correct sorting type is shown
+    cy.get('[data-test="meeting-header-cell"]').should("have.length", 9);
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(0)
+      .should("have.text", "meetings.start")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "true");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(1)
+      .should("have.text", "rooms.name")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(2)
+      .should("have.text", "meetings.owner")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(3)
+      .should("have.text", "app.server")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(5)
+      .should("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(6)
+      .should("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(7)
+      .should("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(8)
+      .should("have.text", "app.actions")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+
+    // Change sorting type and respond with 3 meetings on 3 different pages
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-header-cell"]').eq(4).click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "room.participant_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "true");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 3);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(1, 2);
+      meetings.meta.current_page = 2;
+      meetings.meta.from = 2;
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "room.participant_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:10")
+      .and("include.text", "Meeting Two");
+
+    // Change sorting direction and make sure that the page is reset
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-header-cell"]').eq(4).click();
+
+    // Check that meetings are loaded with the page reset to the first page
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "room.participant_count",
+        sort_direction: "desc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+    // Check that sorting is correct
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One");
+
+    // Change sorting type again
+    cy.get('[data-test="meeting-header-cell"]').eq(5).click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "room.listener_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(5)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Switch to next page
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(1, 2);
+      meetings.meta.current_page = 2;
+      meetings.meta.from = 2;
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "room.listener_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(5)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:10")
+      .and("include.text", "Meeting Two");
+
+    // Change sorting and make sure that the page is reset
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-header-cell"]').eq(6).click();
+
+    // Check that meetings are loaded with the page reset to the first page
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "room.voice_participant_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(5)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(6)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Change sorting again
+    cy.get('[data-test="meeting-header-cell"]').eq(7).click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "room.video_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(6)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(7)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+  });
+
+  it("reload meetings", function () {
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 2;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+      meetings.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.visit("/meetings");
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    cy.get('[data-test="meetings-reload-button"]').click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One");
+
+    // Switch to next page
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(1, 2);
+      meetings.meta.current_page = 2;
+      meetings.meta.from = 2;
+      meetings.meta.last_page = 2;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 2;
+      meetings.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Reload
+    cy.get('[data-test="meetings-reload-button"]').click();
+
+    // Check that page stays the same
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:10")
+      .and("include.text", "Meeting Two");
+  });
+
+  it("view room of meeting", function () {
+    cy.visit("/meetings");
+
+    cy.wait("@meetingsRequest");
+
+    cy.interceptRoomViewRequests();
+
+    // Click on view room button
+    cy.get('[data-test="meeting-item"]').should("have.length", 3);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One")
+      .find('[data-test="meeting-view-room-button"]')
+      .click();
+
+    // Check that redirect worked
+    cy.url().should("include", "/rooms/abc-def-123");
+    cy.url().should("not.include", "/meetings");
+  });
+});
diff --git a/tests/Frontend/fixtures/meetings.json b/tests/Frontend/fixtures/meetings.json
new file mode 100644
index 000000000..c52498b56
--- /dev/null
+++ b/tests/Frontend/fixtures/meetings.json
@@ -0,0 +1,67 @@
+{
+  "data": [
+    {
+      "id": "34d0b4eb-0de9-4bd4-b158-a8edc0f71674",
+      "start": "2021-02-12T18:09:29.000000Z",
+      "end": null,
+      "room": {
+        "id": "abc-def-123",
+        "owner": "John Doe",
+        "name": "Meeting One",
+        "participant_count": 10,
+        "listener_count": 5,
+        "voice_participant_count": 5,
+        "video_count": 3
+      },
+      "server": {
+        "id": 1,
+        "name": "Server 01"
+      }
+    },
+    {
+      "id": "5866d99e-ea44-4221-afa8-54f397ab07c8",
+      "start": "2021-02-12T18:10:20.000000Z",
+      "end": null,
+      "room": {
+        "id": "def-abc-123",
+        "owner": "Max Doe",
+        "name": "Meeting Two",
+        "participant_count": 50,
+        "listener_count": 30,
+        "voice_participant_count": 20,
+        "video_count": 10
+      },
+      "server": {
+        "id": 2,
+        "name": "Server 02"
+      }
+    },
+    {
+      "id": "520671dc-cde5-40d0-86c8-341446051a43",
+      "start": "2021-02-12T17:14:48.000000Z",
+      "end": null,
+      "room": {
+        "id": "def-abc-456",
+        "owner": "John Doe",
+        "name": "Meeting Three",
+        "participant_count": null,
+        "listener_count": null,
+        "voice_participant_count": null,
+        "video_count": null
+      },
+      "server": {
+        "id": 1,
+        "name": "Server 01"
+      }
+    }
+  ],
+  "meta": {
+    "current_page": 1,
+    "from": 1,
+    "last_page": 1,
+    "per_page": 3,
+    "to": 3,
+    "total": 3,
+    "total_no_filter": 3
+  }
+}
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index 67ed187df..9aa6483d8 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -339,3 +339,15 @@ Cypress.Commands.add("interceptAdminRoomTypesNewRequests", () => {
     fixture: "userRoles.json",
   }).as("userRolesRequest");
 });
+
+/**
+ * Intercept all requests that are needed when visiting the meetings index page
+ * @memberof cy
+ * @method interceptMeetingsIndexRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptMeetingsIndexRequests", () => {
+  cy.intercept("GET", "api/v1/meetings*", {
+    fixture: "meetings.json",
+  }).as("meetingsRequest");
+});

From 9386ddb7143d2d4c17471728f632f91b9c1139d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Tue, 31 Dec 2024 18:27:27 +0100
Subject: [PATCH 33/79] Start adding ForgotPassword and PasswordReset tests

---
 resources/js/components/LoginTabLocal.vue |   1 +
 resources/js/views/ForgotPassword.vue     |   3 +-
 resources/js/views/PasswordReset.vue      |   8 +-
 tests/Frontend/e2e/ForgotPassword.cy.js   | 154 +++++++++++++
 tests/Frontend/e2e/Login.cy.js            |  32 +++
 tests/Frontend/e2e/PasswordReset.cy.js    | 249 ++++++++++++++++++++++
 6 files changed, 444 insertions(+), 3 deletions(-)
 create mode 100644 tests/Frontend/e2e/ForgotPassword.cy.js
 create mode 100644 tests/Frontend/e2e/PasswordReset.cy.js

diff --git a/resources/js/components/LoginTabLocal.vue b/resources/js/components/LoginTabLocal.vue
index f932de826..49c67e493 100644
--- a/resources/js/components/LoginTabLocal.vue
+++ b/resources/js/components/LoginTabLocal.vue
@@ -48,6 +48,7 @@
           link
           class="self-start p-0"
           to="/forgot_password"
+          data-test="forgot-password-button"
         >
           {{ $t("auth.forgot_password") }}
         </Button>
diff --git a/resources/js/views/ForgotPassword.vue b/resources/js/views/ForgotPassword.vue
index 8c48bf4b0..d72124964 100644
--- a/resources/js/views/ForgotPassword.vue
+++ b/resources/js/views/ForgotPassword.vue
@@ -8,7 +8,7 @@
           <template #title> {{ $t("auth.reset_password") }} </template>
           <template #content>
             <form @submit.prevent="submit">
-              <div class="flex flex-col gap-2">
+              <div class="flex flex-col gap-2" data-test="email-field">
                 <label for="email">{{ $t("app.email") }}</label>
                 <InputText
                   id="email"
@@ -27,6 +27,7 @@
                 :disabled="loading"
                 :loading="loading"
                 :label="$t('auth.send_password_reset_link')"
+                data-test="send-reset-link-button"
               />
             </form>
           </template>
diff --git a/resources/js/views/PasswordReset.vue b/resources/js/views/PasswordReset.vue
index eb98a272e..8f2d10241 100644
--- a/resources/js/views/PasswordReset.vue
+++ b/resources/js/views/PasswordReset.vue
@@ -14,7 +14,7 @@
           </template>
           <template #content>
             <form @submit.prevent="submit">
-              <div class="flex flex-col gap-2">
+              <div class="flex flex-col gap-2" data-test="new-password-field">
                 <label for="new_password">{{ $t("auth.new_password") }}</label>
                 <InputText
                   id="new_password"
@@ -28,7 +28,10 @@
                 <FormError :errors="formErrors.fieldError('password')" />
               </div>
 
-              <div class="flex flex-col gap-2">
+              <div
+                class="flex flex-col gap-2"
+                data-test="password-confirmation-field"
+              >
                 <label for="password_confirmation">{{
                   $t("auth.new_password_confirmation")
                 }}</label>
@@ -56,6 +59,7 @@
                 :label="
                   welcome ? $t('auth.set_password') : $t('auth.change_password')
                 "
+                data-test="reset-password-button"
               />
             </form>
           </template>
diff --git a/tests/Frontend/e2e/ForgotPassword.cy.js b/tests/Frontend/e2e/ForgotPassword.cy.js
new file mode 100644
index 000000000..8b86abcd3
--- /dev/null
+++ b/tests/Frontend/e2e/ForgotPassword.cy.js
@@ -0,0 +1,154 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Forgot password", function () {
+  beforeEach(function () {
+    cy.intercept("GET", "api/v1/locale/en", {});
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check with local auth disabled", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = false;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+
+    cy.visit("/forgot_password");
+
+    cy.url().should("include", "/404").and("not.include", "/forgot_password");
+  });
+
+  it("check with password change forbidden", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+      config.data.user.password_change_allowed = false;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+
+    cy.visit("/forgot_password");
+
+    cy.url().should("include", "/404").and("not.include", "/forgot_password");
+  });
+
+  it("visit with logged in user", function () {
+    cy.intercept("GET", "api/v1/currentUser", {
+      statusCode: 200,
+      fixture: "currentUser.json",
+    });
+
+    cy.visit("/forgot_password");
+
+    // Check that error message is shown
+    cy.checkToastMessage("app.flash.guests_only");
+
+    // Check that user is redirected to home page
+    cy.url().should("not.include", "/forgot_password");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("forgot password", function () {
+    cy.visit("/forgot_password");
+
+    // Intercept csrf-cookie request to set defined cookie that can be checked later
+    cy.intercept("GET", "/sanctum/csrf-cookie", {
+      statusCode: 200,
+      headers: {
+        "Set-Cookie": "XSRF-TOKEN=test-csrf; Path=/",
+      },
+    }).as("cookieRequest");
+
+    // Intercept forgot password request
+    const forgotPasswordRequest = interceptIndefinitely(
+      "POST",
+      "api/v1/password/email",
+      {
+        statusCode: 200,
+        body: {
+          message: "Success!",
+        },
+      },
+      "forgotPasswordRequest",
+    );
+
+    // Check that email field is shown correctly and click on submit button
+    cy.get('[data-test="email-field"]')
+      .should("be.visible")
+      .and("include.text", "app.email")
+      .within(() => {
+        cy.get("#email")
+          .should("be.visible")
+          .and("have.value", "")
+          .type("JohnDoe@domain.tld");
+      });
+
+    cy.get('[data-test="send-reset-link-button"]')
+      .should("have.text", "auth.send_password_reset_link")
+      .click();
+
+    // Check loading
+    cy.get("#email").should("be.disabled");
+    cy.get('[data-test="send-reset-link-button"]')
+      .should("be.disabled")
+      .then(() => {
+        forgotPasswordRequest.sendResponse();
+      });
+
+    cy.wait("@cookieRequest");
+
+    // Check if correct data gets sent
+    cy.wait("@forgotPasswordRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        email: "JohnDoe@domain.tld",
+      });
+      expect(interception.request.headers).to.contain({
+        "x-xsrf-token": "test-csrf",
+      });
+    });
+
+    // Check if success message is shown
+    cy.checkToastMessage("Success!");
+
+    // Check that user is redirected to home page
+    cy.url().should("not.include", "/forgot_password");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("forgot password errors", function () {
+    cy.visit("/forgot_password");
+
+    cy.get("#email").type("JohnDoe@domain.tld");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/password/email", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("forgotPasswordRequest");
+
+    cy.get('[data-test="send-reset-link-button"]').click();
+
+    cy.wait("@forgotPasswordRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+  });
+});
diff --git a/tests/Frontend/e2e/Login.cy.js b/tests/Frontend/e2e/Login.cy.js
index 74e7dc50b..742b11ff8 100644
--- a/tests/Frontend/e2e/Login.cy.js
+++ b/tests/Frontend/e2e/Login.cy.js
@@ -239,6 +239,38 @@ describe("Login", function () {
     cy.url().should("include", "/rooms").and("not.include", "/login");
   });
 
+  it("open forgot password page", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+
+    cy.visit("/login");
+
+    // Check if local login tab is shown correctly
+    cy.get('[data-test="login-tab-local"]').within(() => {
+      cy.get("#local-email").should("be.visible").and("not.be.disabled");
+      cy.get("#local-password").should("be.visible").and("not.be.disabled");
+
+      cy.get('[data-test="login-button"]')
+        .should("be.visible")
+        .and("not.be.disabled");
+
+      // Check that forgot password link is shown
+      cy.get('[data-test="forgot-password-button"]')
+        .should("be.visible")
+        .and("not.be.disabled")
+        .and("have.text", "auth.forgot_password")
+        .click();
+    });
+
+    cy.url().should("include", "/forgot_password").and("not.include", "/login");
+  });
+
   it("hide local login if disabled", function () {
     cy.fixture("config.json").then((config) => {
       config.data.auth.local = false;
diff --git a/tests/Frontend/e2e/PasswordReset.cy.js b/tests/Frontend/e2e/PasswordReset.cy.js
new file mode 100644
index 000000000..2be2973b4
--- /dev/null
+++ b/tests/Frontend/e2e/PasswordReset.cy.js
@@ -0,0 +1,249 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Password reset", function () {
+  beforeEach(function () {
+    cy.intercept("GET", "api/v1/locale/en", {});
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check with local auth disabled", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = false;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+
+    cy.visit("/reset_password");
+
+    cy.url().should("include", "/404").and("not.include", "/forgot_password");
+  });
+
+  it("visit with logged in user", function () {
+    cy.intercept("GET", "api/v1/currentUser", {
+      statusCode: 200,
+      fixture: "currentUser.json",
+    });
+
+    cy.visit("/reset_password");
+
+    // Check that error message is shown
+    cy.checkToastMessage("app.flash.guests_only");
+
+    // Check that user is redirected to home page
+    cy.url().should("not.include", "/forgot_password");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("reset password of existing user", function () {
+    cy.visit("/reset_password?email=johndoe@domain.tld&token=Token123");
+
+    cy.contains("auth.input_new_password").should("be.visible");
+    cy.contains("auth.input_new_password_new_user").should("not.exist");
+
+    cy.get('[data-test="new-password-field"]')
+      .should("include.text", "auth.new_password")
+      .should("be.visible")
+      .within(() => {
+        cy.get("#new_password").should("be.visible").type("secretPassword123#");
+      });
+
+    cy.get('[data-test="password-confirmation-field"]')
+      .should("include.text", "auth.new_password_confirmation")
+      .should("be.visible")
+      .within(() => {
+        cy.get("#password_confirmation")
+          .should("be.visible")
+          .type("secretPassword123#");
+      });
+
+    // Intercept csrf-cookie request to set defined cookie that can be checked later
+    cy.intercept("GET", "/sanctum/csrf-cookie", {
+      statusCode: 200,
+      headers: {
+        "Set-Cookie": "XSRF-TOKEN=test-csrf; Path=/",
+      },
+    }).as("cookieRequest");
+
+    cy.intercept("GET", "api/v1/currentUser", {
+      statusCode: 200,
+      fixture: "currentUser.json",
+    }).as("currentUserRequest");
+
+    const resetPasswordRequest = interceptIndefinitely(
+      "POST",
+      "api/v1/password/reset",
+      {
+        statusCode: 200,
+        body: {
+          message: "Success!",
+        },
+      },
+      "resetPasswordRequest",
+    );
+
+    cy.get('[data-test="reset-password-button"]')
+      .should("have.text", "auth.change_password")
+      .click();
+
+    // Check loading
+    cy.get("#new_password").should("be.disabled");
+    cy.get("#password_confirmation").should("be.disabled");
+
+    cy.get('[data-test="reset-password-button"]')
+      .should("be.disabled")
+      .then(() => {
+        resetPasswordRequest.sendResponse();
+      });
+
+    cy.wait("@cookieRequest");
+    cy.wait("@resetPasswordRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        email: "johndoe@domain.tld",
+        password: "secretPassword123#",
+        password_confirmation: "secretPassword123#",
+        token: "Token123",
+      });
+
+      expect(interception.request.headers).to.contain({
+        "x-xsrf-token": "test-csrf",
+      });
+    });
+
+    cy.wait("@currentUserRequest");
+
+    // Check that success message is shown
+    cy.checkToastMessage("Success!");
+
+    // Check that user is redirected to home page
+    cy.url().should("not.include", "/reset_password");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("reset password view for new user", function () {
+    cy.visit(
+      "/reset_password?email=johndoe@domain.tld&token=Token123&welcome=true",
+    );
+
+    cy.contains("auth.input_new_password_new_user").should("be.visible");
+
+    cy.get('[data-test="reset-password-button"]').should(
+      "have.text",
+      "auth.set_password",
+    );
+  });
+
+  it("reset password errors", function () {
+    cy.visit("/reset_password");
+
+    cy.get("#new_password").type("secretPassword123");
+    cy.get("#password_confirmation").type("newSecretPassword123#");
+
+    // Check 422 error
+    cy.intercept("POST", "api/v1/password/reset", {
+      statusCode: 422,
+      body: {
+        errors: {
+          password: ["The New password field is required."],
+          password_confirmation: [
+            "The New password confirmation field is required.",
+          ],
+        },
+      },
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="reset-password-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that error message is shown
+    cy.get('[data-test="new-password-field"]').should(
+      "include.text",
+      "The New password field is required.",
+    );
+
+    cy.get('[data-test="password-confirmation-field"]').should(
+      "include.text",
+      "The New password confirmation field is required.",
+    );
+
+    // Check with other 422 errors
+    cy.intercept("POST", "api/v1/password/reset", {
+      statusCode: 422,
+      body: {
+        errors: {
+          email: ["The Email field is required."],
+          token: ["The Token field is required."],
+        },
+      },
+    }).as("resetPasswordRequest");
+
+    cy.get("#new_password").clear();
+    cy.get("#new_password").type("newSecretPassword123#");
+
+    cy.get('[data-test="reset-password-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that previous 422 error messages are hidden
+    cy.get('[data-test="new-password-field"]').should(
+      "not.include.text",
+      "The New password field is required.",
+    );
+    cy.get('[data-test="password-confirmation-field"]').should(
+      "not.include.text",
+      "The New password confirmation field is required.",
+    );
+
+    // Check that new error messages are shown
+    cy.contains("The Email field is required.").should("be.visible");
+    cy.contains("The Token field is required.").should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/password/reset", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="reset-password-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that 422 error messages are hidden
+    cy.contains("The Email field is required.").should("not.exist");
+    cy.contains("The Token field is required.").should("not.exist");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 429 error
+    cy.intercept("POST", "api/v1/password/reset", {
+      statusCode: 429,
+      body: {
+        message: "Too many requests",
+      },
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="reset-password-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage("app.flash.too_many_requests");
+  });
+});

From aa7019614c7c7d6554cd5846e86c6aa05327722f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Thu, 2 Jan 2025 10:27:21 +0100
Subject: [PATCH 34/79] Start adding VerifyEmail tests

---
 resources/js/views/VerifyEmail.vue   |   3 +
 tests/Frontend/e2e/VerifyEmail.cy.js | 174 +++++++++++++++++++++++++++
 2 files changed, 177 insertions(+)
 create mode 100644 tests/Frontend/e2e/VerifyEmail.cy.js

diff --git a/resources/js/views/VerifyEmail.vue b/resources/js/views/VerifyEmail.vue
index c9eccb5b3..5627a43f5 100644
--- a/resources/js/views/VerifyEmail.vue
+++ b/resources/js/views/VerifyEmail.vue
@@ -14,6 +14,7 @@
                   severity="success"
                   icon="fa-solid fa-envelope-circle-check"
                   :closable="false"
+                  data-test="verify-success-message"
                 >
                   {{ $t("app.verify_email.success") }}
                 </Message>
@@ -22,6 +23,7 @@
                   severity="error"
                   icon="fa-solid fa-triangle-exclamation"
                   :closable="false"
+                  data-test="verify-invalid-message"
                 >
                   {{ $t("app.verify_email.invalid") }}
                 </Message>
@@ -30,6 +32,7 @@
                   severity="error"
                   icon="fa-solid fa-triangle-exclamation"
                   :closable="false"
+                  data-test="verify-error-message"
                 >
                   {{ $t("app.verify_email.fail") }}
                 </Message>
diff --git a/tests/Frontend/e2e/VerifyEmail.cy.js b/tests/Frontend/e2e/VerifyEmail.cy.js
new file mode 100644
index 000000000..7f024a4a7
--- /dev/null
+++ b/tests/Frontend/e2e/VerifyEmail.cy.js
@@ -0,0 +1,174 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Verify email", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.intercept("GET", "api/v1/locale/en", {});
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check with local auth disabled", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = false;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+
+    cy.visit("/verify_email");
+
+    cy.url().should("include", "/404").and("not.include", "/verify_email");
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/verify_email");
+  });
+
+  it("verify email", function () {
+    const verifyEmailRequest = interceptIndefinitely(
+      "POST",
+      "api/v1/email/verify",
+      {
+        statusCode: 200,
+      },
+      "verifyEmailRequest",
+    );
+
+    cy.visit("/verify_email?email=MaxDoe@domain.tld&token=Token123");
+
+    cy.contains("app.verify_email.title").should("be.visible");
+
+    // Check loading
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        verifyEmailRequest.sendResponse();
+      });
+
+    cy.wait("@verifyEmailRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        email: "MaxDoe@domain.tld",
+        token: "Token123",
+      });
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that correct message is shown
+    cy.get('[data-test="verify-success-message"]')
+      .should("be.visible")
+      .and("include.text", "app.verify_email.success");
+    cy.get('[data-test="verify-invalid-message"]').should("not.exist");
+    cy.get('[data-test="verify-error-message"]').should("not.exist");
+  });
+
+  it("verify email errors", function () {
+    // Check with 422 error (missing props)
+    cy.intercept("POST", "api/v1/email/verify", {
+      statusCode: 422,
+      body: {
+        errors: {
+          email: ["The email field is required."],
+          token: ["The token field is required."],
+        },
+      },
+    }).as("verifyEmailRequest");
+
+    cy.visit("/verify_email");
+
+    cy.wait("@verifyEmailRequest");
+
+    // Check that correct message is shown
+    cy.get('[data-test="verify-success-message"]').should("not.exist");
+    cy.get('[data-test="verify-invalid-message"]')
+      .should("be.visible")
+      .and("include.text", "app.verify_email.invalid");
+    cy.get('[data-test="verify-error-message"]').should("not.exist");
+
+    // Check with 422 error (invalid token)
+    cy.intercept("POST", "api/v1/email/verify", {
+      statusCode: 422,
+    }).as("verifyEmailRequest");
+
+    cy.visit("/verify_email?email=MaxDoe@domain.tld&token=Token123");
+
+    cy.wait("@verifyEmailRequest");
+
+    // Check that correct message is shown
+    cy.get('[data-test="verify-success-message"]').should("not.exist");
+    cy.get('[data-test="verify-invalid-message"]')
+      .should("be.visible")
+      .and("include.text", "app.verify_email.invalid");
+    cy.get('[data-test="verify-error-message"]').should("not.exist");
+
+    // Check with other error
+    cy.intercept("POST", "api/v1/email/verify", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("verifyEmailRequest");
+
+    cy.reload();
+
+    cy.wait("@verifyEmailRequest");
+
+    // Check that correct message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="verify-success-message"]').should("not.exist");
+    cy.get('[data-test="verify-invalid-message"]').should("not.exist");
+    cy.get('[data-test="verify-error-message"]')
+      .should("be.visible")
+      .and("include.text", "app.verify_email.fail");
+
+    // Check with 429 error
+    cy.intercept("POST", "api/v1/email/verify", {
+      statusCode: 429,
+      body: {
+        message: "Too many requests",
+      },
+    }).as("verifyEmailRequest");
+
+    cy.reload();
+
+    cy.wait("@verifyEmailRequest");
+
+    // Check that correct message is shown
+    cy.checkToastMessage("app.flash.too_many_requests");
+
+    cy.get('[data-test="verify-success-message"]').should("not.exist");
+    cy.get('[data-test="verify-invalid-message"]').should("not.exist");
+    cy.get('[data-test="verify-error-message"]')
+      .should("be.visible")
+      .and("include.text", "app.verify_email.fail");
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/email/verify", {
+      statusCode: 401,
+    }).as("verifyEmailRequest");
+
+    cy.reload();
+
+    cy.wait("@verifyEmailRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/verify_email");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});

From f29784497b176cfde82413d45301943cb30ed52f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Thu, 2 Jan 2025 13:08:18 +0100
Subject: [PATCH 35/79] Improve tests

---
 tests/Frontend/e2e/AdminRoomTypesEdit.cy.js   | 50 ++++++++---
 .../AdminRoomTypesIndexRoomTypeActions.cy.js  | 24 +++--
 tests/Frontend/e2e/AdminRoomTypesNew.cy.js    | 48 +++++++---
 .../AdminRoomTypesViewRoomTypeActions.cy.js   | 90 +++++++++++++++++++
 tests/Frontend/e2e/AdminServerPoolsEdit.cy.js | 25 ++++--
 tests/Frontend/e2e/AdminServerPoolsNew.cy.js  | 24 +++--
 tests/Frontend/e2e/AdminUsersEditBase.cy.js   | 25 ++++--
 .../Frontend/e2e/AdminUsersEditSecurity.cy.js | 24 +++--
 tests/Frontend/e2e/AdminUsersIndex.cy.js      | 26 ++++--
 tests/Frontend/e2e/AdminUsersNew.cy.js        | 31 +++++--
 tests/Frontend/e2e/AdminUsersView.cy.js       | 23 +++--
 tests/Frontend/e2e/RoomsIndex.cy.js           | 23 +++--
 tests/Frontend/e2e/UserProfileBase.cy.js      | 27 ++++--
 tests/Frontend/e2e/UserProfileSecurity.cy.js  | 24 +++--
 14 files changed, 386 insertions(+), 78 deletions(-)

diff --git a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
index fa908608d..5e332d624 100644
--- a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
@@ -2138,16 +2138,31 @@ describe("Admin room types edit", function () {
     });
 
     // Check with 500 error
-    cy.intercept("GET", "api/v1/roles*", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const rolesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("rolesRequest");
+      "rolesRequest",
+    );
 
     cy.visit("/admin/room_types/3/edit");
 
     cy.wait("@roomTypeRequest");
+
+    // Check loading
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        rolesRequest.sendResponse();
+      });
+
     cy.wait("@rolesRequest");
 
     // Check error message
@@ -2314,16 +2329,31 @@ describe("Admin room types edit", function () {
 
   it("load server pools errors", function () {
     // Check with 500 error
-    cy.intercept("GET", "api/v1/serverPools*", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const serverPoolsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/serverPools*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("serverPoolsRequest");
+      "serverPoolsRequest",
+    );
 
     cy.visit("/admin/room_types/3/edit");
 
     cy.wait("@roomTypeRequest");
+
+    // Check loading
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="server-pool-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        serverPoolsRequest.sendResponse();
+      });
+
     cy.wait("@serverPoolsRequest");
 
     // Check error message
diff --git a/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js b/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js
index 5c7ad700e..5a625b765 100644
--- a/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js
@@ -404,18 +404,32 @@ describe("Admin room types index room type actions", function () {
     cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
 
     // Check with 500 error
-    cy.intercept("GET", "api/v1/roomTypes*", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const replacementRoomTypesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roomTypes*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("replacementRoomTypesRequest");
+      "replacementRoomTypesRequest",
+    );
 
     cy.get('[data-test="room-type-item"]')
       .eq(0)
       .find('[data-test="room-types-delete-button"]')
       .click();
 
+    // Check loading
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label")
+        .should("have.attr", "aria-disabled", "true")
+        .then(() => {
+          replacementRoomTypesRequest.sendResponse();
+        });
+    });
+
     cy.wait("@replacementRoomTypesRequest");
 
     // Check that dialog is still open and that error message is shown
diff --git a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
index b027e8813..5c4659a26 100644
--- a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
@@ -1496,17 +1496,31 @@ describe("Admin room types new", function () {
 
   it("load roles errors", function () {
     // Check with 500 error
-    cy.intercept("GET", "api/v1/roles*", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const rolesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("rolesRequest");
+      "rolesRequest",
+    );
 
     cy.visit("/admin/room_types/new");
 
     cy.get("#restrict").click();
 
+    // Check loading
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        rolesRequest.sendResponse();
+      });
+
     cy.wait("@rolesRequest");
 
     // Check error message
@@ -1630,15 +1644,29 @@ describe("Admin room types new", function () {
 
   it("load server pools errors", function () {
     // Check with 500 error
-    cy.intercept("GET", "api/v1/serverPools*", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const serverPoolRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/serverPools*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("serverPoolsRequest");
+      "serverPoolsRequest",
+    );
 
     cy.visit("/admin/room_types/new");
 
+    // Check loading
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="server-pool-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        serverPoolRequest.sendResponse();
+      });
+
     cy.wait("@serverPoolsRequest");
 
     // Check error message
diff --git a/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
index d94989763..8e8264c37 100644
--- a/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
@@ -337,6 +337,96 @@ describe("Admin room types view room type actions", function () {
     cy.checkToastMessage("app.flash.unauthenticated");
   });
 
+  it("load replacement room types errors", function () {
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    // Check with 500 error
+    const replacementRoomTypesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roomTypes*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "replacementRoomTypesRequest",
+    );
+
+    cy.get('[data-test="room-types-delete-button"]').click();
+
+    // Check loading
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label")
+        .should("have.attr", "aria-disabled", "true")
+        .then(() => {
+          replacementRoomTypesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@replacementRoomTypesRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // ToDo this is not implemented yet!!!! so careful when keeping this part of the test !!!!
+    // Check that dropdown is disabled
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 200,
+      fixture: "roomTypes.json",
+    }).as("replacementRoomTypesRequest");
+
+    cy.get('[data-test="replacement-room-types-reload-button"]')
+      .should("be.visible")
+      .click();
+
+    cy.wait("@replacementRoomTypesRequest");
+
+    // Check that dropdown is enabled again
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label").should(
+        "not.have.attr",
+        "aria-disabled",
+        "true",
+      );
+    });
+
+    cy.get('[data-test="replacement-room-types-reload-button"]').should(
+      "not.exist",
+    );
+
+    // Close dialog and open again with 401 error
+    cy.get('[data-test="dialog-cancel-button"]').click();
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 401,
+    }).as("replacementRoomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-button"]').click();
+
+    cy.wait("@replacementRoomTypesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
   it("switch between edit and view", function () {
     cy.fixture("roomType.json").then((roomType) => {
       roomType.data.restrict = true;
diff --git a/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
index 1e689f82f..85d18151b 100644
--- a/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
@@ -703,16 +703,31 @@ describe("Admin server pools edit", function () {
 
   it("load servers errors", function () {
     // Check with 500 error
-    cy.intercept("GET", "api/v1/servers*", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const serversRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/servers*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("serversRequest");
+      "serversRequest",
+    );
 
     cy.visit("/admin/server_pools/1/edit");
 
     cy.wait("@serverPoolRequest");
+
+    // Check loading
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="server-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        serversRequest.sendResponse();
+      });
+
     cy.wait("@serversRequest");
 
     cy.checkToastMessage([
diff --git a/tests/Frontend/e2e/AdminServerPoolsNew.cy.js b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
index 4e15bb976..dddcda33c 100644
--- a/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
@@ -521,15 +521,29 @@ describe("Admin server pools new", function () {
 
   it("load servers errors", function () {
     // Check with 500 error
-    cy.intercept("GET", "api/v1/servers*", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const serversRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/servers*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("serversRequest");
+      "serversRequest",
+    );
 
     cy.visit("/admin/server_pools/new");
 
+    // Check loading
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="server-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        serversRequest.sendResponse();
+      });
+
     cy.wait("@serversRequest");
 
     // Check that error message is shown
diff --git a/tests/Frontend/e2e/AdminUsersEditBase.cy.js b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
index d900b2ba9..cb0493fd4 100644
--- a/tests/Frontend/e2e/AdminUsersEditBase.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
@@ -754,17 +754,32 @@ describe("Admin users edit base", function () {
   });
 
   it("load timezones error", function () {
-    cy.intercept("GET", "api/v1/getTimezones", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const timezonesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/getTimezones",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("timezonesRequest");
+      "timezonesRequest",
+    );
 
     cy.visit("/admin/users/2/edit");
 
     cy.wait("@userRequest");
 
+    // Check loading
+    cy.get('[data-test="user-tab-profile-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true")
+      .then(() => {
+        timezonesRequest.sendResponse();
+      });
+
     cy.wait("@timezonesRequest");
 
     cy.checkToastMessage([
diff --git a/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
index 20c4ab19d..6a7146662 100644
--- a/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
@@ -705,12 +705,17 @@ describe("Admin users edit email", function () {
 
   it("load roles errors", function () {
     // Check with 500 error
-    cy.intercept("GET", "api/v1/roles*", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const rolesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("rolesRequest");
+      "rolesRequest",
+    );
 
     cy.visit("/admin/users/2/edit");
 
@@ -718,6 +723,15 @@ describe("Admin users edit email", function () {
 
     cy.get('[data-test="security-tab-button"]').click();
 
+    // Check loading
+    cy.get('[data-test="users-roles-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        rolesRequest.sendResponse();
+      });
+
     cy.wait("@rolesRequest");
 
     cy.checkToastMessage([
diff --git a/tests/Frontend/e2e/AdminUsersIndex.cy.js b/tests/Frontend/e2e/AdminUsersIndex.cy.js
index 366d39297..e329218e5 100644
--- a/tests/Frontend/e2e/AdminUsersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndex.cy.js
@@ -479,16 +479,32 @@ describe("Admin users index", function () {
   });
 
   it("load roles errors", function () {
-    cy.intercept("GET", "api/v1/roles*", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const rolesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("rolesRequest");
+      "rolesRequest",
+    );
 
     cy.visit("/admin/users");
 
     cy.wait("@usersRequest");
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check loading
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        rolesRequest.sendResponse();
+      });
+
     cy.wait("@rolesRequest");
 
     // Check that error message gets shown
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index 92989968b..874e16c66 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -771,8 +771,11 @@ describe("Admin users new", function () {
     cy.visit("/admin/users/new");
 
     // Check loading
-    cy.get('[data-test="users-new-save-button"]')
-      .should("be.disabled")
+    cy.get('[data-test="users-new-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true")
       .then(() => {
         loadTimezonesRequest.sendResponse();
       });
@@ -830,15 +833,29 @@ describe("Admin users new", function () {
 
   it("load roles errors", function () {
     // Check with 500 error
-    cy.intercept("GET", "api/v1/roles*", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const rolesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("rolesRequest");
+      "rolesRequest",
+    );
 
     cy.visit("/admin/users/new");
 
+    // Check loading
+    cy.get('[data-test="users-new-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        rolesRequest.sendResponse();
+      });
+
     cy.wait("@rolesRequest");
 
     cy.checkToastMessage([
diff --git a/tests/Frontend/e2e/AdminUsersView.cy.js b/tests/Frontend/e2e/AdminUsersView.cy.js
index 2e0e861de..442c74027 100644
--- a/tests/Frontend/e2e/AdminUsersView.cy.js
+++ b/tests/Frontend/e2e/AdminUsersView.cy.js
@@ -448,17 +448,30 @@ describe("Admin users view", function () {
   });
 
   it("load timezones error", function () {
-    cy.intercept("GET", "api/v1/getTimezones", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const timezonesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/getTimezones",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("timezonesRequest");
+      "timezonesRequest",
+    );
 
     cy.visit("/admin/users/2");
 
     cy.wait("@userRequest");
 
+    // Check loading
+    cy.get('[data-test="timezone-dropdown"]')
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true")
+      .then(() => {
+        timezonesRequest.sendResponse();
+      });
+
     cy.wait("@timezonesRequest");
 
     cy.checkToastMessage([
diff --git a/tests/Frontend/e2e/RoomsIndex.cy.js b/tests/Frontend/e2e/RoomsIndex.cy.js
index 39dbe31d0..e01ebd2eb 100644
--- a/tests/Frontend/e2e/RoomsIndex.cy.js
+++ b/tests/Frontend/e2e/RoomsIndex.cy.js
@@ -2264,15 +2264,28 @@ describe("Room Index", function () {
   });
 
   it("error loading room types", function () {
-    cy.intercept("GET", "api/v1/roomTypes", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const roomTypesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roomTypes",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    });
+      "roomTypesRequest",
+    );
 
     cy.visit("/rooms");
 
+    // Check loading
+    cy.get('[data-test="room-type-dropdown"]')
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true")
+      .then(() => {
+        roomTypesRequest.sendResponse();
+      });
+
     // Check that error message gets shown
     cy.checkToastMessage([
       'app.flash.server_error.message_{"message":"Test"}',
diff --git a/tests/Frontend/e2e/UserProfileBase.cy.js b/tests/Frontend/e2e/UserProfileBase.cy.js
index d49cf6c41..15446d0c6 100644
--- a/tests/Frontend/e2e/UserProfileBase.cy.js
+++ b/tests/Frontend/e2e/UserProfileBase.cy.js
@@ -745,17 +745,32 @@ describe("User Profile Base", function () {
   });
 
   it("load timezones error", function () {
-    cy.intercept("GET", "api/v1/getTimezones", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const timezonesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/getTimezones",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("timezonesRequest");
+      "timezonesRequest",
+    );
 
     cy.visit("/profile");
 
     cy.wait("@userRequest");
 
+    // Check loading
+    cy.get('[data-test="user-tab-profile-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true")
+      .then(() => {
+        timezonesRequest.sendResponse();
+      });
+
     cy.wait("@timezonesRequest");
 
     cy.checkToastMessage([
@@ -768,7 +783,7 @@ describe("User Profile Base", function () {
       .find(".p-select-label")
       .should("have.attr", "aria-disabled", "true");
 
-    // Reload timezones withouth error
+    // Reload timezones without error
     cy.intercept("GET", "api/v1/getTimezones", {
       fixture: "timezones.json",
     }).as("timezonesRequest");
diff --git a/tests/Frontend/e2e/UserProfileSecurity.cy.js b/tests/Frontend/e2e/UserProfileSecurity.cy.js
index b5cac187f..9f1846d5b 100644
--- a/tests/Frontend/e2e/UserProfileSecurity.cy.js
+++ b/tests/Frontend/e2e/UserProfileSecurity.cy.js
@@ -456,12 +456,17 @@ describe("User Profile Security", function () {
   });
 
   it("load sessions error", function () {
-    cy.intercept("GET", "api/v1/sessions", {
-      statusCode: 500,
-      body: {
-        message: "Test",
+    const sessionsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/sessions",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
       },
-    }).as("getSessionsRequest");
+      "getSessionsRequest",
+    );
 
     cy.visit("/profile");
 
@@ -469,6 +474,15 @@ describe("User Profile Security", function () {
 
     cy.get('[data-test="security-tab-button"]').click();
 
+    // Check loading
+    cy.get('[data-test="session-panel"]').should("have.length", 0);
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        sessionsRequest.sendResponse();
+      });
+
     cy.wait("@getSessionsRequest");
 
     cy.checkToastMessage([

From 1ba954640aa5ae63f13bd15a981e14ba37a708aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Thu, 2 Jan 2025 13:19:13 +0100
Subject: [PATCH 36/79] Fix error message (AdminRoomTypesView)

---
 resources/js/views/AdminRoomTypesView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/views/AdminRoomTypesView.vue b/resources/js/views/AdminRoomTypesView.vue
index 6908c3c35..394574287 100644
--- a/resources/js/views/AdminRoomTypesView.vue
+++ b/resources/js/views/AdminRoomTypesView.vue
@@ -694,7 +694,7 @@
               <div class="flex justify-between gap-6">
                 <FormError
                   :errors="
-                    formErrors.fieldError('auto_start_recording_enforced')
+                    formErrors.fieldError('auto_start_recording_default')
                   "
                 />
                 <FormError

From 4621996a19febde389a6fb1c6bb1355bd7cff880 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Thu, 2 Jan 2025 13:27:15 +0100
Subject: [PATCH 37/79] Add missing loading retry button (AdminRoomTypesIndex)

---
 resources/js/views/AdminRoomTypesIndex.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/resources/js/views/AdminRoomTypesIndex.vue b/resources/js/views/AdminRoomTypesIndex.vue
index 63ec93d8d..d15d891f3 100644
--- a/resources/js/views/AdminRoomTypesIndex.vue
+++ b/resources/js/views/AdminRoomTypesIndex.vue
@@ -38,12 +38,15 @@
       :current-page-report-template="paginator.getCurrentPageReportTemplate()"
       striped-rows
       row-hover
-      :loading="isBusy"
+      :loading="isBusy || loadingError"
       :rows="settingsStore.getSetting('general.pagination_page_size')"
       :pt="{
         table: 'table-auto lg:table-fixed',
       }"
     >
+      <template #loading>
+        <LoadingRetryButton :error="loadingError" @reload="loadData()" />
+      </template>
       <template #empty>
         <InlineNote v-if="roomTypes.length === 0">{{
           $t("admin.room_types.no_data")
@@ -137,6 +140,7 @@ const actionColumn = useActionColumn([
 ]);
 
 const isBusy = ref(false);
+const loadingError = ref(false);
 const roomTypes = ref([]);
 const nameSearch = ref("");
 const filters = ref({
@@ -152,6 +156,8 @@ onMounted(() => {
  */
 function loadData() {
   isBusy.value = true;
+  loadingError.value = false;
+
   api
     .call("roomTypes")
     .then((response) => {
@@ -159,6 +165,7 @@ function loadData() {
     })
     .catch((error) => {
       api.error(error);
+      loadingError.value = true;
     })
     .finally(() => {
       isBusy.value = false;

From e0bb6cdd444875c20c1840694d0ec7d404094987 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 8 Jan 2025 22:18:09 +0100
Subject: [PATCH 38/79] Start adding AdminSettings tests (general, edit)

---
 resources/js/components/AppBanner.vue         |   14 +-
 resources/js/components/FileInput.vue         |    2 +
 .../js/components/SettingsFileSelector.vue    |    4 +
 .../js/components/SettingsImageSelector.vue   |    5 +
 resources/js/views/AdminSettings.vue          |  297 +-
 tests/Frontend/e2e/AdminRoomTypesEdit.cy.js   |    8 +-
 tests/Frontend/e2e/AdminRoomTypesIndex.cy.js  |    2 +
 tests/Frontend/e2e/AdminRoomTypesView.cy.js   |    2 +
 .../AdminRoomTypesViewRoomTypeActions.cy.js   |    3 +-
 tests/Frontend/e2e/AdminServerPoolsEdit.cy.js |    4 +-
 .../Frontend/e2e/AdminServerPoolsIndex.cy.js  |    2 +
 tests/Frontend/e2e/AdminServerPoolsView.cy.js |    2 +
 tests/Frontend/e2e/AdminServersEdit.cy.js     |    4 +-
 tests/Frontend/e2e/AdminServersIndex.cy.js    |    2 +
 tests/Frontend/e2e/AdminServersView.cy.js     |    2 +
 tests/Frontend/e2e/AdminSettingsEdit.cy.js    | 2417 +++++++++++++++++
 tests/Frontend/e2e/AdminSettingsGeneral.cy.js |  238 ++
 tests/Frontend/e2e/AdminUsersEdit.cy.js       |    2 +
 tests/Frontend/e2e/AdminUsersIndex.cy.js      |    2 +
 tests/Frontend/e2e/AdminUsersView.cy.js       |    2 +
 tests/Frontend/fixtures/files/bbb_style.css   |   34 +
 .../Frontend/fixtures/files/favicon-dark.ico  |  Bin 0 -> 15086 bytes
 tests/Frontend/fixtures/files/favicon.ico     |  Bin 0 -> 15086 bytes
 tests/Frontend/fixtures/files/logo-dark.svg   |   27 +
 tests/Frontend/fixtures/files/logo.svg        |   27 +
 tests/Frontend/fixtures/settings.json         |   49 +
 .../support/commands/adminSettingsCommands.js |  257 ++
 .../support/commands/interceptCommands.js     |   14 +
 tests/Frontend/support/e2e.js                 |    2 +-
 29 files changed, 3368 insertions(+), 56 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminSettingsEdit.cy.js
 create mode 100644 tests/Frontend/e2e/AdminSettingsGeneral.cy.js
 create mode 100644 tests/Frontend/fixtures/files/bbb_style.css
 create mode 100644 tests/Frontend/fixtures/files/favicon-dark.ico
 create mode 100644 tests/Frontend/fixtures/files/favicon.ico
 create mode 100644 tests/Frontend/fixtures/files/logo-dark.svg
 create mode 100644 tests/Frontend/fixtures/files/logo.svg
 create mode 100644 tests/Frontend/fixtures/settings.json
 create mode 100644 tests/Frontend/support/commands/adminSettingsCommands.js

diff --git a/resources/js/components/AppBanner.vue b/resources/js/components/AppBanner.vue
index 7fa728cf2..893338e8f 100644
--- a/resources/js/components/AppBanner.vue
+++ b/resources/js/components/AppBanner.vue
@@ -1,5 +1,6 @@
 <template>
   <Message
+    data-test="app-banner"
     :style="{
       'border-color': background,
       'background-color': background,
@@ -20,14 +21,19 @@
     <template #messageicon> </template>
 
     <div class="container flex flex-col gap-2">
-      <p v-if="title" class="m-0 text-lg font-bold">
-        <i v-if="icon" :class="`${icon}`" />
+      <p v-if="title" class="m-0 text-lg font-bold" data-test="banner-title">
+        <i v-if="icon" :class="`${icon}`" data-test="banner-icon" />
         {{ title }}
       </p>
-      <p class="m-0 whitespace-pre-wrap">
+      <p class="m-0 whitespace-pre-wrap" data-test="banner-message">
         {{ message }}
       </p>
-      <a v-if="link" :href="link" :target="`_${linkTarget}`">
+      <a
+        v-if="link"
+        :href="link"
+        :target="`_${linkTarget}`"
+        data-test="banner-link-button"
+      >
         <Button
           :link="linkStyle === 'link'"
           :style="linkStyle === 'link' ? { color: color } : {}"
diff --git a/resources/js/components/FileInput.vue b/resources/js/components/FileInput.vue
index 97c6bc9df..dd6b4b911 100644
--- a/resources/js/components/FileInput.vue
+++ b/resources/js/components/FileInput.vue
@@ -4,6 +4,7 @@
     class="p-button p-component shrink-0"
     :class="{ 'p-disabled': disabled }"
     tabindex="0"
+    data-test="file-input-button"
     @keyup.enter="fileInputRef.click()"
     @keyup.space="fileInputRef.click()"
   >
@@ -17,6 +18,7 @@
     class="sr-only"
     :disabled="disabled"
     :accept="accept"
+    data-test="file-input-input"
     @input="fileSelected"
   />
 </template>
diff --git a/resources/js/components/SettingsFileSelector.vue b/resources/js/components/SettingsFileSelector.vue
index 27f44da9b..474217b5f 100644
--- a/resources/js/components/SettingsFileSelector.vue
+++ b/resources/js/components/SettingsFileSelector.vue
@@ -18,6 +18,7 @@
           severity="danger"
           :label="$t('app.cancel')"
           icon="fa-solid fa-times"
+          data-test="settings-file-cancel-button"
           @click="resetFileUpload"
         />
 
@@ -27,6 +28,7 @@
           severity="danger"
           :label="$t('app.delete')"
           icon="fa-solid fa-trash"
+          data-test="settings-file-delete-button"
           @click="fileDeleted = true"
         />
         <Button
@@ -34,6 +36,7 @@
           severity="secondary"
           icon="fa-solid fa-undo"
           :label="$t('app.undo_delete')"
+          data-test="settings-file-undo-delete-button"
           @click="fileDeleted = false"
         />
 
@@ -44,6 +47,7 @@
           :href="fileUrl"
           target="_blank"
           :label="$t('app.view')"
+          data-test="settings-file-view-button"
           icon="fa-solid fa-eye"
         />
       </div>
diff --git a/resources/js/components/SettingsImageSelector.vue b/resources/js/components/SettingsImageSelector.vue
index 81fbe28e6..ef777429c 100644
--- a/resources/js/components/SettingsImageSelector.vue
+++ b/resources/js/components/SettingsImageSelector.vue
@@ -9,6 +9,7 @@
           type="text"
           :invalid="urlInvalid"
           :required="!showDelete"
+          data-test="settings-image-url-input"
         />
 
         <FileInput
@@ -27,6 +28,7 @@
           severity="danger"
           :label="$t('app.cancel')"
           icon="fa-solid fa-times"
+          data-test="settings-image-cancel-button"
           @click="resetFileUpload"
         />
 
@@ -36,6 +38,7 @@
           severity="danger"
           :label="$t('app.delete')"
           icon="fa-solid fa-trash"
+          data-test="settings-image-delete-button"
           @click="imageDeleted = true"
         />
         <Button
@@ -43,6 +46,7 @@
           severity="secondary"
           :label="$t('app.undo_delete')"
           icon="fa-solid fa-undo"
+          data-test="settings-image-undo-delete-button"
           @click="imageDeleted = false"
         />
       </div>
@@ -66,6 +70,7 @@
         :src="newImageUrl ?? imageUrl"
         :width="previewWidth"
         :alt="previewAlt"
+        data-test="settings-image-preview"
       />
     </div>
   </div>
diff --git a/resources/js/views/AdminSettings.vue b/resources/js/views/AdminSettings.vue
index 7fd932740..37f9d83c6 100644
--- a/resources/js/views/AdminSettings.vue
+++ b/resources/js/views/AdminSettings.vue
@@ -13,7 +13,10 @@
 
         <div class="flex flex-col gap-6">
           <AdminPanel :title="$t('admin.settings.application')">
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="application-name-field"
+            >
               <label
                 for="application-name"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -35,7 +38,7 @@
                 <FormError :errors="formErrors.fieldError('general_name')" />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div class="grid grid-cols-12 gap-4" data-test="help-url-field">
               <label for="help-url" class="col-span-12 md:col-span-4 md:mb-0">{{
                 $t("admin.settings.help_url.title")
               }}</label>
@@ -56,7 +59,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="legal-notice-url-field"
+            >
               <label
                 for="legal-notice-url"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -79,7 +85,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="privacy-policy-url-field"
+            >
               <label
                 for="privacy-policy-url"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -104,7 +113,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="pagination-page-size-field"
+            >
               <label
                 for="pagination-page-size"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -132,13 +144,19 @@
                 />
               </div>
             </div>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="toast-lifetime-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.toast_lifetime.title") }}
               </legend>
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <div class="flex flex-wrap gap-4">
-                  <div class="flex items-center">
+                  <div
+                    class="flex items-center"
+                    data-test="toast-lifetime-mode-unlimited-field"
+                  >
                     <RadioButton
                       v-model="toastLifetimeMode"
                       input-id="toast-lifetime-mode-unlimited"
@@ -156,7 +174,10 @@
                       $t("app.unlimited")
                     }}</label>
                   </div>
-                  <div class="flex items-center">
+                  <div
+                    class="flex items-center"
+                    data-test="toast-lifetime-mode-custom-field"
+                  >
                     <RadioButton
                       v-model="toastLifetimeMode"
                       input-id="toast-lifetime-mode-custom"
@@ -189,6 +210,7 @@
                   :disabled="disabled"
                   aria-labelledby="toast-lifetime-custom-label"
                   aria-describedby="toast-lifetime-custom-help"
+                  data-test="toast-lifetime-custom-input"
                 />
                 <small id="toast-lifetime-custom-help">{{
                   $t("admin.settings.toast_lifetime.description")
@@ -198,7 +220,10 @@
                 />
               </div>
             </fieldset>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="default-timezone-field"
+            >
               <label
                 id="default-timezone-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -220,7 +245,10 @@
                 />
               </div>
             </div>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="no-welcome-page-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.no_welcome_page") }}
               </legend>
@@ -245,7 +273,7 @@
           </AdminPanel>
 
           <AdminPanel :title="$t('admin.settings.theme.title')">
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset class="grid grid-cols-12 gap-4" data-test="favicon-field">
               <legend
                 id="favicon-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -271,7 +299,10 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="favicon-dark-field"
+            >
               <legend
                 id="favicon-dark-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -299,7 +330,7 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset class="grid grid-cols-12 gap-4" data-test="logo-field">
               <legend id="logo-label" class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.logo.title") }}
               </legend>
@@ -322,7 +353,10 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="logo-dark-field"
+            >
               <legend
                 id="logo-dark-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -350,7 +384,10 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="primary-color-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.theme.primary_color") }}
               </legend>
@@ -376,7 +413,10 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="theme-rounded-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.theme.rounded") }}
               </legend>
@@ -397,7 +437,10 @@
           </AdminPanel>
 
           <AdminPanel :title="$t('admin.settings.banner.title')">
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-enabled-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.banner.enabled") }}
               </legend>
@@ -415,7 +458,10 @@
                 <FormError :errors="formErrors.fieldError('banner_enabled')" />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-preview-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.banner.preview") }}
               </legend>
@@ -434,7 +480,7 @@
                 />
               </div>
             </fieldset>
-            <div class="grid grid-cols-12 gap-4">
+            <div class="grid grid-cols-12 gap-4" data-test="banner-title-field">
               <label
                 for="banner-title"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -451,7 +497,7 @@
                 <FormError :errors="formErrors.fieldError('banner_title')" />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div class="grid grid-cols-12 gap-4" data-test="banner-icon-field">
               <label
                 for="banner-icon"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -472,7 +518,10 @@
                 <FormError :errors="formErrors.fieldError('banner_icon')" />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-message-field"
+            >
               <label
                 for="banner-message"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -489,7 +538,7 @@
                 <FormError :errors="formErrors.fieldError('banner_message')" />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div class="grid grid-cols-12 gap-4" data-test="banner-link-field">
               <label
                 for="banner-link"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -506,7 +555,10 @@
                 <FormError :errors="formErrors.fieldError('banner_link')" />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-link-text-field"
+            >
               <label
                 for="banner-link-text"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -525,7 +577,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-link-style-field"
+            >
               <label
                 id="banner-link-style-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -534,6 +589,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.banner_link_style"
+                  data-test="banner-link-style-dropdown"
                   aria-labelledby="banner-link-style-label"
                   :options="linkBtnStyles"
                   :placeholder="$t('admin.settings.banner.select_link_style')"
@@ -541,13 +597,24 @@
                   option-value="value"
                   :invalid="formErrors.fieldInvalid('banner_link_style')"
                   :disabled="disabled"
+                  :pt="{
+                    listContainer: {
+                      'data-test': 'banner-link-style-dropdown-items',
+                    },
+                    option: {
+                      'data-test': 'banner-link-style-dropdown-option',
+                    },
+                  }"
                 />
                 <FormError
                   :errors="formErrors.fieldError('banner_link_style')"
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-link-target-field"
+            >
               <label
                 id="banner-link-target-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -556,6 +623,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.banner_link_target"
+                  data-test="banner-link-target-dropdown"
                   aria-labelledby="banner-link-target-label"
                   :options="linkTargets"
                   :placeholder="$t('admin.settings.banner.select_link_target')"
@@ -563,13 +631,24 @@
                   option-value="value"
                   :invalid="formErrors.fieldInvalid('banner_link_target')"
                   :disabled="disabled"
+                  :pt="{
+                    listContainer: {
+                      'data-test': 'banner-link-target-dropdown-items',
+                    },
+                    option: {
+                      'data-test': 'banner-link-target-dropdown-option',
+                    },
+                  }"
                 />
                 <FormError
                   :errors="formErrors.fieldError('banner_link_target')"
                 />
               </div>
             </div>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-color-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.banner.color") }}
               </legend>
@@ -593,7 +672,10 @@
                 <FormError :errors="formErrors.fieldError('banner_color')" />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-background-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.banner.background") }}
               </legend>
@@ -622,12 +704,18 @@
           </AdminPanel>
 
           <AdminPanel :title="$t('app.rooms')">
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="room-limit-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.room_limit.title") }}
               </legend>
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
-                <div class="flex flex-wrap gap-4">
+                <div
+                  class="flex flex-wrap gap-4"
+                  data-test="room-limit-mode-unlimited-field"
+                >
                   <div class="flex items-center">
                     <RadioButton
                       v-model="roomLimitMode"
@@ -646,7 +734,10 @@
                       $t("app.unlimited")
                     }}</label>
                   </div>
-                  <div class="flex items-center">
+                  <div
+                    class="flex items-center"
+                    data-test="room-limit-mode-custom-field"
+                  >
                     <RadioButton
                       v-model="roomLimitMode"
                       input-id="room-limit-mode-custom"
@@ -687,7 +778,10 @@
                 <FormError :errors="formErrors.fieldError('room_limit')" />
               </div>
             </fieldset>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="room-token-expiration-field"
+            >
               <label
                 id="room-token-expiration-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -696,6 +790,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.room_token_expiration"
+                  data-test="room-token-expiration-dropdown"
                   :options="timePeriods"
                   option-label="text"
                   option-value="value"
@@ -706,6 +801,12 @@
                     input: {
                       'aria-describedby': 'room-token-expiration-help',
                     },
+                    listContainer: {
+                      'data-test': 'room-token-expiration-dropdown-items',
+                    },
+                    option: {
+                      'data-test': 'room-token-expiration-dropdown-option',
+                    },
                   }"
                 />
                 <small id="room-token-expiration-help">{{
@@ -716,7 +817,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="room-auto-delete-deadline-period-field"
+            >
               <label
                 id="room-auto-delete-deadline-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -728,6 +832,7 @@
                 <Select
                   v-model="settings.room_auto_delete_deadline_period"
                   :options="roomDeleteDeadlineOptions"
+                  data-test="room-auto-delete-deadline-dropdown"
                   option-label="text"
                   option-value="value"
                   :invalid="
@@ -740,6 +845,12 @@
                       'aria-describedby':
                         'room-auto-delete-deadline-period-help',
                     },
+                    listContainer: {
+                      'data-test': 'room-auto-delete-deadline-dropdown-items',
+                    },
+                    option: {
+                      'data-test': 'room-auto-delete-deadline-dropdown-option',
+                    },
                   }"
                 />
                 <small id="room-auto-delete-deadline-period-help">{{
@@ -754,7 +865,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="room-auto-delete-inactive-period-field"
+            >
               <label
                 id="room-auto-delete-inactive-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -765,6 +879,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.room_auto_delete_inactive_period"
+                  data-test="room-auto-delete-inactive-dropdown"
                   :options="timePeriods"
                   option-label="text"
                   option-value="value"
@@ -778,6 +893,12 @@
                       'aria-describedby':
                         'room-auto-delete-inactive-period-help',
                     },
+                    listContainer: {
+                      'data-test': 'room-auto-delete-inactive-dropdown-items',
+                    },
+                    option: {
+                      'data-test': 'room-auto-delete-inactive-dropdown-option',
+                    },
                   }"
                 />
                 <small id="room-auto-delete-inactive-period-help">{{
@@ -792,7 +913,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="room-auto-delete-never-used-period-field"
+            >
               <label
                 id="room-auto-delete-never-used-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -803,6 +927,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.room_auto_delete_never_used_period"
+                  data-test="room-auto-delete-never-used-dropdown"
                   :options="timePeriods"
                   option-label="text"
                   option-value="value"
@@ -818,6 +943,13 @@
                       'aria-describedby':
                         'room-auto-delete-never-used-period-help',
                     },
+                    listContainer: {
+                      'data-test': 'room-auto-delete-never-used-dropdown-items',
+                    },
+                    option: {
+                      'data-test':
+                        'room-auto-delete-never-used-dropdown-option',
+                    },
                   }"
                 />
                 <small id="room-auto-delete-never-used-period-help">{{
@@ -832,7 +964,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="room-file-terms-of-use-field"
+            >
               <label
                 for="room-file-terms-of-use"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -859,7 +994,10 @@
           </AdminPanel>
 
           <AdminPanel :title="$t('app.users')">
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="password-change-allowed-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.password_change_allowed") }}
               </legend>
@@ -890,7 +1028,10 @@
           <AdminPanel
             :title="$t('admin.settings.recording_and_statistics_title')"
           >
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="statistics-servers-enabled-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.statistics.servers.enabled_title") }}
               </legend>
@@ -916,7 +1057,10 @@
                 />
               </div>
             </fieldset>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="statistics-servers-retention-period-field"
+            >
               <label
                 id="statistics-servers-retention-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -927,6 +1071,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.recording_server_usage_retention_period"
+                  data-test="statistics-servers-retention-period-dropdown"
                   :options="timePeriods"
                   option-label="text"
                   option-value="value"
@@ -937,6 +1082,16 @@
                   "
                   :disabled="disabled"
                   aria-labelledby="statistics-servers-retention-period-label"
+                  :pt="{
+                    listContainer: {
+                      'data-test':
+                        'statistics-servers-retention-period-dropdown-items',
+                    },
+                    option: {
+                      'data-test':
+                        'statistics-servers-retention-period-dropdown-option',
+                    },
+                  }"
                 />
                 <FormError
                   :errors="
@@ -947,7 +1102,10 @@
                 />
               </div>
             </div>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="statistics-meetings-enabled-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.statistics.meetings.enabled_title") }}
               </legend>
@@ -973,7 +1131,10 @@
                 />
               </div>
             </fieldset>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="statistics-meetings-retention-period-field"
+            >
               <label
                 id="statistics-meetings-retention-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -986,6 +1147,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.recording_meeting_usage_retention_period"
+                  data-test="statistics-meetings-retention-period-dropdown"
                   :options="timePeriods"
                   option-label="text"
                   option-value="value"
@@ -996,6 +1158,16 @@
                   "
                   :disabled="disabled"
                   aria-labelledby="statistics-meetings-retention-period-label"
+                  :pt="{
+                    listContainer: {
+                      'data-test':
+                        'statistics-meetings-retention-period-dropdown-items',
+                    },
+                    option: {
+                      'data-test':
+                        'statistics-meetings-retention-period-dropdown-option',
+                    },
+                  }"
                 />
                 <FormError
                   :errors="
@@ -1006,7 +1178,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="attendance-retention-period-field"
+            >
               <label
                 id="attendance-retention-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -1017,6 +1192,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.recording_attendance_retention_period"
+                  data-test="attendance-retention-period-dropdown"
                   :options="timePeriods"
                   option-label="text"
                   option-value="value"
@@ -1027,6 +1203,15 @@
                   "
                   :disabled="disabled"
                   aria-labelledby="attendance-retention-period-label"
+                  :pt="{
+                    listContainer: {
+                      'data-test': 'attendance-retention-period-dropdown-items',
+                    },
+                    option: {
+                      'data-test':
+                        'attendance-retention-period-dropdown-option',
+                    },
+                  }"
                 />
                 <FormError
                   :errors="
@@ -1037,7 +1222,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="recording-retention-period-field"
+            >
               <label
                 id="recording-retention-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -1048,6 +1236,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.recording_recording_retention_period"
+                  data-test="recording-retention-period-dropdown"
                   :options="recordingRetentionPeriods"
                   option-label="text"
                   option-value="value"
@@ -1058,6 +1247,14 @@
                   "
                   :disabled="disabled"
                   aria-labelledby="recording-retention-period-label"
+                  :pt="{
+                    listContainer: {
+                      'data-test': 'recording-retention-period-dropdown-items',
+                    },
+                    option: {
+                      'data-test': 'recording-retention-period-dropdown-option',
+                    },
+                  }"
                 />
                 <FormError
                   :errors="
@@ -1071,7 +1268,10 @@
           </AdminPanel>
 
           <AdminPanel :title="$t('admin.settings.bbb.title')">
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="bbb-logo-field"
+            >
               <legend
                 id="bbb-logo-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -1098,7 +1298,10 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="bbb-style-field"
+            >
               <legend
                 id="bbb-style-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -1120,7 +1323,10 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="default-presentation-field"
+            >
               <legend
                 id="default-presentation-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -1163,6 +1369,7 @@
             :loading="isBusy"
             icon="fa-solid fa-save"
             :label="$t('app.save')"
+            data-test="settings-save-button"
           />
         </div>
       </div>
diff --git a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
index 5e332d624..3f9aaad1b 100644
--- a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
@@ -53,11 +53,13 @@ describe("Admin room types edit", function () {
 
     cy.visit("/admin/room_types/3/edit");
 
+    cy.contains("admin.title");
+
     // Check loading
     cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
     cy.get('[data-test="room-types-edit-button"]').should("not.exist");
     cy.get('[data-test="room-types-delete-button"]').should("not.exist");
-    cy.get('[data-test="room-types-save-button"]').should("not.exist");
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
 
     cy.get('[data-test="overlay"]')
       .should("be.visible")
@@ -129,7 +131,7 @@ describe("Admin room types edit", function () {
           .and("not.be.disabled")
           .clear();
 
-        // Set custom color and check that color buttons is selected
+        // Set custom color and check that color button is selected
         cy.get("#custom-color").type("#06b6d4");
 
         for (let i = 0; i < 10; i++) {
@@ -138,7 +140,7 @@ describe("Admin room types edit", function () {
             .should(i === 2 ? "have.class" : "not.have.class", "selected");
         }
 
-        // Click on color button and check that color buttons is selected
+        // Click on color button and check that color button is selected
         cy.get('[data-test="color-button"]').eq(7).click();
 
         for (let i = 0; i < 10; i++) {
diff --git a/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js b/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
index 433854fd2..ee436c4b7 100644
--- a/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
@@ -27,6 +27,8 @@ describe("Admin room types index", function () {
     );
     cy.visit("/admin/room_types");
 
+    cy.contains("admin.title");
+
     // Test loading
     cy.get('[data-test="room-type-search"]').within(() => {
       cy.get("input").should("be.visible").and("be.disabled");
diff --git a/tests/Frontend/e2e/AdminRoomTypesView.cy.js b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
index e74d09bee..614ef57da 100644
--- a/tests/Frontend/e2e/AdminRoomTypesView.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
@@ -46,6 +46,8 @@ describe("Admin room types view", function () {
 
     cy.visit("/admin/room_types/3");
 
+    cy.contains("admin.title");
+
     // Check loading
     cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
     cy.get('[data-test="room-types-edit-button"]').should("not.exist");
diff --git a/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
index 8e8264c37..475de6ee2 100644
--- a/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
@@ -468,7 +468,7 @@ describe("Admin room types view room type actions", function () {
     cy.get("#custom-color").type("#ef4444");
 
     cy.get('[data-test="server-pool-dropdown"]').within(() => {
-      cy.get(".multiselect__tags").should("include.text", "Test").click();
+      cy.get(".multiselect__tags").should("include.text", "Test");
     });
     cy.get('[data-test="server-pool-dropdown"]').click();
     cy.get(".multiselect__content")
@@ -476,6 +476,7 @@ describe("Admin room types view room type actions", function () {
       .should("be.visible")
       .within(() => {
         cy.get(".multiselect__option").should("have.length", 4);
+
         cy.get(".multiselect__option").eq(1).click();
       });
 
diff --git a/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
index 85d18151b..0f0aab094 100644
--- a/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
@@ -70,11 +70,13 @@ describe("Admin server pools edit", function () {
 
     cy.visit("/admin/server_pools/1/edit");
 
+    cy.contains("admin.title");
+
     // Check loading
     cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
     cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
     cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
-    cy.get('[data-test="server-pools-save-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
 
     cy.get('[data-test="overlay"]')
       .should("be.visible")
diff --git a/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
index 1d06beb36..98fee9e25 100644
--- a/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
@@ -45,6 +45,8 @@ describe("Admin server pools index", function () {
 
     cy.visit("/admin/server_pools");
 
+    cy.contains("admin.title");
+
     // Test loading
     cy.get('[data-test="server-pool-search"]').within(() => {
       cy.get("input").should("be.visible").and("be.disabled");
diff --git a/tests/Frontend/e2e/AdminServerPoolsView.cy.js b/tests/Frontend/e2e/AdminServerPoolsView.cy.js
index b427bd15c..5bb31bb96 100644
--- a/tests/Frontend/e2e/AdminServerPoolsView.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsView.cy.js
@@ -50,6 +50,8 @@ describe("Admin server pools view", function () {
 
     cy.visit("/admin/server_pools/1");
 
+    cy.contains("admin.title");
+
     // Check loading
     cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
     cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
diff --git a/tests/Frontend/e2e/AdminServersEdit.cy.js b/tests/Frontend/e2e/AdminServersEdit.cy.js
index bd796bf8e..c849e4f05 100644
--- a/tests/Frontend/e2e/AdminServersEdit.cy.js
+++ b/tests/Frontend/e2e/AdminServersEdit.cy.js
@@ -56,11 +56,13 @@ describe("Admin servers edit", function () {
 
     cy.visit("/admin/servers/1/edit");
 
+    cy.contains("admin.title");
+
     // Check loading
     cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
     cy.get('[data-test="servers-edit-button"]').should("not.exist");
     cy.get('[data-test="servers-delete-button"]').should("not.exist");
-    cy.get('[data-test="servers-save-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("be.disabled");
 
     cy.get('[data-test="overlay"]')
       .should("be.visible")
diff --git a/tests/Frontend/e2e/AdminServersIndex.cy.js b/tests/Frontend/e2e/AdminServersIndex.cy.js
index c69373db3..f58fe14da 100644
--- a/tests/Frontend/e2e/AdminServersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminServersIndex.cy.js
@@ -48,6 +48,8 @@ describe("Admin servers index", function () {
 
     cy.visit("/admin/servers");
 
+    cy.contains("admin.title");
+
     // Test loading
     cy.get('[data-test="server-search"]')
       .eq(0)
diff --git a/tests/Frontend/e2e/AdminServersView.cy.js b/tests/Frontend/e2e/AdminServersView.cy.js
index 0ecb18b18..82bdd64fa 100644
--- a/tests/Frontend/e2e/AdminServersView.cy.js
+++ b/tests/Frontend/e2e/AdminServersView.cy.js
@@ -49,6 +49,8 @@ describe("Admin servers view", function () {
     );
     cy.visit("/admin/servers/1");
 
+    cy.contains("admin.title");
+
     // Check loading
     cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
     cy.get('[data-test="servers-edit-button"]').should("not.exist");
diff --git a/tests/Frontend/e2e/AdminSettingsEdit.cy.js b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
new file mode 100644
index 000000000..37c9d7470
--- /dev/null
+++ b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
@@ -0,0 +1,2417 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+import {
+  _arrayBufferToBase64,
+  parseFormData,
+} from "../support/utils/formData.js";
+
+describe("Admin settings with edit permission", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminSettingsRequest();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "settings.viewAny",
+        "settings.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("change application settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.application");
+
+    cy.get('[data-test="application-name-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.name.title")
+      .and("include.text", "admin.settings.name.description")
+      .within(() => {
+        cy.get("#application-name")
+          .should("have.value", "Test Application")
+          .clear();
+        cy.get("#application-name").type("PILOS test application");
+      });
+
+    cy.get('[ data-test="help-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.help_url.title")
+      .and("include.text", "admin.settings.help_url.description")
+      .within(() => {
+        cy.get("#help-url")
+          .should("have.value", "")
+          .type("http://www.pilos.com/help");
+      });
+
+    cy.get('[data-test="legal-notice-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.legal_notice_url.title")
+      .and("include.text", "admin.settings.legal_notice_url.description")
+      .within(() => {
+        cy.get("#legal-notice-url")
+          .should("have.value", "")
+          .type("http://www.pilos.com/legal_notice");
+      });
+
+    cy.get('[data-test="privacy-policy-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.privacy_policy_url.title")
+      .and("include.text", "admin.settings.privacy_policy_url.description")
+      .within(() => {
+        cy.get("#privacy-policy-url")
+          .should("have.value", "")
+          .type("http://www.pilos.com/privacy_policy");
+      });
+
+    cy.get('[data-test="pagination-page-size-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.pagination_page_size.title")
+      .and("include.text", "admin.settings.pagination_page_size.description")
+      .within(() => {
+        cy.get("#pagination-page-size").should("have.value", "5").clear();
+        cy.get("#pagination-page-size").type("3");
+      });
+
+    cy.get('[data-test="toast-lifetime-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.toast_lifetime.title")
+      .and("include.text", "admin.settings.toast_lifetime.description")
+      .within(() => {
+        cy.get('[data-test="toast-lifetime-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#toast-lifetime-mode-unlimited")
+              .should("be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="toast-lifetime-custom-input"]').should("not.exist");
+
+        cy.get('[data-test="toast-lifetime-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.settings.toast_lifetime.custom")
+          .within(() => {
+            cy.get("#toast-lifetime-mode-custom")
+              .should("not.be.checked")
+              .and("not.be.disabled")
+              .click();
+          });
+
+        cy.get('[data-test="toast-lifetime-custom-input"]')
+          .should("be.visible")
+          .and("have.value", "5")
+          .clear();
+        cy.get('[data-test="toast-lifetime-custom-input"]').type("10");
+      });
+
+    // Check timezone setting and change it
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="default-timezone-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.default_timezone")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown"]')
+          .should("have.text", "UTC")
+          .click();
+      });
+
+    cy.get('[data-test="timezone-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown-option"]').should(
+          "have.length",
+          4,
+        );
+
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "America/New_York");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "Australia/Sydney");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Europe/Berlin");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "UTC");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(3)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="timezone-dropdown-option"]').eq(2).click();
+      });
+
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+
+    cy.get('[data-test="no-welcome-page-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.no_welcome_page")
+      .within(() => {
+        cy.get("#no-welcome-page").should("be.checked").click();
+      });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.general_name = "PILOS test application";
+      settings.data.general_help_url = "http://www.pilos.com/help";
+      settings.data.general_legal_notice_url =
+        "http://www.pilos.com/legal_notice";
+      settings.data.general_privacy_policy_url =
+        "http://www.pilos.com/privacy_policy";
+      settings.data.general_pagination_page_size = 3;
+      settings.data.general_toast_lifetime = 10;
+      settings.data.general_default_timezone = "Europe/Berlin";
+      settings.data.general_no_welcome_page = false;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("general_name")).to.equal("PILOS test application");
+      expect(formData.get("general_help_url")).to.equal(
+        "http://www.pilos.com/help",
+      );
+      expect(formData.get("general_legal_notice_url")).to.equal(
+        "http://www.pilos.com/legal_notice",
+      );
+      expect(formData.get("general_privacy_policy_url")).to.equal(
+        "http://www.pilos.com/privacy_policy",
+      );
+      expect(formData.get("general_pagination_page_size")).to.equal("3");
+      expect(formData.get("general_toast_lifetime")).to.equal("10");
+      expect(formData.get("general_default_timezone")).to.equal(
+        "Europe/Berlin",
+      );
+      expect(formData.get("general_no_welcome_page")).to.equal("0");
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get("#application-name").should("have.value", "PILOS test application");
+    cy.get("#help-url").should("have.value", "http://www.pilos.com/help");
+    cy.get("#legal-notice-url").should(
+      "have.value",
+      "http://www.pilos.com/legal_notice",
+    );
+    cy.get("#privacy-policy-url").should(
+      "have.value",
+      "http://www.pilos.com/privacy_policy",
+    );
+    cy.get("#pagination-page-size").should("have.value", "3");
+    cy.get("#toast-lifetime-mode-unlimited")
+      .should("not.be.checked")
+      .and("not.be.disabled");
+    cy.get("#toast-lifetime-mode-custom")
+      .should("be.checked")
+      .and("not.be.disabled");
+    cy.get('[data-test="toast-lifetime-custom-input"]').should(
+      "have.value",
+      "10",
+    );
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+    cy.get("#no-welcome-page").should("not.be.checked");
+
+    // Change settings again (Clear url fields and change toast lifetime to unlimited)
+    cy.get("#help-url").clear();
+    cy.get("#legal-notice-url").clear();
+    cy.get("#privacy-policy-url").clear();
+
+    cy.get("#toast-lifetime-mode-unlimited").click();
+    cy.get('[data-test="toast-lifetime-custom-input"]').should("not.exist");
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.general_name = "PILOS test application";
+      settings.data.general_pagination_page_size = 3;
+      settings.data.general_toast_lifetime = 0;
+      settings.data.general_default_timezone = "Europe/Berlin";
+      settings.data.general_no_welcome_page = false;
+
+      cy.intercept("POST", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("include.text", "app.save")
+      .click();
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("general_name")).to.equal("PILOS test application");
+      expect(formData.get("general_help_url")).to.equal("");
+      expect(formData.get("general_legal_notice_url")).to.equal("");
+      expect(formData.get("general_privacy_policy_url")).to.equal("");
+      expect(formData.get("general_pagination_page_size")).to.equal("3");
+      expect(formData.get("general_toast_lifetime")).to.equal("0");
+      expect(formData.get("general_default_timezone")).to.equal(
+        "Europe/Berlin",
+      );
+      expect(formData.get("general_no_welcome_page")).to.equal("0");
+    });
+
+    // Check that settings are shown correctly
+    cy.get("#application-name").should("have.value", "PILOS test application");
+    cy.get("#help-url").should("have.value", "");
+    cy.get("#legal-notice-url").should("have.value", "");
+    cy.get("#privacy-policy-url").should("have.value", "");
+    cy.get("#pagination-page-size").should("have.value", "3");
+    cy.get("#toast-lifetime-mode-unlimited")
+      .should("be.checked")
+      .and("not.be.disabled");
+    cy.get("#toast-lifetime-mode-custom")
+      .should("not.be.checked")
+      .and("not.be.disabled");
+    cy.get('[data-test="toast-lifetime-custom-input"]').should("not.exist");
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+    cy.get("#no-welcome-page").should("not.be.checked");
+  });
+
+  it("change theme settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.theme.title");
+
+    cy.get('[data-test="favicon-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.favicon.title")
+      .within(() => {
+        cy.checkSettingsImageSelector(
+          "/images/favicon.ico",
+          "favicon.ico",
+          false,
+        );
+      });
+
+    cy.get('[data-test="favicon-dark-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.favicon_dark.title")
+      .within(() => {
+        cy.checkSettingsImageSelector(
+          "/images/favicon-dark.ico",
+          "favicon-dark.ico",
+          false,
+        );
+      });
+
+    cy.get('[data-test="logo-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo.title")
+      .within(() => {
+        cy.checkSettingsImageSelector("/images/logo.svg", "logo.svg", false);
+      });
+
+    cy.get('[data-test="logo-dark-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo_dark.title")
+      .within(() => {
+        cy.checkSettingsImageSelector(
+          "/images/logo-dark.svg",
+          "logo-dark.svg",
+          false,
+        );
+      });
+
+    cy.get('[data-test="primary-color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.theme.primary_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "not.have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and(i === 4 ? "have.class" : "not.have.class", "selected");
+        }
+
+        // Clear custom color and check that color buttons are not selected
+        cy.get("#theme-primary-color")
+          .should("have.value", "#22c55e")
+          .and("not.be.disabled")
+          .clear();
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("not.have.class", "selected");
+        }
+
+        // Set custom color and check that color buttons is selected
+        cy.get("#theme-primary-color").type("#14b8a6");
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 3 ? "have.class" : "not.have.class", "selected");
+        }
+      });
+
+    cy.get('[data-test="theme-rounded-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.theme.rounded")
+      .within(() => {
+        cy.get("#theme-rounded").should("be.checked").click();
+      });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.theme_favicon = "/images/favicon2.ico";
+      settings.data.theme_favicon_dark = "/images/favicon-dark2.ico";
+      settings.data.theme_logo = "/images/logo2.svg";
+      settings.data.theme_logo_dark = "/images/logo-dark2.svg";
+      settings.data.theme_primary_color = "#14b8a6";
+      settings.data.theme_rounded = false;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      const uploadedFavicon = formData.get("theme_favicon_file");
+
+      //console.log(uploadedFavicon);
+
+      expect(uploadedFavicon.name).to.eql("favicon.ico");
+      expect(uploadedFavicon.type).to.eql("image/vnd.microsoft.icon");
+      cy.fixture("files/favicon.ico", "base64").then((content) => {
+        uploadedFavicon.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(base64).to.eql(content);
+        });
+
+        // ToDo Delete again (Just some testing)
+        // cy.wrap(null).then(() => {
+        //   return new Cypress.Promise((resolve, reject) => {
+        //     const reader = new FileReader();
+        //     reader.readAsDataURL(uploadedFavicon);
+        //     reader.onloadend = function () {
+        //       const base64data = reader.result;
+        //       try {
+        //         expect(base64data).to.eql(
+        //           "data:image/vnd.microsoft.icon;base64," + content,
+        //         );
+        //         resolve();
+        //       } catch (error) {
+        //         reject(error);
+        //       }
+        //     };
+        //   });
+        // });
+      });
+
+      const uploadedFaviconDark = formData.get("theme_favicon_dark_file");
+      expect(uploadedFaviconDark.name).to.eql("favicon-dark.ico");
+      expect(uploadedFaviconDark.type).to.eql("image/vnd.microsoft.icon");
+      cy.fixture("files/favicon-dark.ico", "base64").then((content) => {
+        uploadedFaviconDark.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+
+      const uploadedLogo = formData.get("theme_logo_file");
+      expect(uploadedLogo.name).to.eql("logo.svg");
+      expect(uploadedLogo.type).to.eql("image/svg+xml");
+      cy.fixture("files/logo.svg", "base64").then((content) => {
+        uploadedLogo.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+
+      const uploadedLogoDark = formData.get("theme_logo_dark_file");
+      expect(uploadedLogoDark.name).to.eql("logo-dark.svg");
+      expect(uploadedLogoDark.type).to.eql("image/svg+xml");
+      cy.fixture("files/logo-dark.svg", "base64").then((content) => {
+        uploadedLogoDark.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+
+      expect(formData.get("theme_primary_color")).to.equal("#14b8a6");
+      expect(formData.get("theme_rounded")).to.equal("0");
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get('[data-test="favicon-field"]')
+      .find('[data-test="settings-image-preview"]')
+      .should("have.attr", "src")
+      .and("include", "/images/favicon2.ico");
+    cy.get('[data-test="favicon-dark-field"]')
+      .find('[data-test="settings-image-preview"]')
+      .should("have.attr", "src")
+      .and("include", "/images/favicon-dark2.ico");
+    cy.get('[data-test="logo-field"]')
+      .find('[data-test="settings-image-preview"]')
+      .should("have.attr", "src")
+      .and("include", "/images/logo2.svg");
+    cy.get('[data-test="logo-dark-field"]')
+      .find('[data-test="settings-image-preview"]')
+      .should("have.attr", "src")
+      .and("include", "/images/logo-dark2.svg");
+    cy.get('[data-test="primary-color-field"]').within(() => {
+      for (let i = 0; i < 10; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should(i === 3 ? "have.class" : "not.have.class", "selected");
+      }
+
+      cy.get("#theme-primary-color").should("have.value", "#14b8a6");
+    });
+    cy.get("#theme-rounded").should("not.be.checked");
+  });
+
+  it("change banner settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.banner.title");
+
+    cy.get('[data-test="banner-enabled-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.enabled")
+      .and("include.text", "app.enable")
+      .within(() => {
+        cy.get("#banner-enabled").should("not.be.checked").click();
+      });
+
+    cy.get('[data-test="banner-preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.preview")
+      .within(() => {
+        cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+        cy.get('[data-test="app-banner"]').within(() => {
+          cy.get('[data-test="banner-title"]').should("not.exist");
+          cy.get('[data-test="banner-icon"]').should("not.exist");
+          cy.get('[data-test="banner-message"]').should("have.text", "");
+          cy.get('[data-test="banner-link-button"]').should("not.exist");
+        });
+      });
+
+    cy.get('[data-test="banner-title-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.banner_title")
+      .within(() => {
+        cy.get("#banner-title").should("have.value", "").type("Banner title");
+      });
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]').should("not.exist");
+      cy.get('[data-test="banner-message"]').should("have.text", "");
+      cy.get('[data-test="banner-link-button"]').should("not.exist");
+    });
+
+    cy.get('[data-test="banner-icon-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.icon")
+      .and("include.text", "admin.settings.banner.icon_description")
+      .within(() => {
+        cy.get("#banner-icon")
+          .should("have.value", "")
+          .type("fa-solid fa-door-open");
+      });
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]').should("have.text", "");
+      cy.get('[data-test="banner-link-button"]').should("not.exist");
+    });
+
+    cy.get('[data-test="banner-message-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.message")
+      .within(() => {
+        cy.get("#banner-message")
+          .should("have.value", "")
+          .type("Banner text message");
+      });
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]').should("not.exist");
+    });
+
+    cy.get('[data-test="banner-link-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link")
+      .within(() => {
+        cy.get("#banner-link").should("have.value", "").type("/rooms");
+      });
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_blank")
+        .and("have.text", "/rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "primary")
+        .and("not.have.class", "p-0 underline")
+        .and("not.have.attr", "style");
+    });
+
+    cy.get('[data-test="banner-link-text-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_text")
+      .within(() => {
+        cy.get("#banner-link-text").should("have.value", "").type("Rooms");
+      });
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_blank")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "primary")
+        .and("not.have.class", "p-0 underline")
+        .and("not.have.attr", "style");
+    });
+
+    cy.get('[data-test="banner-link-style-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="banner-link-style-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_style")
+      .within(() => {
+        cy.get('[data-test="banner-link-style-dropdown"]')
+          .should("have.text", "app.button_styles.primary")
+          .click();
+      });
+
+    cy.get('[data-test="banner-link-style-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="banner-link-style-dropdown-option"]').should(
+          "have.length",
+          3,
+        );
+
+        cy.get('[data-test="banner-link-style-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "app.button_styles.primary")
+          .should("have.attr", "aria-selected", "true");
+        cy.get('[data-test="banner-link-style-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "app.button_styles.secondary");
+        cy.get('[data-test="banner-link-style-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "app.button_styles.link");
+
+        cy.get('[data-test="banner-link-style-dropdown-option"]').eq(2).click();
+      });
+
+    cy.get('[data-test="banner-link-style-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="banner-link-style-dropdown"]').should(
+      "have.text",
+      "app.button_styles.link",
+    );
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_blank")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("not.have.attr", "style");
+    });
+
+    cy.get('[data-test="banner-link-target-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="banner-link-target-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_target")
+      .within(() => {
+        cy.get('[data-test="banner-link-target-dropdown"]')
+          .should("have.text", "app.link_targets.blank")
+          .click();
+      });
+
+    cy.get('[data-test="banner-link-target-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="banner-link-target-dropdown-option"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="banner-link-target-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "app.link_targets.blank")
+          .should("have.attr", "aria-selected", "true");
+        cy.get('[data-test="banner-link-target-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "app.link_targets.self");
+
+        cy.get('[data-test="banner-link-target-dropdown-option"]')
+          .eq(1)
+          .click();
+      });
+
+    cy.get('[data-test="banner-link-target-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="banner-link-target-dropdown"]').should(
+      "have.text",
+      "app.link_targets.self",
+    );
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("not.have.attr", "style");
+    });
+
+    cy.get('[data-test="banner-color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.color")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 2);
+
+        for (let i = 0; i < 2; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "not.have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and("not.have.class", "selected");
+        }
+
+        // Clear custom color and check that color buttons are not selected
+        cy.get("#banner-color")
+          .should("have.value", "")
+          .and("not.be.disabled")
+          .type("#6366f1");
+
+        for (let i = 0; i < 2; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("not.have.class", "selected");
+        }
+
+        // Set custom color and check that color buttons is selected
+        cy.get("#banner-color").clear();
+        cy.get("#banner-color").type("#FFFFFF");
+
+        for (let i = 0; i < 2; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 0 ? "have.class" : "not.have.class", "selected");
+        }
+      });
+
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("not.include", "background-color");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("have.attr", "style")
+        .and("include", "color: rgb(255, 255, 255)");
+    });
+
+    cy.get('[data-test="banner-background-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.background")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "not.have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and("not.have.class", "selected");
+        }
+
+        // Clear custom color and check that color buttons are not selected
+        cy.get("#banner-background")
+          .should("have.value", "")
+          .and("not.be.disabled")
+          .type("#FFFFFF");
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("not.have.class", "selected");
+        }
+
+        // Set custom color and check that color buttons is selected
+        cy.get("#banner-background").clear();
+        cy.get("#banner-background").type("#6366f1");
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 0 ? "have.class" : "not.have.class", "selected");
+        }
+
+        cy.get('[data-test="color-button"]').eq(7).click();
+
+        cy.get("#banner-background").should("have.value", "#ef4444");
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 7 ? "have.class" : "not.have.class", "selected");
+        }
+      });
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("include", "background-color: rgb(239, 68, 68);");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("have.attr", "style")
+        .and("include", "color: rgb(255, 255, 255)");
+    });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.banner_enabled = true;
+      settings.data.banner_title = "Banner title";
+      settings.data.banner_icon = "fa-solid fa-door-open";
+      settings.data.banner_message = "Banner text message";
+      settings.data.banner_link = "/rooms";
+      settings.data.banner_link_text = "Rooms";
+      settings.data.banner_link_style = "link";
+      settings.data.banner_link_target = "self";
+      settings.data.banner_color = "#FFFFFF";
+      settings.data.banner_background = "#ef4444";
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("banner_enabled")).to.equal("1");
+      expect(formData.get("banner_title")).to.equal("Banner title");
+      expect(formData.get("banner_icon")).to.equal("fa-solid fa-door-open");
+      expect(formData.get("banner_message")).to.equal("Banner text message");
+      expect(formData.get("banner_link")).to.equal("/rooms");
+      expect(formData.get("banner_link_text")).to.equal("Rooms");
+      expect(formData.get("banner_link_style")).to.equal("link");
+      expect(formData.get("banner_link_target")).to.equal("self");
+      expect(formData.get("banner_color")).to.equal("#FFFFFF");
+      expect(formData.get("banner_background")).to.equal("#ef4444");
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get("#banner-enabled").should("be.checked");
+
+    // Check that banner preview is shown correctly
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("include", "background-color: rgb(239, 68, 68);");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("have.attr", "style")
+        .and("include", "color: rgb(255, 255, 255)");
+    });
+
+    cy.get("#banner-title").should("have.value", "Banner title");
+    cy.get("#banner-icon").should("have.value", "fa-solid fa-door-open");
+    cy.get("#banner-message").should("have.value", "Banner text message");
+    cy.get("#banner-link").should("have.value", "/rooms");
+    cy.get("#banner-link-text").should("have.value", "Rooms");
+    cy.get('[data-test="banner-link-style-dropdown"]').should(
+      "have.text",
+      "app.button_styles.link",
+    );
+    cy.get('[data-test="banner-link-target-dropdown"]').should(
+      "have.text",
+      "app.link_targets.self",
+    );
+    cy.get('[data-test="banner-color-field"]').within(() => {
+      cy.get("#banner-color").should("have.value", "#FFFFFF");
+
+      for (let i = 0; i < 2; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should(i === 0 ? "have.class" : "not.have.class", "selected");
+      }
+    });
+
+    cy.get('[data-test="banner-background-field"]').within(() => {
+      cy.get("#banner-background").should("have.value", "#ef4444");
+
+      for (let i = 0; i < 10; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should(i === 7 ? "have.class" : "not.have.class", "selected");
+      }
+    });
+
+    // Change settings again (Clear inputs and disable banner)
+    cy.get("#banner-enabled").click();
+
+    // Check that banner preview is still shown correctly
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("include", "background-color: rgb(239, 68, 68);");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("have.attr", "style")
+        .and("include", "color: rgb(255, 255, 255)");
+    });
+
+    cy.get("#banner-title").clear();
+    cy.get("#banner-icon").clear();
+    cy.get("#banner-message").clear();
+    cy.get("#banner-link").clear();
+    cy.get("#banner-link-text").clear();
+    cy.get("#banner-color").clear();
+    cy.get("#banner-background").clear();
+
+    // Check that banner preview is reset
+    cy.get('[data-test="banner-preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.preview")
+      .within(() => {
+        cy.get('[data-test="app-banner"]')
+          .should("have.attr", "style")
+          .and("not.include", "background-color")
+          .and("not.include", "color");
+        cy.get('[data-test="app-banner"]').within(() => {
+          cy.get('[data-test="banner-title"]').should("not.exist");
+          cy.get('[data-test="banner-icon"]').should("not.exist");
+          cy.get('[data-test="banner-message"]').should("have.text", "");
+          cy.get('[data-test="banner-link-button"]').should("not.exist");
+        });
+      });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.banner_link_style = "link";
+      settings.data.banner_link_target = "self";
+
+      cy.intercept("POST", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("include.text", "app.save")
+      .click();
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("banner_enabled")).to.equal("0");
+      expect(formData.get("banner_title")).to.equal("");
+      expect(formData.get("banner_icon")).to.equal("");
+      expect(formData.get("banner_message")).to.equal("");
+      expect(formData.get("banner_link")).to.equal("");
+      expect(formData.get("banner_link_text")).to.equal("");
+      expect(formData.get("banner_link_style")).to.equal("link");
+      expect(formData.get("banner_link_target")).to.equal("self");
+      expect(formData.get("banner_color")).to.equal("");
+      expect(formData.get("banner_background")).to.equal("");
+    });
+
+    // Check that settings are shown correctly
+    cy.get("#banner-enabled").should("not.be.checked");
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("not.include", "background-color")
+      .and("not.include", "color");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]').should("not.exist");
+      cy.get('[data-test="banner-icon"]').should("not.exist");
+      cy.get('[data-test="banner-message"]').should("have.text", "");
+      cy.get('[data-test="banner-link-button"]').should("not.exist");
+    });
+
+    cy.get("#banner-title").should("have.value", "");
+    cy.get("#banner-icon").should("have.value", "");
+    cy.get("#banner-message").should("have.value", "");
+    cy.get("#banner-link").should("have.value", "");
+    cy.get("#banner-link-text").should("have.value", "");
+    cy.get('[data-test="banner-link-style-dropdown"]').should(
+      "have.text",
+      "app.button_styles.link",
+    );
+    cy.get('[data-test="banner-link-target-dropdown"]').should(
+      "have.text",
+      "app.link_targets.self",
+    );
+    cy.get('[data-test="banner-color-field"]').within(() => {
+      cy.get("#banner-color").should("have.value", "");
+
+      for (let i = 0; i < 2; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should("not.have.class", "selected");
+      }
+    });
+
+    cy.get('[data-test="banner-background-field"]').within(() => {
+      cy.get("#banner-background").should("have.value", "");
+
+      for (let i = 0; i < 10; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should("not.have.class", "selected");
+      }
+    });
+  });
+
+  it("change room settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("app.rooms");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_limit.title")
+      .and("include.text", "admin.settings.room_limit.description")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#room-limit-mode-unlimited")
+              .should("be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get("#room-limit-custom").should("not.exist");
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#room-limit-mode-custom").should("not.be.checked").click();
+          });
+
+        cy.get("#room-limit-custom")
+          .should("be.visible")
+          .and("have.value", "0")
+          .clear();
+        cy.get("#room-limit-custom").type("10");
+      });
+
+    // Room token expiration
+    cy.get('[data-test="room-token-expiration-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-token-expiration-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_token_expiration.title")
+      .and("include.text", "admin.settings.room_token_expiration.description")
+      .within(() => {
+        cy.get('[data-test="room-token-expiration-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="room-token-expiration-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="room-token-expiration-dropdown-option"]').should(
+          "have.length",
+          8,
+        );
+
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(1)
+          .click();
+      });
+
+    cy.get('[data-test="room-token-expiration-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-token-expiration-dropdown"]').should(
+      "have.text",
+      "admin.settings.two_weeks",
+    );
+
+    // Auto delete deadline
+    cy.get('[data-test="room-auto-delete-deadline-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-auto-delete-deadline-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.deadline_period.title",
+      )
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.deadline_period.description",
+      )
+      .within(() => {
+        cy.get('[data-test="room-auto-delete-deadline-dropdown"]')
+          .should("have.text", "admin.settings.two_weeks")
+          .click();
+      });
+
+    cy.get('[data-test="room-auto-delete-deadline-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="room-auto-delete-deadline-dropdown-option"]',
+        ).should("have.length", 3);
+
+        cy.get('[data-test="room-auto-delete-deadline-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get('[data-test="room-auto-delete-deadline-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get('[data-test="room-auto-delete-deadline-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get('[data-test="room-auto-delete-deadline-dropdown-option"]')
+          .eq(1)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="room-auto-delete-deadline-dropdown-option"]')
+          .eq(0)
+          .click();
+      });
+
+    cy.get('[data-test="room-auto-delete-deadline-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-auto-delete-deadline-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_week",
+    );
+
+    // Auto delete inactive period
+    cy.get('[data-test="room-auto-delete-inactive-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-auto-delete-inactive-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.inactive_period.title",
+      )
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.inactive_period.description",
+      )
+      .within(() => {
+        cy.get('[data-test="room-auto-delete-inactive-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="room-auto-delete-inactive-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="room-auto-delete-inactive-dropdown-option"]',
+        ).should("have.length", 8);
+
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(2)
+          .click();
+      });
+
+    cy.get('[data-test="room-auto-delete-inactive-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-auto-delete-inactive-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_month",
+    );
+
+    // Auto delete never used period
+    cy.get('[data-test="room-auto-delete-never-used-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-auto-delete-never-used-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.never_used_period.title",
+      )
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.never_used_period.description",
+      )
+      .within(() => {
+        cy.get('[data-test="room-auto-delete-never-used-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="room-auto-delete-never-used-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="room-auto-delete-never-used-dropdown-option"]',
+        ).should("have.length", 8);
+
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(6)
+          .click();
+      });
+
+    cy.get('[data-test="room-auto-delete-never-used-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-auto-delete-never-used-dropdown"]').should(
+      "have.text",
+      "admin.settings.two_years",
+    );
+
+    cy.get('[data-test="room-file-terms-of-use-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_file_terms_of_use.title")
+      .and("include.text", "admin.settings.room_file_terms_of_use.description")
+      .within(() => {
+        cy.get("#room-file-terms-of-use")
+          .should("be.visible")
+          .and("have.value", "Room file terms of use")
+          .clear();
+        cy.get("#room-file-terms-of-use").type("New room file terms of use");
+      });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.room_limit = 10;
+      settings.data.room_token_expiration = 14;
+      settings.data.room_auto_delete_deadline_period = 7;
+      settings.data.room_auto_delete_inactive_period = 30;
+      settings.data.room_auto_delete_never_used_period = 730;
+      settings.data.room_file_terms_of_use = "New room file terms of use";
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("room_limit")).to.equal("10");
+      expect(formData.get("room_token_expiration")).to.equal("14");
+      expect(formData.get("room_auto_delete_deadline_period")).to.equal("7");
+      expect(formData.get("room_auto_delete_inactive_period")).to.equal("30");
+      expect(formData.get("room_auto_delete_never_used_period")).to.equal(
+        "730",
+      );
+      expect(formData.get("room_file_terms_of_use")).to.equal(
+        "New room file terms of use",
+      );
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get("#room-limit-mode-unlimited")
+      .should("not.be.checked")
+      .and("not.be.disabled");
+    cy.get("#room-limit-mode-custom")
+      .should("be.checked")
+      .and("not.be.disabled");
+    cy.get("#room-limit-custom").should("have.value", "10");
+    cy.get('[data-test="room-token-expiration-dropdown"]').should(
+      "have.text",
+      "admin.settings.two_weeks",
+    );
+    cy.get('[data-test="room-auto-delete-deadline-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_week",
+    );
+    cy.get('[data-test="room-auto-delete-inactive-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_month",
+    );
+    cy.get('[data-test="room-auto-delete-never-used-dropdown"]').should(
+      "have.text",
+      "admin.settings.two_years",
+    );
+    cy.get("#room-file-terms-of-use").should(
+      "have.value",
+      "New room file terms of use",
+    );
+
+    // Change settings again (Clear inputs and change room limit to unlimited)
+    cy.get("#room-limit-mode-unlimited").click();
+    cy.get("#room-limit-custom").should("not.exist");
+
+    cy.get("#room-file-terms-of-use").clear();
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.room_limit = -1;
+      settings.data.room_token_expiration = 14;
+      settings.data.room_auto_delete_deadline_period = 7;
+      settings.data.room_auto_delete_inactive_period = 30;
+      settings.data.room_auto_delete_never_used_period = 730;
+      settings.data.room_file_terms_of_use = "";
+
+      cy.intercept("POST", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("include.text", "app.save")
+      .click();
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("room_limit")).to.equal("-1");
+      expect(formData.get("room_token_expiration")).to.equal("14");
+      expect(formData.get("room_auto_delete_deadline_period")).to.equal("7");
+      expect(formData.get("room_auto_delete_inactive_period")).to.equal("30");
+      expect(formData.get("room_auto_delete_never_used_period")).to.equal(
+        "730",
+      );
+      expect(formData.get("room_file_terms_of_use")).to.equal("");
+    });
+
+    // Check that settings are shown correctly
+    cy.get("#room-limit-mode-unlimited")
+      .should("be.checked")
+      .and("not.be.disabled");
+    cy.get("#room-limit-mode-custom")
+      .should("not.be.checked")
+      .and("not.be.disabled");
+
+    cy.get("#room-limit-custom").should("not.exist");
+    cy.get('[data-test="room-token-expiration-dropdown"]').should(
+      "have.text",
+      "admin.settings.two_weeks",
+    );
+    cy.get('[data-test="room-auto-delete-deadline-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_week",
+    );
+    cy.get('[data-test="room-auto-delete-inactive-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_month",
+    );
+    cy.get('[data-test="room-auto-delete-never-used-dropdown"]').should(
+      "have.text",
+      "admin.settings.two_years",
+    );
+    cy.get("#room-file-terms-of-use").should("have.value", "");
+  });
+
+  it("change user settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("app.users");
+
+    cy.get('[data-test="password-change-allowed-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.password_change_allowed")
+      .within(() => {
+        cy.get("#password-change-allowed").should("be.checked").click();
+      });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.user_password_change_allowed = false;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("user_password_change_allowed")).to.equal("0");
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get("#password-change-allowed").should("not.be.checked");
+  });
+
+  it("change recording and statistics settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.recording_and_statistics_title");
+
+    cy.get('[data-test="statistics-servers-enabled-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.statistics.servers.enabled_title")
+      .and("include.text", "app.enable")
+      .within(() => {
+        cy.get("#statistics-servers-enabled").should("be.checked").click();
+      });
+
+    // Statistics servers retention period
+    cy.get(
+      '[data-test="statistics-servers-retention-period-dropdown-items"]',
+    ).should("not.exist");
+    cy.get('[data-test="statistics-servers-retention-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.statistics.servers.retention_period_title",
+      )
+      .within(() => {
+        cy.get('[data-test="statistics-servers-retention-period-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="statistics-servers-retention-period-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        ).should("have.length", 8);
+
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(3)
+          .click();
+      });
+
+    cy.get(
+      '[data-test="statistics-servers-retention-period-dropdown-items"]',
+    ).should("not.exist");
+    cy.get('[data-test="statistics-servers-retention-period-dropdown"]').should(
+      "have.text",
+      "admin.settings.three_month",
+    );
+
+    // Statistics meetings enabled
+    cy.get("[data-test=statistics-meetings-enabled-field]")
+      .should("be.visible")
+      .and("include.text", "admin.settings.statistics.meetings.enabled_title")
+      .within(() => {
+        cy.get("#statistics-meetings-enabled").should("be.checked").click();
+      });
+
+    // Statistics meetings retention period
+    cy.get(
+      '[data-test="statistics-meetings-retention-period-dropdown-items"]',
+    ).should("not.exist");
+    cy.get('[data-test="statistics-meetings-retention-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.statistics.meetings.retention_period_title",
+      )
+      .within(() => {
+        cy.get('[data-test="statistics-meetings-retention-period-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="statistics-meetings-retention-period-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        ).should("have.length", 8);
+
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(4)
+          .click();
+      });
+
+    cy.get(
+      '[data-test="statistics-meetings-retention-period-dropdown-items"]',
+    ).should("not.exist");
+    cy.get(
+      '[data-test="statistics-meetings-retention-period-dropdown"]',
+    ).should("have.text", "admin.settings.six_month");
+
+    // Attendance retention period
+    cy.get('[data-test="attendance-retention-period-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="attendance-retention-period-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.attendance.retention_period_title")
+      .within(() => {
+        cy.get('[data-test="attendance-retention-period-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="attendance-retention-period-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="attendance-retention-period-dropdown-option"]',
+        ).should("have.length", 8);
+
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(5)
+          .click();
+      });
+
+    cy.get('[data-test="attendance-retention-period-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="attendance-retention-period-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_year",
+    );
+
+    // Recording retention period
+    cy.get('[data-test="recording-retention-period-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="recording-retention-period-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.recording.retention_period_title")
+      .within(() => {
+        cy.get('[data-test="recording-retention-period-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="recording-retention-period-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="recording-retention-period-dropdown-option"]',
+        ).should("have.length", 8);
+
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(0)
+          .click();
+      });
+
+    cy.get('[data-test="recording-retention-period-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="recording-retention-period-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_week",
+    );
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.recording_server_usage_enabled = false;
+      settings.data.recording_server_usage_retention_period = 90;
+      settings.data.recording_meeting_usage_enabled = false;
+      settings.data.recording_meeting_usage_retention_period = 180;
+      settings.data.recording_attendance_retention_period = 365;
+      settings.data.recording_recording_retention_period = 7;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("recording_server_usage_enabled")).to.equal("0");
+      expect(formData.get("recording_server_usage_retention_period")).to.equal(
+        "90",
+      );
+      expect(formData.get("recording_meeting_usage_enabled")).to.equal("0");
+      expect(formData.get("recording_meeting_usage_retention_period")).to.equal(
+        "180",
+      );
+      expect(formData.get("recording_attendance_retention_period")).to.equal(
+        "365",
+      );
+      expect(formData.get("recording_recording_retention_period")).to.equal(
+        "7",
+      );
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get("#statistics-servers-enabled").should("not.be.checked");
+    cy.get('[data-test="statistics-servers-retention-period-dropdown"]').should(
+      "have.text",
+      "admin.settings.three_month",
+    );
+    cy.get("#statistics-meetings-enabled").should("not.be.checked");
+    cy.get(
+      '[data-test="statistics-meetings-retention-period-dropdown"]',
+    ).should("have.text", "admin.settings.six_month");
+    cy.get('[data-test="attendance-retention-period-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_year",
+    );
+    cy.get('[data-test="recording-retention-period-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_week",
+    );
+  });
+
+  it("change bbb settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.bbb.title");
+
+    cy.get('[data-test="bbb-logo-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo.title")
+      .within(() => {
+        cy.checkSettingsImageSelector("/images/logo.svg", "logo.svg", true);
+      });
+
+    cy.get('[data-test="bbb-style-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.bbb.style.title")
+      .within(() => {
+        cy.checkSettingsFileSelector("", "bbb_style.css", true);
+      });
+
+    cy.get('[data-test="default-presentation-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.default_presentation")
+      .within(() => {
+        cy.checkSettingsFileSelector("", "testFile.txt", true);
+      });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.bbb_logo = "/images/logo.svg";
+      settings.data.bbb_style = "/files/bbb_style.css";
+      settings.data.bbb_default_presentation = "/files/testFile.txt";
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      const uploadedBBBLogo = formData.get("bbb_logo_file");
+      expect(uploadedBBBLogo.name).to.eql("logo.svg");
+      expect(uploadedBBBLogo.type).to.eql("image/svg+xml");
+      cy.fixture("files/logo.svg", "base64").then((content) => {
+        uploadedBBBLogo.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+
+      const uploadedBBBStyle = formData.get("bbb_style");
+      expect(uploadedBBBStyle.name).to.eql("bbb_style.css");
+      expect(uploadedBBBStyle.type).to.eql("text/css");
+
+      cy.fixture("files/bbb_style.css", "base64").then((content) => {
+        uploadedBBBStyle.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+
+      const uploadedDefaultPresentation = formData.get(
+        "bbb_default_presentation",
+      );
+      expect(uploadedDefaultPresentation.name).to.eql("testFile.txt");
+      expect(uploadedDefaultPresentation.type).to.eql("text/plain");
+
+      cy.fixture("files/testFile.txt", "base64").then((content) => {
+        uploadedDefaultPresentation.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get('[data-test="bbb-logo-field"]').within(() => {
+      cy.get('[data-test="settings-image-url-input"]').should(
+        "have.value",
+        "/images/logo.svg",
+      );
+
+      cy.get('[data-test="settings-image-delete-button"]').should("be.visible");
+    });
+
+    cy.get('[data-test="bbb-style-field"]').within(() => {
+      cy.get('[data-test="file-input-button"]').should(
+        "have.text",
+        "app.browse",
+      );
+
+      cy.get('[data-test="settings-file-delete-button"]').should("be.visible");
+
+      cy.get('[data-test="settings-file-view-button"]')
+        .should("be.visible")
+        .and("include.text", "app.view")
+        .and("have.attr", "href", "/files/bbb_style.css");
+    });
+
+    cy.get('[data-test="default-presentation-field"]').within(() => {
+      cy.get('[data-test="file-input-button"]').should(
+        "have.text",
+        "app.browse",
+      );
+
+      cy.get('[data-test="settings-file-delete-button"]').should("be.visible");
+
+      cy.get('[data-test="settings-file-view-button"]')
+        .should("be.visible")
+        .and("include.text", "app.view")
+        .and("have.attr", "href", "/files/testFile.txt");
+    });
+
+    // Change settings again (delete files and images)
+    cy.get('[data-test="bbb-logo-field"]').within(() => {
+      cy.get('[data-test="settings-image-delete-button"]').click();
+
+      cy.get('[data-test="settings-image-url-input"]').should("not.exist");
+      cy.get('[data-test="file-input-button"]').should("not.exist");
+      cy.get('[data-test="settings-image-delete-button"]').should("not.exist");
+      cy.get('[data-test="settings-image-undo-delete-button"]')
+        .should("be.visible")
+        .and("have.text", "app.undo_delete")
+        .click();
+
+      cy.get('[data-test="settings-image-url-input"]').should(
+        "have.value",
+        "/images/logo.svg",
+      );
+
+      cy.get('[data-test="settings-image-delete-button"]')
+        .should("be.visible")
+        .click();
+    });
+
+    cy.get('[data-test="bbb-style-field"]').within(() => {
+      cy.get('[data-test="settings-file-delete-button"]').click();
+
+      cy.get('[data-test="file-input-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-undo-delete-button"]')
+        .should("be.visible")
+        .and("have.text", "app.undo_delete")
+        .click();
+
+      cy.get('[data-test="file-input-button"]').should(
+        "have.text",
+        "app.browse",
+      );
+
+      cy.get('[data-test="settings-file-view-button"]')
+        .should("be.visible")
+        .and("include.text", "app.view")
+        .and("have.attr", "href", "/files/bbb_style.css");
+
+      cy.get('[data-test="settings-file-delete-button"]')
+        .should("be.visible")
+        .click();
+    });
+
+    cy.get('[data-test="default-presentation-field"]').within(() => {
+      cy.get('[data-test="settings-file-delete-button"]').click();
+
+      cy.get('[data-test="file-input-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-undo-delete-button"]')
+        .should("be.visible")
+        .and("have.text", "app.undo_delete")
+        .click();
+
+      cy.get('[data-test="file-input-button"]').should(
+        "have.text",
+        "app.browse",
+      );
+
+      cy.get('[data-test="settings-file-view-button"]')
+        .should("be.visible")
+        .and("include.text", "app.view")
+        .and("have.attr", "href", "/files/testFile.txt");
+
+      cy.get('[data-test="settings-file-delete-button"]')
+        .should("be.visible")
+        .click();
+    });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.bbb_logo = null;
+      settings.data.bbb_style = null;
+      settings.data.bbb_default_presentation = null;
+
+      cy.intercept("POST", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("include.text", "app.save")
+      .click();
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("bbb_logo")).to.eql("");
+      expect(formData.get("bbb_style")).to.eql("");
+      expect(formData.get("bbb_default_presentation")).to.be.eql("");
+    });
+
+    // Check that settings are shown correctly
+    cy.get('[data-test="bbb-logo-field"]').within(() => {
+      cy.get('[data-test="settings-image-url-input"]')
+        .should("be.visible")
+        .and("have.value", "");
+      cy.get('[data-test="file-input-button"]').should("be.visible");
+      cy.get('[data-test="settings-image-delete-button"]').should("not.exist");
+      cy.get('[data-test="settings-image-undo-delete-button"]').should(
+        "not.exist",
+      );
+    });
+
+    cy.get('[data-test="bbb-style-field"]').within(() => {
+      cy.get('[data-test="file-input-button"]').should("be.visible");
+      cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-undo-delete-button"]').should(
+        "not.exist",
+      );
+    });
+
+    cy.get('[data-test="default-presentation-field"]').within(() => {
+      cy.get('[data-test="file-input-button"]').should("be.visible");
+      cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-undo-delete-button"]').should(
+        "not.exist",
+      );
+    });
+  });
+
+  // ToDo errors when saving changes
+});
diff --git a/tests/Frontend/e2e/AdminSettingsGeneral.cy.js b/tests/Frontend/e2e/AdminSettingsGeneral.cy.js
new file mode 100644
index 000000000..4b24c7a40
--- /dev/null
+++ b/tests/Frontend/e2e/AdminSettingsGeneral.cy.js
@@ -0,0 +1,238 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin settings general", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminSettingsRequest();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "settings.viewAny",
+        "settings.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/settings");
+  });
+
+  it("visit with user without permission to view settings", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/settings");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/room_types/3/edit");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check loading only view", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "settings.viewAny"];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    const settingsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/settings",
+      {
+        fixture: "settings.json",
+      },
+      "settingsRequest",
+    );
+
+    cy.visit("/admin/settings");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("not.exist")
+      .then(() => {
+        settingsRequest.sendResponse();
+      });
+
+    // Check if settings are shown
+    cy.get('[data-test="overlay"]').should("not.exist");
+  });
+
+  it("check loading with edit permission", function () {
+    const settingsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/settings",
+      {
+        fixture: "settings.json",
+      },
+      "settingsRequest",
+    );
+
+    cy.visit("/admin/settings");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("be.disabled")
+      .and("include.text", "app.save")
+      .then(() => {
+        settingsRequest.sendResponse();
+      });
+
+    // Check if settings are shown
+    cy.get('[data-test="overlay"]').should("not.exist");
+  });
+
+  it("load settings errors", function () {
+    // Check with 500 error
+    cy.intercept("GET", "api/v1/settings", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    });
+
+    cy.visit("/admin/settings");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay and reload button are shown and reload without error
+    cy.intercept("GET", "api/v1/settings", {
+      fixture: "settings.json",
+    });
+    cy.get('[data-test="overlay"]').should("be.visible");
+    cy.get('[data-test="loading-retry-button"]')
+      .should("have.text", "app.reload")
+      .click();
+
+    // Check that overlay and reload button are hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/settings", {
+      statusCode: 401,
+    });
+
+    cy.reload();
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/settings");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load timezones error", function () {
+    const timezonesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/getTimezones",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "timezonesRequest",
+    );
+
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    // Check loading
+    cy.get("[data-test=settings-save-button]").should("be.disabled");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true")
+      .then(() => {
+        timezonesRequest.sendResponse();
+      });
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "admin.settings.default_timezone")
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true");
+
+    // Reload timezones without error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      fixture: "timezones.json",
+    }).as("timezonesRequest");
+
+    cy.get('[data-test="timezone-reload-button"]').click();
+
+    cy.wait("@timezonesRequest");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .find(".p-select-label")
+      .should("not.have.attr", "aria-disabled", "true");
+
+    cy.get('[data-test="timezone-dropdown"]').click();
+
+    cy.get('[data-test="timezone-dropdown-option"]').should("have.length", 4);
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(0)
+      .should("have.text", "America/New_York");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(1)
+      .should("have.text", "Australia/Sydney");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(2)
+      .should("have.text", "Europe/Berlin");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(3)
+      .should("have.text", "UTC");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(3)
+      .should("have.attr", "aria-selected", "true");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      statusCode: 401,
+    }).as("timezonesRequest");
+
+    cy.reload();
+
+    cy.wait("@settingsRequest");
+
+    cy.wait("@timezonesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/settings");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  // ToDo onlyView
+});
diff --git a/tests/Frontend/e2e/AdminUsersEdit.cy.js b/tests/Frontend/e2e/AdminUsersEdit.cy.js
index 92e5bb603..80261fb70 100644
--- a/tests/Frontend/e2e/AdminUsersEdit.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEdit.cy.js
@@ -68,6 +68,8 @@ describe("Admin users edit", function () {
 
     cy.visit("/admin/users/2/edit");
 
+    cy.contains("admin.title");
+
     // Check loading
     cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
     cy.get('[data-test="users-edit-button"]').should("not.exist");
diff --git a/tests/Frontend/e2e/AdminUsersIndex.cy.js b/tests/Frontend/e2e/AdminUsersIndex.cy.js
index e329218e5..7d1f76a95 100644
--- a/tests/Frontend/e2e/AdminUsersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndex.cy.js
@@ -60,6 +60,8 @@ describe("Admin users index", function () {
 
     cy.visit("/admin/users");
 
+    cy.contains("admin.title");
+
     // Test loading
     cy.get("[data-test=user-search]")
       .eq(0)
diff --git a/tests/Frontend/e2e/AdminUsersView.cy.js b/tests/Frontend/e2e/AdminUsersView.cy.js
index 442c74027..acbb46ba4 100644
--- a/tests/Frontend/e2e/AdminUsersView.cy.js
+++ b/tests/Frontend/e2e/AdminUsersView.cy.js
@@ -66,6 +66,8 @@ describe("Admin users view", function () {
 
     cy.visit("/admin/users/2");
 
+    cy.contains("admin.title");
+
     // Check loading
     cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
     cy.get('[data-test="users-edit-button"]').should("not.exist");
diff --git a/tests/Frontend/fixtures/files/bbb_style.css b/tests/Frontend/fixtures/files/bbb_style.css
new file mode 100644
index 000000000..63de21b12
--- /dev/null
+++ b/tests/Frontend/fixtures/files/bbb_style.css
@@ -0,0 +1,34 @@
+:root {
+    --color-primary: #74b943;
+    --color-success: #74b943;
+    --color-danger: #9c132e;
+    --color-warning: #f4aa00;
+    --poll-blue: var(--color-primary);
+    --color-background: #273035;
+    --color-content-background: var(--color-background);
+    --loader-bg: var(--color-background);
+}
+
+.react-toggle-track {
+    background-color: var(--color-danger);
+}
+
+.react-toggle--checked .react-toggle-track {
+    background-color: var(--color-success);
+}
+
+div[class^="branding-"] {
+    margin-top: 10px;
+}
+
+div[class^="react-toggle-track invertBackground--"] {
+    background-color: var(--color-success) !important;
+}
+
+div[class^="react-toggle-track invertBackground--"][class*="checked--"] {
+    background-color: var(--color-danger) !important;
+}
+
+body {
+    background-color: var(--color-background);
+}
diff --git a/tests/Frontend/fixtures/files/favicon-dark.ico b/tests/Frontend/fixtures/files/favicon-dark.ico
new file mode 100644
index 0000000000000000000000000000000000000000..6a199a1acf1f27fcb167b69abb23767a7f476ce8
GIT binary patch
literal 15086
zcmd6t37D2;xq!d%M@MvEIGPHA%qW<W3!|n%E`wVgmpZwT9#@hpHM6j+3$LSsVR}v}
zww$Auo;1U<v~o!;To@!lkCx(+JN^iodq0{w>Ns=m`{R2*Uq1eS<{yx&9<F<y=Y8Jw
zdza^1ev+giDJ5-f3A#18ddno)B}tOj)+{|FNfzN7f;Rue0ZDQ$1-7OPRg&XCe=4Jw
zt2Ozzr>AFo_yxQGUGN?}4?l%5YqIavZJY58gLzO(W|Ohu>h`my>NB>(!TGKwZ<F!q
zHP!#>w#(Qqs5S7&KXrBcSrhdc-+FLIG|pP)ugKt({&NXqYK3yGK}Y_D*dO^vj-LM4
z2FJT@7zcJc{2ls|mng7ZRBs^Z(XdYNttm|(4X_Pd43ELM&=>Y(s7KzV&}XB1<4HdW
zmx8gkA>@6Sns(QRlVK4kuY$LjRItz2S*Ls>s^^$r$?7dee-)ZS{)eGyZ#Y~I??4de
zY`E>C2f%MbMjiU1FfPh&3Qt6JT%TDmGL%^zO*>n{tx%MEa16F>bTiyrEYM5(cjTq}
z9X$x{u2OamJ|81iS*Sk>I-r_dhjVQkN4LN;P_O)%f*WLYjRiN<sQ5?xA6=CTpx#Ek
zwCjBB9@@oj1J6Uf;y&Lzs=p`cTI+W+d7Ff?^=QgFC*DiDA(r<^Tn#JiP0|zKEvQ$#
z*0J$eNN*0;fPEC@`#9>3uarFmUN1D_wOj!!J%8al06cf~${Q3MACF%f-$&qQP@FgK
zE1xfxua>5q&yb$YqPRylu2JV-$?Ggu=q0_3yie3<YZLNrs#4eemBzbj^@5KwUxVWH
zKZ<Xgs7xd2iLk9cv@yy(U9Z?)h`nR6{~h9c`F5lqhgclbH^UgJY4V->2jWWD#{4gY
z^4KLf72XE->-x|Dr-Qz}#B(ym_RxdC`-W@xbtpysct5xASRN!%a}CHl2HuM+VE-P{
zIG^=-FzLT#Wo&;steau|JKzQIT5L<S_055!!1eQa_1h56jcpzrjlY@nY>378xk;f+
ztnnLju8j+0JHGtfV7EeXeeD0sp)Kqt7z4({&t&X{{ut!X1=#M>;#}R2uO({haMHy!
z_zk|5ViCU4P~5}bXYw<PJp+pJG>+XupK8+Xu}xuHu-*0J{H)AA_?JRariZd*Yz$sg
zEYFhQjekYKcMycN4CQBrQaGIZCqhQ1je`@TGHa3E6=uOAcn#b)cfl#ZSB4LS^kgWW
znMd($7D{2ygjig&e4j<-&Wa0RTkg;(|2WdcdyBC;JjZy3kA=TNHF59$5{5->diJj`
z6t>)vQ5o+=#eFs{<g3ZI?<*memq~0N<^Lqk#P*)@sn8C#d;CS{OD>^6V^r@j(#1V~
zNtACabu6(sZ~1!yw((<jTmbuVNaqSY819BxJjdyKAbKEN7iacjSIFBl8sA9LPZi4F
zNjg0<=%MgfA^%p=@%_R$TpZuM_?qnpy%~5;W4VSz8n4mLQ9W}X>i<_Xe&^2d#Nv2|
zW_>$%{}*RsJJvx_8$(F{sa6^M-e3KO7E8Rw2ar)b`*GQ#{Tm$VHwd(6{#S(p#=+KX
z{Kn(?h5Y+S=dl30+Wfme!ZZ3P>|(6D0$;iZ(fu92do7IL`_7FJ%QGa>XIyl(x%GPD
z`S*TU-2cYE(1v@^xE9M?5@C<_cmKq3+4l^e3u0MFB7M$9kAUL&xCLK+55qS8{1jqY
zMk0MiM7u|e*XMpupW)G--(noZRaJ~z`$c=Vo%HL4k~feJarxueK3l|cS*Ra0ng0<N
z!0v|0QT};_e3NHI`TLN5sY;om>na@USr6^r|3R?;=`*8tCy{n6vE<(`qH+gPpcsd*
z#1~?W<8$s}ab3eRv}5sp`f^+#vK@nKxJA_GCrQ5$mC>xgu9iXD=H(EJ_v`$=6SdWX
zzZfIS_|j($v~lb<D9W`s!a29Uz2LXteb{GZ_r@b|HpKVd;iPYeqPTa$`WQDnhp`x2
zS9*rVSAr|!f|;GaGm!S3#WBV5K8gQ@_&Lw>vNcSA@h}Y5isou0>0d)pyw(Gva;K3l
z?ww2V<!yzsYWxR7C&c31rE8A%oEFcyWxWRPLG6&og}CjkeXnbOD8_SKsa(Y0aBf?%
zA71Xx|GtT}f3e+=CT|0nmzVy)n28zUwQG9!2U#mvuadeNj)5IvbJzlQ2G53Z-?&yy
z=HMKWU8j5D{3?Z<qx@Yej62rk+jsFC+h_coY)pFqYDpIvufdWG&!lTqOPr514rJp$
zjI?!Pao-*mkF}aj8P93)erP+!n*2QldwXy`dK(wny^7aqUt5K-VDAb~LQ#CiSm`||
z)QdIcjB87a4Um4wyigW<WB3+42mO`BR5%^d*kzm8<KaOl$}>224E@%lDSt8;Ym4IC
z90cLMuoiY3d<VR~Vtm4ti}w%T2hV|zK^jNU?)T3@wRyKr)pz#Zu7f(p3eS*hTomu;
z=RzKbu^V6$*c+yRXWqDa8C(FTfbn!Ah~GVileVqmGXk#knb!49zZ3U1-fDT&^DJBp
z)vm#P|7SP}Hidjl)!K@Emd)y%h_;PtXXsu0&Ou#!K5jp@soxB)L$$qxJAF5O1brcV
z21bF`?Q^kv%drjsedbxlaard*s3vdXbdTlVTjDYG*QOo!lIP)h=uM2fOTc(|1N=P0
zXH$L8LNPYuT0tyxJk-1o_ILc2r#<J<xO6l0H3o|GTfFaI2i{xi-i!Uc7TR_{O@amR
zVO)pfz7vjw4`sj9b4~QMAxwm;VKI2#>J_hh5zGQ(@xRp5=b9)(-|N5__ySxC?sM;F
z-Uo~;;(1&O^WhTk8D%S2rMMVh2alUAJw5L43i~3~<t$xpT<$OEcgl^ITYgzb<Av(E
z9i<uSvpY&>s~b8>)6w0fj#9_8B<X7GD3#mM%^jr*y0fLD)Y*b=?<jSlD`%7&_uy+y
zW$Ki{Bhlr`wC-lUa+S-|x*Jp7*{)t(t~58Emn3uNmK$fxP<I4f%F?xTT5d7*tY5aB
zwB4yAQ(bBAvcJldmd?SBV_ai-1iF(arrjJTUjnA0yPA^*$KUPsOhY$xwNFR)FoXO_
zdZxE@HmJ)<(x|Q^Nwc~uN!ryp%jeS{SX*HN<o{1A|FVK}HH7`KANV|DocDa(4|}gh
zlXX|6pFwa36y+uy1M6;R6${eGw(w%HbJE6&^nGd-o35)GeH;qao;$pcf4Z(l`ca5B
zhk)xHzR8}2T}!@V(`0T02f`}HKk9m4+#P0vF)Dn|@ZMcZF3$RQjf{1-!30R3XY0Le
z%KMCS0{j(}Ctw(?55~$`atj&Owd~_rp%>6!g1Vj?C^rDU4nAK8`6GsX4~M6Mvx;7b
zZv$uo>jW{*e-rwQ>y+^x@Hzx}7$f~Ihjw0H4jEOn&sgahK)e2biORfzJ*l@fAb$r~
z6xF#0du*tKJs#q*MMYEd75=8bjb!_vjr6@yp)&SPp}kn+=YG_4RaEv#?2l*dIG?V|
zj_?}P64!bRxChej!025dUbA12&VOSFW5BmJECa=7pX0K=-AmS)436Vks3o3_fp8-H
z62k8+J_FdM;{5F!`px=S3*V2;%*1_cU+cidna{P|4;+ts=?1t9JP$X5zM<fIz;mEj
z*EWpVzlR`~VdQ5Ldjy2@;yvZ4Y+SbGzEON$IX#RU+Zf|B?e>sAA7W33ZcwayVAj^r
z*tV^Bo<~G&?L+!4GZ6P*E4YTgh9Eve`;1$H!@=`qd~i?Ag7p9Xp*Ms-KoGxA3;^2<
zd;4wdd=0Qqh9J(9eSZ{|W=><lr?Trf3OnqREIU>A@pn{K=5yHgp*#zt!8UJ!ASXxH
z|Lx#J|2S)7f9!WM{{v{ROXBmCW#{UgtnQ|G9?QI)=rHyl<t6z)0#X0pi~JX6Z5$K%
z9JlknGgKmf(Yy`Ey09M1%`)8!M`UeYkoi>Ki~9dg<WGP9B7G!SSGgVB$9?s0Is5mW
z_#RN)x9K-N^hG){iGS-mEjZCPg6DBB2z$~!wgqeez0H5xCS|q-W0B(C*&S^2dI)lA
zbp7s^ce4!7hU+&Rv=y%*+}n@FHii`CAsl0}c|Ie`d<1(F7zSZaxUbT4nU#018($Rj
z4$1uglX{l_aV%}%KJW}U560pb!C16QR_Bx0&q9!yng1Xh?nNb?PyGsM*EWu;o_l>e
zK{$h$={r>T?P~~WW6##$n)|%c4i7+(XE3${+qwpV7|+x1*2_nbj$tCcFh18T{XYum
zuRu7<nCU$ICwdPsrfd#-!i5ml95a2lJ0ZKiLrB}EVp|7=euKtmY?}>19>f>}j(s}3
z39;CobMqV&^WMOBIt&2YSO`IWhmrqA8v4)1xi5Jyhl1$aVH6m<js^EpIFpzwiTl)X
z9|7(Y>lzb+I6v)ipRrAzXJjh42ZJoY*bQ9Y&0q=`kDi8?GM+@=1YZWvjb*JfAA-2H
zr$VpaV8}Oi&4l+Li1!&|^p;@T&c{&LD#P>TT$^W^bHF-5ydL+=O3xkf^#_}BO)vvo
z#~{wT=jvy00!)Ch8QNcjD`7FjYqX5?nUMbW7W(K*Q{HPl99+-1J(6kK*!Z^$?P_K2
z$M4=>;jH!5cbre%7B~YQf_Pt$tSYXvF<>g>&lqu={k3Vwb#?C@3s=Ekz<GTix-#3d
z;o2Mx=^m`7pPsIEqE5?-v^Di~w>3@cYHMomoHDqjQfY2pTxmXU$#sJk%o{Oo-h!6O
zlKCUX9Y25Eh~v*~Ynl|8-`14+%$wI-nYU!d+y#rLm(Ht{8=E_)j%?}VUsq#!TKcJ?
zqm+Ic@;il}C0Zf>PSKCm>RJBVrgKq&&(ci4ggXBXK`yW|iN4OLYw=YW1-C&EV?Zky
zBhvrlQ5+0@@6C6CYq$eE3PBcPc)u`jfp%P<wC8*d7<VRuu{DnQOG%H0&x2(;U}$Iq
z+dcU<91lCfp5Pe?avw%J>;#j+vgtE7+P*F8J;M8*=ix_SJKusc!RxsU%=0=d>sc5I
z#t7HxRPdhmCL9dLjYr{6upb->_G>J)taYq=1iS_2{{)<)o#816G6%!>r_XU50@kr^
zust7_f@OBiG%6M6Ya1|zT>?i!80QYy&guDJ{Og1hGi=Li{x@*k?|^gsU3d}3f^pq@
z-_x)M%mwql2K&NZa2mV<cR(21_1FVlL-c|0Iv4|7JLlJN*p6e<z6EUGGR|H8yE^vT
za5h-Zb`Jor(e=~sJnawWxdvy!3a62@*YORo&sX7Q_<n}AKKG>8m5w{?zo7AR_|xmV
z0{uL6XFP|#9L7WberUb!X?!E)&Mix~N|O6{i+_s$jq-zglH}%7l4RDF%em;JB>5q}
SyZK*E^LhHI_^q`iN&X*MI0fne

literal 0
HcmV?d00001

diff --git a/tests/Frontend/fixtures/files/favicon.ico b/tests/Frontend/fixtures/files/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..bb4ee815b321a85a9fdb9bd7b01d012259585d93
GIT binary patch
literal 15086
zcmd6t3!F}69>>pkN8>V#B_YEMLsE=!3uzm=Y^&%Zsg{cP6rrf}(N-?eWm~%Ku9P+<
zq?BuDMMjF+u97Z@cOs=yFQPZ5dH4G}&U5y095e5b&+hB<_1ymd|MP#I^W4sJ#&J@d
zh?AG+5N10w8#~Tvj^ku!d+BP9vx&TFgeo79>Nxiza56HeIDJ6*?yu2-;8^}&{)Iic
z@Em*tMX(>X!86eGSk`^Cw(+kHtc1j2SVDe{qpjyy>EqiKp#DCb|36c9-m$9xXzk+L
zgc5u=Z5na3^&AU*{H_GACE@=I$S_O)zkc|X4bde0UxUo?|4Z+0XxpefWJ3kx2R`M)
zPf7UyEi%oG9yTgMBRJ0F9jlN!Qs7j03_gSQrY?NypM>w41N-1Yqlb+SumL7RE~J>U
z-!jB*Wf%mTAOSl-Ta5d|r}0VpuQm)fdf1T9--B!x!cCBF%72Rxdv#$7`~s>+sL$%k
zKK`V_oHF=7(fEap6Jb3VyZeYwgZf71XhQ5XhF8JZH{sjlRh4c0&VYBy;Q!0Wy5k)i
zRp6}<`^(AGG2)1S=;uH|h;6lDE|iyXe93~%W$^!fWUEV8Hef!OezC(h$UjMPW&NR7
zvjn^9uiqP+_>u=Z%HV$?vJH$rwmQQ*VEb<3i^#8KWRnSzSD#FPVlZ|T{t7eUps|TB
zonUVn{8w9B*uG%10n7r`Vb`hnBarm^itMGZ3v4@T%hPbk`3qkz0IiE!TasZnavf~{
z7034R@GJ!T?I-ds56Xw7k*fomo3`(YYmA-{rh_kkgm{v^t9?76U6?KEs09llSii=X
zyWWNAnLK1}hG6?YCGS*ACXIAYXr?@TX$%_E$@INsJ_XkoY_xzsfxnj%Zw{Y>-3Iw|
zoADtmq+EUfVL(r7{<TJ)cm#&Q&oFCn>+H%-B9VeWw}Z~drL{rxWT@;7YSU0_=NyQ`
zEfBHl=}%g9+im!W^kJU?Wmm)gfX*wV-F05JiFbz|JsH^_J*;`n3eJK=1^l`ibOzPC
zm)fFt0in3^mP2o6Q6lZ87IiA2dk<*8l8>_4-SR(!^b)Vkw4sP}Un66O<ZI1&F(5Dh
z{CPt>8-mYA^$#|-@Gl*jLTBjaaTehz;GYZ7(KrqE)d%Ed8C%4!fZ#KjP2M4E5qUZT
z>il8as_=dA=PdEDfpW=w0cV&x72;<EPK0LA2rAp<ilcK5Yz4bM#Yd}LKjJ5V+GNXo
zNt!qQgMZ{*0_Is7`3H>@W$OF&V9FHkhMq<SKg&T!m<F5R2hg~A6NUh{4FCP1t1+&5
zWZTqQQO`&be=tz4XXcMHOKxO{To0?f59PtVMQgSDEb&cq_!{^c!sf8<BA$mjmd(oO
z&kNM6G2Y9P(OwiBXQNEHLdsKMD%kz-9qC-F{HZ{>_LM&uJNTtBz8%7RxAP_;lV<d=
zaTx^1_#~@bYpHy(eN(^r?+L^!Kya>qPM+IWgjFGUM$|lZ-vjZdBFs&~ceNu1oh|?B
zV`n4S{=H7xoil{B;j=*btEBDyLhEqQKkauJs)w*1Xr9`2%p&cs*Z9*MlIeT%9R6bY
zufCH%wr%-a+pAlB_wPWte63>Hs7Cs|!^x1}7`6q<{b!8tWj+7QM#sH_z-BpkAz)kU
zV7BLfI`LJ3@^?x5YXR}F{@3_0XY?H6!L{yb^4u|a1paHR8UMBKEC9RzH<NbHxP)PS
ztM=Iauk%cB{BN>sXbfsyv+Gzv+8v|#Qr7WfugiMR(7C|2y@s@V&Lzx*;QUxjp1+3?
z*ZT7e*fw^OcF%}}8l%DXZ70t?!{fi^?>sQ$yQENeEM2Uzn~$AcVAnmLwCf*X8_?Op
zE`QSKn~?H50y4#<`&;Gr1<GY_q$$Uzb3k`HCHbzh=}<{}=xgjh8e;b@W0$hNAYW|%
z{rd|`t}8OZby$0XyT%Y|zt@^?+tG71XK3xc{oy+ZYeO;lx_@qH)p<Jl-vn&NNOzPB
zq1rbkP_F&j-*+rqS>y-T$S8U4S%XmP*ix|lS6pX4cb?;$+Ms<*cPZM3bynU5>tGDn
zdv9IzmW9~U*fGyX>xSl`U8mO8L(b6TML_*+%PQ`_GZ5E1%ie&@ucZG8{y7gnb(TIE
z^j_Qn^j)Bw)mQbAe<@%`b!i@4V9DJ|IyiPFljqwqvI@!X4so#Cu#U9*%n5Z@8Jy>m
zRU5Pi<%7R2*tR|US_jUD;CgQAn`rb2v*BYfWeWGe`9ZrTO<8qV3AT>nIs=;ZTF+Gb
zUr<Kr9WWEFhE~u38bVvpS#vIET?^A)PJX7>PK|}}A#&;?|6R)XZHJVr?%+IDo&GtQ
zxYji7Z()8YuLypCEgqVadPawnSAV$cfam{Zq@`oaYusLD`x+KUM)NedAIgr_8vi|o
zcrK_vO7hFDKP;|xs;(x+7vddZ0|e!D#yI3X$mrQ2a$47d=LOkYt1=@?`~<igzJg$V
zrKJnexgFfKOE!sjfR7-kyP3RJrru;i<OhM)+Mq4<%_U&=1+CF}@BpZN!S%`3*Z!gR
z!Eta3xa$a^#{0z(*6-2@eP=JJ9q4GS&>Ye;wtY}s`}w`#ufxPspcb4BLqT(1>*|v*
z0fs;)s0sGFM_tmg6+9!To_(O_>)sQW<ZoCRdYTK5L0B6!?%#)ja3c6Vh1s(6B<tx6
zAe4=;IV9iJ2T6^2+rAw~KLhj}!p4&NXg{ojhoBqefZDBdvBs8sO$FttOfvFII?@e3
zTc!7a#+ZNKV*6CqICeCaG#|D>SbZi>>+TlNdN?0uc+B(iz9bB;%|_RRlIaJB-3QC+
zzvQu}e$=|O2ukz8_)?Zo`~F<e-jeiKENfe^t?|?sR>N=64*C5$^n%}Hyd={m>Z$=f
zVI~xU=3BD;t#)sMX`r?EcgfUwEM%zrIA{vj!er3c*M6pbK<kRoeB27FU=rwz(gcoZ
zU9{VgNW`-e35P52SjNF&)JsRx4&(>IU!rMKq_?vm?IDFL3L;|_jwy(YQJ7K?8BJIm
zDTow|a-5>Hf=D!<Fry$6BaCMiMB-V5`2~?8!q}bBv@^M_iH#UqwLW1qHmW#-Tdrty
zRB@Uc#`6^xMq?Ri_c_jr716Y@V-*&dFyf^T7rJtV=t(~+JFeXk_1!R*U!?kCL$l&l
z<wyIpXeMEt6Vn;;liP$5ghd%niu^BDdqxqa6y=X5Owfb;=OjjF#ZweU9Vbm;%yBXl
z7CBD7LZ1WusSm8#&<Xs%)ADat$UKT4?<`&5BhWVheINS(&OQp0Nvl#%70|bc;JfTX
z@+u~6=m-U=LwE0CcY1~7yYEv+XgVo1>gWNwa}Ks&-(t>7%19Z6SPQB_7ch6SBSY#o
zzT7C&$kv3eaK!5$y4n|i4@-bGD#zSs%qXG$$GrNRp`*2KDd=qIo@bM7Hu5^-Tn}G^
z*8cTFTGp%Myqc&?-K$Edf3fpHqCDUJ>Y($vr~3`z4Up8i0l8GT1$4eP`_3DGZdk5z
zx!L>cQuoFZ>R*#Gr?~p?rd89?eZ$h%I)59Kx~?OmJzy7@x<4lF-pf(1#{S{%ku(Oj
zlz(BbI|tCw^Z&%MvzvI|lAZzOEkXOIsrzl>EsPHKb!Vb`A2Z&9;rEoe-$uM~kcYnR
z>y5oA@z%zk9g?30(=FKz#M^jw(pNf8YU-??TVY?{u7dTN^f$;foyw;=blrPk!qZ?Q
z7$2S^?tf!2K9F}d?DXVx_UYr*t+DhR--P=+FDKHe`^6IKpMgxpL2Ysdpz}PK?<_h4
z$fkVIvpv_;>(x<?yeGVJ$t(tqA)O)go};`igIYJ};>=0t&gwRp5Bh$m`LF<POPTX)
zZDjNwpt&a<>B>eGcm<Rv^zP=*N#dDc=8N7PdV7A!md1^AbY8jL_)UE^p$+7Me?CNJ
zG!%n$q}$cAbro^hR{na(G`5JJ13DL}Oye&b^bB7D<%zk2TV-W9?<e#PR(}us2Iwv_
z3e&*-+dt%Lz`r~l>FIt#b6Pgd*w#Cj{|t!h9mdq7ep1~h!B#I{Yk_;WN<F<nf2U!_
zoC)70FUM=^#mK7;+58e3fov`YQ_mo){r6b;Pk1)YC+`<8|3m&3poTL)QG+_(38~xo
zFz$eE&WY%K=ILtOxxN!V?&Zmcd#w5&w(=kH>c85`TfEtEBB`_Xwxw=;=QH&M!=?Ir
z1@CVVR(Sdv3s-tJCs;Ngw(5Vt%6Gqik?sZ3m9NX5b)4gv+ojdN%vqeMaARJk-ift#
zNmt|6z2hUC=;bNj{?>P^mA`<v=Hppl#$*(m4V_mK)l2Dr*Cu+}|FrL@9*rICqq3>@
zUFC^kR{J$x_Idf58+v|qL2=2d4es7f{Z~QQ8oZXZzp2;HcY1o#T?e(G4wx~aaplfS
zPhMkP@8^<N*`;3oKfFBUuV)R+<Djegr#YZ;sI^#UF|9?Xc{-;ft1&Mf@t~Kl_c4t{
z<!K*q_bIPTYt)NgnaVZqmDd`~98|vEp$`0g)Urgil)1&Z&b;E2oi`H|#-}?vujIpr
zAX%{)nuBc30+X*jz`eIt{rZva3C2G?vmRdljl|7dmcIJwe$E(Y-g-*4?3<g_Xh6So
zCQtV?=9x=Qd;ayFjZ2Bkrt)R$66M=J^7Q_`1dNZmuWSnPeKg3PDN`tW>YJ}1ShkzI
z+aVQXV+|PHmx=q|NCQ5cOWAjp>@wmxptb87SO;cK8hduAaVo#Bga}A?DHs{`PrhBJ
z9j8olWCUmo8lBa|&j3B&dN35Uj(!2(dTbzE2!lcMMzYdb1;&n^?Jy|u4u<kdpnJ6a
zV06DGt~I(b$hP{UHZ<|j{8C@5Ofus@I!0gZxgQQWci8PWapbi3j|DwPV?+I}dG#z@
z51pWehvL`4R44@d8SNx}7r5WvOdX|#$g7Q4fS#vqPyQ&awed#}#lvJiAYWtupt)9B
z-F7*;S)lc7E!gA2^h+?*bJiL#0{k<EZL_R#?C7~_>|F!X;S*55{t882TysOu<|=T<
zU^4Y2it-O!)#$p$ke8k)&PyLvl$V|#A6hjl7R$&ejAh)nWp0(#D>K`#T%8r$vMRHE
zzg6us``w$D-q)}yFWt>k*~*OA$}MA8tS%fKxi1z?%ZQJtpB3j{QCf7AdsR^oaj%AS
zPoZmxZ1C?X%J8&U_q&76Lpm2+h?z3|(D^%<bHoHG56!Jr+8nLN8T+P-di2iWOt94G
z6JK~)w~MoRSJfJE(BDEEr^wgd{3dJmC+&t#Xo=3Jmj0SE290ZuZ9U)B;GQWhUCs05
z@a>RR^?O#B@nchT^>=i}|E(3L?`SlnRo3N_fdZ&)>1#~>4E=6wnb|7;`nx)FrqbPw
zt55vhv-=It=UuloGW|VS_smUPb!$FpkH`hhhsP^T`?eMOceD53l|J?BmgGI@m1*CT
ztmZ;(&>EpJI}Eg^?HSPS<nED|_Fad*`rtj@Z@aLs^`J~XYAuzlbfl{_UGrS!PpSWM
z?|7yyKKt*(^yTs{y#})W<!nSoerWDXN4h4i`7s&&jje}I?1+x7U(oIHKBuCuHEa^}
z0_|<xp(UtK$Ai|tIQ|bPH@j#+>a6(2)EDDxiC;9RO#}I@b)p~q6}E%cNv-SJ`@VoP
zVFhd-*sjUVXAT&7F8zKM>09A@cnvy&+A$9*>KPJtg<YUEpfjj{<FsWvV@AHkVKK<Q
zWYl;5cXi_BVGKx4b}s<6@orGQ`ssX7nV!K&IA}JKRy&4++O-1~!6P1uD^L6E&EWcN
z#-9nvkAT|uG;D)nkFN-)KnL*O52aT;iaSzvZn3qA<GjmT{6_v7<<YktXVDPHnb!CK
Y69+oZ-^hE5zj9i|=_jVU)-1>Q56hRR&Hw-a

literal 0
HcmV?d00001

diff --git a/tests/Frontend/fixtures/files/logo-dark.svg b/tests/Frontend/fixtures/files/logo-dark.svg
new file mode 100644
index 000000000..7765f9836
--- /dev/null
+++ b/tests/Frontend/fixtures/files/logo-dark.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 290 98" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M10,16.06L37.4,16.06C41.598,15.916 45.783,16.595 49.72,18.06C52.622,19.194 55.235,20.961 57.37,23.23C59.191,25.232 60.526,27.628 61.27,30.23C61.979,32.681 62.349,35.218 62.37,37.77C62.35,40.319 61.98,42.852 61.27,45.3C60.528,47.903 59.193,50.299 57.37,52.3C55.238,54.573 52.624,56.34 49.72,57.47C45.785,58.939 41.598,59.618 37.4,59.47L20.57,59.47L20.57,93.94L10,93.94L10,16.06ZM20.57,50.38L34.43,50.38C36.477,50.379 38.52,50.212 40.54,49.88C42.425,49.595 44.246,48.983 45.92,48.07C47.512,47.178 48.828,45.862 49.72,44.27C50.75,42.289 51.243,40.071 51.15,37.84C51.243,35.606 50.75,33.385 49.72,31.4C48.827,29.81 47.512,28.498 45.92,27.61C44.247,26.694 42.426,26.078 40.54,25.79C38.52,25.462 36.477,25.298 34.43,25.3L20.57,25.3L20.57,50.38Z" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <rect x="75.24" y="16.06" width="10.56" height="77.88" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M105.82,16.06L116.38,16.06L116.38,84L152.13,84L152.13,93.9L105.82,93.9L105.82,16.06Z" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M256.74,77.66C258.521,80.428 261.058,82.628 264.05,84C266.932,85.326 270.068,86.009 273.24,86C275.068,85.987 276.883,85.708 278.63,85.17C280.426,84.639 282.117,83.804 283.63,82.7C285.122,81.607 286.378,80.222 287.32,78.63C288.3,76.919 288.795,74.972 288.75,73C288.915,70.389 287.857,67.844 285.89,66.12C283.757,64.409 281.358,63.058 278.79,62.12C275.97,61.06 272.89,60.033 269.55,59.04C266.302,58.116 263.194,56.757 260.31,55C257.444,53.196 255.02,50.769 253.22,47.9C251.313,44.933 250.36,40.933 250.36,35.9C250.474,30.515 252.685,25.382 256.52,21.6C258.882,19.311 261.662,17.498 264.71,16.26C268.541,14.74 272.64,14.012 276.76,14.12C280.902,14.089 285.027,14.669 289,15.84C293.046,17.139 296.603,19.637 299.2,23L290.62,30.81C289.221,28.686 287.281,26.974 285,25.85C282.443,24.578 279.616,23.943 276.76,24C274.27,23.924 271.787,24.314 269.44,25.15C267.687,25.805 266.095,26.828 264.77,28.15C263.67,29.235 262.824,30.55 262.29,32C261.842,33.235 261.602,34.536 261.58,35.85C261.58,39.15 262.533,41.68 264.44,43.44C266.512,45.303 268.918,46.759 271.53,47.73C274.55,48.905 277.635,49.907 280.77,50.73C283.988,51.559 287.089,52.789 290,54.39C292.811,55.962 295.237,58.142 297.1,60.77C299,63.437 299.953,67.123 299.96,71.83C300.022,75.338 299.291,78.815 297.82,82C296.464,84.915 294.496,87.504 292.05,89.59C289.52,91.703 286.607,93.309 283.47,94.32C280.062,95.437 276.496,95.994 272.91,95.97C268.056,95.995 263.24,95.099 258.72,93.33C254.442,91.723 250.73,88.891 248.05,85.19L256.74,77.66Z" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+    <g id="path16" transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M186.52,63.44C182.601,59.796 180.46,54.618 180.66,49.27C181.476,39.215 189.978,31.375 200.066,31.375C210.447,31.375 219.096,39.677 219.52,50.05C219.489,55.124 217.372,59.969 213.67,63.44C213.242,63.88 213.242,64.59 213.67,65.03C213.729,65.101 213.796,65.165 213.87,65.22C215.706,66.487 217.181,68.211 218.15,70.22C218.436,70.812 219.157,71.064 219.75,70.78C219.855,70.736 219.95,70.671 220.03,70.59C226.057,65.214 229.43,57.454 229.25,49.38C228.87,34.52 216.39,22.38 200.95,21.99C184.53,21.49 171,34.26 171,50C171.019,57.831 174.384,65.291 180.24,70.49C180.465,70.719 180.774,70.848 181.095,70.848C181.416,70.848 181.725,70.719 181.95,70.49C182.029,70.39 182.099,70.283 182.16,70.17C183.134,68.164 184.608,66.442 186.44,65.17C186.749,64.958 186.934,64.606 186.934,64.231C186.934,63.998 186.863,63.771 186.73,63.58L186.57,63.38L186.52,63.44ZM200.1,7.12C175.1,7.12 154.78,26.67 154.78,50.83C154.924,67.746 164.876,83.121 180.25,90.18C180.417,90.266 180.602,90.311 180.79,90.311C181.232,90.311 181.638,90.063 181.84,89.67C181.971,89.473 182.028,89.235 182,89C181.53,86 181.14,83 180.92,80.35C180.888,79.986 180.678,79.66 180.36,79.48C170.518,73.227 164.545,62.34 164.56,50.68C164.7,31.88 180.62,16.58 200.09,16.52C219.56,16.46 235.8,31.89 235.8,50.87C235.709,62.655 229.529,73.592 219.48,79.75C219.27,82.49 218.86,85.75 218.35,88.97C218.339,89.036 218.333,89.103 218.333,89.17C218.333,89.754 218.771,90.254 219.35,90.33C219.599,90.379 219.857,90.34 220.08,90.22C235.449,83.183 245.404,67.823 245.55,50.92C245.42,26.67 225.14,7.12 200.1,7.12Z" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+    <g id="Ebene_2-2" transform="matrix(1,0,0,1,-1.66,0)">
+        <g id="path18" transform="matrix(1,0,0,1,-8.34,-7.12)">
+            <path d="M208.89,99.62C207.89,103.33 203.89,104.19 200.1,104.19C196.31,104.19 192.35,103.33 191.31,99.62C189.72,94.08 187.14,80.15 187.14,73.71C187.14,66.88 193.51,65.16 200.14,65.16C206.77,65.16 213,66.75 213,73.66C213,80.03 210.39,93.97 208.85,99.58L208.89,99.62Z" style="fill:white;fill-rule:nonzero;"/>
+        </g>
+        <g id="ellipse20" transform="matrix(1,0,0,1,-8.34,-7.12)">
+            <path d="M200.1,37C206.763,37.267 212.1,42.821 212.1,49.49C212.1,56.347 206.457,61.99 199.6,61.99C192.743,61.99 187.1,56.347 187.1,49.49C187.1,49.487 187.1,49.483 187.1,49.48C187.239,42.59 192.946,36.997 199.837,36.997C199.925,36.997 200.012,36.998 200.1,37Z" style="fill:white;fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>
diff --git a/tests/Frontend/fixtures/files/logo.svg b/tests/Frontend/fixtures/files/logo.svg
new file mode 100644
index 000000000..8d7834ad7
--- /dev/null
+++ b/tests/Frontend/fixtures/files/logo.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 290 98" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M10,16.06L37.4,16.06C41.598,15.916 45.783,16.595 49.72,18.06C52.622,19.194 55.235,20.961 57.37,23.23C59.191,25.232 60.526,27.628 61.27,30.23C61.979,32.681 62.349,35.218 62.37,37.77C62.35,40.319 61.98,42.852 61.27,45.3C60.528,47.903 59.193,50.299 57.37,52.3C55.238,54.573 52.624,56.34 49.72,57.47C45.785,58.939 41.598,59.618 37.4,59.47L20.57,59.47L20.57,93.94L10,93.94L10,16.06ZM20.57,50.38L34.43,50.38C36.477,50.379 38.52,50.212 40.54,49.88C42.425,49.595 44.246,48.983 45.92,48.07C47.512,47.178 48.828,45.862 49.72,44.27C50.75,42.289 51.243,40.071 51.15,37.84C51.243,35.606 50.75,33.385 49.72,31.4C48.827,29.81 47.512,28.498 45.92,27.61C44.247,26.694 42.426,26.078 40.54,25.79C38.52,25.462 36.477,25.298 34.43,25.3L20.57,25.3L20.57,50.38Z" style="fill:rgb(36,53,106);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <rect x="75.24" y="16.06" width="10.56" height="77.88" style="fill:rgb(36,53,106);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M105.82,16.06L116.38,16.06L116.38,84L152.13,84L152.13,93.9L105.82,93.9L105.82,16.06Z" style="fill:rgb(36,53,106);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M256.74,77.66C258.521,80.428 261.058,82.628 264.05,84C266.932,85.326 270.068,86.009 273.24,86C275.068,85.987 276.883,85.708 278.63,85.17C280.426,84.639 282.117,83.804 283.63,82.7C285.122,81.607 286.378,80.222 287.32,78.63C288.3,76.919 288.795,74.972 288.75,73C288.915,70.389 287.857,67.844 285.89,66.12C283.757,64.409 281.358,63.058 278.79,62.12C275.97,61.06 272.89,60.033 269.55,59.04C266.302,58.116 263.194,56.757 260.31,55C257.444,53.196 255.02,50.769 253.22,47.9C251.313,44.933 250.36,40.933 250.36,35.9C250.474,30.515 252.685,25.382 256.52,21.6C258.882,19.311 261.662,17.498 264.71,16.26C268.541,14.74 272.64,14.012 276.76,14.12C280.902,14.089 285.027,14.669 289,15.84C293.046,17.139 296.603,19.637 299.2,23L290.62,30.81C289.221,28.686 287.281,26.974 285,25.85C282.443,24.578 279.616,23.943 276.76,24C274.27,23.924 271.787,24.314 269.44,25.15C267.687,25.805 266.095,26.828 264.77,28.15C263.67,29.235 262.824,30.55 262.29,32C261.842,33.235 261.602,34.536 261.58,35.85C261.58,39.15 262.533,41.68 264.44,43.44C266.512,45.303 268.918,46.759 271.53,47.73C274.55,48.905 277.635,49.907 280.77,50.73C283.988,51.559 287.089,52.789 290,54.39C292.811,55.962 295.237,58.142 297.1,60.77C299,63.437 299.953,67.123 299.96,71.83C300.022,75.338 299.291,78.815 297.82,82C296.464,84.915 294.496,87.504 292.05,89.59C289.52,91.703 286.607,93.309 283.47,94.32C280.062,95.437 276.496,95.994 272.91,95.97C268.056,95.995 263.24,95.099 258.72,93.33C254.442,91.723 250.73,88.891 248.05,85.19L256.74,77.66Z" style="fill:rgb(36,53,106);fill-rule:nonzero;"/>
+    </g>
+    <g id="path16" transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M186.52,63.44C182.601,59.796 180.46,54.618 180.66,49.27C181.476,39.215 189.978,31.375 200.066,31.375C210.447,31.375 219.096,39.677 219.52,50.05C219.489,55.124 217.372,59.969 213.67,63.44C213.242,63.88 213.242,64.59 213.67,65.03C213.729,65.101 213.796,65.165 213.87,65.22C215.706,66.487 217.181,68.211 218.15,70.22C218.436,70.812 219.157,71.064 219.75,70.78C219.855,70.736 219.95,70.671 220.03,70.59C226.057,65.214 229.43,57.454 229.25,49.38C228.87,34.52 216.39,22.38 200.95,21.99C184.53,21.49 171,34.26 171,50C171.019,57.831 174.384,65.291 180.24,70.49C180.465,70.719 180.774,70.848 181.095,70.848C181.416,70.848 181.725,70.719 181.95,70.49C182.029,70.39 182.099,70.283 182.16,70.17C183.134,68.164 184.608,66.442 186.44,65.17C186.749,64.958 186.934,64.606 186.934,64.231C186.934,63.998 186.863,63.771 186.73,63.58L186.57,63.38L186.52,63.44ZM200.1,7.12C175.1,7.12 154.78,26.67 154.78,50.83C154.924,67.746 164.876,83.121 180.25,90.18C180.417,90.266 180.602,90.311 180.79,90.311C181.232,90.311 181.638,90.063 181.84,89.67C181.971,89.473 182.028,89.235 182,89C181.53,86 181.14,83 180.92,80.35C180.888,79.986 180.678,79.66 180.36,79.48C170.518,73.227 164.545,62.34 164.56,50.68C164.7,31.88 180.62,16.58 200.09,16.52C219.56,16.46 235.8,31.89 235.8,50.87C235.709,62.655 229.529,73.592 219.48,79.75C219.27,82.49 218.86,85.75 218.35,88.97C218.339,89.036 218.333,89.103 218.333,89.17C218.333,89.754 218.771,90.254 219.35,90.33C219.599,90.379 219.857,90.34 220.08,90.22C235.449,83.183 245.404,67.823 245.55,50.92C245.42,26.67 225.14,7.12 200.1,7.12Z" style="fill:rgb(36,53,106);fill-rule:nonzero;"/>
+    </g>
+    <g id="Ebene_2-2" transform="matrix(1,0,0,1,-1.66,0)">
+        <g id="path18" transform="matrix(1,0,0,1,-8.34,-7.12)">
+            <path d="M208.89,99.62C207.89,103.33 203.89,104.19 200.1,104.19C196.31,104.19 192.35,103.33 191.31,99.62C189.72,94.08 187.14,80.15 187.14,73.71C187.14,66.88 193.51,65.16 200.14,65.16C206.77,65.16 213,66.75 213,73.66C213,80.03 210.39,93.97 208.85,99.58L208.89,99.62Z" style="fill:rgb(245,170,5);fill-rule:nonzero;"/>
+        </g>
+        <g id="ellipse20" transform="matrix(1,0,0,1,-8.34,-7.12)">
+            <path d="M200.1,37C206.763,37.267 212.1,42.821 212.1,49.49C212.1,56.347 206.457,61.99 199.6,61.99C192.743,61.99 187.1,56.347 187.1,49.49C187.1,49.487 187.1,49.483 187.1,49.48C187.239,42.59 192.946,36.997 199.837,36.997C199.925,36.997 200.012,36.998 200.1,37Z" style="fill:rgb(245,170,5);fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>
diff --git a/tests/Frontend/fixtures/settings.json b/tests/Frontend/fixtures/settings.json
new file mode 100644
index 000000000..875cd867d
--- /dev/null
+++ b/tests/Frontend/fixtures/settings.json
@@ -0,0 +1,49 @@
+{
+  "data": {
+    "general_name": "Test Application",
+    "general_pagination_page_size": 5,
+    "general_toast_lifetime": 0,
+    "general_default_timezone": "UTC",
+    "general_help_url": null,
+    "general_legal_notice_url": null,
+    "general_privacy_policy_url": null,
+    "general_no_welcome_page": true,
+    "theme_logo": "/images/logo.svg",
+    "theme_favicon": "/images/favicon.ico",
+    "theme_logo_dark": "/images/logo-dark.svg",
+    "theme_favicon_dark": "/images/favicon-dark.ico",
+    "theme_primary_color": "#22c55e",
+    "theme_rounded": true,
+    "banner_enabled": false,
+    "banner_message": null,
+    "banner_link": null,
+    "banner_icon": null,
+    "banner_color": null,
+    "banner_background": null,
+    "banner_title": null,
+    "banner_link_style": "primary",
+    "banner_link_text": null,
+    "banner_link_target": "blank",
+    "room_limit": -1,
+    "room_auto_delete_inactive_period": -1,
+    "room_auto_delete_never_used_period": -1,
+    "room_auto_delete_deadline_period": 14,
+    "room_token_expiration": -1,
+    "room_file_terms_of_use": "Room file terms of use",
+    "user_password_change_allowed": true,
+    "recording_server_usage_enabled": true,
+    "recording_server_usage_retention_period": -1,
+    "recording_meeting_usage_enabled": true,
+    "recording_meeting_usage_retention_period": -1,
+    "recording_attendance_retention_period": -1,
+    "recording_recording_retention_period": -1,
+    "bbb_logo": "/images/logo.svg",
+    "bbb_style": null,
+    "bbb_default_presentation": null
+  },
+  "meta": {
+    "link_btn_styles": ["primary", "secondary", "link"],
+    "link_targets": ["blank", "self"],
+    "recording_max_retention_period": -1
+  }
+}
diff --git a/tests/Frontend/support/commands/adminSettingsCommands.js b/tests/Frontend/support/commands/adminSettingsCommands.js
new file mode 100644
index 000000000..824e61a9f
--- /dev/null
+++ b/tests/Frontend/support/commands/adminSettingsCommands.js
@@ -0,0 +1,257 @@
+// import { _arrayBufferToBase64 } from "../utils/formData.js";
+
+/**
+ * Checks if the image file upload works correctly
+ * @memberof cy
+ * @method checkSettingsImageSelector
+ * @param  {string} originalSrc
+ * @param  {string} imageName
+ * @param  {boolean} deletable
+ * @returns void
+ */
+Cypress.Commands.add(
+  "checkSettingsImageSelector",
+  (originalSrc, imageName, deletable) => {
+    // Check that correct url is shown
+    cy.get('[data-test="settings-image-url-input"]').should(
+      "have.value",
+      originalSrc,
+    );
+
+    cy.get('[data-test="settings-image-preview"]')
+      .should("have.attr", "src")
+      .and("include", originalSrc);
+
+    cy.get('[data-test="settings-image-cancel-button"]').should("not.exist");
+    cy.get('[data-test="settings-image-delete-button"]').should(
+      deletable ? "be.visible" : "not.exist",
+    );
+    cy.get('[data-test="settings-image-undo-delete-button"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="file-input-input"]').then((fileInput) => {
+      cy.stub(fileInput[0], "click").as("fileInputClick");
+    });
+
+    cy.get('[data-test="file-input-button"]')
+      .should("include.text", "app.browse")
+      .trigger("keyup", { key: "Enter" });
+
+    // Check that button is connected to file input
+    cy.get("@fileInputClick").should("be.calledOnce");
+
+    cy.get('[data-test="file-input-input"]').selectFile(
+      "tests/Frontend/fixtures/files/" + imageName,
+      {
+        force: true,
+      },
+    );
+
+    // Check that buttons changed
+    cy.get('[data-test="file-input-button"]').should("include.text", imageName);
+
+    cy.get('[data-test="settings-image-url-input"]').should("not.exist");
+
+    cy.get('[data-test="settings-image-cancel-button"]').should("be.visible");
+    cy.get('[data-test="settings-image-delete-button"]').should("not.exist");
+    cy.get('[data-test="settings-image-undo-delete-button"]').should(
+      "not.exist",
+    );
+
+    // Check that correct image is shown
+    cy.fixture("files/" + imageName, "base64").then((content) => {
+      cy.get('[data-test="settings-image-preview"]')
+        .should("have.attr", "src")
+        .and("not.include", originalSrc)
+        .then((src) => {
+          cy.wrap(null).then(async () => {
+            return new Cypress.Promise((resolve, reject) => {
+              fetch(src)
+                .then((response) => response.blob())
+                .then((blob) => {
+                  const contentType = blob.type;
+                  const reader = new FileReader();
+                  reader.readAsDataURL(blob);
+                  reader.onloadend = function () {
+                    try {
+                      const base64data = reader.result;
+                      expect(base64data).to.eql(
+                        "data:" + contentType + ";base64," + content,
+                      );
+                      resolve();
+                    } catch (error) {
+                      reject(error);
+                    }
+                  };
+                  // ToDo ???? use _arrayBufferToBase64???? (disadvantage: no content type)
+                  // .then((response) => response.arrayBuffer())
+                  // .then((arrayBuffer) => {
+                  //   const base64 = _arrayBufferToBase64(arrayBuffer);
+                  //   try {
+                  //     expect(base64).to.eql(content);
+                  //     resolve();
+                  //   } catch (error) {
+                  //     reject(error);
+                  //   }
+                })
+                .catch((error) => {
+                  reject(error);
+                });
+            });
+          });
+        });
+    });
+
+    // Cancel upload
+    cy.get('[data-test="settings-image-cancel-button"]').click();
+
+    // Check that setting is shown correctly
+    cy.get('[data-test="settings-image-url-input"]')
+      .should("be.visible")
+      .and("have.value", originalSrc);
+
+    cy.get('[data-test="settings-image-cancel-button"]').should("not.exist");
+    cy.get('[data-test="settings-image-delete-button"]').should(
+      deletable ? "be.visible" : "not.exist",
+    );
+    cy.get('[data-test="settings-image-undo-delete-button"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="file-input-button"]').should(
+      "include.text",
+      "app.browse",
+    );
+
+    // Upload image again
+    cy.get('[data-test="file-input-input"]').selectFile(
+      "tests/Frontend/fixtures/files/" + imageName,
+      {
+        force: true,
+      },
+    );
+
+    // Check that correct image is shown
+    cy.fixture("files/" + imageName, "base64").then((content) => {
+      cy.get('[data-test="settings-image-preview"]')
+        .should("have.attr", "src")
+        .and("not.include", originalSrc)
+        .then((src) => {
+          cy.wrap(null).then(async () => {
+            return new Cypress.Promise((resolve, reject) => {
+              fetch(src)
+                .then((response) => response.blob())
+                .then((blob) => {
+                  const contentType = blob.type;
+                  const reader = new FileReader();
+                  reader.readAsDataURL(blob);
+                  reader.onloadend = function () {
+                    try {
+                      const base64data = reader.result;
+                      expect(base64data).to.eql(
+                        "data:" + contentType + ";base64," + content,
+                      );
+                      resolve();
+                    } catch (error) {
+                      reject(error);
+                    }
+                  };
+                  // ToDo ???? use _arrayBufferToBase64???? (disadvantage: no content type)
+                  // .then((response) => response.arrayBuffer())
+                  // .then((arrayBuffer) => {
+                  //   const base64 = _arrayBufferToBase64(arrayBuffer);
+                  //   try {
+                  //     expect(base64).to.eql(content);
+                  //     resolve();
+                  //   } catch (error) {
+                  //     reject(error);
+                  //   }
+                })
+                .catch((error) => {
+                  reject(error);
+                });
+            });
+          });
+        });
+    });
+  },
+);
+
+/**
+ * Checks if the image file upload works correctly
+ * @memberof cy
+ * @method checkSettingsFileSelector
+ * @param {string} currentFileName
+ * @param  {string} fileName
+ * @param  {boolean} deletable
+ * @returns void
+ */
+Cypress.Commands.add(
+  "checkSettingsFileSelector",
+  (currentFileName, fileName, deletable) => {
+    cy.get('[data-test="settings-file-cancel-button"]').should("not.exist");
+    if (currentFileName !== "" && deletable) {
+      cy.get('[data-test="settings-file-delete-button"]').should("be.visible");
+    } else {
+      cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+    }
+    cy.get('[data-test="settings-file-undo-delete-button"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="file-input-input"]').then((fileInput) => {
+      cy.stub(fileInput[0], "click").as("fileInputClick");
+    });
+
+    cy.get('[data-test="file-input-button"]')
+      .should("include.text", "app.browse")
+      .trigger("keyup", { key: "Enter" });
+
+    // Check that button is connected to file input
+    cy.get("@fileInputClick").should("be.calledOnce");
+
+    cy.get('[data-test="file-input-input"]').selectFile(
+      "tests/Frontend/fixtures/files/" + fileName,
+      {
+        force: true,
+      },
+    );
+
+    // Check that buttons changed
+    cy.get('[data-test="file-input-button"]').should("include.text", fileName);
+
+    cy.get('[data-test="settings-file-cancel-button"]').should("be.visible");
+    cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+    cy.get('[data-test="settings-file-undo-delete-button"]').should(
+      "not.exist",
+    );
+
+    // Cancel upload
+    cy.get('[data-test="settings-file-cancel-button"]').click();
+
+    // Check that setting is shown correctly
+    cy.get('[data-test="settings-file-cancel-button"]').should("not.exist");
+    if (currentFileName !== "" && deletable) {
+      cy.get('[data-test="settings-file-delete-button"]').should("be.visible");
+    } else {
+      cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+    }
+    cy.get('[data-test="settings-file-undo-delete-button"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="file-input-button"]').should(
+      "include.text",
+      "app.browse",
+    );
+
+    // Upload file again
+    cy.get('[data-test="file-input-input"]').selectFile(
+      "tests/Frontend/fixtures/files/" + fileName,
+      {
+        force: true,
+      },
+    );
+  },
+);
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index 9aa6483d8..e032a8539 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -351,3 +351,17 @@ Cypress.Commands.add("interceptMeetingsIndexRequests", () => {
     fixture: "meetings.json",
   }).as("meetingsRequest");
 });
+
+/**
+ * Intercept all requests that are needed when visiting the admin settings page
+ * @memberof cy
+ * @method interceptAdminSettingsRequest
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminSettingsRequest", () => {
+  cy.intercept("GET", "api/v1/settings", {
+    fixture: "settings.json",
+  }).as("settingsRequest");
+
+  cy.intercept("GET", "api/v1/getTimezones", { fixture: "timezones.json" });
+});
diff --git a/tests/Frontend/support/e2e.js b/tests/Frontend/support/e2e.js
index 36320a5b3..d950cae6c 100644
--- a/tests/Frontend/support/e2e.js
+++ b/tests/Frontend/support/e2e.js
@@ -17,9 +17,9 @@ import "./commands/generalCommands.js";
 import "./commands/roomCommands.js";
 import "./commands/interceptCommands.js";
 import "./commands/adminRoomTypesCommands.js";
+import "./commands/adminSettingsCommands.js";
 import "@cypress/code-coverage/support";
 
-// ToDo try to fix error and remove this (admin room types view)
 Cypress.on("uncaught:exception", (err) => {
   // Check if error should be ignored
   if (

From 84fec0aeebdd2640196f817863a00ba7aa30d0d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Thu, 9 Jan 2025 10:28:21 +0100
Subject: [PATCH 39/79] Add reload button for replacement room type
 (RoomTypesDeleteButton)

---
 .../SettingsRoomTypesDeleteButton.vue         | 68 ++++++++++++-------
 1 file changed, 42 insertions(+), 26 deletions(-)

diff --git a/resources/js/components/SettingsRoomTypesDeleteButton.vue b/resources/js/components/SettingsRoomTypesDeleteButton.vue
index 45e01dc43..5223728ce 100644
--- a/resources/js/components/SettingsRoomTypesDeleteButton.vue
+++ b/resources/js/components/SettingsRoomTypesDeleteButton.vue
@@ -27,32 +27,44 @@
       <label for="replacement-room-type">{{
         $t("admin.room_types.delete.replacement")
       }}</label>
-      <Select
-        id="replacement-room-type"
-        v-model.number="replacement"
-        autofocus
-        :disabled="isBusy"
-        :loading="loadingRoomTypes"
-        :class="{
-          'p-invalid': formErrors.fieldInvalid('replacement_room_type'),
-        }"
-        :options="replacementRoomTypes"
-        :placeholder="$t('admin.room_types.delete.no_replacement')"
-        option-value="value"
-        option-label="text"
-        aria-describedby="replacement-help"
-        show-clear
-      >
-        <template #clearicon="{ clearCallback }">
-          <span
-            class="p-dropdown-clear"
-            role="button"
-            @click.stop="clearCallback"
-          >
-            <i class="fa-solid fa-times" />
-          </span>
-        </template>
-      </Select>
+      <InputGroup>
+        <Select
+          id="replacement-room-type"
+          v-model.number="replacement"
+          autofocus
+          :disabled="
+            isBusy || loadingRoomTypes || replacementRoomTypesLoadingError
+          "
+          :loading="loadingRoomTypes"
+          :class="{
+            'p-invalid': formErrors.fieldInvalid('replacement_room_type'),
+          }"
+          :options="replacementRoomTypes"
+          :placeholder="$t('admin.room_types.delete.no_replacement')"
+          option-value="value"
+          option-label="text"
+          aria-describedby="replacement-help"
+          show-clear
+        >
+          <template #clearicon="{ clearCallback }">
+            <span
+              class="p-dropdown-clear"
+              role="button"
+              @click.stop="clearCallback"
+            >
+              <i class="fa-solid fa-times" />
+            </span>
+          </template>
+        </Select>
+        <Button
+          v-if="replacementRoomTypesLoadingError"
+          :disabled="isBusy"
+          outlined
+          severity="secondary"
+          icon="fa-solid fa-sync"
+          @click="loadReplacementRoomTypes()"
+        />
+      </InputGroup>
       <FormError :errors="formErrors.fieldError('replacement_room_type')" />
       <small id="replacement-help">{{
         $t("admin.room_types.delete.replacement_info")
@@ -102,6 +114,7 @@ const isBusy = ref(false);
 const replacement = ref(null);
 const replacementRoomTypes = ref([]);
 const loadingRoomTypes = ref(false);
+const replacementRoomTypesLoadingError = ref(false);
 
 /**
  * Shows the delete modal
@@ -116,6 +129,8 @@ function showModal() {
 
 function loadReplacementRoomTypes() {
   loadingRoomTypes.value = true;
+  replacementRoomTypesLoadingError.value = false;
+
   api
     .call("roomTypes")
     .then((response) => {
@@ -131,6 +146,7 @@ function loadReplacementRoomTypes() {
         });
     })
     .catch((error) => {
+      replacementRoomTypesLoadingError.value = true;
       api.error(error);
     })
     .finally(() => {

From 677c4c6ecca71e248f712b8b3254126c9dfa5f69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Thu, 9 Jan 2025 10:35:20 +0100
Subject: [PATCH 40/79] Fix bbb logo image url input

---
 app/Http/Requests/UpdateSettings.php | 2 +-
 resources/js/views/AdminSettings.vue | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/Http/Requests/UpdateSettings.php b/app/Http/Requests/UpdateSettings.php
index 5bc9a97cd..a64f51ead 100644
--- a/app/Http/Requests/UpdateSettings.php
+++ b/app/Http/Requests/UpdateSettings.php
@@ -77,7 +77,7 @@ public function rules()
             'recording_attendance_retention_period' => ['required', 'numeric', Rule::enum(TimePeriod::class)],
             'recording_recording_retention_period' => ['required', 'numeric',  Rule::enum(TimePeriod::class)->except($disabledRecordingRetentionPeriods)],
 
-            'bbb_logo' => ['string', 'max:255'],
+            'bbb_logo' => ['nullable', 'string', 'max:255'],
             'bbb_logo_file' => ['image', 'max:500'],
             'bbb_style' => ['nullable', 'file', 'max:500'],
             'bbb_default_presentation' => ['nullable', 'file', 'max:'.(config('bigbluebutton.max_filesize') * 1000), 'mimes:'.config('bigbluebutton.allowed_file_mimes')],
diff --git a/resources/js/views/AdminSettings.vue b/resources/js/views/AdminSettings.vue
index 7fd932740..1d09cb780 100644
--- a/resources/js/views/AdminSettings.vue
+++ b/resources/js/views/AdminSettings.vue
@@ -1285,7 +1285,9 @@ function updateSettings() {
 
   if (uploadBBBLogoFile.value) {
     formData.append("bbb_logo_file", uploadBBBLogoFile.value);
-  } else if (!bbbLogoDeleted.value && settings.value.bbb_logo != null) {
+  } else if (bbbLogoDeleted.value) {
+    formData.append("bbb_logo", "");
+  } else if (settings.value.bbb_logo !== null) {
     formData.append("bbb_logo", settings.value.bbb_logo);
   }
 

From 1cc9866b1dd0d888248e2184450fa563202e1b35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Thu, 9 Jan 2025 11:05:21 +0100
Subject: [PATCH 41/79] Adjust backend tests

---
 tests/Backend/Feature/api/v1/SettingsTest.php | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/tests/Backend/Feature/api/v1/SettingsTest.php b/tests/Backend/Feature/api/v1/SettingsTest.php
index e61ecf9fc..d797b6bbc 100644
--- a/tests/Backend/Feature/api/v1/SettingsTest.php
+++ b/tests/Backend/Feature/api/v1/SettingsTest.php
@@ -500,7 +500,6 @@ public function test_update_with_invalid_inputs()
             'recording_attendance_retention_period' => 'notnumber',
             'recording_recording_retention_period' => 'notnumber',
 
-            'bbb_logo' => '',
             'bbb_logo_file' => 'notimagefile',
         ];
 
@@ -552,7 +551,6 @@ public function test_update_with_invalid_inputs()
                 'recording_attendance_retention_period',
                 'recording_recording_retention_period',
 
-                'bbb_logo',
                 'bbb_logo_file',
             ]);
 
@@ -902,7 +900,7 @@ public function test_update_bbb_style()
         $this->assertEquals('body { background-color: #000; }', Storage::disk('public')->get('styles/bbb.css'));
 
         // Clear default presentation (file deleted and setting removed)
-        $payload['bbb_style'] = null;
+        $payload['bbb_style'] = '';
         $this->actingAs($this->user)->putJson(route('api.v1.settings.update'), $payload)
             ->assertSuccessful();
         $this->assertNull(app(BigBlueButtonSettings::class)->style);
@@ -985,6 +983,7 @@ public function test_update_bbb_logo()
 
         // Clear logo
         unset($payload['bbb_logo_file']);
+        $payload['bbb_logo'] = '';
         $this->actingAs($this->user)->putJson(route('api.v1.settings.update'), $payload)
             ->assertSuccessful();
         $this->assertNull(app(BigBlueButtonSettings::class)->logo);

From 220a92f7150c453d9d3fd6ee570a13df05d83553 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Sun, 12 Jan 2025 12:32:08 +0100
Subject: [PATCH 42/79] Fix tests (locales and dark mode)

---
 cypress.config.js                                  | 12 ++++++++++++
 package.json                                       |  4 ++--
 tests/Frontend/e2e/RoomsViewFiles.cy.js            |  4 ++--
 .../e2e/RoomsViewHistoryMeetingActions.cy.js       |  2 ++
 tests/Frontend/support/commands/generalCommands.js | 14 ++++++++++++++
 5 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/cypress.config.js b/cypress.config.js
index 34dca4be2..9d56d984e 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -16,6 +16,18 @@ export default defineConfig({
 
       // include any other plugin code...
 
+      on("before:browser:launch", (browser, launchOptions) => {
+        if (browser.family === "chromium" && browser.name !== "electron") {
+          launchOptions.preferences.default.intl = {
+            acceptLanguages: "en",
+            accept_languages: "en",
+            selected_languages: "en",
+          };
+
+          return launchOptions;
+        }
+      });
+
       // It's IMPORTANT to return the config object
       // with any changed environment variables
       return config;
diff --git a/package.json b/package.json
index 74702d5e1..c8bbbb469 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,8 @@
     "prettier:fix": "prettier . --write",
     "docs:install": "cd docs && npm install",
     "docs:dev": "cd docs && npm run start -- --host 0.0.0.0",
-    "cypress:open": "TZ=America/New_York cypress open",
-    "cypress:run": "TZ=America/New_York cypress run",
+    "cypress:open": "TZ=America/New_York LANG=en cypress open",
+    "cypress:run": "TZ=America/New_York LANG=en cypress run",
     "create-coverage-report": "nyc report --reporter html -t coverage"
   },
   "devDependencies": {
diff --git a/tests/Frontend/e2e/RoomsViewFiles.cy.js b/tests/Frontend/e2e/RoomsViewFiles.cy.js
index 23b2c072d..c5679fe94 100644
--- a/tests/Frontend/e2e/RoomsViewFiles.cy.js
+++ b/tests/Frontend/e2e/RoomsViewFiles.cy.js
@@ -693,7 +693,7 @@ describe("Rooms View Files", function () {
 
   it("view with different permissions", function () {
     // Check view for guest without terms of use
-    cy.intercept("GET", "api/v1/currentUser", {});
+    cy.intercept("GET", "api/v1/currentUser", { data: [] });
     cy.fixture("room.json").then((room) => {
       room.data.current_user = null;
 
@@ -858,7 +858,7 @@ describe("Rooms View Files", function () {
     });
 
     // Check view for guest with terms of use
-    cy.intercept("GET", "api/v1/currentUser", {});
+    cy.intercept("GET", "api/v1/currentUser", { data: [] });
     cy.fixture("room.json").then((room) => {
       room.data.current_user = null;
 
diff --git a/tests/Frontend/e2e/RoomsViewHistoryMeetingActions.cy.js b/tests/Frontend/e2e/RoomsViewHistoryMeetingActions.cy.js
index 3239f6122..2af0c52d1 100644
--- a/tests/Frontend/e2e/RoomsViewHistoryMeetingActions.cy.js
+++ b/tests/Frontend/e2e/RoomsViewHistoryMeetingActions.cy.js
@@ -12,6 +12,8 @@ describe("Rooms view history meeting actions", function () {
     cy.wait("@roomRequest");
     cy.wait("@roomHistoryRequest");
 
+    cy.enforceLightMode();
+
     const statsRequest = interceptIndefinitely(
       "GET",
       "api/v1/meetings/3a3e504a-d2c4-431c-8ca1-a62598e66761/stats",
diff --git a/tests/Frontend/support/commands/generalCommands.js b/tests/Frontend/support/commands/generalCommands.js
index cb0725c04..5d287f657 100644
--- a/tests/Frontend/support/commands/generalCommands.js
+++ b/tests/Frontend/support/commands/generalCommands.js
@@ -38,3 +38,17 @@ Cypress.Commands.add("checkToastMessage", (messages) => {
     cy.wrap($toast, { log: false }).should("not.exist");
   });
 });
+
+/**
+ * Enforces the light mode if the dark mode is currently active
+ * @memberof cy
+ * @method enforceLightMode
+ * @returns void
+ */
+Cypress.Commands.add("enforceLightMode", () => {
+  cy.get("html").then(($html) => {
+    if ($html.hasClass("dark")) {
+      cy.get(".fa-solid.fa-moon").click();
+    }
+  });
+});

From d8c3c1b434d6dc6567dd48c7e7a7acea059e395b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Sun, 12 Jan 2025 15:59:31 +0100
Subject: [PATCH 43/79] Improve AdminSettings tests

---
 .../support/commands/adminSettingsCommands.js | 118 +++++++-----------
 1 file changed, 48 insertions(+), 70 deletions(-)

diff --git a/tests/Frontend/support/commands/adminSettingsCommands.js b/tests/Frontend/support/commands/adminSettingsCommands.js
index 824e61a9f..e160b12e0 100644
--- a/tests/Frontend/support/commands/adminSettingsCommands.js
+++ b/tests/Frontend/support/commands/adminSettingsCommands.js
@@ -65,41 +65,7 @@ Cypress.Commands.add(
         .should("have.attr", "src")
         .and("not.include", originalSrc)
         .then((src) => {
-          cy.wrap(null).then(async () => {
-            return new Cypress.Promise((resolve, reject) => {
-              fetch(src)
-                .then((response) => response.blob())
-                .then((blob) => {
-                  const contentType = blob.type;
-                  const reader = new FileReader();
-                  reader.readAsDataURL(blob);
-                  reader.onloadend = function () {
-                    try {
-                      const base64data = reader.result;
-                      expect(base64data).to.eql(
-                        "data:" + contentType + ";base64," + content,
-                      );
-                      resolve();
-                    } catch (error) {
-                      reject(error);
-                    }
-                  };
-                  // ToDo ???? use _arrayBufferToBase64???? (disadvantage: no content type)
-                  // .then((response) => response.arrayBuffer())
-                  // .then((arrayBuffer) => {
-                  //   const base64 = _arrayBufferToBase64(arrayBuffer);
-                  //   try {
-                  //     expect(base64).to.eql(content);
-                  //     resolve();
-                  //   } catch (error) {
-                  //     reject(error);
-                  //   }
-                })
-                .catch((error) => {
-                  reject(error);
-                });
-            });
-          });
+          cy.checkBlobSrcImage(src, content);
         });
     });
 
@@ -138,46 +104,58 @@ Cypress.Commands.add(
         .should("have.attr", "src")
         .and("not.include", originalSrc)
         .then((src) => {
-          cy.wrap(null).then(async () => {
-            return new Cypress.Promise((resolve, reject) => {
-              fetch(src)
-                .then((response) => response.blob())
-                .then((blob) => {
-                  const contentType = blob.type;
-                  const reader = new FileReader();
-                  reader.readAsDataURL(blob);
-                  reader.onloadend = function () {
-                    try {
-                      const base64data = reader.result;
-                      expect(base64data).to.eql(
-                        "data:" + contentType + ";base64," + content,
-                      );
-                      resolve();
-                    } catch (error) {
-                      reject(error);
-                    }
-                  };
-                  // ToDo ???? use _arrayBufferToBase64???? (disadvantage: no content type)
-                  // .then((response) => response.arrayBuffer())
-                  // .then((arrayBuffer) => {
-                  //   const base64 = _arrayBufferToBase64(arrayBuffer);
-                  //   try {
-                  //     expect(base64).to.eql(content);
-                  //     resolve();
-                  //   } catch (error) {
-                  //     reject(error);
-                  //   }
-                })
-                .catch((error) => {
-                  reject(error);
-                });
-            });
-          });
+          cy.checkBlobSrcImage(src, content);
         });
     });
   },
 );
 
+/**
+ * Checks if the image loaded from the blob url has the expected content
+ * @memberof cy
+ * @method checkBlobUrlData
+ * @param  {string} blobSrc
+ * @param  {string} expectedBase64Content
+ * @returns void
+ */
+Cypress.Commands.add("checkBlobSrcImage", (blobSrc, expectedBase64Content) => {
+  cy.wrap(null, { log: false }).then(async () => {
+    return new Cypress.Promise((resolve, reject) => {
+      fetch(blobSrc)
+        .then((response) => response.blob())
+        .then((blob) => {
+          const contentType = blob.type;
+          const reader = new FileReader();
+          reader.readAsDataURL(blob);
+          reader.onloadend = function () {
+            try {
+              const base64data = reader.result;
+              expect(base64data).to.eql(
+                "data:" + contentType + ";base64," + expectedBase64Content,
+              );
+              resolve();
+            } catch (error) {
+              reject(error);
+            }
+          };
+          // ToDo ???? use _arrayBufferToBase64???? (disadvantage: no content type)
+          // .then((response) => response.arrayBuffer())
+          // .then((arrayBuffer) => {
+          //   const base64 = _arrayBufferToBase64(arrayBuffer);
+          //   try {
+          //     expect(base64).to.eql(expectedBase64Content);
+          //     resolve();
+          //   } catch (error) {
+          //     reject(error);
+          //   }
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  });
+});
+
 /**
  * Checks if the image file upload works correctly
  * @memberof cy

From 2b6f886f9df48206e8263e83fed8d79467f1731c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Sun, 12 Jan 2025 16:32:21 +0100
Subject: [PATCH 44/79] Improve AdminSettings tests

---
 tests/Frontend/e2e/AdminSettingsEdit.cy.js | 84 +++++++++++++++++++++-
 1 file changed, 82 insertions(+), 2 deletions(-)

diff --git a/tests/Frontend/e2e/AdminSettingsEdit.cy.js b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
index 37c9d7470..28424777a 100644
--- a/tests/Frontend/e2e/AdminSettingsEdit.cy.js
+++ b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
@@ -452,8 +452,6 @@ describe("Admin settings with edit permission", function () {
 
       const uploadedFavicon = formData.get("theme_favicon_file");
 
-      //console.log(uploadedFavicon);
-
       expect(uploadedFavicon.name).to.eql("favicon.ico");
       expect(uploadedFavicon.type).to.eql("image/vnd.microsoft.icon");
       cy.fixture("files/favicon.ico", "base64").then((content) => {
@@ -482,6 +480,8 @@ describe("Admin settings with edit permission", function () {
         // });
       });
 
+      expect(formData.get("theme_favicon")).to.eql(null);
+
       const uploadedFaviconDark = formData.get("theme_favicon_dark_file");
       expect(uploadedFaviconDark.name).to.eql("favicon-dark.ico");
       expect(uploadedFaviconDark.type).to.eql("image/vnd.microsoft.icon");
@@ -492,6 +492,8 @@ describe("Admin settings with edit permission", function () {
         });
       });
 
+      expect(formData.get("theme_favicon_dark")).to.eql(null);
+
       const uploadedLogo = formData.get("theme_logo_file");
       expect(uploadedLogo.name).to.eql("logo.svg");
       expect(uploadedLogo.type).to.eql("image/svg+xml");
@@ -502,6 +504,8 @@ describe("Admin settings with edit permission", function () {
         });
       });
 
+      expect(formData.get("theme_logo")).to.eql(null);
+
       const uploadedLogoDark = formData.get("theme_logo_dark_file");
       expect(uploadedLogoDark.name).to.eql("logo-dark.svg");
       expect(uploadedLogoDark.type).to.eql("image/svg+xml");
@@ -512,6 +516,8 @@ describe("Admin settings with edit permission", function () {
         });
       });
 
+      expect(formData.get("theme_logo_dark")).to.eql(null);
+
       expect(formData.get("theme_primary_color")).to.equal("#14b8a6");
       expect(formData.get("theme_rounded")).to.equal("0");
     });
@@ -547,6 +553,49 @@ describe("Admin settings with edit permission", function () {
       cy.get("#theme-primary-color").should("have.value", "#14b8a6");
     });
     cy.get("#theme-rounded").should("not.be.checked");
+
+    // Save changes again
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.theme_favicon = "/images/favicon2.ico";
+      settings.data.theme_favicon_dark = "/images/favicon-dark2.ico";
+      settings.data.theme_logo = "/images/logo2.svg";
+      settings.data.theme_logo_dark = "/images/logo-dark2.svg";
+      settings.data.theme_primary_color = "#14b8a6";
+      settings.data.theme_rounded = false;
+
+      cy.intercept("POST", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("saveChangesRequest");
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("theme_favicon_file")).to.eql(null);
+      expect(formData.get("theme_favicon")).to.eql("/images/favicon2.ico");
+
+      expect(formData.get("theme_favicon_dark_file")).to.eql(null);
+      expect(formData.get("theme_favicon_dark")).to.eql(
+        "/images/favicon-dark2.ico",
+      );
+
+      expect(formData.get("theme_logo_file")).to.eql(null);
+      expect(formData.get("theme_logo")).to.eql("/images/logo2.svg");
+
+      expect(formData.get("theme_logo_dark_file")).to.eql(null);
+      expect(formData.get("theme_logo_dark")).to.eql("/images/logo-dark2.svg");
+
+      expect(formData.get("theme_primary_color")).to.equal("#14b8a6");
+      expect(formData.get("theme_rounded")).to.equal("0");
+    });
   });
 
   it("change banner settings", function () {
@@ -2214,6 +2263,8 @@ describe("Admin settings with edit permission", function () {
         });
       });
 
+      expect(formData.get("bbb_logo")).to.equal(null);
+
       const uploadedBBBStyle = formData.get("bbb_style");
       expect(uploadedBBBStyle.name).to.eql("bbb_style.css");
       expect(uploadedBBBStyle.type).to.eql("text/css");
@@ -2377,6 +2428,7 @@ describe("Admin settings with edit permission", function () {
         interception.request.headers,
       );
 
+      expect(formData.get("bbb_logo_file")).to.eql(null);
       expect(formData.get("bbb_logo")).to.eql("");
       expect(formData.get("bbb_style")).to.eql("");
       expect(formData.get("bbb_default_presentation")).to.be.eql("");
@@ -2411,6 +2463,34 @@ describe("Admin settings with edit permission", function () {
         "not.exist",
       );
     });
+
+    // Save settings again
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.bbb_logo = null;
+      settings.data.bbb_style = null;
+      settings.data.bbb_default_presentation = null;
+
+      cy.intercept("POST", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("include.text", "app.save")
+      .click();
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("bbb_logo_file")).to.eql(null);
+      expect(formData.get("bbb_logo")).to.eql(null);
+      expect(formData.get("bbb_style")).to.eql(null);
+      expect(formData.get("bbb_default_presentation")).to.be.eql(null);
+    });
   });
 
   // ToDo errors when saving changes

From fb26e4f3033f18eb7e7cb02c70e6cd350f050d71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 13 Jan 2025 07:40:26 +0100
Subject: [PATCH 45/79] Improve AdminSettings tests (add save changes errors
 test)

---
 tests/Frontend/e2e/AdminSettingsEdit.cy.js | 486 ++++++++++++++++++++-
 1 file changed, 485 insertions(+), 1 deletion(-)

diff --git a/tests/Frontend/e2e/AdminSettingsEdit.cy.js b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
index 28424777a..736f4e10f 100644
--- a/tests/Frontend/e2e/AdminSettingsEdit.cy.js
+++ b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
@@ -2493,5 +2493,489 @@ describe("Admin settings with edit permission", function () {
     });
   });
 
-  // ToDo errors when saving changes
+  it("save changes errors", function () {
+    // Check with 422 errors
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.intercept("POST", "api/v1/settings", {
+      statusCode: 422,
+      body: {
+        message: "The given data was invalid.",
+        errors: {
+          general_name: ["The general name field is required."],
+          general_help_url: ["The selected general help url is invalid."],
+          general_legal_notice_url: [
+            "The selected general legal notice url is invalid.",
+          ],
+          general_privacy_policy_url: [
+            "The selected general privacy policy url is invalid.",
+          ],
+          general_pagination_page_size: [
+            "The general pagination page size field is required.",
+          ],
+          general_toast_lifetime: [
+            "The general toast lifetime field is required.",
+          ],
+          general_default_timezone: [
+            "The general default timezone field is required.",
+          ],
+          general_no_welcome_page: [
+            "The selected general no welcome page field is invalid.",
+          ],
+          theme_favicon: ["The theme favicon field is required."],
+          theme_favicon_file: ["The theme favicon file field is required."],
+          theme_favicon_dark: ["The theme favicon dark field is required."],
+          theme_favicon_dark_file: [
+            "The theme favicon dark file field is required.",
+          ],
+          theme_logo: ["The theme logo field is required."],
+          theme_logo_file: ["The theme logo file field is required."],
+          theme_logo_dark: ["The theme logo dark field is required."],
+          theme_logo_dark_file: ["The theme logo dark file field is required."],
+          theme_primary_color: ["The theme primary color field is required."],
+          theme_rounded: ["The theme rounded field is required."],
+          banner_enabled: ["The banner enabled field is required."],
+          banner_title: ["The selected banner title is invalid."],
+          banner_icon: ["The selected banner icon is invalid."],
+          banner_message: ["The selected banner message is invalid."],
+          banner_link: ["The selected banner link is invalid."],
+          banner_link_text: ["The selected banner link text is invalid."],
+          banner_link_style: ["The selected banner link style is invalid."],
+          banner_link_target: ["The selected banner link target is invalid."],
+          banner_color: ["The selected banner color is invalid."],
+          banner_background: [
+            "The selected banner background color is invalid.",
+          ],
+          room_limit: ["The room limit field is required."],
+          room_token_expiration: [
+            "The selected room token expiration is invalid.",
+          ],
+          room_auto_delete_deadline_period: [
+            "The selected room auto delete deadline period is invalid.",
+          ],
+          room_auto_delete_inactive_period: [
+            "The selected room auto delete inactive period is invalid.",
+          ],
+          room_auto_delete_never_used_period: [
+            "The selected room auto delete never used period is invalid.",
+          ],
+          room_file_terms_of_use: [
+            "The selected room file terms of use is invalid.",
+          ],
+          user_password_change_allowed: [
+            "The user password change allowed field is required.",
+          ],
+          recording_server_usage_enabled: [
+            "The recording server usage enabled field is required.",
+          ],
+          recording_server_usage_retention_period: [
+            "The selected recording server usage retention period is invalid.",
+          ],
+          recording_meeting_usage_enabled: [
+            "The recording meeting usage enabled field is required.",
+          ],
+          recording_meeting_usage_retention_period: [
+            "The selected recording meeting usage retention period is invalid.",
+          ],
+          recording_attendance_retention_period: [
+            "The selected recording attendance retention period is invalid.",
+          ],
+          recording_recording_retention_period: [
+            "The selected recording recording retention period is invalid.",
+          ],
+          bbb_logo: ["The bbb logo field is required."],
+          bbb_logo_file: ["The bbb logo file field is required."],
+          bbb_style: ["The bbb style field is required."],
+          bbb_default_presentation: [
+            "The bbb default presentation field is required.",
+          ],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="settings-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that errors are shown correctly
+    cy.get('[data-test="application-name-field"]').should(
+      "include.text",
+      "The general name field is required.",
+    );
+    cy.get('[data-test="help-url-field"]').should(
+      "include.text",
+      "The selected general help url is invalid.",
+    );
+    cy.get('[data-test="legal-notice-url-field"]').should(
+      "include.text",
+      "The selected general legal notice url is invalid.",
+    );
+    cy.get('[data-test="privacy-policy-url-field"]').should(
+      "include.text",
+      "The selected general privacy policy url is invalid.",
+    );
+    cy.get('[data-test="pagination-page-size-field"]').should(
+      "include.text",
+      "The general pagination page size field is required.",
+    );
+    cy.get('[data-test="toast-lifetime-field"]').should(
+      "include.text",
+      "The general toast lifetime field is required.",
+    );
+    cy.get('[data-test="default-timezone-field"]').should(
+      "include.text",
+      "The general default timezone field is required.",
+    );
+    cy.get('[data-test="no-welcome-page-field"]').should(
+      "include.text",
+      "The selected general no welcome page field is invalid.",
+    );
+
+    cy.get('[data-test="favicon-field"]')
+      .should("include.text", "The theme favicon field is required.")
+      .and("include.text", "The theme favicon file field is required.");
+    cy.get('[data-test="favicon-dark-field"]')
+      .should("include.text", "The theme favicon dark field is required.")
+      .and("include.text", "The theme favicon dark file field is required.");
+    cy.get('[data-test="logo-field"]')
+      .should("include.text", "The theme logo field is required.")
+      .and("include.text", "The theme logo file field is required.");
+    cy.get('[data-test="logo-dark-field"]')
+      .should("include.text", "The theme logo dark field is required.")
+      .and("include.text", "The theme logo dark file field is required.");
+    cy.get('[data-test="primary-color-field"]').should(
+      "include.text",
+      "The theme primary color field is required.",
+    );
+    cy.get('[data-test="theme-rounded-field"]').should(
+      "include.text",
+      "The theme rounded field is required.",
+    );
+
+    cy.get('[data-test="banner-enabled-field"]').should(
+      "include.text",
+      "The banner enabled field is required.",
+    );
+    cy.get('[data-test="banner-title-field"]').should(
+      "include.text",
+      "The selected banner title is invalid.",
+    );
+    cy.get('[data-test="banner-icon-field"]').should(
+      "include.text",
+      "The selected banner icon is invalid.",
+    );
+    cy.get('[data-test="banner-message-field"]').should(
+      "include.text",
+      "The selected banner message is invalid.",
+    );
+    cy.get('[data-test="banner-link-field"]').should(
+      "include.text",
+      "The selected banner link is invalid.",
+    );
+    cy.get('[data-test="banner-link-text-field"]').should(
+      "include.text",
+      "The selected banner link text is invalid.",
+    );
+    cy.get('[data-test="banner-link-style-field"]').should(
+      "include.text",
+      "The selected banner link style is invalid.",
+    );
+    cy.get('[data-test="banner-link-target-field"]').should(
+      "include.text",
+      "The selected banner link target is invalid.",
+    );
+    cy.get('[data-test="banner-color-field"]').should(
+      "include.text",
+      "The selected banner color is invalid.",
+    );
+    cy.get('[data-test="banner-background-field"]').should(
+      "include.text",
+      "The selected banner background color is invalid.",
+    );
+
+    cy.get('[data-test="room-limit-field"]').should(
+      "include.text",
+      "The room limit field is required.",
+    );
+    cy.get('[data-test="room-token-expiration-field"]').should(
+      "include.text",
+      "The selected room token expiration is invalid.",
+    );
+    cy.get('[data-test="room-auto-delete-deadline-period-field"]').should(
+      "include.text",
+      "The selected room auto delete deadline period is invalid.",
+    );
+    cy.get('[data-test="room-auto-delete-inactive-period-field"]').should(
+      "include.text",
+      "The selected room auto delete inactive period is invalid.",
+    );
+    cy.get('[data-test="room-auto-delete-never-used-period-field"]').should(
+      "include.text",
+      "The selected room auto delete never used period is invalid.",
+    );
+    cy.get('[data-test="room-file-terms-of-use-field"]').should(
+      "include.text",
+      "The selected room file terms of use is invalid.",
+    );
+
+    cy.get('[data-test="password-change-allowed-field"]').should(
+      "include.text",
+      "The user password change allowed field is required.",
+    );
+
+    cy.get('[data-test="statistics-servers-enabled-field"]').should(
+      "include.text",
+      "The recording server usage enabled field is required.",
+    );
+    cy.get('[data-test="statistics-servers-retention-period-field"]').should(
+      "include.text",
+      "The selected recording server usage retention period is invalid.",
+    );
+    cy.get('[data-test="statistics-meetings-enabled-field"]').should(
+      "include.text",
+      "The recording meeting usage enabled field is required.",
+    );
+    cy.get('[data-test="statistics-meetings-retention-period-field"]').should(
+      "include.text",
+      "The selected recording meeting usage retention period is invalid.",
+    );
+    cy.get('[data-test="attendance-retention-period-field"]').should(
+      "include.text",
+      "The selected recording attendance retention period is invalid.",
+    );
+    cy.get('[data-test="recording-retention-period-field"]').should(
+      "include.text",
+      "The selected recording recording retention period is invalid.",
+    );
+
+    cy.get('[data-test="bbb-logo-field"]')
+      .should("include.text", "The bbb logo field is required.")
+      .and("include.text", "The bbb logo file field is required.");
+    cy.get('[data-test="bbb-style-field"]').should(
+      "include.text",
+      "The bbb style field is required.",
+    );
+    cy.get('[data-test="default-presentation-field"]').should(
+      "include.text",
+      "The bbb default presentation field is required.",
+    );
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/settings", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="settings-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="application-name-field"]').should(
+      "not.include.text",
+      "The general name field is required.",
+    );
+    cy.get('[data-test="help-url-field"]').should(
+      "not.include.text",
+      "The selected general help url is invalid.",
+    );
+    cy.get('[data-test="legal-notice-url-field"]').should(
+      "not.include.text",
+      "The selected general legal notice url is invalid.",
+    );
+    cy.get('[data-test="privacy-policy-url-field"]').should(
+      "not.include.text",
+      "The selected general privacy policy url is invalid.",
+    );
+    cy.get('[data-test="pagination-page-size-field"]').should(
+      "not.include.text",
+      "The general pagination page size field is required.",
+    );
+    cy.get('[data-test="toast-lifetime-field"]').should(
+      "not.include.text",
+      "The general toast lifetime field is required.",
+    );
+    cy.get('[data-test="default-timezone-field"]').should(
+      "not.include.text",
+      "The general default timezone field is required.",
+    );
+    cy.get('[data-test="no-welcome-page-field"]').should(
+      "not.include.text",
+      "The selected general no welcome page field is invalid.",
+    );
+
+    cy.get('[data-test="favicon-field"]')
+      .should("not.include.text", "The theme favicon field is required.")
+      .and("not.include.text", "The theme favicon file field is required.");
+    cy.get('[data-test="favicon-dark-field"]')
+      .should("not.include.text", "The theme favicon dark field is required.")
+      .and(
+        "not.include.text",
+        "The theme favicon dark file field is required.",
+      );
+    cy.get('[data-test="logo-field"]')
+      .should("not.include.text", "The theme logo field is required.")
+      .and("not.include.text", "The theme logo file field is required.");
+    cy.get('[data-test="logo-dark-field"]')
+      .should("not.include.text", "The theme logo dark field is required.")
+      .and("not.include.text", "The theme logo dark file field is required.");
+    cy.get('[data-test="primary-color-field"]').should(
+      "not.include.text",
+      "The theme primary color field is required.",
+    );
+    cy.get('[data-test="theme-rounded-field"]').should(
+      "not.include.text",
+      "The theme rounded field is required.",
+    );
+
+    cy.get('[data-test="banner-enabled-field"]').should(
+      "not.include.text",
+      "The banner enabled field is required.",
+    );
+    cy.get('[data-test="banner-title-field"]').should(
+      "not.include.text",
+      "The selected banner title is invalid.",
+    );
+    cy.get('[data-test="banner-icon-field"]').should(
+      "not.include.text",
+      "The selected banner icon is invalid.",
+    );
+    cy.get('[data-test="banner-message-field"]').should(
+      "not.include.text",
+      "The selected banner message is invalid.",
+    );
+    cy.get('[data-test="banner-link-field"]').should(
+      "not.include.text",
+      "The selected banner link is invalid.",
+    );
+    cy.get('[data-test="banner-link-text-field"]').should(
+      "not.include.text",
+      "The selected banner link text is invalid.",
+    );
+    cy.get('[data-test="banner-link-style-field"]').should(
+      "not.include.text",
+      "The selected banner link style is invalid.",
+    );
+    cy.get('[data-test="banner-link-target-field"]').should(
+      "not.include.text",
+      "The selected banner link target is invalid.",
+    );
+    cy.get('[data-test="banner-color-field"]').should(
+      "not.include.text",
+      "The selected banner color is invalid.",
+    );
+    cy.get('[data-test="banner-background-field"]').should(
+      "not.include.text",
+      "The selected banner background color is invalid.",
+    );
+
+    cy.get('[data-test="room-limit-field"]').should(
+      "not.include.text",
+      "The room limit field is required.",
+    );
+    cy.get('[data-test="room-token-expiration-field"]').should(
+      "not.include.text",
+      "The selected room token expiration is invalid.",
+    );
+    cy.get('[data-test="room-auto-delete-deadline-period-field"]').should(
+      "not.include.text",
+      "The selected room auto delete deadline period is invalid.",
+    );
+    cy.get('[data-test="room-auto-delete-inactive-period-field"]').should(
+      "not.include.text",
+      "The selected room auto delete inactive period is invalid.",
+    );
+    cy.get('[data-test="room-auto-delete-never-used-period-field"]').should(
+      "not.include.text",
+      "The selected room auto delete never used period is invalid.",
+    );
+    cy.get('[data-test="room-file-terms-of-use-field"]').should(
+      "not.include.text",
+      "The selected room file terms of use is invalid.",
+    );
+
+    cy.get('[data-test="password-change-allowed-field"]').should(
+      "not.include.text",
+      "The user password change allowed field is required.",
+    );
+
+    cy.get('[data-test="statistics-servers-enabled-field"]').should(
+      "not.include.text",
+      "The recording server usage enabled field is required.",
+    );
+    cy.get('[data-test="statistics-servers-retention-period-field"]').should(
+      "not.include.text",
+      "The selected recording server usage retention period is invalid.",
+    );
+    cy.get('[data-test="statistics-meetings-enabled-field"]').should(
+      "not.include.text",
+      "The recording meeting usage enabled field is required.",
+    );
+    cy.get('[data-test="statistics-meetings-retention-period-field"]').should(
+      "not.include.text",
+      "The selected recording meeting usage retention period is invalid.",
+    );
+    cy.get('[data-test="attendance-retention-period-field"]').should(
+      "not.include.text",
+      "The selected recording attendance retention period is invalid.",
+    );
+    cy.get('[data-test="recording-retention-period-field"]').should(
+      "not.include.text",
+      "The selected recording recording retention period is invalid.",
+    );
+
+    cy.get('[data-test="bbb-logo-field"]')
+      .should("not.include.text", "The bbb logo field is required.")
+      .and("not.include.text", "The bbb logo file field is required.");
+    cy.get('[data-test="bbb-style-field"]').should(
+      "not.include.text",
+      "The bbb style field is required.",
+    );
+    cy.get('[data-test="default-presentation-field"]').should(
+      "not.include.text",
+      "The bbb default presentation field is required.",
+    );
+
+    // Check with 413 error (payload too large)
+    cy.intercept("POST", "api/v1/settings", {
+      statusCode: 413,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="settings-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error message is shown
+    cy.checkToastMessage("app.flash.too_large");
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/settings", {
+      statusCode: 401,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="settings-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/settings");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
 });

From 612dbbf4d948798d28d797ba0a360a27068e5d19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 13 Jan 2025 07:53:04 +0100
Subject: [PATCH 46/79] Fix error message (AdminSettings)

---
 resources/js/views/AdminSettings.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/resources/js/views/AdminSettings.vue b/resources/js/views/AdminSettings.vue
index 1d09cb780..b2aebb3eb 100644
--- a/resources/js/views/AdminSettings.vue
+++ b/resources/js/views/AdminSettings.vue
@@ -128,7 +128,9 @@
                   $t("admin.settings.pagination_page_size.description")
                 }}</small>
                 <FormError
-                  :errors="formErrors.fieldError('pagination_page_size')"
+                  :errors="
+                    formErrors.fieldError('general_pagination_page_size')
+                  "
                 />
               </div>
             </div>

From 854d2dc50d331c81a2b3764ae0f3c85fb0516628 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Tue, 14 Jan 2025 21:06:17 +0100
Subject: [PATCH 47/79] Add AdminSettings only view tests

---
 tests/Frontend/e2e/AdminSettingsEdit.cy.js    |   2 +-
 tests/Frontend/e2e/AdminSettingsGeneral.cy.js |   2 -
 tests/Frontend/e2e/AdminSettingsView.cy.js    | 871 ++++++++++++++++++
 .../support/commands/adminSettingsCommands.js |  92 +-
 4 files changed, 954 insertions(+), 13 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminSettingsView.cy.js

diff --git a/tests/Frontend/e2e/AdminSettingsEdit.cy.js b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
index 736f4e10f..67401511e 100644
--- a/tests/Frontend/e2e/AdminSettingsEdit.cy.js
+++ b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
@@ -1686,7 +1686,7 @@ describe("Admin settings with edit permission", function () {
       settings.data.room_auto_delete_deadline_period = 7;
       settings.data.room_auto_delete_inactive_period = 30;
       settings.data.room_auto_delete_never_used_period = 730;
-      settings.data.room_file_terms_of_use = "";
+      settings.data.room_file_terms_of_use = null;
 
       cy.intercept("POST", "api/v1/settings", {
         statusCode: 200,
diff --git a/tests/Frontend/e2e/AdminSettingsGeneral.cy.js b/tests/Frontend/e2e/AdminSettingsGeneral.cy.js
index 4b24c7a40..d09fb1588 100644
--- a/tests/Frontend/e2e/AdminSettingsGeneral.cy.js
+++ b/tests/Frontend/e2e/AdminSettingsGeneral.cy.js
@@ -233,6 +233,4 @@ describe("Admin settings general", function () {
 
     cy.checkToastMessage("app.flash.unauthenticated");
   });
-
-  // ToDo onlyView
 });
diff --git a/tests/Frontend/e2e/AdminSettingsView.cy.js b/tests/Frontend/e2e/AdminSettingsView.cy.js
new file mode 100644
index 000000000..8eec0a876
--- /dev/null
+++ b/tests/Frontend/e2e/AdminSettingsView.cy.js
@@ -0,0 +1,871 @@
+describe("Admin settings with edit permission", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminSettingsRequest();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "settings.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("check application settings with only view permission", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.application");
+
+    cy.get('[data-test="application-name-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.name.title")
+      .and("include.text", "admin.settings.name.description")
+      .within(() => {
+        cy.get("#application-name")
+          .should("have.value", "Test Application")
+          .and("be.disabled");
+      });
+
+    cy.get('[ data-test="help-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.help_url.title")
+      .and("include.text", "admin.settings.help_url.description")
+      .within(() => {
+        cy.get("#help-url").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="legal-notice-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.legal_notice_url.title")
+      .and("include.text", "admin.settings.legal_notice_url.description")
+      .within(() => {
+        cy.get("#legal-notice-url").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="privacy-policy-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.privacy_policy_url.title")
+      .and("include.text", "admin.settings.privacy_policy_url.description")
+      .within(() => {
+        cy.get("#privacy-policy-url")
+          .should("have.value", "")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="pagination-page-size-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.pagination_page_size.title")
+      .and("include.text", "admin.settings.pagination_page_size.description")
+      .within(() => {
+        cy.get("#pagination-page-size")
+          .should("have.value", "5")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="toast-lifetime-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.toast_lifetime.title")
+      .and("include.text", "admin.settings.toast_lifetime.description")
+      .within(() => {
+        cy.get('[data-test="toast-lifetime-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#toast-lifetime-mode-unlimited")
+              .should("be.checked")
+              .and("be.disabled");
+          });
+        cy.get('[data-test="toast-lifetime-custom-input"]').should("not.exist");
+
+        cy.get('[data-test="toast-lifetime-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.settings.toast_lifetime.custom")
+          .within(() => {
+            cy.get("#toast-lifetime-mode-custom")
+              .should("not.be.checked")
+              .and("be.disabled");
+          });
+      });
+
+    cy.get('[data-test="default-timezone-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.default_timezone")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown"]')
+          .should("have.text", "UTC")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="no-welcome-page-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.no_welcome_page")
+      .within(() => {
+        cy.get("#no-welcome-page").should("be.checked").and("be.disabled");
+      });
+
+    // Reload with different settings
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.general_toast_lifetime = 10;
+
+      cy.intercept("GET", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("settingsRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@settingsRequest");
+
+    cy.get('[data-test="toast-lifetime-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.toast_lifetime.title")
+      .and("include.text", "admin.settings.toast_lifetime.description")
+      .within(() => {
+        cy.get('[data-test="toast-lifetime-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#toast-lifetime-mode-unlimited")
+              .should("not.be.checked")
+              .and("be.disabled");
+          });
+        cy.get('[data-test="toast-lifetime-custom-input"]')
+          .should("be.visible")
+          .and("have.value", "10")
+          .and("be.disabled");
+
+        cy.get('[data-test="toast-lifetime-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.settings.toast_lifetime.custom")
+          .within(() => {
+            cy.get("#toast-lifetime-mode-custom")
+              .should("be.checked")
+              .and("be.disabled");
+          });
+      });
+  });
+
+  it("check theme settings with only view permission", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.theme.title");
+
+    cy.get('[data-test="favicon-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.favicon.title")
+      .within(() => {
+        cy.checkSettingsImageSelectorOnlyView("/images/favicon.ico");
+      });
+
+    cy.get('[data-test="favicon-dark-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.favicon_dark.title")
+      .within(() => {
+        cy.checkSettingsImageSelectorOnlyView("/images/favicon-dark.ico");
+      });
+
+    cy.get('[data-test="logo-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo.title")
+      .within(() => {
+        cy.checkSettingsImageSelectorOnlyView("/images/logo.svg");
+      });
+
+    cy.get('[data-test="logo-dark-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo_dark.title")
+      .within(() => {
+        cy.checkSettingsImageSelectorOnlyView("/images/logo-dark.svg");
+      });
+
+    cy.get('[data-test="primary-color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.theme.primary_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and(i === 4 ? "have.class" : "not.have.class", "selected");
+        }
+
+        cy.get("#theme-primary-color")
+          .should("have.value", "#22c55e")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="theme-rounded-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.theme.rounded")
+      .within(() => {
+        cy.get("#theme-rounded").should("be.checked").and("be.disabled");
+      });
+  });
+
+  it("check banner settings with only view permission", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.banner.title");
+
+    cy.get('[data-test="banner-enabled-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.enabled")
+      .and("include.text", "app.enable")
+      .within(() => {
+        cy.get("#banner-enabled").should("not.be.checked").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.preview")
+      .within(() => {
+        cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+        cy.get('[data-test="app-banner"]').within(() => {
+          cy.get('[data-test="banner-title"]').should("not.exist");
+          cy.get('[data-test="banner-icon"]').should("not.exist");
+          cy.get('[data-test="banner-message"]').should("have.text", "");
+          cy.get('[data-test="banner-link-button"]').should("not.exist");
+        });
+      });
+
+    cy.get('[data-test="banner-title-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.banner_title")
+      .within(() => {
+        cy.get("#banner-title").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-icon-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.icon")
+      .and("include.text", "admin.settings.banner.icon_description")
+      .within(() => {
+        cy.get("#banner-icon").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-message-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.message")
+      .within(() => {
+        cy.get("#banner-message").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-link-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link")
+      .within(() => {
+        cy.get("#banner-link").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-link-text-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_text")
+      .within(() => {
+        cy.get("#banner-link-text").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-link-style-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_style")
+      .within(() => {
+        cy.get('[data-test="banner-link-style-dropdown"]')
+          .should("have.text", "app.button_styles.primary")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="banner-link-target-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_target")
+      .within(() => {
+        cy.get('[data-test="banner-link-target-dropdown"]')
+          .should("have.text", "app.link_targets.blank")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="banner-color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.color")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 2);
+
+        for (let i = 0; i < 2; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and("not.have.class", "selected");
+        }
+
+        cy.get("#banner-color").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-background-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.background")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and("not.have.class", "selected");
+        }
+
+        cy.get("#banner-background")
+          .should("have.value", "")
+          .and("be.disabled");
+      });
+
+    // Reload with different settings
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.banner_enabled = true;
+      settings.data.banner_title = "Banner title";
+      settings.data.banner_icon = "fa-solid fa-door-open";
+      settings.data.banner_message = "Banner text message";
+      settings.data.banner_link = "/rooms";
+      settings.data.banner_link_text = "Rooms";
+      settings.data.banner_link_style = "link";
+      settings.data.banner_link_target = "self";
+      settings.data.banner_color = "#FFFFFF";
+      settings.data.banner_background = "#ef4444";
+
+      cy.intercept("GET", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("settingsRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@settingsRequest");
+
+    cy.get("#banner-enabled").should("be.checked").and("be.disabled");
+
+    cy.get('[data-test="banner-preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.preview")
+      .within(() => {
+        cy.get('[data-test="app-banner"]')
+          .should("have.attr", "style")
+          .and("include", "color: rgb(255, 255, 255);")
+          .and("include", "background-color: rgb(239, 68, 68);");
+        cy.get('[data-test="app-banner"]').within(() => {
+          cy.get('[data-test="banner-title"]')
+            .should("be.visible")
+            .and("include.text", "Banner title");
+          cy.get('[data-test="banner-icon"]')
+            .should("be.visible")
+            .and("have.class", "fa-solid fa-door-open");
+          cy.get('[data-test="banner-message"]')
+            .should("be.visible")
+            .and("have.text", "Banner text message");
+          cy.get('[data-test="banner-link-button"]')
+            .should("be.visible")
+            .and("have.attr", "href", "/rooms")
+            .and("have.attr", "target", "_self")
+            .and("have.text", "Rooms");
+          cy.get('[data-test="banner-link-button"]')
+            .find("button")
+            .should("have.attr", "data-p-severity", "link")
+            .and("have.class", "p-0 underline")
+            .and("have.attr", "style")
+            .and("include", "color: rgb(255, 255, 255)");
+        });
+      });
+
+    cy.get("#banner-title")
+      .should("have.value", "Banner title")
+      .and("be.disabled");
+    cy.get("#banner-icon")
+      .should("have.value", "fa-solid fa-door-open")
+      .and("be.disabled");
+    cy.get("#banner-message")
+      .should("have.value", "Banner text message")
+      .and("be.disabled");
+    cy.get("#banner-link").should("have.value", "/rooms").and("be.disabled");
+    cy.get("#banner-link-text")
+      .should("have.value", "Rooms")
+      .and("be.disabled");
+    cy.get('[data-test="banner-link-style-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_style")
+      .within(() => {
+        cy.get('[data-test="banner-link-style-dropdown"]')
+          .should("have.text", "app.button_styles.link")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="banner-link-target-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_target")
+      .within(() => {
+        cy.get('[data-test="banner-link-target-dropdown"]')
+          .should("have.text", "app.link_targets.self")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="banner-color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.color")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 2);
+
+        for (let i = 0; i < 2; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .should(i === 0 ? "have.class" : "not.have.class", "selected");
+        }
+
+        cy.get("#banner-color")
+          .should("have.value", "#FFFFFF")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-background-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.background")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .should(i === 7 ? "have.class" : "not.have.class", "selected");
+        }
+
+        cy.get("#banner-background")
+          .should("have.value", "#ef4444")
+          .and("be.disabled");
+      });
+  });
+
+  it("check room settings with only view permission", function () {
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.room_auto_delete_inactive_period = 30;
+      settings.data.room_auto_delete_never_used_period = 730;
+
+      cy.intercept("GET", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("settingsRequest");
+    });
+
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_limit.title")
+      .and("include.text", "admin.settings.room_limit.description")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#room-limit-mode-unlimited")
+              .should("be.checked")
+              .and("be.disabled");
+          });
+
+        cy.get("#room-limit-custom").should("not.exist");
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#room-limit-mode-custom")
+              .should("not.be.checked")
+              .and("be.disabled");
+          });
+      });
+
+    cy.get('[data-test="room-token-expiration-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_token_expiration.title")
+      .and("include.text", "admin.settings.room_token_expiration.description")
+      .within(() => {
+        cy.get('[data-test="room-token-expiration-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="room-auto-delete-deadline-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.deadline_period.title",
+      )
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.deadline_period.description",
+      )
+      .within(() => {
+        cy.get('[data-test="room-auto-delete-deadline-dropdown"]')
+          .should("have.text", "admin.settings.two_weeks")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="room-auto-delete-inactive-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.inactive_period.title",
+      )
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.inactive_period.description",
+      )
+      .within(() => {
+        cy.get('[data-test="room-auto-delete-inactive-dropdown"]')
+          .should("have.text", "admin.settings.one_month")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="room-auto-delete-never-used-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.never_used_period.title",
+      )
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.never_used_period.description",
+      )
+      .within(() => {
+        cy.get('[data-test="room-auto-delete-never-used-dropdown"]')
+          .should("have.text", "admin.settings.two_years")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="room-file-terms-of-use-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_file_terms_of_use.title")
+      .and("include.text", "admin.settings.room_file_terms_of_use.description")
+      .within(() => {
+        cy.get("#room-file-terms-of-use")
+          .should("be.visible")
+          .and("have.value", "Room file terms of use")
+          .and("be.disabled");
+      });
+
+    // Reload with different settings
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.room_limit = 10;
+      settings.data.room_auto_delete_inactive_period = 30;
+      settings.data.room_auto_delete_never_used_period = 730;
+
+      cy.intercept("GET", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("settingsRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@settingsRequest");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_limit.title")
+      .and("include.text", "admin.settings.room_limit.description")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#room-limit-mode-unlimited")
+              .should("not.be.checked")
+              .and("be.disabled");
+          });
+
+        cy.get("#room-limit-custom")
+          .should("be.visible")
+          .and("have.value", "10")
+          .and("be.disabled");
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#room-limit-mode-custom")
+              .should("be.checked")
+              .and("be.disabled");
+          });
+      });
+  });
+
+  it("check user settings with only view permission", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.get('[data-test="password-change-allowed-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.password_change_allowed")
+      .within(() => {
+        cy.get("#password-change-allowed")
+          .should("be.checked")
+          .and("be.disabled");
+      });
+  });
+
+  it("check recording and statistics settings with only view permission", function () {
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.recording_server_usage_retention_period = 90;
+      settings.data.recording_meeting_usage_retention_period = 180;
+      settings.data.recording_attendance_retention_period = 365;
+      settings.data.recording_recording_retention_period = 7;
+
+      cy.intercept("GET", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("settingsRequest");
+    });
+
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.recording_and_statistics_title");
+
+    cy.get('[data-test="statistics-servers-enabled-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.statistics.servers.enabled_title")
+      .and("include.text", "app.enable")
+      .within(() => {
+        cy.get("#statistics-servers-enabled")
+          .should("be.checked")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="statistics-servers-retention-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.statistics.servers.retention_period_title",
+      )
+      .within(() => {
+        cy.get('[data-test="statistics-servers-retention-period-dropdown"]')
+          .should("have.text", "admin.settings.three_month")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get("[data-test=statistics-meetings-enabled-field]")
+      .should("be.visible")
+      .and("include.text", "admin.settings.statistics.meetings.enabled_title")
+      .within(() => {
+        cy.get("#statistics-meetings-enabled")
+          .should("be.checked")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="statistics-meetings-retention-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.statistics.meetings.retention_period_title",
+      )
+      .within(() => {
+        cy.get('[data-test="statistics-meetings-retention-period-dropdown"]')
+          .should("have.text", "admin.settings.six_month")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="attendance-retention-period-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.attendance.retention_period_title")
+      .within(() => {
+        cy.get('[data-test="attendance-retention-period-dropdown"]')
+          .should("have.text", "admin.settings.one_year")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="recording-retention-period-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.recording.retention_period_title")
+      .within(() => {
+        cy.get('[data-test="recording-retention-period-dropdown"]')
+          .should("have.text", "admin.settings.one_week")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+  });
+
+  it("check bbb settings with only view permission", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.get('[data-test="bbb-logo-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo.title")
+      .within(() => {
+        cy.checkSettingsImageSelectorOnlyView("/images/logo.svg");
+      });
+
+    cy.get('[data-test="bbb-style-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.bbb.style.title")
+      .within(() => {
+        cy.checkSettingsFileSelectorOnlyView("");
+      });
+
+    cy.get('[data-test="default-presentation-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.default_presentation")
+      .within(() => {
+        cy.checkSettingsFileSelectorOnlyView("");
+      });
+
+    // Reload with different settings
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.bbb_logo = null;
+      settings.data.bbb_style = "/files/bbb_style.css";
+      settings.data.bbb_default_presentation = "/files/testFile.txt";
+
+      cy.intercept("GET", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("settingsRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@settingsRequest");
+
+    cy.get('[data-test="bbb-logo-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo.title")
+      .within(() => {
+        cy.checkSettingsImageSelectorOnlyView("");
+      });
+
+    cy.get('[data-test="bbb-style-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.bbb.style.title")
+      .within(() => {
+        cy.checkSettingsFileSelectorOnlyView("/files/bbb_style.css");
+      });
+
+    cy.get('[data-test="default-presentation-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.default_presentation")
+      .within(() => {
+        cy.checkSettingsFileSelectorOnlyView("/files/testFile.txt");
+      });
+  });
+});
diff --git a/tests/Frontend/support/commands/adminSettingsCommands.js b/tests/Frontend/support/commands/adminSettingsCommands.js
index e160b12e0..3efd82ef8 100644
--- a/tests/Frontend/support/commands/adminSettingsCommands.js
+++ b/tests/Frontend/support/commands/adminSettingsCommands.js
@@ -23,9 +23,13 @@ Cypress.Commands.add(
       .and("include", originalSrc);
 
     cy.get('[data-test="settings-image-cancel-button"]').should("not.exist");
-    cy.get('[data-test="settings-image-delete-button"]').should(
-      deletable ? "be.visible" : "not.exist",
-    );
+
+    if (originalSrc !== "" && deletable) {
+      cy.get('[data-test="settings-image-delete-button"]').should("be.visible");
+    } else {
+      cy.get('[data-test="settings-image-delete-button"]').should("not.exist");
+    }
+
     cy.get('[data-test="settings-image-undo-delete-button"]').should(
       "not.exist",
     );
@@ -78,9 +82,13 @@ Cypress.Commands.add(
       .and("have.value", originalSrc);
 
     cy.get('[data-test="settings-image-cancel-button"]').should("not.exist");
-    cy.get('[data-test="settings-image-delete-button"]').should(
-      deletable ? "be.visible" : "not.exist",
-    );
+
+    if (originalSrc !== "" && deletable) {
+      cy.get('[data-test="settings-image-delete-button"]').should("be.visible");
+    } else {
+      cy.get('[data-test="settings-image-delete-button"]').should("not.exist");
+    }
+
     cy.get('[data-test="settings-image-undo-delete-button"]').should(
       "not.exist",
     );
@@ -160,16 +168,16 @@ Cypress.Commands.add("checkBlobSrcImage", (blobSrc, expectedBase64Content) => {
  * Checks if the image file upload works correctly
  * @memberof cy
  * @method checkSettingsFileSelector
- * @param {string} currentFileName
+ * @param {string} originalHref
  * @param  {string} fileName
  * @param  {boolean} deletable
  * @returns void
  */
 Cypress.Commands.add(
   "checkSettingsFileSelector",
-  (currentFileName, fileName, deletable) => {
+  (originalHref, fileName, deletable) => {
     cy.get('[data-test="settings-file-cancel-button"]').should("not.exist");
-    if (currentFileName !== "" && deletable) {
+    if (originalHref !== "" && deletable) {
       cy.get('[data-test="settings-file-delete-button"]').should("be.visible");
     } else {
       cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
@@ -178,6 +186,15 @@ Cypress.Commands.add(
       "not.exist",
     );
 
+    if (originalHref !== "") {
+      cy.get('[data-test="settings-file-view-button"]')
+        .should("be.visible")
+        .and("include.text", "app.view")
+        .and("have.attr", "href", originalHref);
+    } else {
+      cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+    }
+
     cy.get('[data-test="file-input-input"]').then((fileInput) => {
       cy.stub(fileInput[0], "click").as("fileInputClick");
     });
@@ -210,7 +227,7 @@ Cypress.Commands.add(
 
     // Check that setting is shown correctly
     cy.get('[data-test="settings-file-cancel-button"]').should("not.exist");
-    if (currentFileName !== "" && deletable) {
+    if (originalHref !== "" && deletable) {
       cy.get('[data-test="settings-file-delete-button"]').should("be.visible");
     } else {
       cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
@@ -219,6 +236,15 @@ Cypress.Commands.add(
       "not.exist",
     );
 
+    if (originalHref !== "") {
+      cy.get('[data-test="settings-file-view-button"]')
+        .should("be.visible")
+        .and("include.text", "app.view")
+        .and("have.attr", "href", originalHref);
+    } else {
+      cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+    }
+
     cy.get('[data-test="file-input-button"]').should(
       "include.text",
       "app.browse",
@@ -233,3 +259,49 @@ Cypress.Commands.add(
     );
   },
 );
+
+/**
+ * Checks if the SettingsImageSelector is shown correctly with only view permission
+ * @memberof cy
+ * @method checkSettingsImageSelectorOnlyView
+ * @param  {string} src
+ * @returns void
+ */
+Cypress.Commands.add("checkSettingsImageSelectorOnlyView", (src) => {
+  cy.get('[data-test="settings-image-url-input"]').should("not.exist");
+  cy.get('[data-test="settings-image-cancel-button"]').should("not.exist");
+  cy.get('[data-test="settings-image-delete-button"]').should("not.exist");
+  cy.get('[data-test="settings-image-undo-delete-button"]').should("not.exist");
+  cy.get('[data-test="file-input-button"]').should("not.exist");
+  cy.get('[data-test="file-input-input"]').should("not.exist");
+
+  if (src !== "") {
+    cy.get('[data-test="settings-image-preview"]')
+      .should("be.visible")
+      .and("have.attr", "src", src);
+  }
+});
+
+/**
+ * Checks if the SettingsFileSelector is shown correctly with only view permission
+ * @memberof cy
+ * @method checkSettingsFileSelectorOnlyView
+ * @param {string} href
+ * @returns void
+ */
+Cypress.Commands.add("checkSettingsFileSelectorOnlyView", (href) => {
+  cy.get('[data-test="settings-file-cancel-button"]').should("not.exist");
+  cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+  cy.get('[data-test="settings-file-undo-delete-button"]').should("not.exist");
+  cy.get('[data-test="file-input-button"]').should("not.exist");
+  cy.get('[data-test="file-input-input"]').should("not.exist");
+
+  if (href !== "") {
+    cy.get('[data-test="settings-file-view-button"]')
+      .should("be.visible")
+      .and("include.text", "app.view")
+      .and("have.attr", "href", href);
+  } else {
+    cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+  }
+});

From 5b18a113c6817825302f2933ee27a52bc022f912 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 15 Jan 2025 14:26:58 +0100
Subject: [PATCH 48/79] Improve tests

---
 resources/js/views/AdminRoomTypesView.vue   |  2 ++
 tests/Frontend/e2e/AdminRoomTypesEdit.cy.js | 12 ++++++++++++
 tests/Frontend/e2e/AdminRoomTypesNew.cy.js  | 12 ++++++++++++
 tests/Frontend/e2e/AdminRoomTypesView.cy.js |  7 +++++++
 4 files changed, 33 insertions(+)

diff --git a/resources/js/views/AdminRoomTypesView.vue b/resources/js/views/AdminRoomTypesView.vue
index 22631a221..9bc1a7c61 100644
--- a/resources/js/views/AdminRoomTypesView.vue
+++ b/resources/js/views/AdminRoomTypesView.vue
@@ -284,6 +284,7 @@
                 />
                 <Button
                   icon="fa-solid fa-xmark"
+                  data-test="clear-max-participants-button"
                   :disabled="isBusy || modelLoadingError || viewOnly"
                   @click="model.max_participants = null"
                 />
@@ -314,6 +315,7 @@
                 />
                 <Button
                   icon="fa-solid fa-xmark"
+                  data-test="clear-max-duration-button"
                   :disabled="isBusy || modelLoadingError || viewOnly"
                   @click="model.max_duration = null"
                 />
diff --git a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
index 3f9aaad1b..cd2b6a659 100644
--- a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
@@ -218,6 +218,9 @@ describe("Admin room types edit", function () {
       .within(() => {
         cy.get("#max-participants").should("have.value", "100").clear();
         cy.get("#max-participants").type("50");
+        cy.get('[data-test="clear-max-participants-button"]')
+          .should("be.visible")
+          .and("not.be.disabled");
       });
 
     cy.get('[data-test="max-duration-field"]')
@@ -226,6 +229,9 @@ describe("Admin room types edit", function () {
       .within(() => {
         cy.get("#max-duration").should("have.value", "120 min.").clear();
         cy.get("#max-duration").type("60");
+        cy.get('[data-test="clear-max-duration-button"]')
+          .should("be.visible")
+          .and("not.be.disabled");
       });
 
     // Change default and enforced values
@@ -716,7 +722,13 @@ describe("Admin room types edit", function () {
       cy.get("#restrict").should("be.disabled");
 
       cy.get("#max-participants").should("be.disabled");
+      cy.get('[data-test="clear-max-participants-button"]')
+        .should("be.visible")
+        .and("be.disabled");
       cy.get("#max-duration").should("be.disabled");
+      cy.get('[data-test="clear-max-duration-button"]')
+        .should("be.visible")
+        .and("be.disabled");
 
       cy.get("#has-access-code-default").should("be.disabled");
       cy.get('[data-test="has-access-code-enforced"]').should("be.disabled");
diff --git a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
index 5c4659a26..6c265d068 100644
--- a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
@@ -178,6 +178,9 @@ describe("Admin room types new", function () {
       .and("include.text", "admin.room_types.max_participants")
       .within(() => {
         cy.get("#max-participants").should("have.value", "").type("100");
+        cy.get('[data-test="clear-max-participants-button"]')
+          .should("be.visible")
+          .and("not.be.disabled");
       });
 
     cy.get('[data-test="max-duration-field"]')
@@ -185,6 +188,9 @@ describe("Admin room types new", function () {
       .and("include.text", "admin.room_types.max_duration")
       .within(() => {
         cy.get("#max-duration").should("have.value", "").type("120");
+        cy.get('[data-test="clear-max-duration-button"]')
+          .should("be.visible")
+          .and("not.be.disabled");
       });
 
     // Change default and enforced values
@@ -607,7 +613,13 @@ describe("Admin room types new", function () {
       cy.get("#restrict").should("be.disabled");
 
       cy.get("#max-participants").should("be.disabled");
+      cy.get('[data-test="clear-max-participants-button"]')
+        .should("be.visible")
+        .and("be.disabled");
       cy.get("#max-duration").should("be.disabled");
+      cy.get('[data-test="clear-max-duration-button"]')
+        .should("be.visible")
+        .and("be.disabled");
 
       cy.get("#has-access-code-default").should("be.disabled");
       cy.get('[data-test="has-access-code-enforced"]').should("be.disabled");
diff --git a/tests/Frontend/e2e/AdminRoomTypesView.cy.js b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
index 614ef57da..d71426961 100644
--- a/tests/Frontend/e2e/AdminRoomTypesView.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
@@ -148,6 +148,9 @@ describe("Admin room types view", function () {
         cy.get("#max-participants")
           .should("have.value", "100")
           .and("be.disabled");
+        cy.get('[data-test="clear-max-participants-button"]')
+          .should("be.visible")
+          .and("be.disabled");
       });
 
     cy.get('[data-test="max-duration-field"]')
@@ -157,6 +160,10 @@ describe("Admin room types view", function () {
         cy.get("#max-duration")
           .should("have.value", "120 min.")
           .and("be.disabled");
+
+        cy.get('[data-test="clear-max-duration-button"]')
+          .should("be.visible")
+          .and("be.disabled");
       });
 
     // Check default and enforced settings

From 1054d5bb3785a53198ebc687cc35cfa8523165b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 15 Jan 2025 18:25:17 +0100
Subject: [PATCH 49/79] Improve tests

---
 tests/Frontend/e2e/AdminSettingsEdit.cy.js    | 19 ---------
 .../support/commands/adminSettingsCommands.js | 40 ++++++-------------
 2 files changed, 12 insertions(+), 47 deletions(-)

diff --git a/tests/Frontend/e2e/AdminSettingsEdit.cy.js b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
index 67401511e..8081b6b70 100644
--- a/tests/Frontend/e2e/AdminSettingsEdit.cy.js
+++ b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
@@ -459,25 +459,6 @@ describe("Admin settings with edit permission", function () {
           const base64 = _arrayBufferToBase64(arrayBuffer);
           expect(base64).to.eql(content);
         });
-
-        // ToDo Delete again (Just some testing)
-        // cy.wrap(null).then(() => {
-        //   return new Cypress.Promise((resolve, reject) => {
-        //     const reader = new FileReader();
-        //     reader.readAsDataURL(uploadedFavicon);
-        //     reader.onloadend = function () {
-        //       const base64data = reader.result;
-        //       try {
-        //         expect(base64data).to.eql(
-        //           "data:image/vnd.microsoft.icon;base64," + content,
-        //         );
-        //         resolve();
-        //       } catch (error) {
-        //         reject(error);
-        //       }
-        //     };
-        //   });
-        // });
       });
 
       expect(formData.get("theme_favicon")).to.eql(null);
diff --git a/tests/Frontend/support/commands/adminSettingsCommands.js b/tests/Frontend/support/commands/adminSettingsCommands.js
index 3efd82ef8..b3d7e56a1 100644
--- a/tests/Frontend/support/commands/adminSettingsCommands.js
+++ b/tests/Frontend/support/commands/adminSettingsCommands.js
@@ -1,4 +1,4 @@
-// import { _arrayBufferToBase64 } from "../utils/formData.js";
+import { _arrayBufferToBase64 } from "../utils/formData.js";
 
 /**
  * Checks if the image file upload works correctly
@@ -106,7 +106,7 @@ Cypress.Commands.add(
       },
     );
 
-    // Check that correct image is shown
+    // Check that correct image is shown // ToDo try to get content type of fixture
     cy.fixture("files/" + imageName, "base64").then((content) => {
       cy.get('[data-test="settings-image-preview"]')
         .should("have.attr", "src")
@@ -130,32 +130,16 @@ Cypress.Commands.add("checkBlobSrcImage", (blobSrc, expectedBase64Content) => {
   cy.wrap(null, { log: false }).then(async () => {
     return new Cypress.Promise((resolve, reject) => {
       fetch(blobSrc)
-        .then((response) => response.blob())
-        .then((blob) => {
-          const contentType = blob.type;
-          const reader = new FileReader();
-          reader.readAsDataURL(blob);
-          reader.onloadend = function () {
-            try {
-              const base64data = reader.result;
-              expect(base64data).to.eql(
-                "data:" + contentType + ";base64," + expectedBase64Content,
-              );
-              resolve();
-            } catch (error) {
-              reject(error);
-            }
-          };
-          // ToDo ???? use _arrayBufferToBase64???? (disadvantage: no content type)
-          // .then((response) => response.arrayBuffer())
-          // .then((arrayBuffer) => {
-          //   const base64 = _arrayBufferToBase64(arrayBuffer);
-          //   try {
-          //     expect(base64).to.eql(expectedBase64Content);
-          //     resolve();
-          //   } catch (error) {
-          //     reject(error);
-          //   }
+        // ToDo try to check content type
+        .then((response) => response.arrayBuffer())
+        .then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          try {
+            expect(base64).to.eql(expectedBase64Content);
+            resolve();
+          } catch (error) {
+            reject(error);
+          }
         })
         .catch((error) => {
           reject(error);

From c6a6f139f2a557c2b86d950dbf5c8331a6ce47bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Fri, 17 Jan 2025 08:21:06 +0100
Subject: [PATCH 50/79] Code cleanup

---
 .../e2e/RoomsViewHistoryMeetingActions.cy.js       |  2 --
 tests/Frontend/support/commands/generalCommands.js | 14 --------------
 2 files changed, 16 deletions(-)

diff --git a/tests/Frontend/e2e/RoomsViewHistoryMeetingActions.cy.js b/tests/Frontend/e2e/RoomsViewHistoryMeetingActions.cy.js
index 20c3f5543..8c7a9ba9a 100644
--- a/tests/Frontend/e2e/RoomsViewHistoryMeetingActions.cy.js
+++ b/tests/Frontend/e2e/RoomsViewHistoryMeetingActions.cy.js
@@ -12,8 +12,6 @@ describe("Rooms view history meeting actions", function () {
     cy.wait("@roomRequest");
     cy.wait("@roomHistoryRequest");
 
-    cy.enforceLightMode();
-
     const statsRequest = interceptIndefinitely(
       "GET",
       "api/v1/meetings/3a3e504a-d2c4-431c-8ca1-a62598e66761/stats",
diff --git a/tests/Frontend/support/commands/generalCommands.js b/tests/Frontend/support/commands/generalCommands.js
index 5d287f657..cb0725c04 100644
--- a/tests/Frontend/support/commands/generalCommands.js
+++ b/tests/Frontend/support/commands/generalCommands.js
@@ -38,17 +38,3 @@ Cypress.Commands.add("checkToastMessage", (messages) => {
     cy.wrap($toast, { log: false }).should("not.exist");
   });
 });
-
-/**
- * Enforces the light mode if the dark mode is currently active
- * @memberof cy
- * @method enforceLightMode
- * @returns void
- */
-Cypress.Commands.add("enforceLightMode", () => {
-  cy.get("html").then(($html) => {
-    if ($html.hasClass("dark")) {
-      cy.get(".fa-solid.fa-moon").click();
-    }
-  });
-});

From 925a37e5d295ca9aa2b99dab8e6491bab69341e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 20 Jan 2025 07:35:18 +0100
Subject: [PATCH 51/79] Adjust AdminUsers tests

---
 tests/Frontend/e2e/AdminUsersEdit.cy.js       |  70 ++++
 .../Frontend/e2e/AdminUsersEditSecurity.cy.js | 103 +++++-
 tests/Frontend/e2e/AdminUsersIndex.cy.js      | 321 ++++++++++++++----
 .../e2e/AdminUsersIndexUserActions.cy.js      |   8 +-
 tests/Frontend/e2e/AdminUsersNew.cy.js        |  63 +++-
 tests/Frontend/e2e/AdminUsersView.cy.js       | 133 ++++++++
 .../e2e/AdminUsersViewUserActions.cy.js       |   2 +-
 tests/Frontend/fixtures/currentUser.json      |   3 +-
 .../fixtures/userDataCurrentUser.json         |  11 +-
 tests/Frontend/fixtures/userDataUser.json     |   7 +-
 tests/Frontend/fixtures/userRoles.json        |  11 +-
 tests/Frontend/fixtures/users.json            |  46 ++-
 12 files changed, 669 insertions(+), 109 deletions(-)

diff --git a/tests/Frontend/e2e/AdminUsersEdit.cy.js b/tests/Frontend/e2e/AdminUsersEdit.cy.js
index 80261fb70..bc2718b4a 100644
--- a/tests/Frontend/e2e/AdminUsersEdit.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEdit.cy.js
@@ -58,6 +58,76 @@ describe("Admin users edit", function () {
     cy.get("h1").should("be.visible").and("include.text", "home.title");
   });
 
+  it("check visiting edit user page of a superuser", function () {
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.superuser = true;
+
+      user.data.roles.push({
+        id: 1,
+        name: "Superuser",
+        automatic: true,
+        superuser: true,
+      });
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    // Check with being a superuser
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/users/2");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    cy.get('[data-test="base-tab-button"]').should("be.visible");
+    cy.get('[data-test="email-tab-button"]').should("be.visible");
+    cy.get('[data-test="security-tab-button"]').should("be.visible");
+    cy.get('[data-test="others-tab-button"]').should("be.visible");
+
+    // Check without being a superuser
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    // Check that redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+  });
+
   it("visit edit user page", function () {
     const userRequest = interceptIndefinitely(
       "GET",
diff --git a/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
index 6a7146662..b6d81b0e7 100644
--- a/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
@@ -150,16 +150,24 @@ describe("Admin users edit email", function () {
     cy.get(".multiselect__option").should("have.length", 5);
     cy.get(".multiselect__option")
       .eq(0)
-      .should("include.text", "Admin")
-      .and("be.visible");
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("be.visible")
+      .and("not.have.class", "multiselect__option--disabled");
     cy.get(".multiselect__option")
       .eq(1)
       .should("include.text", "Staff")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
       .and("be.visible")
+      .and("not.have.class", "multiselect__option--disabled")
       .and("have.class", "multiselect__option--selected");
     cy.get(".multiselect__option")
       .eq(2)
       .should("include.text", "Students")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("include.text", "admin.roles.automatic")
       .and("be.visible")
       .and("have.class", "multiselect__option--disabled");
     cy.get(".multiselect__option")
@@ -173,6 +181,7 @@ describe("Admin users edit email", function () {
       .eq(4)
       .should("include.text", "admin.roles.no_data")
       .and("not.be.visible");
+    cy.get(".multiselect__option").eq(0).click();
 
     // Switch to next page
     const userRoleRequest = interceptIndefinitely(
@@ -263,14 +272,23 @@ describe("Admin users edit email", function () {
     cy.get(".multiselect__option")
       .eq(0)
       .should("include.text", "Dean")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("not.have.class", "multiselect__option--disabled")
       .and("be.visible");
     cy.get(".multiselect__option")
       .eq(1)
       .should("include.text", "Faculty")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("not.have.class", "multiselect__option--disabled")
       .and("be.visible");
     cy.get(".multiselect__option")
       .eq(2)
       .should("include.text", "Manager")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("not.have.class", "multiselect__option--disabled")
       .and("be.visible");
     cy.get(".multiselect__option")
       .eq(3)
@@ -291,7 +309,7 @@ describe("Admin users edit email", function () {
     // Check that roles are shown correctly and remove one role
     cy.get(".multiselect__content").should("be.visible");
     cy.get('[data-test="role-dropdown"]').within(() => {
-      cy.get('[data-test="role-chip"]').should("have.length", 4);
+      cy.get('[data-test="role-chip"]').should("have.length", 5);
       cy.get('[data-test="role-chip"]')
         .eq(0)
         .should("include.text", "Students")
@@ -305,12 +323,17 @@ describe("Admin users edit email", function () {
         .should("be.visible");
       cy.get('[data-test="role-chip"]')
         .eq(2)
+        .should("include.text", "Superuser")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+      cy.get('[data-test="role-chip"]')
+        .eq(3)
         .should("include.text", "Dean")
         .find('[data-test="remove-role-button"]')
         .should("be.visible");
 
       cy.get('[data-test="role-chip"]')
-        .eq(3)
+        .eq(4)
         .should("include.text", "Manager")
         .find('[data-test="remove-role-button"]')
         .should("be.visible");
@@ -327,9 +350,10 @@ describe("Admin users edit email", function () {
     // Save new roles
     cy.fixture("userDataUser").then((user) => {
       user.data.roles = [
-        { id: 3, name: "Students", automatic: true },
-        { id: 4, name: "Dean", automatic: false },
-        { id: 6, name: "Manager", automatic: false },
+        { id: 1, name: "Superuser", automatic: false, superuser: true },
+        { id: 3, name: "Students", automatic: true, superuser: false },
+        { id: 4, name: "Dean", automatic: false, superuser: false },
+        { id: 6, name: "Manager", automatic: false, superuser: false },
       ];
 
       const saveChangesRequest = interceptIndefinitely(
@@ -365,7 +389,7 @@ describe("Admin users edit email", function () {
 
     cy.wait("@saveChangesRequest").then((interception) => {
       expect(interception.request.body).to.deep.include({
-        roles: [3, 4, 6],
+        roles: [3, 1, 4, 6],
       });
     });
 
@@ -376,6 +400,69 @@ describe("Admin users edit email", function () {
     cy.wait("@userRequest");
   });
 
+  it("check that superuser role is disabled for users that are not superusers", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("be.visible")
+      .and("have.class", "multiselect__option--disabled");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("be.visible")
+      .and("not.have.class", "multiselect__option--disabled")
+      .and("have.class", "multiselect__option--selected");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("include.text", "admin.roles.automatic")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("be.visible")
+      .and("have.class", "multiselect__option--disabled");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+  });
+
   it("change role errors", function () {
     cy.visit("/admin/users/2/edit");
 
diff --git a/tests/Frontend/e2e/AdminUsersIndex.cy.js b/tests/Frontend/e2e/AdminUsersIndex.cy.js
index 7d1f76a95..8ea4b766c 100644
--- a/tests/Frontend/e2e/AdminUsersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndex.cy.js
@@ -134,7 +134,7 @@ describe("Admin users index", function () {
       .should("have.text", "app.actions");
 
     // Check that users are displayed correctly
-    cy.get('[data-test="user-item"]').should("have.length", 3);
+    cy.get('[data-test="user-item"]').should("have.length", 4);
 
     cy.get('[data-test="user-item"]')
       .eq(0)
@@ -154,7 +154,7 @@ describe("Admin users index", function () {
           .should("have.text", "admin.users.authenticator.local");
         cy.get('[data-test="user-item-cell"]')
           .eq(5)
-          .should("have.text", "Admin");
+          .should("have.text", "Superuser");
 
         cy.get('[data-test="user-item-cell"]')
           .eq(6)
@@ -235,6 +235,36 @@ describe("Admin users index", function () {
             );
           });
       });
+
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="user-item-cell"]').should("have.length", 7);
+
+        cy.get('[data-test="user-item-cell"]').eq(0).should("have.text", "100");
+        cy.get('[data-test="user-item-cell"]').eq(1).should("have.text", "Max");
+        cy.get('[data-test="user-item-cell"]').eq(2).should("have.text", "Doe");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(3)
+          .should("have.text", "MaxDoe@domain.tld");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(4)
+          .should("have.text", "admin.users.authenticator.local");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(5)
+          .should("have.text", "Superuser");
+
+        cy.get('[data-test="user-item-cell"]')
+          .eq(6)
+          .within(() => {
+            cy.get('[data-test="users-view-button"]').should("not.exist");
+            cy.get('[data-test="users-edit-button"]').should("not.exist");
+            cy.get('[data-test="users-delete-button"]').should("not.exist");
+            cy.get('[data-test="users-reset-password-button"]').should(
+              "not.exist",
+            );
+          });
+      });
   });
 
   it("load users errors", function () {
@@ -344,7 +374,7 @@ describe("Admin users index", function () {
 
     cy.fixture("users.json").then((users) => {
       users.data = users.data.slice(0, 1);
-      users.meta.last_page = 3;
+      users.meta.last_page = 4;
       users.meta.per_page = 1;
       users.meta.to = 1;
 
@@ -545,7 +575,7 @@ describe("Admin users index", function () {
     cy.get(".multiselect__option").should("have.length", 5);
     cy.get(".multiselect__option")
       .eq(0)
-      .should("include.text", "Admin")
+      .should("include.text", "Superuser")
       .and("be.visible");
     cy.get(".multiselect__option")
       .eq(1)
@@ -616,7 +646,7 @@ describe("Admin users index", function () {
     cy.get(".multiselect__option").should("have.length", 5);
     cy.get(".multiselect__option")
       .eq(0)
-      .should("include.text", "Admin")
+      .should("include.text", "Superuser")
       .and("be.visible");
     cy.get(".multiselect__option")
       .eq(1)
@@ -862,7 +892,7 @@ describe("Admin users index", function () {
     cy.get(".multiselect__option").should("have.length", 5);
     cy.get(".multiselect__option")
       .eq(0)
-      .should("include.text", "Admin")
+      .should("include.text", "Superuser")
       .and("be.visible");
     cy.get(".multiselect__option")
       .eq(1)
@@ -1084,7 +1114,7 @@ describe("Admin users index", function () {
     cy.get('[data-test="clear-roles-button"]').should("be.visible");
 
     // Check that pagination shows the correct number of pages and switch to next page
-    cy.get('[data-test="paginator-page"]').should("have.length", 3);
+    cy.get('[data-test="paginator-page"]').should("have.length", 4);
 
     // Check that correct pagination is active
     cy.get('[data-test="paginator-page"]')
@@ -1095,7 +1125,7 @@ describe("Admin users index", function () {
       users.data = users.data.slice(1, 2);
       users.meta.current_page = 2;
       users.meta.from = 2;
-      users.meta.last_page = 3;
+      users.meta.last_page = 4;
       users.meta.per_page = 1;
       users.meta.to = 2;
 
@@ -1133,7 +1163,7 @@ describe("Admin users index", function () {
     // Clear role and make sure that page is reset
     cy.fixture("users.json").then((users) => {
       users.data = users.data.slice(0, 1);
-      users.meta.last_page = 3;
+      users.meta.last_page = 4;
       users.meta.per_page = 1;
       users.meta.to = 1;
 
@@ -1212,10 +1242,10 @@ describe("Admin users index", function () {
       .should("have.text", "app.actions")
       .and("not.have.attr", "data-p-sortable-column", "true");
 
-    // Change sorting type and response with 3 users on 3 different pages
+    // Change sorting type and response with 4 users on 4 different pages
     cy.fixture("users.json").then((users) => {
       users.data = users.data.slice(0, 1);
-      users.meta.last_page = 3;
+      users.meta.last_page = 4;
       users.meta.per_page = 1;
       users.meta.to = 1;
 
@@ -1249,7 +1279,7 @@ describe("Admin users index", function () {
     cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
 
     // Check that pagination shows the correct number of pages
-    cy.get('[data-test="paginator-page"]').should("have.length", 3);
+    cy.get('[data-test="paginator-page"]').should("have.length", 4);
 
     // Check that correct pagination is active
     cy.get('[data-test="paginator-page"]')
@@ -1261,7 +1291,7 @@ describe("Admin users index", function () {
       users.data = users.data.slice(1, 2);
       users.meta.current_page = 2;
       users.meta.from = 2;
-      users.meta.last_page = 3;
+      users.meta.last_page = 4;
       users.meta.per_page = 1;
       users.meta.to = 2;
 
@@ -1300,7 +1330,7 @@ describe("Admin users index", function () {
     // Change sorting direction and make sure that the page is reset
     cy.fixture("users.json").then((users) => {
       users.data = users.data.slice(0, 1);
-      users.meta.last_page = 3;
+      users.meta.last_page = 4;
       users.meta.per_page = 1;
       users.meta.to = 1;
 
@@ -1362,7 +1392,7 @@ describe("Admin users index", function () {
       users.data = users.data.slice(1, 2);
       users.meta.current_page = 2;
       users.meta.from = 2;
-      users.meta.last_page = 3;
+      users.meta.last_page = 4;
       users.meta.per_page = 1;
       users.meta.to = 2;
 
@@ -1401,7 +1431,7 @@ describe("Admin users index", function () {
     // Change sorting and make sure that the page is reset
     cy.fixture("users.json").then((users) => {
       users.data = users.data.slice(0, 1);
-      users.meta.last_page = 3;
+      users.meta.last_page = 4;
       users.meta.per_page = 1;
       users.meta.to = 1;
 
@@ -1481,7 +1511,7 @@ describe("Admin users index", function () {
     cy.wait("@usersRequest");
 
     cy.get('[data-test="users-add-button"]').should("not.exist");
-    cy.get('[data-test="user-item"]').should("have.length", 3);
+    cy.get('[data-test="user-item"]').should("have.length", 4);
     cy.get('[data-test="user-item"]')
       .eq(0)
       .within(() => {
@@ -1516,6 +1546,17 @@ describe("Admin users index", function () {
         cy.get('[data-test="users-delete-button"]').should("not.exist");
         cy.get('[data-test="users-reset-password-button"]').should("not.exist");
       });
+
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100");
+        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
   });
 
   it("check button visibility with update permission", function () {
@@ -1537,7 +1578,7 @@ describe("Admin users index", function () {
     cy.visit("/admin/users");
 
     cy.get('[data-test="users-add-button"]').should("not.exist");
-    cy.get('[data-test="user-item"]').should("have.length", 3);
+    cy.get('[data-test="user-item"]').should("have.length", 4);
     cy.get('[data-test="user-item"]')
       .eq(0)
       .within(() => {
@@ -1575,6 +1616,19 @@ describe("Admin users index", function () {
         cy.get('[data-test="users-reset-password-button"]').should("not.exist");
       });
 
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("be.visible");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
+      });
+
     // Check with local users disabled (Reset password button should not be visible)
     cy.intercept("GET", "api/v1/config", { fixture: "config.json" });
 
@@ -1582,7 +1636,7 @@ describe("Admin users index", function () {
 
     cy.get('[data-test="users-add-button"]').should("not.exist");
 
-    cy.get('[data-test="user-item"]').should("have.length", 3);
+    cy.get('[data-test="user-item"]').should("have.length", 4);
     cy.get('[data-test="user-item"]')
       .eq(0)
       .within(() => {
@@ -1617,6 +1671,17 @@ describe("Admin users index", function () {
         cy.get('[data-test="users-delete-button"]').should("not.exist");
         cy.get('[data-test="users-reset-password-button"]').should("not.exist");
       });
+
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("be.visible");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
   });
 
   it("check button visibility with add permission", function () {
@@ -1642,7 +1707,7 @@ describe("Admin users index", function () {
     cy.get('[data-test="users-add-button"]')
       .should("be.visible")
       .and("have.attr", "href", "/admin/users/new");
-    cy.get('[data-test="user-item"]').should("have.length", 3);
+    cy.get('[data-test="user-item"]').should("have.length", 4);
     cy.get('[data-test="user-item"]')
       .eq(0)
       .within(() => {
@@ -1684,13 +1749,28 @@ describe("Admin users index", function () {
         cy.get('[data-test="users-reset-password-button"]').should("not.exist");
       });
 
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
+      });
+
     // Check with local users disabled
     cy.intercept("GET", "api/v1/config", { fixture: "config.json" });
 
     cy.reload();
 
     cy.get('[data-test="users-add-button"]').should("not.exist");
-    cy.get('[data-test="user-item"]').should("have.length", 3);
+    cy.get('[data-test="user-item"]').should("have.length", 4);
     cy.get('[data-test="user-item"]')
       .eq(0)
       .within(() => {
@@ -1729,6 +1809,19 @@ describe("Admin users index", function () {
         cy.get('[data-test="users-delete-button"]').should("not.exist");
         cy.get('[data-test="users-reset-password-button"]').should("not.exist");
       });
+
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
   });
 
   it("check button visibility with delete permission", function () {
@@ -1746,57 +1839,143 @@ describe("Admin users index", function () {
         statusCode: 200,
         body: currentUser,
       });
+    });
+
+    cy.visit("/admin/users");
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="users-add-button"]').should("be.visible");
+    cy.get('[data-test="user-item"]').should("have.length", 4);
+    // Check that delete button for current user does not exist
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
 
-      cy.visit("/admin/users");
-      cy.wait("@usersRequest");
-
-      cy.get('[data-test="users-add-button"]').should("be.visible");
-      cy.get('[data-test="user-item"]').should("have.length", 3);
-      // Check that delete button for current user does not exist
-      cy.get('[data-test="user-item"]')
-        .eq(0)
-        .within(() => {
-          cy.get('[data-test="users-view-button"]')
-            .should("be.visible")
-            .and("have.attr", "href", "/admin/users/1");
-          cy.get('[data-test="users-edit-button"]')
-            .should("be.visible")
-            .and("have.attr", "href", "/admin/users/1/edit");
-          cy.get('[data-test="users-delete-button"]').should("not.exist");
-          cy.get('[data-test="users-reset-password-button"]').should(
-            "not.exist",
-          );
-        });
-
-      cy.get('[data-test="user-item"]')
-        .eq(1)
-        .within(() => {
-          cy.get('[data-test="users-view-button"]')
-            .should("be.visible")
-            .and("have.attr", "href", "/admin/users/2");
-          cy.get('[data-test="users-edit-button"]')
-            .should("be.visible")
-            .and("have.attr", "href", "/admin/users/2/edit");
-          cy.get('[data-test="users-delete-button"]').should("be.visible");
-          cy.get('[data-test="users-reset-password-button"]').should(
-            "be.visible",
-          );
-        });
-
-      cy.get('[data-test="user-item"]')
-        .eq(2)
-        .within(() => {
-          cy.get('[data-test="users-view-button"]')
-            .should("be.visible")
-            .and("have.attr", "href", "/admin/users/3");
-          cy.get('[data-test="users-edit-button"]')
-            .should("be.visible")
-            .and("have.attr", "href", "/admin/users/3/edit");
-          cy.get('[data-test="users-delete-button"]').should("be.visible");
-          cy.get('[data-test="users-reset-password-button"]').should(
-            "not.exist",
-          );
-        });
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2/edit");
+        cy.get('[data-test="users-delete-button"]').should("be.visible");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3/edit");
+        cy.get('[data-test="users-delete-button"]').should("be.visible");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100/edit");
+        cy.get('[data-test="users-delete-button"]').should("be.visible");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
+      });
+  });
+
+  it("check button visibility for user that is no superuser", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.delete",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
     });
+
+    cy.visit("/admin/users");
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="users-add-button"]').should("be.visible");
+    cy.get('[data-test="user-item"]').should("have.length", 4);
+    // Check that delete button for current user does not exist
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2/edit");
+        cy.get('[data-test="users-delete-button"]').should("be.visible");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3/edit");
+        cy.get('[data-test="users-delete-button"]').should("be.visible");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100");
+        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
   });
 });
diff --git a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
index 2ce6964a3..cf2e2311d 100644
--- a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
@@ -36,7 +36,7 @@ describe("Admin users index user actions", function () {
 
     cy.wait("@usersRequest");
 
-    cy.get('[data-test="user-item"]').should("have.length", 3);
+    cy.get('[data-test="user-item"]').should("have.length", 4);
 
     cy.get('[data-test="users-delete-dialog"]').should("not.exist");
 
@@ -64,7 +64,7 @@ describe("Admin users index user actions", function () {
     );
 
     cy.fixture("users.json").then((users) => {
-      users.data = users.data.slice(0, 2);
+      users.data = users.data.filter((user) => user.id !== 3);
       users.meta.to = 2;
       users.meta.total = 2;
       users.meta.total_no_filter = 2;
@@ -92,7 +92,7 @@ describe("Admin users index user actions", function () {
     cy.wait("@usersRequest");
 
     // Check that user was deleted
-    cy.get('[data-test="user-item"]').should("have.length", 2);
+    cy.get('[data-test="user-item"]').should("have.length", 3);
 
     // Check that dialog is closed
     cy.get('[data-test="users-delete-dialog"]').should("not.exist");
@@ -123,7 +123,7 @@ describe("Admin users index user actions", function () {
 
     cy.wait("@usersRequest");
 
-    cy.get('[data-test="user-item"]').should("have.length", 3);
+    cy.get('[data-test="user-item"]').should("have.length", 4);
 
     cy.get('[data-test="users-delete-dialog"]').should("not.exist");
 
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index 874e16c66..e7d74b7ea 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -193,7 +193,7 @@ describe("Admin users new", function () {
     cy.get(".multiselect__option").should("have.length", 5);
     cy.get(".multiselect__option")
       .eq(0)
-      .should("include.text", "Admin")
+      .should("include.text", "Superuser")
       .and("be.visible");
     cy.get(".multiselect__option")
       .eq(1)
@@ -393,7 +393,7 @@ describe("Admin users new", function () {
     cy.get(".multiselect__option").should("have.length", 5);
     cy.get(".multiselect__option")
       .eq(0)
-      .should("include.text", "Admin")
+      .should("include.text", "Superuser")
       .and("be.visible");
     cy.get(".multiselect__option")
       .eq(1)
@@ -831,6 +831,65 @@ describe("Admin users new", function () {
     cy.checkToastMessage("app.flash.unauthenticated");
   });
 
+  it("check that superuser role is disabled for users that are not superusers", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/new");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("be.visible")
+      .and("have.class", "multiselect__option--disabled");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("be.visible")
+      .and("not.have.class", "multiselect__option--disabled")
+      .and("not.have.class", "multiselect__option--selected");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("be.visible")
+      .and("not.have.class", "multiselect__option--disabled");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+  });
+
   it("load roles errors", function () {
     // Check with 500 error
     const rolesRequest = interceptIndefinitely(
diff --git a/tests/Frontend/e2e/AdminUsersView.cy.js b/tests/Frontend/e2e/AdminUsersView.cy.js
index acbb46ba4..21dd4eeed 100644
--- a/tests/Frontend/e2e/AdminUsersView.cy.js
+++ b/tests/Frontend/e2e/AdminUsersView.cy.js
@@ -371,6 +371,139 @@ describe("Admin users view", function () {
       .and("not.be.disabled");
   });
 
+  it("check button visibility for user that is superuser", function () {
+    // Check when viewing user that is not a superuser
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.create",
+        "users.update",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/users/2/edit");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Check when viewing user that is a superuser
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.superuser = true;
+
+      user.data.roles.push({
+        id: 1,
+        name: "Superuser",
+        automatic: true,
+        superuser: true,
+      });
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/users/2/edit");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+  });
+
+  it("check button visibility for user that is no superuser", function () {
+    // Check when viewing user that is not a superuser
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.create",
+        "users.update",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/users/2/edit");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Check when viewing user that is a superuser
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.superuser = true;
+
+      user.data.roles.push({
+        id: 1,
+        name: "Superuser",
+        automatic: true,
+        superuser: true,
+      });
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+  });
+
   it("open view errors", function () {
     cy.intercept("GET", "api/v1/users/2", {
       statusCode: 500,
diff --git a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
index ee6c7c586..f9565b001 100644
--- a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
+++ b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
@@ -484,7 +484,7 @@ describe("Admin users view user actions", function () {
         .should("be.visible");
       cy.get('[data-test="role-chip"]')
         .eq(2)
-        .should("include.text", "Admin")
+        .should("include.text", "Superuser")
         .find('[data-test="remove-role-button"]')
         .should("be.visible");
     });
diff --git a/tests/Frontend/fixtures/currentUser.json b/tests/Frontend/fixtures/currentUser.json
index c3ee68482..e2e7c8b38 100644
--- a/tests/Frontend/fixtures/currentUser.json
+++ b/tests/Frontend/fixtures/currentUser.json
@@ -7,6 +7,7 @@
     "permissions": [],
     "timezone": "Europe/Berlin",
     "model_name": "User",
-    "room_limit": -1
+    "room_limit": -1,
+    "superuser": true
   }
 }
diff --git a/tests/Frontend/fixtures/userDataCurrentUser.json b/tests/Frontend/fixtures/userDataCurrentUser.json
index 1a13a9cfb..86877543a 100644
--- a/tests/Frontend/fixtures/userDataCurrentUser.json
+++ b/tests/Frontend/fixtures/userDataCurrentUser.json
@@ -14,17 +14,20 @@
     "roles": [
       {
         "id": 1,
-        "name": "Admin",
-        "automatic": true
+        "name": "Superuser",
+        "automatic": true,
+        "superuser": true
       },
       {
         "id": 2,
         "name": "User",
-        "automatic": false
+        "automatic": false,
+        "superuser": false
       }
     ],
     "bbb_skip_check_audio": false,
     "initial_password_set": false,
     "timezone": "UTC"
-  }
+  },
+  "superuser": true
 }
diff --git a/tests/Frontend/fixtures/userDataUser.json b/tests/Frontend/fixtures/userDataUser.json
index 8549ae809..14335d204 100644
--- a/tests/Frontend/fixtures/userDataUser.json
+++ b/tests/Frontend/fixtures/userDataUser.json
@@ -12,11 +12,12 @@
     "room_limit": -1,
     "updated_at": "2024-09-13T14:20:26.000000Z",
     "roles": [
-      { "id": 3, "name": "Students", "automatic": true },
-      { "id": 2, "name": "Staff", "automatic": false }
+      { "id": 3, "name": "Students", "automatic": true, "superuser": false },
+      { "id": 2, "name": "Staff", "automatic": false, "superuser": false }
     ],
     "bbb_skip_check_audio": false,
     "initial_password_set": false,
-    "timezone": "UTC"
+    "timezone": "UTC",
+    "superuser": false
   }
 }
diff --git a/tests/Frontend/fixtures/userRoles.json b/tests/Frontend/fixtures/userRoles.json
index 7a8aa4b90..b8db7b6a4 100644
--- a/tests/Frontend/fixtures/userRoles.json
+++ b/tests/Frontend/fixtures/userRoles.json
@@ -2,11 +2,12 @@
   "data": [
     {
       "id": 1,
-      "name": "Admin",
+      "name": "Superuser",
       "default": true,
       "updated_at": "2021-01-08T15:51:08.000000Z",
       "model_name": "Role",
-      "room_limit": -1
+      "room_limit": -1,
+      "superuser": true
     },
     {
       "id": 2,
@@ -14,7 +15,8 @@
       "default": false,
       "updated_at": "2021-03-19T09:12:44.000000Z",
       "model_name": "Role",
-      "room_limit": 20
+      "room_limit": 20,
+      "superuser": false
     },
     {
       "id": 3,
@@ -22,7 +24,8 @@
       "default": false,
       "updated_at": "2021-05-22T11:55:21.000000Z",
       "model_name": "Role",
-      "room_limit": 1
+      "room_limit": 1,
+      "superuser": false
     }
   ],
   "meta": {
diff --git a/tests/Frontend/fixtures/users.json b/tests/Frontend/fixtures/users.json
index e6cfccae7..4b02adf1e 100644
--- a/tests/Frontend/fixtures/users.json
+++ b/tests/Frontend/fixtures/users.json
@@ -10,9 +10,12 @@
       "user_locale": "en",
       "model_name": "User",
       "room_limit": 0,
-      "roles": [{ "id": 1, "name": "Admin", "automatic": false }],
+      "roles": [
+        { "id": 1, "name": "Superuser", "automatic": false, "superuser": true }
+      ],
       "updated_at": "2020-01-01T01:00:00.000000Z",
-      "initial_password_set": true
+      "initial_password_set": true,
+      "superuser": true
     },
     {
       "id": 2,
@@ -25,11 +28,12 @@
       "model_name": "User",
       "room_limit": 0,
       "roles": [
-        { "id": 3, "name": "Students", "automatic": true },
-        { "id": 2, "name": "Staff", "automatic": false }
+        { "id": 3, "name": "Students", "automatic": true, "superuser": false },
+        { "id": 2, "name": "Staff", "automatic": false, "superuser": false }
       ],
       "updated_at": "2020-01-01T01:00:00.000000Z",
-      "initial_password_set": false
+      "initial_password_set": false,
+      "superuser": false
     },
     {
       "id": 3,
@@ -41,17 +45,37 @@
       "user_locale": "de",
       "model_name": "User",
       "room_limit": 0,
-      "roles": [{ "id": 3, "name": "Students", "automatic": true }],
-      "updated_at": "2020-01-01T01:00:00.000000Z"
+      "roles": [
+        { "id": 3, "name": "Students", "automatic": true, "superuser": false }
+      ],
+      "updated_at": "2020-01-01T01:00:00.000000Z",
+      "superuser": false
+    },
+    {
+      "id": 100,
+      "authenticator": "local",
+      "email": "MaxDoe@domain.tld",
+      "external_id": null,
+      "firstname": "Max",
+      "lastname": "Doe",
+      "user_locale": "en",
+      "model_name": "User",
+      "room_limit": 0,
+      "roles": [
+        { "id": 1, "name": "Superuser", "automatic": false, "superuser": true }
+      ],
+      "updated_at": "2020-01-01T01:00:00.000000Z",
+      "initial_password_set": false,
+      "superuser": true
     }
   ],
   "meta": {
     "current_page": 1,
     "from": 1,
     "last_page": 1,
-    "per_page": 3,
-    "to": 3,
-    "total": 3,
-    "total_no_filter": 3
+    "per_page": 4,
+    "to": 4,
+    "total": 4,
+    "total_no_filter": 4
   }
 }

From 746b3683011fda98324a285e4ad9cb7d71c239a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 20 Jan 2025 07:36:03 +0100
Subject: [PATCH 52/79] Fix tests

---
 tests/Frontend/e2e/AdminServerPoolsNew.cy.js | 7 ++++++-
 tests/Frontend/e2e/AdminUsersNew.cy.js       | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/tests/Frontend/e2e/AdminServerPoolsNew.cy.js b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
index dddcda33c..f2e5df0b2 100644
--- a/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
@@ -328,6 +328,11 @@ describe("Admin server pools new", function () {
 
     cy.wait("@serversRequest");
 
+    cy.get('[data-test="server-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
     cy.get(".multiselect__content")
       .should("be.visible")
       .within(() => {
@@ -378,7 +383,7 @@ describe("Admin server pools new", function () {
     });
 
     // Close dialog
-    cy.get(".multiselect__select").click();
+    cy.get(".multiselect__select").click({ force: true });
 
     // Check that dialog is closed
     cy.get(".multiselect__content").should("not.be.visible");
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index e7d74b7ea..0d8c8f83c 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -545,7 +545,7 @@ describe("Admin users new", function () {
     });
 
     // Close dialog
-    cy.get(".multiselect__select").click();
+    cy.get(".multiselect__select").click({ force: true });
 
     // Check that dialog is closed
     cy.get(".multiselect__content").should("not.be.visible");

From 55b84d4787adc8a0db2c5a86287927c6aaf976e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 20 Jan 2025 07:37:21 +0100
Subject: [PATCH 53/79] Improve tests

---
 .../support/commands/adminSettingsCommands.js | 63 ++++++++++++-------
 tests/Frontend/support/utils/fileHelper.js    | 10 +++
 2 files changed, 50 insertions(+), 23 deletions(-)
 create mode 100644 tests/Frontend/support/utils/fileHelper.js

diff --git a/tests/Frontend/support/commands/adminSettingsCommands.js b/tests/Frontend/support/commands/adminSettingsCommands.js
index b3d7e56a1..0b55e625b 100644
--- a/tests/Frontend/support/commands/adminSettingsCommands.js
+++ b/tests/Frontend/support/commands/adminSettingsCommands.js
@@ -1,4 +1,5 @@
 import { _arrayBufferToBase64 } from "../utils/formData.js";
+import { getFileContentType } from "../utils/fileHelper.js";
 
 /**
  * Checks if the image file upload works correctly
@@ -65,11 +66,13 @@ Cypress.Commands.add(
 
     // Check that correct image is shown
     cy.fixture("files/" + imageName, "base64").then((content) => {
+      const contentType = getFileContentType(imageName);
+
       cy.get('[data-test="settings-image-preview"]')
         .should("have.attr", "src")
         .and("not.include", originalSrc)
         .then((src) => {
-          cy.checkBlobSrcImage(src, content);
+          cy.checkBlobSrcImage(src, content, contentType);
         });
     });
 
@@ -106,47 +109,61 @@ Cypress.Commands.add(
       },
     );
 
-    // Check that correct image is shown // ToDo try to get content type of fixture
+    // Check that correct image is shown
     cy.fixture("files/" + imageName, "base64").then((content) => {
+      const contentType = getFileContentType(imageName);
+
       cy.get('[data-test="settings-image-preview"]')
         .should("have.attr", "src")
         .and("not.include", originalSrc)
         .then((src) => {
-          cy.checkBlobSrcImage(src, content);
+          cy.checkBlobSrcImage(src, content, contentType);
         });
     });
   },
 );
 
 /**
- * Checks if the image loaded from the blob url has the expected content
+ * Checks if the image loaded from the blob url has the expected content and content type
  * @memberof cy
  * @method checkBlobUrlData
  * @param  {string} blobSrc
  * @param  {string} expectedBase64Content
+ * @param  {string} expectedContentType
  * @returns void
  */
-Cypress.Commands.add("checkBlobSrcImage", (blobSrc, expectedBase64Content) => {
-  cy.wrap(null, { log: false }).then(async () => {
-    return new Cypress.Promise((resolve, reject) => {
-      fetch(blobSrc)
-        // ToDo try to check content type
-        .then((response) => response.arrayBuffer())
-        .then((arrayBuffer) => {
-          const base64 = _arrayBufferToBase64(arrayBuffer);
-          try {
-            expect(base64).to.eql(expectedBase64Content);
-            resolve();
-          } catch (error) {
+Cypress.Commands.add(
+  "checkBlobSrcImage",
+  (blobSrc, expectedBase64Content, expectedContentType) => {
+    cy.wrap(null, { log: false }).then(async () => {
+      return new Cypress.Promise((resolve, reject) => {
+        fetch(blobSrc)
+          .then((response) =>
+            // Get array buffer and content type
+            response.arrayBuffer().then((arrayBuffer) => ({
+              arrayBuffer,
+              contentType: response.headers.get("content-type"),
+            })),
+          )
+          .then(({ arrayBuffer, contentType }) => {
+            const base64 = _arrayBufferToBase64(arrayBuffer);
+
+            // Check if content and content type are correct
+            try {
+              expect(contentType).to.eql(expectedContentType);
+              expect(base64).to.eql(expectedBase64Content);
+              resolve();
+            } catch (error) {
+              reject(error);
+            }
+          })
+          .catch((error) => {
             reject(error);
-          }
-        })
-        .catch((error) => {
-          reject(error);
-        });
+          });
+      });
     });
-  });
-});
+  },
+);
 
 /**
  * Checks if the image file upload works correctly
diff --git a/tests/Frontend/support/utils/fileHelper.js b/tests/Frontend/support/utils/fileHelper.js
new file mode 100644
index 000000000..96d67a3d9
--- /dev/null
+++ b/tests/Frontend/support/utils/fileHelper.js
@@ -0,0 +1,10 @@
+export function getFileContentType(fileName) {
+  const fileExtension = fileName.split(".").pop().toLowerCase();
+
+  return FILE_CONTENT_TYPES[fileExtension] || "";
+}
+
+const FILE_CONTENT_TYPES = {
+  svg: "image/svg+xml",
+  ico: "image/vnd.microsoft.icon",
+};

From 98be6561d46f7bd5b2905af8801f35dc17af276d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 22 Jan 2025 12:50:05 +0100
Subject: [PATCH 54/79] Start adding AdminRolesIndex tests

---
 .../components/SettingsRolesDeleteButton.vue  |   4 +
 resources/js/views/AdminRolesIndex.vue        |  27 +-
 tests/Frontend/e2e/AdminRolesIndex.cy.js      | 985 ++++++++++++++++++
 .../e2e/AdminRolesIndexRoleActions.cy.js      | 179 ++++
 .../e2e/AdminUsersIndexUserActions.cy.js      |   6 +-
 .../support/commands/interceptCommands.js     |  12 +
 6 files changed, 1209 insertions(+), 4 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminRolesIndex.cy.js
 create mode 100644 tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js

diff --git a/resources/js/components/SettingsRolesDeleteButton.vue b/resources/js/components/SettingsRolesDeleteButton.vue
index 24e1a167f..63cc959f4 100644
--- a/resources/js/components/SettingsRolesDeleteButton.vue
+++ b/resources/js/components/SettingsRolesDeleteButton.vue
@@ -5,6 +5,7 @@
     :disabled="isBusy"
     severity="danger"
     icon="fa-solid fa-trash"
+    data-test="roles-delete-button"
     @click="showModal"
   />
 
@@ -18,6 +19,7 @@
     :dismissable-mask="!isBusy"
     :closeable="!isBusy"
     :draggable="false"
+    data-test="roles-delete-dialog"
   >
     <span>
       {{ $t("admin.roles.delete.confirm", { name: props.name }) }}
@@ -26,12 +28,14 @@
       <Button
         :label="$t('app.no')"
         severity="secondary"
+        data-test="dialog-cancel-button"
         @click="modalVisible = false"
       />
       <Button
         :label="$t('app.yes')"
         severity="danger"
         :loading="isBusy"
+        data-test="dialog-continue-button"
         @click="deleteRole"
       />
     </template>
diff --git a/resources/js/views/AdminRolesIndex.vue b/resources/js/views/AdminRolesIndex.vue
index f5937e195..1c6ff54c5 100644
--- a/resources/js/views/AdminRolesIndex.vue
+++ b/resources/js/views/AdminRolesIndex.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="mb-6 flex flex-col justify-between md:flex-row">
       <div>
-        <InputGroup>
+        <InputGroup data-test="role-search">
           <InputText
             v-model="filter"
             :placeholder="$t('app.search')"
@@ -25,6 +25,7 @@
         icon="fa-solid fa-plus"
         :aria-label="$t('admin.roles.new')"
         :to="{ name: 'admin.roles.new' }"
+        data-test="roles-add-button"
       />
     </div>
 
@@ -45,6 +46,28 @@
       striped-rows
       :pt="{
         table: 'table-auto lg:table-fixed',
+        bodyRow: {
+          'data-test': 'role-item',
+        },
+        mask: {
+          'data-test': 'overlay',
+        },
+        column: {
+          bodyCell: {
+            'data-test': 'role-item-cell',
+          },
+          headerCell: {
+            'data-test': 'role-header-cell',
+          },
+        },
+        pcPaginator: {
+          page: {
+            'data-test': 'paginator-page',
+          },
+          next: {
+            'data-test': 'paginator-next-button',
+          },
+        },
       }"
       @update:first="paginator.setFirst($event)"
       @page="onPage"
@@ -101,6 +124,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-eye"
+              data-test="roles-view-button"
             />
             <Button
               v-if="userPermissions.can('update', slotProps.data)"
@@ -116,6 +140,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-edit"
+              data-test="roles-edit-button"
             />
             <SettingsRolesDeleteButton
               v-if="userPermissions.can('delete', slotProps.data)"
diff --git a/tests/Frontend/e2e/AdminRolesIndex.cy.js b/tests/Frontend/e2e/AdminRolesIndex.cy.js
new file mode 100644
index 000000000..df5c9164d
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRolesIndex.cy.js
@@ -0,0 +1,985 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin roles index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRolesIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roles.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/roles");
+  });
+
+  it("visit with user without permission to view roles", function () {
+    // Check with missing userRoles.viewAny permission
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/roles");
+    cy.get("h1").should("be.visible").and("contain", "home.title");
+  });
+
+  it("load roles", function () {
+    const rolesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        fixture: "userRoles.json",
+      },
+      "rolesRequest",
+    );
+    cy.visit("/admin/roles");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="role-search"]').within(() => {
+      cy.get("input").should("be.visible").and("be.disabled");
+      cy.get("button").should("be.visible").and("be.disabled");
+    });
+
+    cy.get('[data-test="roles-add-buton"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        rolesRequest.sendResponse();
+      });
+
+    cy.wait("@rolesRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get('[data-test="role-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.get('[data-test="roles-add-buton"]').should("not.exist");
+
+    // Check that table headers are shown correctly
+    cy.get('[data-test="role-header-cell"]').should("have.length", 2);
+
+    cy.get('[data-test="role-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name");
+    cy.get('[data-test="role-header-cell"]')
+      .eq(1)
+      .should("have.text", "app.actions");
+
+    // Check that roles are displayed correctly
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="role-item-cell"]')
+          .eq(0)
+          .should("include.text", "Superuser")
+          .and("include.text", "admin.roles.superuser");
+        cy.get('[data-test="role-item-cell"]')
+          .eq(1)
+          .within(() => {
+            cy.get('[data-test="roles-view-button"]').should("not.exist");
+            cy.get('[data-test="roles-edit-button"]').should("not.exist");
+            cy.get('[data-test="roles-delete-button"]').should("not.exist");
+          });
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="role-item-cell"]')
+          .eq(0)
+          .should("include.text", "Staff")
+          .and("not.include.text", "admin.roles.superuser");
+        cy.get('[data-test="role-item-cell"]')
+          .eq(1)
+          .within(() => {
+            cy.get('[data-test="roles-view-button"]').should("not.exist");
+            cy.get('[data-test="roles-edit-button"]').should("not.exist");
+            cy.get('[data-test="roles-delete-button"]').should("not.exist");
+          });
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="role-item-cell"]')
+          .eq(0)
+          .should("include.text", "Students")
+          .and("not.include.text", "admin.roles.superuser");
+        cy.get('[data-test="role-item-cell"]')
+          .eq(1)
+          .within(() => {
+            cy.get('[data-test="roles-view-button"]').should("not.exist");
+            cy.get('[data-test="roles-edit-button"]').should("not.exist");
+            cy.get('[data-test="roles-delete-button"]').should("not.exist");
+          });
+      });
+  });
+
+  it("load roles errors", function () {
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="role-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 200,
+      fixture: "userRoles.json",
+    }).as("rolesRequest");
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check that roles are shown and contain the correct data
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+    cy.get('[data-test="role-item"]').eq(0).should("include.text", "Superuser");
+    cy.get('[data-test="role-item"]').eq(1).should("include.text", "Staff");
+    cy.get('[data-test="role-item"]').eq(2).should("include.text", "Students");
+
+    // Switch to next page with general error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="role-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.fixture("userRoles.json").then((userRoles) => {
+      userRoles.data = userRoles.data.slice(0, 1);
+      userRoles.meta.last_page = 1;
+      userRoles.meta.per_page = 1;
+      userRoles.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: userRoles,
+      }).as("rolesRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check that role is shown and contains the correct data
+    cy.get('[data-test="role-item"]').should("have.length", 1);
+    cy.get('[data-test="role-item"]').eq(0).should("include.text", "Superuser");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page with 401 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Reload page with 401 error
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load roles page out of bounds", function () {
+    cy.fixture("userRoles.json").then((userRoles) => {
+      userRoles.data = userRoles.data.slice(0, 1);
+      userRoles.meta.last_page = 2;
+      userRoles.meta.per_page = 1;
+      userRoles.meta.to = 1;
+      userRoles.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: userRoles,
+      }).as("rolesRequest");
+    });
+
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    // Switch to next page but respond with no roles on second page
+    cy.fixture("userRoles.json").then((userRoles) => {
+      userRoles.data = [];
+      userRoles.meta.current_page = 2;
+      userRoles.meta.last_page = 1;
+      userRoles.meta.from = null;
+      userRoles.meta.per_page = 2;
+      userRoles.meta.to = null;
+      userRoles.meta.total = 2;
+      userRoles.meta.total_no_filter = 2;
+
+      const emptyRolesRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/roles*",
+        {
+          statusCode: 200,
+          body: userRoles,
+        },
+        "rolesRequest",
+      );
+
+      cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+      cy.fixture("userRoles.json").then((userRoles) => {
+        userRoles.data = userRoles.data.slice(0, 2);
+        userRoles.meta.per_page = 2;
+        userRoles.meta.to = 2;
+        userRoles.meta.total = 2;
+        userRoles.meta.total_no_filter = 2;
+
+        cy.intercept("GET", "api/v1/roles*", {
+          statusCode: 200,
+          body: userRoles,
+        })
+          .as("rolesRequest")
+          .then(() => {
+            emptyRolesRequest.sendResponse();
+          });
+      });
+    });
+
+    // Wait for first user request and check that page is still the same
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Wait for second user request and check that page is reset
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that pagination is shown correctly
+    cy.get('[data-test="paginator-page"]').should("have.length", 1);
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("role search", function () {
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query.name).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check with no roles found for this search query
+    cy.fixture("userRoles.json").then((roles) => {
+      roles.data = [];
+      roles.meta.from = null;
+      roles.meta.per_page = 1;
+      roles.meta.to = null;
+      roles.meta.total = 0;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="role-search"] > input').should("have.value", "");
+    cy.get('[data-test="role-search"] > input').type("Test");
+    cy.get('[data-test="role-search"] > button').click();
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query.name).to.equal("Test");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no roles are displayed
+    cy.contains("admin.roles.no_data_filtered").should("be.visible");
+    cy.get('[data-test="role-item"]').should("not.exist");
+
+    // Check with no roles available
+    cy.fixture("userRoles.json").then((roles) => {
+      roles.data = [];
+      roles.meta.from = null;
+      roles.meta.per_page = 1;
+      roles.meta.to = null;
+      roles.meta.total = 0;
+      roles.meta.total_no_filter = 0;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="role-search"] > input').clear();
+    cy.get('[data-test="role-search"] > input').type("Test2");
+    cy.get('[data-test="role-search"] > input').type("{enter}");
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query.name).to.equal("Test2");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no roles are displayed
+    cy.contains("admin.roles.no_data").should("be.visible");
+    cy.get('[data-test="role-item"]').should("have.length", 0);
+
+    // Check with 2 roles on 2 pages
+    cy.fixture("userRoles.json").then((roles) => {
+      roles.data = roles.data.slice(0, 1);
+      roles.meta.last_page = 2;
+      roles.meta.per_page = 1;
+      roles.meta.to = 1;
+      roles.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="role-search"] > input').clear();
+    cy.get('[data-test="role-search"] > input').type("e");
+    cy.get('[data-test="role-search"] > button').click();
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query.name).to.equal("e");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct role is shown
+    cy.get('[data-test="role-item"]').should("have.length", 1);
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser");
+
+    // Check that pagination shows the correct number of pages and switch to next page
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.fixture("userRoles.json").then((roles) => {
+      roles.data = roles.data.slice(1, 2);
+      roles.meta.current_page = 2;
+      roles.meta.from = 2;
+      roles.meta.last_page = 2;
+      roles.meta.per_page = 1;
+      roles.meta.to = 2;
+      roles.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    // Click on button for next page (eq(1) needed because there are two paginator components
+    // (first one for small devices second one for larger devices))
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check if the search query stays the same after changing the page
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        name: "e",
+        page: "2",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.get('[data-test="role-search"] > input').should("have.value", "e");
+
+    // Check that correct user is shown
+    cy.get('[data-test="role-item"]').should("have.length", 1);
+    cy.get('[data-test="role-item"]').eq(0).should("include.text", "Staff");
+
+    // Change search query and make sure that the page is reset
+    cy.fixture("userRoles.json").then((roles) => {
+      roles.data = roles.data.slice(0, 1);
+      roles.meta.last_page = 2;
+      roles.meta.per_page = 1;
+      roles.meta.to = 1;
+      roles.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="role-search"] > input').clear();
+    cy.get('[data-test="role-search"] > input').type("o");
+    cy.get('[data-test="role-search"] > button').click();
+
+    // Check that roles are loaded with the page reset to the first page
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        name: "o",
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("sort roles", function () {
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "name",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct columns are sortable and correct sorting type and direction is shown
+    cy.get('[data-test="role-header-cell"]').should("have.length", 2);
+    cy.get('[data-test="role-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+    cy.get('[data-test="role-header-cell"]')
+      .eq(1)
+      .should("have.text", "app.actions")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+
+    // Change sorting direction and response with 3 roles on 3 pages
+    cy.fixture("userRoles.json").then((roles) => {
+      roles.data = roles.data.slice(0, 1);
+      roles.meta.last_page = 3;
+      roles.meta.per_page = 1;
+      roles.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="role-header-cell"]').eq(0).click();
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "name",
+        sort_direction: "desc",
+      });
+    });
+
+    // Check that sorting is shown correctly
+    cy.get('[data-test="role-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct role is shown
+    cy.get('[data-test="role-item"]').should("have.length", 1);
+    cy.get('[data-test="role-item"]').eq(0).should("include.text", "Superuser");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.fixture("userRoles.json").then((roles) => {
+      roles.data = roles.data.slice(1, 2);
+      roles.meta.current_page = 2;
+      roles.meta.from = 2;
+      roles.meta.last_page = 3;
+      roles.meta.per_page = 1;
+      roles.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "name",
+        sort_direction: "desc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is shown correctly
+    cy.get('[data-test="role-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct role is shown
+    cy.get('[data-test="role-item"]').should("have.length", 1);
+    cy.get('[data-test="role-item"]').eq(0).should("include.text", "Staff");
+
+    // Change sorting direction and make sure that the page is reset
+    cy.fixture("userRoles.json").then((roles) => {
+      roles.data = roles.data.slice(0, 1);
+      roles.meta.last_page = 3;
+      roles.meta.per_page = 1;
+      roles.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="role-header-cell"]').eq(0).click();
+
+    // Check that roles are loaded with the page reset to the first page
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "name",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is shown correctly
+    cy.get('[data-test="role-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct role is shown
+    cy.get('[data-test="role-item"]').should("have.length", 1);
+    cy.get('[data-test="role-item"]').eq(0).should("include.text", "Superuser");
+  });
+
+  it("check button visibility with view permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="roles-add-button"]').should("not.exist");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1");
+        cy.get('[data-test="roles-edit-button"]').should("not.exist");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2");
+        cy.get('[data-test="roles-edit-button"]').should("not.exist");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3");
+        cy.get('[data-test="roles-edit-button"]').should("not.exist");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="roles-add-button"]').should("not.exist");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with add permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="roles-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/roles/new");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="roles-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/roles/new");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2/edit");
+        cy.get('[data-test="roles-delete-button"]').should("be.visible");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3/edit");
+        cy.get('[data-test="roles-delete-button"]').should("be.visible");
+      });
+  });
+
+  it("check button visibility for user that is no superuser", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="roles-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/roles/new");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2/edit");
+        cy.get('[data-test="roles-delete-button"]').should("be.visible");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3/edit");
+        cy.get('[data-test="roles-delete-button"]').should("be.visible");
+      });
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js b/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js
new file mode 100644
index 000000000..a68fadfbe
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js
@@ -0,0 +1,179 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin roles index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRolesIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete role", function () {
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .find('[data-test="roles-delete-button"]')
+      .click();
+
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="roles-delete-dialog"]')
+      .should("include.text", "admin.roles.delete.title")
+      .should("include.text", 'admin.roles.delete.confirm_{"name":"Students"}');
+
+    // Confirm deletion of role
+    const deleteRoleRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/roles/3",
+      {
+        statusCode: 204,
+      },
+      "deleteRoleRequest",
+    );
+
+    cy.fixture("userRoles.json").then((roles) => {
+      roles.data = roles.data.filter((role) => role.id !== 3);
+      roles.meta.to = 2;
+      roles.meta.total = 2;
+      roles.meta.total_no_filter = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("be.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteRoleRequest.sendResponse();
+      });
+
+    cy.wait("@deleteRoleRequest");
+    cy.wait("@rolesRequest");
+
+    // Check that role was deleted
+    cy.get('[data-test="role-item"]').should("have.length", 2);
+
+    // Check that dialog was closed
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+
+    // Reopen dialog for different user
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .find('[data-test="roles-delete-button"]')
+      .click();
+
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="roles-delete-dialog"]')
+      .should("include.text", "admin.roles.delete.title")
+      .should("include.text", 'admin.roles.delete.confirm_{"name":"Staff"}');
+
+    // Cancel deletion of role
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .click();
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+  });
+
+  it("delete role errors", function () {
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .find('[data-test="roles-delete-button"]')
+      .click();
+
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/roles/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteRoleRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoleRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 464 error
+    cy.intercept("DELETE", "api/v1/roles/3", {
+      statusCode: 464,
+      body: {
+        message:
+          "The role is linked to users and therefore it can't be deleted!",
+      },
+    }).as("deleteRoleRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoleRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"The role is linked to users and therefore it can\'t be deleted!"}',
+      'app.flash.server_error.error_code_{"statusCode":464}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/roles/3", {
+      statusCode: 401,
+    }).as("deleteRoleRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoleRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
index cf2e2311d..278a9b46b 100644
--- a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
@@ -65,9 +65,9 @@ describe("Admin users index user actions", function () {
 
     cy.fixture("users.json").then((users) => {
       users.data = users.data.filter((user) => user.id !== 3);
-      users.meta.to = 2;
-      users.meta.total = 2;
-      users.meta.total_no_filter = 2;
+      users.meta.to = 3;
+      users.meta.total = 3;
+      users.meta.total_no_filter = 3;
 
       cy.intercept("GET", "api/v1/users*", {
         statusCode: 200,
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index e032a8539..b37f419e3 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -365,3 +365,15 @@ Cypress.Commands.add("interceptAdminSettingsRequest", () => {
 
   cy.intercept("GET", "api/v1/getTimezones", { fixture: "timezones.json" });
 });
+
+/**
+ * Intercept all requests that are needed when visiting the admin roles index page
+ * @memberof cy
+ * @method interceptAdminRolesIndexRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminRolesIndexRequests", () => {
+  cy.intercept("GET", "api/v1/roles*", {
+    fixture: "userRoles.json",
+  }).as("rolesRequest");
+});

From 876466063491b7da184ca0cc38fb0d83b3e2297a Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Wed, 22 Jan 2025 14:50:17 +0100
Subject: [PATCH 55/79] Fix 404 handling

---
 resources/js/components/SettingsRoomTypesDeleteButton.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/js/components/SettingsRoomTypesDeleteButton.vue b/resources/js/components/SettingsRoomTypesDeleteButton.vue
index 5223728ce..3e7baa9f3 100644
--- a/resources/js/components/SettingsRoomTypesDeleteButton.vue
+++ b/resources/js/components/SettingsRoomTypesDeleteButton.vue
@@ -182,7 +182,6 @@ function deleteRoomType() {
       if (error.response && error.response.status === env.HTTP_NOT_FOUND) {
         modalVisible.value = false;
         emit("notFound");
-        return;
       }
       api.error(error);
     })

From a59944532435ba8efc4d2cc1b9280f219aa98acc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 22 Jan 2025 16:11:10 +0100
Subject: [PATCH 56/79] Fix role naming in tests

---
 tests/Frontend/e2e/AdminRoomTypesEdit.cy.js   | 26 +++++++++----------
 tests/Frontend/e2e/AdminRoomTypesNew.cy.js    |  2 +-
 tests/Frontend/e2e/AdminRoomTypesView.cy.js   |  4 +--
 .../AdminRoomTypesViewRoomTypeActions.cy.js   |  8 +++---
 tests/Frontend/e2e/UserProfileSecurity.cy.js  |  6 ++---
 5 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
index cd2b6a659..84a4c36c2 100644
--- a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
@@ -825,7 +825,7 @@ describe("Admin room types edit", function () {
       roomType.data.roles = [
         {
           id: 1,
-          name: "Admin",
+          name: "Superuser",
         },
         {
           id: 2,
@@ -860,7 +860,7 @@ describe("Admin room types edit", function () {
           cy.get('[data-test="role-chip"]').should("have.length", 2);
           cy.get('[data-test="role-chip"]')
             .eq(0)
-            .should("include.text", "Admin")
+            .should("include.text", "Superuser")
             .find('[data-test="remove-role-button"]')
             .should("be.visible");
 
@@ -881,7 +881,7 @@ describe("Admin room types edit", function () {
         cy.get(".multiselect__option").should("have.length", 5);
         cy.get(".multiselect__option")
           .eq(0)
-          .should("include.text", "Admin")
+          .should("include.text", "Superuser")
           .and("be.visible");
         cy.get(".multiselect__option")
           .eq(1)
@@ -1025,7 +1025,7 @@ describe("Admin room types edit", function () {
       cy.get('[data-test="role-chip"]').should("have.length", 4);
       cy.get('[data-test="role-chip"]')
         .eq(0)
-        .should("include.text", "Admin")
+        .should("include.text", "Superuser")
         .find('[data-test="remove-role-button"]')
         .should("be.visible");
 
@@ -1133,7 +1133,7 @@ describe("Admin room types edit", function () {
       roomType.data.roles = [
         {
           id: 1,
-          name: "Admin",
+          name: "Superuser",
         },
         {
           id: 2,
@@ -1614,7 +1614,7 @@ describe("Admin room types edit", function () {
       roomType.data.roles = [
         {
           id: 1,
-          name: "Admin",
+          name: "Superuser",
         },
         {
           id: 2,
@@ -1706,7 +1706,7 @@ describe("Admin room types edit", function () {
       cy.get('[data-test="role-chip"]').should("have.length", 2);
       cy.get('[data-test="role-chip"]')
         .eq(0)
-        .should("include.text", "Admin")
+        .should("include.text", "Superuser")
         .find('[data-test="remove-role-button"]')
         .should("be.visible");
 
@@ -1848,7 +1848,7 @@ describe("Admin room types edit", function () {
       roomType.data.roles = [
         {
           id: 1,
-          name: "Admin",
+          name: "Superuser",
         },
         {
           id: 2,
@@ -1905,7 +1905,7 @@ describe("Admin room types edit", function () {
       roomType.data.roles = [
         {
           id: 1,
-          name: "Admin",
+          name: "Superuser",
         },
         {
           id: 2,
@@ -2137,7 +2137,7 @@ describe("Admin room types edit", function () {
       roomType.data.roles = [
         {
           id: 1,
-          name: "Admin",
+          name: "Superuser",
         },
         {
           id: 2,
@@ -2194,7 +2194,7 @@ describe("Admin room types edit", function () {
       cy.get('[data-test="role-chip"]').should("have.length", 2);
       cy.get('[data-test="role-chip"]')
         .eq(0)
-        .should("include.text", "Admin")
+        .should("include.text", "Superuser")
         .find('[data-test="remove-role-button"]')
         .should("be.visible");
 
@@ -2225,7 +2225,7 @@ describe("Admin room types edit", function () {
       cy.get('[data-test="role-chip"]').should("have.length", 2);
       cy.get('[data-test="role-chip"]')
         .eq(0)
-        .should("include.text", "Admin")
+        .should("include.text", "Superuser")
         .find('[data-test="remove-role-button"]')
         .should("be.visible");
 
@@ -2280,7 +2280,7 @@ describe("Admin room types edit", function () {
       cy.get('[data-test="role-chip"]').should("have.length", 2);
       cy.get('[data-test="role-chip"]')
         .eq(0)
-        .should("include.text", "Admin")
+        .should("include.text", "Superuser")
         .find('[data-test="remove-role-button"]')
         .should("be.visible");
 
diff --git a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
index 6c265d068..e04d6e8d4 100644
--- a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
@@ -762,7 +762,7 @@ describe("Admin room types new", function () {
         cy.get(".multiselect__option").should("have.length", 5);
         cy.get(".multiselect__option")
           .eq(0)
-          .should("include.text", "Admin")
+          .should("include.text", "Superuser")
           .and("be.visible");
         cy.get(".multiselect__option")
           .eq(1)
diff --git a/tests/Frontend/e2e/AdminRoomTypesView.cy.js b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
index d71426961..6480e36d1 100644
--- a/tests/Frontend/e2e/AdminRoomTypesView.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
@@ -519,7 +519,7 @@ describe("Admin room types view", function () {
       roomType.data.roles = [
         {
           id: 1,
-          name: "Admin",
+          name: "Superuser",
         },
         {
           id: 2,
@@ -552,7 +552,7 @@ describe("Admin room types view", function () {
             cy.get('[data-test="role-chip"]').should("have.length", 2);
             cy.get('[data-test="role-chip"]')
               .eq(0)
-              .should("include.text", "Admin")
+              .should("include.text", "Superuser")
               .find('[data-test="remove-server-button"]')
               .should("not.exist");
             cy.get('[data-test="role-chip"]')
diff --git a/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
index 475de6ee2..dd7efe525 100644
--- a/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
@@ -433,7 +433,7 @@ describe("Admin room types view room type actions", function () {
       roomType.data.roles = [
         {
           id: 1,
-          name: "Admin",
+          name: "Superuser",
         },
         {
           id: 2,
@@ -484,7 +484,7 @@ describe("Admin room types view room type actions", function () {
       cy.get('[data-test="role-chip"]').should("have.length", 2);
       cy.get('[data-test="role-chip"]')
         .eq(0)
-        .should("include.text", "Admin")
+        .should("include.text", "Superuser")
         .find('[data-test="remove-role-button"]')
         .should("be.visible");
 
@@ -684,7 +684,7 @@ describe("Admin room types view room type actions", function () {
         cy.get('[data-test="role-chip"]').should("have.length", 2);
         cy.get('[data-test="role-chip"]')
           .eq(0)
-          .should("include.text", "Admin")
+          .should("include.text", "Superuser")
           .find('[data-test="remove-role-button"]')
           .should("not.exist");
 
@@ -854,7 +854,7 @@ describe("Admin room types view room type actions", function () {
         cy.get('[data-test="role-chip"]').should("have.length", 2);
         cy.get('[data-test="role-chip"]')
           .eq(0)
-          .should("include.text", "Admin")
+          .should("include.text", "Superuser")
           .find('[data-test="remove-role-button"]')
           .should("be.visible");
 
diff --git a/tests/Frontend/e2e/UserProfileSecurity.cy.js b/tests/Frontend/e2e/UserProfileSecurity.cy.js
index 9f1846d5b..9e2ef32d7 100644
--- a/tests/Frontend/e2e/UserProfileSecurity.cy.js
+++ b/tests/Frontend/e2e/UserProfileSecurity.cy.js
@@ -21,7 +21,7 @@ describe("User Profile Security", function () {
       .and("include.text", "app.roles")
       .within(() => {
         cy.get('[data-test="role-dropdown"]')
-          .should("include.text", "Admin")
+          .should("include.text", "Superuser")
           .should("include.text", "User")
           .should("have.class", "multiselect--disabled");
       });
@@ -193,7 +193,7 @@ describe("User Profile Security", function () {
       .and("include.text", "app.roles")
       .within(() => {
         cy.get('[data-test="role-dropdown"]')
-          .should("include.text", "Admin")
+          .should("include.text", "Superuser")
           .should("include.text", "User")
           .should("have.class", "multiselect--disabled");
       });
@@ -256,7 +256,7 @@ describe("User Profile Security", function () {
       .and("include.text", "app.roles")
       .within(() => {
         cy.get('[data-test="role-dropdown"]')
-          .should("include.text", "Admin")
+          .should("include.text", "Superuser")
           .should("include.text", "User")
           .should("have.class", "multiselect--disabled");
       });

From 17ab5a9cea5ac996b03aabb7c1340e9117728676 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 22 Jan 2025 16:15:30 +0100
Subject: [PATCH 57/79] Add missing data-test for replacement room types reload
 button

---
 resources/js/components/SettingsRoomTypesDeleteButton.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/components/SettingsRoomTypesDeleteButton.vue b/resources/js/components/SettingsRoomTypesDeleteButton.vue
index 63258f581..cab14e3c4 100644
--- a/resources/js/components/SettingsRoomTypesDeleteButton.vue
+++ b/resources/js/components/SettingsRoomTypesDeleteButton.vue
@@ -73,6 +73,7 @@
           outlined
           severity="secondary"
           icon="fa-solid fa-sync"
+          data-test="replacement-room-types-reload-button"
           @click="loadReplacementRoomTypes()"
         />
       </InputGroup>

From faf650eaf88c1fb0e9cd6380d3fa670a2699c0b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Fri, 24 Jan 2025 09:13:50 +0100
Subject: [PATCH 58/79] Improve tests

---
 tests/Frontend/e2e/AdminServerPoolsNew.cy.js  |  2 +-
 tests/Frontend/e2e/AdminSettingsEdit.cy.js    |  6 ++----
 tests/Frontend/e2e/AdminUsersEditBase.cy.js   |  6 ++----
 tests/Frontend/e2e/AdminUsersNew.cy.js        |  2 +-
 .../e2e/RoomsViewFilesFileActions.cy.js       |  6 ++----
 tests/Frontend/e2e/UserProfileBase.cy.js      |  6 ++----
 .../support/commands/adminSettingsCommands.js |  6 ++++--
 tests/Frontend/support/utils/fileHelper.js    | 20 ++++++++++++++++++-
 tests/Frontend/support/utils/formData.js      | 10 ----------
 9 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/tests/Frontend/e2e/AdminServerPoolsNew.cy.js b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
index f2e5df0b2..cffeef8e8 100644
--- a/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
@@ -383,7 +383,7 @@ describe("Admin server pools new", function () {
     });
 
     // Close dialog
-    cy.get(".multiselect__select").click({ force: true });
+    cy.get(".multiselect__select").click({ force: true }); // ToDo remove force when possible
 
     // Check that dialog is closed
     cy.get(".multiselect__content").should("not.be.visible");
diff --git a/tests/Frontend/e2e/AdminSettingsEdit.cy.js b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
index 8081b6b70..5748cc481 100644
--- a/tests/Frontend/e2e/AdminSettingsEdit.cy.js
+++ b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
@@ -1,8 +1,6 @@
 import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
-import {
-  _arrayBufferToBase64,
-  parseFormData,
-} from "../support/utils/formData.js";
+import { parseFormData } from "../support/utils/formData.js";
+import { _arrayBufferToBase64 } from "../support/utils/fileHelper.js";
 
 describe("Admin settings with edit permission", function () {
   beforeEach(function () {
diff --git a/tests/Frontend/e2e/AdminUsersEditBase.cy.js b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
index cb0493fd4..4f51f3f82 100644
--- a/tests/Frontend/e2e/AdminUsersEditBase.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
@@ -1,8 +1,6 @@
 import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
-import {
-  _arrayBufferToBase64,
-  parseFormData,
-} from "../support/utils/formData.js";
+import { parseFormData } from "../support/utils/formData.js";
+import { _arrayBufferToBase64 } from "../support/utils/fileHelper.js";
 
 describe("Admin users edit base", function () {
   beforeEach(function () {
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index 0d8c8f83c..ff5225c44 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -545,7 +545,7 @@ describe("Admin users new", function () {
     });
 
     // Close dialog
-    cy.get(".multiselect__select").click({ force: true });
+    cy.get(".multiselect__select").click({ force: true }); // ToDo remove force when possible
 
     // Check that dialog is closed
     cy.get(".multiselect__content").should("not.be.visible");
diff --git a/tests/Frontend/e2e/RoomsViewFilesFileActions.cy.js b/tests/Frontend/e2e/RoomsViewFilesFileActions.cy.js
index 9450afc3c..72a474cc0 100644
--- a/tests/Frontend/e2e/RoomsViewFilesFileActions.cy.js
+++ b/tests/Frontend/e2e/RoomsViewFilesFileActions.cy.js
@@ -1,8 +1,6 @@
-import {
-  _arrayBufferToBase64,
-  parseFormData,
-} from "../support/utils/formData.js";
+import { parseFormData } from "../support/utils/formData.js";
 import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+import { _arrayBufferToBase64 } from "../support/utils/fileHelper.js";
 
 describe("Rooms view files file actions", function () {
   beforeEach(function () {
diff --git a/tests/Frontend/e2e/UserProfileBase.cy.js b/tests/Frontend/e2e/UserProfileBase.cy.js
index f8b5d9f9a..ff3600b08 100644
--- a/tests/Frontend/e2e/UserProfileBase.cy.js
+++ b/tests/Frontend/e2e/UserProfileBase.cy.js
@@ -1,8 +1,6 @@
 import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
-import {
-  _arrayBufferToBase64,
-  parseFormData,
-} from "../support/utils/formData.js";
+import { parseFormData } from "../support/utils/formData.js";
+import { _arrayBufferToBase64 } from "../support/utils/fileHelper.js";
 
 describe("User Profile Base", function () {
   beforeEach(function () {
diff --git a/tests/Frontend/support/commands/adminSettingsCommands.js b/tests/Frontend/support/commands/adminSettingsCommands.js
index 0b55e625b..5cb247121 100644
--- a/tests/Frontend/support/commands/adminSettingsCommands.js
+++ b/tests/Frontend/support/commands/adminSettingsCommands.js
@@ -1,5 +1,7 @@
-import { _arrayBufferToBase64 } from "../utils/formData.js";
-import { getFileContentType } from "../utils/fileHelper.js";
+import {
+  _arrayBufferToBase64,
+  getFileContentType,
+} from "../utils/fileHelper.js";
 
 /**
  * Checks if the image file upload works correctly
diff --git a/tests/Frontend/support/utils/fileHelper.js b/tests/Frontend/support/utils/fileHelper.js
index 96d67a3d9..9771d7726 100644
--- a/tests/Frontend/support/utils/fileHelper.js
+++ b/tests/Frontend/support/utils/fileHelper.js
@@ -1,7 +1,25 @@
+export function _arrayBufferToBase64(buffer) {
+  let binary = "";
+  const bytes = new Uint8Array(buffer);
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+
 export function getFileContentType(fileName) {
   const fileExtension = fileName.split(".").pop().toLowerCase();
 
-  return FILE_CONTENT_TYPES[fileExtension] || "";
+  const contentType = FILE_CONTENT_TYPES[fileExtension];
+
+  if (!contentType) {
+    throw new Error(
+      "No file content type listed for given file extension: " + fileExtension,
+    );
+  }
+
+  return contentType;
 }
 
 const FILE_CONTENT_TYPES = {
diff --git a/tests/Frontend/support/utils/formData.js b/tests/Frontend/support/utils/formData.js
index 7ee2b945d..e4ecc13ec 100644
--- a/tests/Frontend/support/utils/formData.js
+++ b/tests/Frontend/support/utils/formData.js
@@ -1,13 +1,3 @@
-export function _arrayBufferToBase64(buffer) {
-  let binary = "";
-  const bytes = new Uint8Array(buffer);
-  const len = bytes.byteLength;
-  for (let i = 0; i < len; i++) {
-    binary += String.fromCharCode(bytes[i]);
-  }
-  return btoa(binary);
-}
-
 export function parseFormData(data, headers) {
   const boundary = headers["content-type"].split(
     "multipart/form-data; boundary=",

From 0ffc9b70c4c51d00f079351eb5adbf9f300a9a84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Fri, 24 Jan 2025 09:15:39 +0100
Subject: [PATCH 59/79] Start adding AdminRolesView tests

---
 resources/js/views/AdminRolesView.vue         |   24 +-
 .../e2e/AdminRolesIndexRoleActions.cy.js      |   38 +-
 tests/Frontend/e2e/AdminRolesView.cy.js       | 1074 +++++++++++++++++
 .../e2e/AdminRolesViewRoleActions.cy.js       |  156 +++
 tests/Frontend/fixtures/config.json           |    1 +
 tests/Frontend/fixtures/permissions.json      |   94 ++
 tests/Frontend/fixtures/role.json             |   19 +
 .../support/commands/adminRolesCommands.js    |   36 +
 .../support/commands/interceptCommands.js     |   28 +
 tests/Frontend/support/e2e.js                 |    1 +
 10 files changed, 1467 insertions(+), 4 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminRolesView.cy.js
 create mode 100644 tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js
 create mode 100644 tests/Frontend/fixtures/permissions.json
 create mode 100644 tests/Frontend/fixtures/role.json
 create mode 100644 tests/Frontend/support/commands/adminRolesCommands.js

diff --git a/resources/js/views/AdminRolesView.vue b/resources/js/views/AdminRolesView.vue
index eddf17426..68bd112c5 100644
--- a/resources/js/views/AdminRolesView.vue
+++ b/resources/js/views/AdminRolesView.vue
@@ -10,6 +10,7 @@
           :to="{ name: 'admin.roles.view', params: { id: model.id } }"
           :label="$t('app.cancel_editing')"
           icon="fa-solid fa-times"
+          data-test="roles-cancel-edit-button"
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', model)"
@@ -19,6 +20,7 @@
           :to="{ name: 'admin.roles.edit', params: { id: model.id } }"
           :label="$t('app.edit')"
           icon="fa-solid fa-edit"
+          data-test="roles-edit-button"
         />
         <SettingsRolesDeleteButton
           v-if="userPermissions.can('delete', model)"
@@ -30,7 +32,7 @@
     </div>
 
     <OverlayComponent :show="isBusy || modelLoadingError">
-      <template #loading>
+      <template #overlay>
         <LoadingRetryButton
           :error="modelLoadingError"
           @reload="load()"
@@ -42,7 +44,7 @@
         class="flex flex-col gap-4"
         @submit.prevent="saveRole"
       >
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="name-field">
           <label for="name" class="col-span-12 md:col-span-4">{{
             $t("app.model_name")
           }}</label>
@@ -59,7 +61,7 @@
           </div>
         </div>
 
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="room-limit-field">
           <label for="room-limit" class="col-span-12 items-start md:col-span-4">
             <span class="flex items-center">
               {{ $t("app.room_limit") }}
@@ -68,6 +70,7 @@
                 class="secondary"
                 :disabled="isBusy || modelLoadingError"
                 icon="fa-solid fa-circle-info"
+                data-test="roles-room-limit-help-button"
                 @click="helpRoomLimitModalVisible = true"
               />
             </span>
@@ -77,6 +80,7 @@
               v-for="option in roomLimitModeOptions"
               :key="option.value"
               class="mb-2"
+              :data-test="'room-limit-mode-' + option.value + '-field'"
             >
               <RadioButton
                 v-model="roomLimitMode"
@@ -107,6 +111,7 @@
         <div
           v-if="!isBusy && Object.keys(permissions).length > 0"
           class="grid grid-cols-12 gap-4"
+          data-test="permission-list"
         >
           <div class="col-span-8">
             <b>{{ $t("admin.roles.permission_name") }}</b>
@@ -128,6 +133,7 @@
               v-for="key in Object.keys(permissions)"
               :key="key"
               class="grid grid-cols-12"
+              data-test="permission-category"
             >
               <div class="col-span-12">
                 <b>{{ $t(`admin.roles.permissions.${key}.title`) }}</b>
@@ -137,6 +143,7 @@
                   v-for="permission in permissions[key]"
                   :key="permission.id"
                   class="grid grid-cols-12 gap-4"
+                  data-test="permission-group"
                 >
                   <div class="col-span-8">
                     <label :for="permission.name">{{
@@ -174,6 +181,7 @@
                         })
                       "
                       class="fa-solid fa-check-circle text-green-500"
+                      data-test="permission-included-icon"
                     />
                     <i
                       v-else
@@ -185,6 +193,7 @@
                         })
                       "
                       class="fa-solid fa-minus-circle text-red-500"
+                      data-test="permission-not-included-icon"
                     />
                   </div>
                 </div>
@@ -207,6 +216,7 @@
               type="submit"
               icon="fa-solid fa-save"
               :label="$t('app.save')"
+              data-test="roles-save-button"
             />
           </div>
         </div>
@@ -224,6 +234,14 @@
       dismissable-mask
       :draggable="false"
       :header="$t('app.room_limit')"
+      data-test="roles-room-limit-help-dialog"
+      :pt="{
+        pcCloseButton: {
+          root: {
+            'data-test': 'dialog-header-close-button',
+          },
+        },
+      }"
     >
       <div class="overflow-auto">
         <p>{{ $t("admin.roles.room_limit.help_modal.info") }}</p>
diff --git a/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js b/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js
index a68fadfbe..4ac5f20fc 100644
--- a/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js
+++ b/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js
@@ -1,6 +1,6 @@
 import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
 
-describe("Admin roles index", function () {
+describe("Admin roles index role actions", function () {
   beforeEach(function () {
     cy.init();
     cy.interceptAdminRolesIndexRequests();
@@ -176,4 +176,40 @@ describe("Admin roles index", function () {
 
     cy.checkToastMessage("app.flash.unauthenticated");
   });
+
+  it("open add new role page", function () {
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.interceptAdminRolesNewRequests();
+
+    cy.get('[data-test="roles-add-button"]').click();
+    cy.url().should("include", "/admin/roles/new");
+  });
+
+  it("open edit role page", function () {
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.interceptAdminRolesViewRequests();
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .find('[data-test="roles-edit-button"]')
+      .click();
+    cy.url().should("include", "/admin/roles/2/edit");
+  });
+
+  it("open view role page", function () {
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.interceptAdminRolesViewRequests();
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .find('[data-test="roles-view-button"]')
+      .click();
+    cy.url().should("include", "/admin/roles/2");
+  });
 });
diff --git a/tests/Frontend/e2e/AdminRolesView.cy.js b/tests/Frontend/e2e/AdminRolesView.cy.js
new file mode 100644
index 000000000..2d17cbc92
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRolesView.cy.js
@@ -0,0 +1,1074 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin roles view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRolesViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/roles/2");
+  });
+
+  it("visit with user without permission to view roles", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roles.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+    cy.visit("/admin/roles/2");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/room_types/3");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check rolesView shown correctly", function () {
+    const roleRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles/2",
+      { fixture: "role.json" },
+      "roleRequest",
+    );
+
+    cy.visit("/admin/roles/2");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        roleRequest.sendResponse();
+      });
+
+    cy.wait("@roleRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that buttons are still hidden
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+
+    // Check that role data is shown correctly
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Staff").and("be.disabled");
+      });
+
+    cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should(
+            "include.text",
+            'admin.roles.room_limit.default_{"value":"app.unlimited"}',
+          )
+          .within(() => {
+            cy.get("#default").should("be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited").should("not.be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("not.be.checked").and("be.disabled");
+          });
+        cy.get("#room-limit").should("not.exist");
+
+        // Open room limit help dialog
+        cy.get('[data-test="roles-room-limit-help-button"]').click();
+      });
+
+    cy.get('[data-test="roles-room-limit-help-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .and("include.text", "admin.roles.room_limit.help_modal.info")
+      .and("include.text", "admin.roles.room_limit.help_modal.examples")
+      .and("include.text", "admin.roles.room_limit.help_modal.note")
+      .within(() => {
+        // Check that table is shown correctly
+        cy.get("tr").should("have.length", 8);
+
+        cy.get("tr")
+          .eq(0)
+          .within(() => {
+            cy.get("th").should("have.length", 4);
+            cy.get("th")
+              .eq(0)
+              .should(
+                "include.text",
+                "admin.roles.room_limit.help_modal.system_default",
+              );
+            cy.get("th")
+              .eq(1)
+              .should(
+                "include.text",
+                "admin.roles.room_limit.help_modal.role_a",
+              );
+            cy.get("th")
+              .eq(2)
+              .should(
+                "include.text",
+                "admin.roles.room_limit.help_modal.role_b",
+              );
+
+            cy.get("th").eq(3).should("include.text", "app.room_limit");
+          });
+
+        cy.get("tr")
+          .eq(1)
+          .within(() => {
+            cy.get("td").should("have.length", 4);
+            cy.get("td").eq(0).should("include.text", "5");
+            cy.get("td").eq(1).should("include.text", "X");
+            cy.get("td").eq(2).should("include.text", "X");
+            cy.get("td").eq(3).should("include.text", "5");
+          });
+
+        cy.get("tr")
+          .eq(2)
+          .within(() => {
+            cy.get("td").should("have.length", 4);
+            cy.get("td").eq(0).should("include.text", "1");
+            cy.get("td").eq(1).should("include.text", "5");
+            cy.get("td").eq(2).should("include.text", "X");
+            cy.get("td").eq(3).should("include.text", "5");
+          });
+
+        cy.get("tr")
+          .eq(3)
+          .within(() => {
+            cy.get("td").should("have.length", 4);
+            cy.get("td").eq(0).should("include.text", "5");
+            cy.get("td").eq(1).should("include.text", "1");
+            cy.get("td").eq(2).should("include.text", "X");
+            cy.get("td").eq(3).should("include.text", "1");
+          });
+
+        cy.get("tr")
+          .eq(4)
+          .within(() => {
+            cy.get("td").should("have.length", 4);
+            cy.get("td").eq(0).should("include.text", "5");
+            cy.get("td").eq(1).should("include.text", "1");
+            cy.get("td").eq(2).should("include.text", "2");
+            cy.get("td").eq(3).should("include.text", "2");
+          });
+
+        cy.get("tr")
+          .eq(5)
+          .within(() => {
+            cy.get("td").should("have.length", 4);
+            cy.get("td").eq(0).should("include.text", "5");
+            cy.get("td")
+              .eq(1)
+              .should(
+                "include.text",
+                "admin.roles.room_limit.help_modal.system_default",
+              );
+            cy.get("td").eq(2).should("include.text", "2");
+            cy.get("td").eq(3).should("include.text", "5");
+          });
+
+        cy.get("tr")
+          .eq(6)
+          .within(() => {
+            cy.get("td").should("have.length", 4);
+            cy.get("td").eq(0).should("include.text", "5");
+            cy.get("td")
+              .eq(1)
+              .should(
+                "include.text",
+                "admin.roles.room_limit.help_modal.system_default",
+              );
+            cy.get("td").eq(2).should("include.text", "10");
+            cy.get("td").eq(3).should("include.text", "10");
+          });
+
+        cy.get("tr")
+          .eq(7)
+          .within(() => {
+            cy.get("td").should("have.length", 4);
+            cy.get("td").eq(0).should("include.text", "5");
+            cy.get("td").eq(1).should("include.text", "app.unlimited");
+            cy.get("td").eq(2).should("include.text", "2");
+            cy.get("td").eq(3).should("include.text", "app.unlimited");
+          });
+
+        // Close room limit help dialog
+        cy.get('[data-test="dialog-header-close-button"]').click();
+      });
+
+    cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
+
+    // Check that permissions are shown correctly
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", true, true, true);
+            cy.checkPermissionGroup(1, "rooms.viewAll", true, true, true);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", true, true, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, true, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "settings.update", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", true, true, true);
+            cy.checkPermissionGroup(1, "users.view", false, false, true);
+            cy.checkPermissionGroup(2, "users.update", false, false, true);
+            cy.checkPermissionGroup(3, "users.create", false, false, true);
+            cy.checkPermissionGroup(4, "users.delete", false, false, true);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              true,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, true, true);
+            cy.checkPermissionGroup(1, "roles.view", false, false, true);
+            cy.checkPermissionGroup(2, "roles.update", false, false, true);
+            cy.checkPermissionGroup(3, "roles.create", false, false, true);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "room_types.view", false, true, true);
+            cy.checkPermissionGroup(1, "room_types.update", true, true, true);
+            cy.checkPermissionGroup(2, "room_types.create", true, true, true);
+            cy.checkPermissionGroup(3, "room_types.delete", true, true, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "servers.view", false, false, true);
+            cy.checkPermissionGroup(2, "servers.update", false, false, true);
+            cy.checkPermissionGroup(3, "servers.create", false, false, true);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              true,
+              true,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, true);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              true,
+            );
+          });
+      });
+  });
+
+  it("check rolesView with no permissions available", function () {
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 200,
+      body: {
+        data: [],
+        meta: { restrictions: [""] },
+      },
+    }).as("permissionsRequest");
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@permissionsRequest");
+
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Staff").and("be.disabled");
+      });
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should(
+            "include.text",
+            'admin.roles.room_limit.default_{"value":"app.unlimited"}',
+          )
+          .within(() => {
+            cy.get("#default").should("be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited").should("not.be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("not.be.checked").and("be.disabled");
+          });
+        cy.get("#room-limit").should("not.exist");
+      });
+    // Check that permissions are shown correctly
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.get('[data-test="permission-list"]').should("not.exist");
+
+    cy.contains("admin.roles.no_options").should("be.visible");
+  });
+
+  it("check rolesView with different permission dependencies", function () {
+    cy.fixture("permissions.json").then((permissions) => {
+      permissions.data[18].included_permissions = [];
+      permissions.data[19].included_permissions = [];
+      permissions.data[20].included_permissions = [];
+      permissions.data[21].included_permissions = [];
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that permissions are shown correctly
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", true, true, true);
+            cy.checkPermissionGroup(1, "rooms.viewAll", true, true, true);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", true, true, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, true, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "settings.update", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", true, true, true);
+            cy.checkPermissionGroup(1, "users.view", false, false, true);
+            cy.checkPermissionGroup(2, "users.update", false, false, true);
+            cy.checkPermissionGroup(3, "users.create", false, false, true);
+            cy.checkPermissionGroup(4, "users.delete", false, false, true);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              true,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, true, true);
+            cy.checkPermissionGroup(1, "roles.view", false, false, true);
+            cy.checkPermissionGroup(2, "roles.update", false, false, true);
+            cy.checkPermissionGroup(3, "roles.create", false, false, true);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "room_types.view", false, false, true);
+            cy.checkPermissionGroup(1, "room_types.update", true, true, true);
+            cy.checkPermissionGroup(2, "room_types.create", true, true, true);
+            cy.checkPermissionGroup(3, "room_types.delete", true, true, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "servers.view", false, false, true);
+            cy.checkPermissionGroup(2, "servers.update", false, false, true);
+            cy.checkPermissionGroup(3, "servers.create", false, false, true);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, true);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              true,
+            );
+          });
+      });
+  });
+
+  it("check rolesView with different room limit settings", function () {
+    // Check with different default
+    cy.fixture("config.json").then((config) => {
+      config.data.room.limit = 5;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+
+    cy.visit("/admin/roles/2");
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should("include.text", 'admin.roles.room_limit.default_{"value":5}')
+          .within(() => {
+            cy.get("#default").should("be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited").should("not.be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("not.be.checked").and("be.disabled");
+          });
+        cy.get("#room-limit").should("not.exist");
+      });
+
+    // Reload with room limit set to unlimited
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = -1;
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.reload();
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should("include.text", 'admin.roles.room_limit.default_{"value":5}')
+          .within(() => {
+            cy.get("#default").should("not.be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited").should("be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("not.be.checked").and("be.disabled");
+          });
+        cy.get("#room-limit").should("not.exist");
+      });
+
+    // Reload with room limit set to custom
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = 2;
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.reload();
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should("include.text", 'admin.roles.room_limit.default_{"value":5}')
+          .within(() => {
+            cy.get("#default").should("not.be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited").should("not.be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("be.checked").and("be.disabled");
+          });
+        cy.get("#room-limit")
+          .should("be.visible")
+          .and("have.value", "2")
+          .and("be.disabled");
+      });
+  });
+
+  it("load role errors", function () {
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("roleRequest");
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 200,
+      fixture: "role.json",
+    }).as("roleRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload with 404 error
+    cy.interceptAdminRolesIndexRequests();
+
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("roleRequest");
+
+    cy.reload();
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/roles/2");
+    cy.url().should("include", "/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 401,
+    }).as("roleRequest");
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/2");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load permissions errors", function () {
+    const permissionsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/permissions",
+      { statusCode: 500, body: { message: "Test" } },
+      "permissionsRequest",
+    );
+
+    cy.visit("/admin/roles/2");
+    cy.wait("@roleRequest");
+
+    // Check loading
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        permissionsRequest.sendResponse();
+      });
+
+    cy.wait("@permissionsRequest");
+
+    // Check that loading is done
+    // Check that overlay is still shown because of error
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that buttons are still hidden
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 200,
+      fixture: "permissions.json",
+    }).as("permissionsRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload with 401 error
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 401,
+    }).as("permissionsRequest");
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/2");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]')
+      .should("be.visible")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/roles/2/edit");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]')
+      .should("be.visible")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/roles/2/edit");
+    cy.get('[data-test="roles-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+  });
+
+  it("check button visibility for user that is superuser", function () {
+    // Check when viewing role that is not a superuser role
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.create",
+        "roles.update",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/roles/2/edit");
+    cy.get('[data-test="roles-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Check when viewing role that is a superuser role
+    cy.fixture("role.json").then((role) => {
+      role.data.superuser = true;
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/roles/2/edit");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+  });
+
+  it("check button visibility for user that is no superuser", function () {
+    // Check when viewing role that is not a superuser role
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.create",
+        "roles.update",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/roles/2/edit");
+    cy.get('[data-test="roles-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Check when viewing role that is a superuser role
+    cy.fixture("role.json").then((role) => {
+      role.data.superuser = true;
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/roles/2/edit");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js b/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js
new file mode 100644
index 000000000..18f7178ba
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js
@@ -0,0 +1,156 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin roles view role actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRolesViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete role", function () {
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="roles-delete-button"]').click();
+
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="roles-delete-dialog"]')
+      .should("include.text", "admin.roles.delete.title")
+      .should("include.text", 'admin.roles.delete.confirm_{"name":"Staff"}');
+
+    // Confirm deletion of role
+    const deleteRoleRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/roles/2",
+      {
+        statusCode: 204,
+      },
+      "deleteRoleRequest",
+    );
+
+    cy.fixture("userRoles.json").then((roles) => {
+      roles.data = roles.data.filter((role) => role.id !== 2);
+      roles.meta.to = 2;
+      roles.meta.total = 2;
+      roles.meta.total_no_filter = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("be.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteRoleRequest.sendResponse();
+      });
+
+    cy.wait("@deleteRoleRequest");
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/roles/2");
+    cy.url().should("include", "/admin/roles");
+
+    // Check that role was deleted
+    cy.get('[data-test="role-item"]').should("have.length", 2);
+
+    // Check that dialog was closed
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+  });
+
+  it("delete role errors", function () {
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="roles-delete-button"]').click();
+
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/roles/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteRoleRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoleRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 464 error
+    cy.intercept("DELETE", "api/v1/roles/2", {
+      statusCode: 464,
+      body: {
+        message:
+          "The role is linked to users and therefore it can't be deleted!",
+      },
+    }).as("deleteRoleRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoleRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"The role is linked to users and therefore it can\'t be deleted!"}',
+      'app.flash.server_error.error_code_{"statusCode":464}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/roles/2", {
+      statusCode: 401,
+    }).as("deleteRoleRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoleRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/2");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  // ToDo switch between edit and view
+});
diff --git a/tests/Frontend/fixtures/config.json b/tests/Frontend/fixtures/config.json
index 232c76a03..f07496b83 100644
--- a/tests/Frontend/fixtures/config.json
+++ b/tests/Frontend/fixtures/config.json
@@ -18,6 +18,7 @@
       "rounded": true
     },
     "room": {
+      "limit": -1,
       "refresh_rate": 5000,
       "file_terms_of_use": null
     },
diff --git a/tests/Frontend/fixtures/permissions.json b/tests/Frontend/fixtures/permissions.json
new file mode 100644
index 000000000..e9cf6bd03
--- /dev/null
+++ b/tests/Frontend/fixtures/permissions.json
@@ -0,0 +1,94 @@
+{
+  "data": [
+    { "id": 3, "name": "rooms.create", "included_permissions": [] },
+    { "id": 4, "name": "rooms.viewAll", "included_permissions": [] },
+    { "id": 5, "name": "rooms.manage", "included_permissions": [3, 4] },
+    { "id": 6, "name": "meetings.viewAny", "included_permissions": [4] },
+    { "id": 7, "name": "admin.view", "included_permissions": [] },
+    { "id": 8, "name": "settings.viewAny", "included_permissions": [7] },
+    { "id": 9, "name": "settings.update", "included_permissions": [7, 8] },
+    { "id": 10, "name": "roles.viewAny", "included_permissions": [7] },
+    { "id": 11, "name": "roles.view", "included_permissions": [7, 10] },
+    { "id": 12, "name": "roles.update", "included_permissions": [7, 10, 11] },
+    {
+      "id": 13,
+      "name": "roles.create",
+      "included_permissions": [7, 10, 11, 12]
+    },
+    {
+      "id": 14,
+      "name": "roles.delete",
+      "included_permissions": [7, 10, 11, 12, 13]
+    },
+    { "id": 15, "name": "users.viewAny", "included_permissions": [7, 10] },
+    { "id": 16, "name": "users.view", "included_permissions": [7, 10, 15] },
+    {
+      "id": 17,
+      "name": "users.update",
+      "included_permissions": [7, 10, 15, 16, 20]
+    },
+    {
+      "id": 18,
+      "name": "users.create",
+      "included_permissions": [7, 10, 15, 16, 17, 20]
+    },
+    {
+      "id": 19,
+      "name": "users.delete",
+      "included_permissions": [7, 10, 15, 16, 17, 18, 20]
+    },
+    {
+      "id": 20,
+      "name": "users.updateOwnAttributes",
+      "included_permissions": []
+    },
+    { "id": 21, "name": "roomTypes.view", "included_permissions": [7] },
+    {
+      "id": 22,
+      "name": "roomTypes.update",
+      "included_permissions": [7, 10, 21, 30]
+    },
+    {
+      "id": 23,
+      "name": "roomTypes.create",
+      "included_permissions": [7, 10, 21, 22, 30]
+    },
+    {
+      "id": 24,
+      "name": "roomTypes.delete",
+      "included_permissions": [7, 10, 21, 22, 23, 30]
+    },
+    { "id": 25, "name": "servers.viewAny", "included_permissions": [7] },
+    { "id": 26, "name": "servers.view", "included_permissions": [7, 25] },
+    { "id": 27, "name": "servers.update", "included_permissions": [7, 25, 26] },
+    {
+      "id": 28,
+      "name": "servers.create",
+      "included_permissions": [7, 25, 26, 27]
+    },
+    {
+      "id": 29,
+      "name": "servers.delete",
+      "included_permissions": [7, 25, 26, 27, 28]
+    },
+    { "id": 30, "name": "serverPools.viewAny", "included_permissions": [7] },
+    { "id": 31, "name": "serverPools.view", "included_permissions": [7, 30] },
+    {
+      "id": 32,
+      "name": "serverPools.update",
+      "included_permissions": [7, 25, 30, 31]
+    },
+    {
+      "id": 33,
+      "name": "serverPools.create",
+      "included_permissions": [7, 25, 30, 31, 32]
+    },
+    {
+      "id": 34,
+      "name": "serverPools.delete",
+      "included_permissions": [7, 25, 30, 31, 32, 33]
+    },
+    { "id": 35, "name": "system.monitor", "included_permissions": [] }
+  ],
+  "meta": { "restrictions": [""] }
+}
diff --git a/tests/Frontend/fixtures/role.json b/tests/Frontend/fixtures/role.json
new file mode 100644
index 000000000..0fdd4357a
--- /dev/null
+++ b/tests/Frontend/fixtures/role.json
@@ -0,0 +1,19 @@
+{
+  "data": {
+    "id": 2,
+    "name": "Staff",
+    "superuser": false,
+    "updated_at": "2025-01-23T18:50:24.000000Z",
+    "permissions": [
+      { "id": 3, "name": "rooms.create" },
+      { "id": 4, "name": "rooms.viewAll" },
+      { "id": 6, "name": "meetings.viewAny" },
+      { "id": 15, "name": "users.viewAny" },
+      { "id": 22, "name": "roomTypes.update" },
+      { "id": 23, "name": "roomTypes.create" },
+      { "id": 24, "name": "roomTypes.delete" }
+    ],
+    "model_name": "Role",
+    "room_limit": null
+  }
+}
diff --git a/tests/Frontend/support/commands/adminRolesCommands.js b/tests/Frontend/support/commands/adminRolesCommands.js
new file mode 100644
index 000000000..0009e4fca
--- /dev/null
+++ b/tests/Frontend/support/commands/adminRolesCommands.js
@@ -0,0 +1,36 @@
+/**
+ * Check if a permission group is displayed correctly.
+ * @memberof cy
+ * @method roomTypeCheckDefaultRoomSettingCheckboxField
+ * @param  {int} index
+ * @param  {string} permission
+ * @param  {boolean} explicit
+ * @param  {boolean} included
+ * @param  {boolean} disabled
+ * @returns void
+ */
+Cypress.Commands.add(
+  "checkPermissionGroup",
+  (index, permission, explicit, included, disabled) => {
+    cy.get('[data-test="permission-group"]')
+      .eq(index)
+      .should("include.text", permission);
+
+    permission = permission.replace(/([a-z])([A-Z])/g, "$1_$2").toLowerCase();
+
+    cy.get('[data-test="permission-group"]')
+      .eq(index)
+      .should("include.text", "admin.roles.permissions." + permission)
+      .within(() => {
+        cy.get("#" + permission.replace(".", "\\."))
+          .should(explicit ? "be.checked" : "not.be.checked")
+          .and(disabled ? "be.disabled" : "not.be.disabled");
+        cy.get('[data-test="permission-included-icon"]').should(
+          included ? "be.visible" : "not.exist",
+        );
+        cy.get('[data-test="permission-not-included-icon"]').should(
+          included ? "not.exist" : "be.visible",
+        );
+      });
+  },
+);
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index b37f419e3..9d9dd41ac 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -377,3 +377,31 @@ Cypress.Commands.add("interceptAdminRolesIndexRequests", () => {
     fixture: "userRoles.json",
   }).as("rolesRequest");
 });
+
+/**
+ * Intercept all requests that are needed when visiting the admin roles view page
+ * @memberof cy
+ * @method interceptAdminRolesViewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminRolesViewRequests", () => {
+  cy.intercept("GET", "api/v1/roles/2", {
+    fixture: "role.json",
+  }).as("roleRequest");
+
+  cy.intercept("GET", "api/v1/permissions", {
+    fixture: "permissions.json",
+  }).as("permissionsRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin roles new page
+ * @memberof cy
+ * @method interceptAdminRolesNewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminRolesNewRequests", () => {
+  cy.intercept("GET", "api/v1/permissions", {
+    fixture: "permissions.json",
+  }).as("permissionsRequest");
+});
diff --git a/tests/Frontend/support/e2e.js b/tests/Frontend/support/e2e.js
index d950cae6c..89f1bbc71 100644
--- a/tests/Frontend/support/e2e.js
+++ b/tests/Frontend/support/e2e.js
@@ -18,6 +18,7 @@ import "./commands/roomCommands.js";
 import "./commands/interceptCommands.js";
 import "./commands/adminRoomTypesCommands.js";
 import "./commands/adminSettingsCommands.js";
+import "./commands/adminRolesCommands.js";
 import "@cypress/code-coverage/support";
 
 Cypress.on("uncaught:exception", (err) => {

From a2d317be6b37188064a5aa483184929b9d64c41e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Sun, 26 Jan 2025 10:20:15 +0100
Subject: [PATCH 60/79] Continue adding AdminRolesView tests (New, Edit)

---
 resources/js/views/AdminRolesView.vue         |   16 +-
 tests/Frontend/e2e/AdminRolesEdit.cy.js       | 2068 +++++++++++++++++
 tests/Frontend/e2e/AdminRolesNew.cy.js        | 1460 ++++++++++++
 tests/Frontend/e2e/AdminRolesView.cy.js       |  136 +-
 .../e2e/AdminRolesViewRoleActions.cy.js       |  240 +-
 tests/Frontend/fixtures/superuserRole.json    |   87 +
 .../support/commands/adminRolesCommands.js    |  122 +
 7 files changed, 4000 insertions(+), 129 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminRolesEdit.cy.js
 create mode 100644 tests/Frontend/e2e/AdminRolesNew.cy.js
 create mode 100644 tests/Frontend/fixtures/superuserRole.json

diff --git a/resources/js/views/AdminRolesView.vue b/resources/js/views/AdminRolesView.vue
index 68bd112c5..58a98fea0 100644
--- a/resources/js/views/AdminRolesView.vue
+++ b/resources/js/views/AdminRolesView.vue
@@ -223,7 +223,21 @@
       </form>
     </OverlayComponent>
 
-    <ConfirmDialog></ConfirmDialog>
+    <ConfirmDialog
+      data-test="stale-role-dialog"
+      :pt="{
+        pcAcceptButton: {
+          root: {
+            'data-test': 'stale-dialog-accept-button',
+          },
+        },
+        pcRejectButton: {
+          root: {
+            'data-test': 'stale-dialog-reject-button',
+          },
+        },
+      }"
+    ></ConfirmDialog>
 
     <Dialog
       v-model:visible="helpRoomLimitModalVisible"
diff --git a/tests/Frontend/e2e/AdminRolesEdit.cy.js b/tests/Frontend/e2e/AdminRolesEdit.cy.js
new file mode 100644
index 000000000..6fc11a023
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRolesEdit.cy.js
@@ -0,0 +1,2068 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin roles edit", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRolesViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/roles/2/edit");
+  });
+
+  it("visit with user without permission to edit roles", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/roles/2/edit");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("edit role", function () {
+    const roleRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles/2",
+      { fixture: "role.json" },
+      "roleRequest",
+    );
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        roleRequest.sendResponse();
+      });
+
+    cy.wait("@roleRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that correct buttons are shown
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Change role settings
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Staff").clear();
+        cy.get("#name").type("Standard role");
+      });
+
+    cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should(
+            "include.text",
+            'admin.roles.room_limit.default_{"value":"app.unlimited"}',
+          )
+          .within(() => {
+            cy.get("#default").should("be.checked").and("not.be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited")
+              .should("not.be.checked")
+              .and("not.be.disabled")
+              .click();
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+          });
+        cy.get("#room-limit").should("not.exist");
+
+        // Open room limit help dialog
+        cy.get('[data-test="roles-room-limit-help-button"]').click();
+      });
+
+    cy.checkRoomLimitHelpDialog();
+
+    cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
+
+    // Change permissions
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", true, true, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", true, true, false);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+
+            cy.get("#rooms\\.manage").click();
+            cy.get("#rooms\\.create").click();
+            cy.get("#rooms\\.view_all").click();
+
+            cy.checkPermissionGroup(0, "rooms.create", false, true, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, true, false);
+            cy.checkPermissionGroup(2, "rooms.manage", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", true, true, false);
+
+            cy.get("#meetings\\.view_any").click();
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, true, false);
+
+            cy.get("#admin\\.view").click();
+
+            cy.checkPermissionGroup(0, "admin.view", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", false, false, false);
+
+            cy.get("#settings\\.update").click();
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "settings.update", true, true, false);
+
+            cy.get("#settings\\.view_any").click();
+
+            cy.checkPermissionGroup(0, "settings.viewAny", true, true, false);
+            cy.checkPermissionGroup(1, "settings.update", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, false);
+
+            cy.get("#system\\.monitor").click();
+
+            cy.checkPermissionGroup(0, "system.monitor", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", true, true, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#users\\.update_own_attributes").click();
+            cy.get("#users\\.delete").click();
+            cy.get("#users\\.create").click();
+            cy.get("#users\\.update").click();
+            cy.get("#users\\.view").click();
+            cy.get("#users\\.view_any").click();
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "users.view", true, true, false);
+            cy.checkPermissionGroup(2, "users.update", true, true, false);
+            cy.checkPermissionGroup(3, "users.create", true, true, false);
+            cy.checkPermissionGroup(4, "users.delete", true, true, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              true,
+              true,
+              false,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, false);
+
+            cy.get("#roles\\.delete").click();
+            cy.get("#roles\\.create").click();
+            cy.get("#roles\\.update").click();
+            cy.get("#roles\\.view").click();
+            cy.get("#roles\\.view_any").click();
+
+            cy.checkPermissionGroup(0, "roles.viewAny", true, true, false);
+            cy.checkPermissionGroup(1, "roles.view", true, true, false);
+            cy.checkPermissionGroup(2, "roles.update", true, true, false);
+            cy.checkPermissionGroup(3, "roles.create", true, true, false);
+            cy.checkPermissionGroup(4, "roles.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, true, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", true, true, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", true, true, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", true, true, false);
+
+            cy.get("#room_types\\.delete").click();
+            cy.get("#room_types\\.create").click();
+            cy.get("#room_types\\.update").click();
+            cy.get("#room_types\\.view").click();
+
+            cy.checkPermissionGroup(0, "roomTypes.view", true, true, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, false);
+
+            cy.get("#servers\\.delete").click();
+            cy.get("#servers\\.create").click();
+            cy.get("#servers\\.update").click();
+            cy.get("#servers\\.view").click();
+            cy.get("#servers\\.view_any").click();
+
+            cy.checkPermissionGroup(0, "servers.viewAny", true, true, false);
+            cy.checkPermissionGroup(1, "servers.view", true, true, false);
+            cy.checkPermissionGroup(2, "servers.update", true, true, false);
+            cy.checkPermissionGroup(3, "servers.create", true, true, false);
+            cy.checkPermissionGroup(4, "servers.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#server_pools\\.delete").click();
+            cy.get("#server_pools\\.create").click();
+            cy.get("#server_pools\\.update").click();
+            cy.get("#server_pools\\.view").click();
+            cy.get("#server_pools\\.view_any").click();
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              true,
+              true,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", true, true, false);
+            cy.checkPermissionGroup(2, "serverPools.update", true, true, false);
+            cy.checkPermissionGroup(3, "serverPools.create", true, true, false);
+            cy.checkPermissionGroup(4, "serverPools.delete", true, true, false);
+          });
+      });
+
+    // Save changes
+    cy.fixture("superuserRole.json").then((role) => {
+      const selectedPermissions = [
+        5, 7, 9, 8, 35, 20, 19, 18, 17, 16, 14, 13, 12, 11, 10, 21, 29, 28, 27,
+        26, 25, 34, 33, 32, 31, 30,
+      ];
+      role.data.name = "Standard role";
+      role.data.room_limit = -1;
+      role.data.superuser = false;
+      role.data.permissions = role.data.permissions.filter((permission) =>
+        selectedPermissions.includes(permission.id),
+      );
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/roles/2",
+        {
+          statusCode: 200,
+          body: role,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      cy.get("#name").should("be.disabled");
+      cy.get("#default").should("be.disabled");
+      cy.get("#unlimited").should("be.disabled");
+      cy.get("#custom").should("be.disabled");
+      cy.get("#room-limit").should("not.exist");
+
+      cy.get("#rooms\\.create").should("not.exist");
+      cy.get("#rooms\\.view_all").should("not.exist");
+      cy.get("#rooms\\.manage").should("not.exist");
+      cy.get("#meetings\\.view_any").should("not.exist");
+      cy.get("#admin\\.view").should("not.exist");
+      cy.get("#settings\\.view_any").should("not.exist");
+      cy.get("#settings\\.update").should("not.exist");
+      cy.get("#system\\.monitor").should("not.exist");
+      cy.get("#roles\\.view_any").should("not.exist");
+      cy.get("#roles\\.view").should("not.exist");
+      cy.get("#roles\\.update").should("not.exist");
+      cy.get("#roles\\.create").should("not.exist");
+      cy.get("#roles\\.delete").should("not.exist");
+      cy.get("#users\\.view_any").should("not.exist");
+      cy.get("#users\\.view").should("not.exist");
+      cy.get("#users\\.update").should("not.exist");
+      cy.get("#users\\.create").should("not.exist");
+      cy.get("#users\\.delete").should("not.exist");
+      cy.get("#users\\.update_own_attributes").should("not.exist");
+      cy.get("#room_types\\.view").should("not.exist");
+      cy.get("#room_types\\.update").should("not.exist");
+      cy.get("#room_types\\.create").should("not.exist");
+      cy.get("#room_types\\.delete").should("not.exist");
+      cy.get("#servers\\.view_any").should("not.exist");
+      cy.get("#servers\\.view").should("not.exist");
+      cy.get("#servers\\.update").should("not.exist");
+      cy.get("#servers\\.create").should("not.exist");
+      cy.get("#servers\\.delete").should("not.exist");
+      cy.get("#server_pools\\.view_any").should("not.exist");
+      cy.get("#server_pools\\.view").should("not.exist");
+      cy.get("#server_pools\\.update").should("not.exist");
+      cy.get("#server_pools\\.create").should("not.exist");
+      cy.get("#server_pools\\.delete").should("not.exist");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: "Standard role",
+          room_limit: -1,
+          permissions: selectedPermissions,
+          updated_at: role.data.updated_at,
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/2");
+    cy.url().should("not.include", "/edit");
+  });
+
+  it("edit role with different room limits", function () {
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    cy.get("#name").should("have.value", "Staff");
+
+    // Add new role with custom room limit
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get("#default").should("be.checked").and("not.be.disabled");
+
+        cy.get("#unlimited").should("not.be.checked").and("not.be.disabled");
+
+        cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+        cy.get("#room-limit").should("not.exist");
+
+        cy.get("#custom").click();
+
+        cy.get("#room-limit")
+          .should("be.visible")
+          .and("have.value", "0")
+          .type("5");
+      });
+
+    // Save changes
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = 5;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/roles/2",
+        {
+          statusCode: 200,
+          body: role,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      cy.get("#name").should("be.disabled");
+      cy.get("#default").should("be.disabled");
+      cy.get("#unlimited").should("be.disabled");
+      cy.get("#custom").should("be.disabled");
+      cy.get("#room-limit").should("be.disabled");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: role.data.name,
+          room_limit: 5,
+          permissions: role.data.permissions.map((permission) => permission.id),
+          updated_at: role.data.updated_at,
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/2");
+    cy.url().should("not.include", "/edit");
+
+    // Reload page with unlimited room limit
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = -1;
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    cy.get("#name").should("have.value", "Staff");
+
+    // Save without changing room limit
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get("#default").should("not.be.checked").and("not.be.disabled");
+
+        cy.get("#unlimited").should("be.checked").and("not.be.disabled");
+
+        cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+        cy.get("#room-limit").should("not.exist");
+      });
+
+    // Save Changes
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = -1;
+
+      cy.intercept("PUT", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: role.data.name,
+          room_limit: -1,
+          permissions: role.data.permissions.map((permission) => permission.id),
+          updated_at: role.data.updated_at,
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/2");
+    cy.url().should("not.include", "/edit");
+
+    // Reload page with custom room limit
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = 5;
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+    cy.visit("/admin/roles/2/edit");
+
+    cy.get("#name").should("have.value", "Staff");
+
+    // Change room limit to default
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get("#default").should("not.be.checked").and("not.be.disabled");
+
+        cy.get("#unlimited").should("not.be.checked").and("not.be.disabled");
+
+        cy.get("#custom").should("be.checked").and("not.be.disabled");
+        cy.get("#room-limit").should("be.visible").and("have.value", "5");
+
+        // Switch back to default
+        cy.get("#default").click();
+
+        cy.get("#room-limit").should("not.exist");
+      });
+
+    // Save Changes
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = null;
+
+      cy.intercept("PUT", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: role.data.name,
+          room_limit: null,
+          permissions: role.data.permissions.map((permission) => permission.id),
+          updated_at: role.data.updated_at,
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/2");
+    cy.url().should("not.include", "/edit");
+  });
+
+  it("check permission list with different permission dependencies", function () {
+    cy.fixture("permissions.json").then((permissions) => {
+      for (let i = 0; i < permissions.data.length; i++) {
+        permissions.data[i].included_permissions = [];
+      }
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.fixture("role.json").then((role) => {
+      role.data.permissions = [];
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@permissionsRequest");
+
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+
+            cy.get("#rooms\\.manage").click();
+
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", false, false, false);
+
+            cy.get("#settings\\.update").click();
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#users\\.delete").click();
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", true, true, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, false);
+
+            cy.get("#roles\\.delete").click();
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, false);
+
+            cy.get("#room_types\\.delete").click();
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, false);
+
+            cy.get("#servers\\.delete").click();
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#server_pools\\.delete").click();
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(4, "serverPools.delete", true, true, false);
+          });
+      });
+  });
+
+  it("check permission list with restricted permissions", function () {
+    cy.fixture("permissions.json").then((permissions) => {
+      permissions.meta.restrictions = [
+        "servers.*",
+        "system.monitor",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.create",
+        "serverPools.update",
+        "serverPools.delete",
+      ];
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.fixture("role.json").then((role) => {
+      role.data.permissions = [];
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@permissionsRequest");
+
+    // Check that permission list is shown correctly
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "servers.view", false, false, true);
+            cy.checkPermissionGroup(2, "servers.update", false, false, true);
+            cy.checkPermissionGroup(3, "servers.create", false, false, true);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, true);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              true,
+            );
+          });
+
+        // Select permission that includes disabled permission
+        cy.get("#room_types\\.delete").click();
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              true,
+              true,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, true);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              true,
+            );
+          });
+      });
+
+    // Reload with different restricted permissions
+    cy.fixture("permissions.json").then((permissions) => {
+      permissions.meta.restrictions = [
+        "rooms.*",
+        "meetings.viewAny",
+        "admin.view",
+        "settings.*",
+        "users.*",
+        "roles.*",
+        "roomTypes.*",
+      ];
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@permissionsRequest");
+
+    // Check that permission list is shown correctly
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, true);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, true);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "settings.update", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "users.view", false, false, true);
+            cy.checkPermissionGroup(2, "users.update", false, false, true);
+            cy.checkPermissionGroup(3, "users.create", false, false, true);
+            cy.checkPermissionGroup(4, "users.delete", false, false, true);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              true,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "roles.view", false, false, true);
+            cy.checkPermissionGroup(2, "roles.update", false, false, true);
+            cy.checkPermissionGroup(3, "roles.create", false, false, true);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, true);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, true);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, true);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              false,
+            );
+          });
+      });
+  });
+
+  it("edit role errors", function () {
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/roles/2", {
+      statusCode: 422,
+      body: {
+        errors: {
+          name: ["The Name field is required."],
+          room_limit: ["The Room limit must be at least -1."],
+          permissions: ["The Permissions field must be present."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="roles-save-button"]')
+      .should("have.text", "app.save")
+      .click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error messages
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "The Name field is required.");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "The Room limit must be at least -1.");
+
+    cy.contains("The Permissions field must be present.").should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("PUT", "api/v1/roles/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("not.include.text", "The Name field is required.");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("not.include.text", "The Room limit must be at least -1.");
+
+    cy.contains("The Permissions field must be present.").should("not.exist");
+
+    // Check with 428 error (stale error)
+    cy.fixture("role.json").then((role) => {
+      role.data.name = "Standard role";
+      role.data.room_limit = -1;
+
+      cy.intercept("PUT", "api/v1/roles/2", {
+        statusCode: 428,
+        body: {
+          new_model: role.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-role-dialog"]').should("not.exist");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-role-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Reload
+    cy.get('[data-test="stale-dialog-reject-button"]').click();
+
+    cy.get('[data-test="stale-role-dialog"]').should("not.exist");
+
+    // Check that correct data is shown
+    cy.get("#name").should("have.value", "Standard role");
+    cy.get("#unlimited").should("be.checked");
+    cy.get("#room-limit").should("not.exist");
+
+    cy.checkPermissionGroup(0, "rooms.create", true, true, false);
+    cy.checkPermissionGroup(1, "rooms.viewAll", true, true, false);
+    cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+
+    cy.checkPermissionGroup(3, "meetings.viewAny", true, true, false);
+    cy.checkPermissionGroup(4, "admin.view", false, true, false);
+
+    cy.checkPermissionGroup(5, "settings.viewAny", false, false, false);
+    cy.checkPermissionGroup(6, "settings.update", false, false, false);
+    cy.checkPermissionGroup(7, "system.monitor", false, false, false);
+
+    cy.checkPermissionGroup(8, "users.viewAny", true, true, false);
+    cy.checkPermissionGroup(9, "users.view", false, false, false);
+    cy.checkPermissionGroup(10, "users.update", false, false, false);
+    cy.checkPermissionGroup(11, "users.create", false, false, false);
+    cy.checkPermissionGroup(12, "users.delete", false, false, false);
+    cy.checkPermissionGroup(
+      13,
+      "users.updateOwnAttributes",
+      false,
+      false,
+      false,
+    );
+
+    cy.checkPermissionGroup(14, "roles.viewAny", false, true, false);
+    cy.checkPermissionGroup(15, "roles.view", false, false, false);
+    cy.checkPermissionGroup(16, "roles.update", false, false, false);
+    cy.checkPermissionGroup(17, "roles.create", false, false, false);
+    cy.checkPermissionGroup(18, "roles.delete", false, false, false);
+
+    cy.checkPermissionGroup(19, "roomTypes.view", false, true, false);
+    cy.checkPermissionGroup(20, "roomTypes.update", true, true, false);
+    cy.checkPermissionGroup(21, "roomTypes.create", true, true, false);
+    cy.checkPermissionGroup(22, "roomTypes.delete", true, true, false);
+
+    cy.checkPermissionGroup(23, "servers.viewAny", false, false, false);
+    cy.checkPermissionGroup(24, "servers.view", false, false, false);
+    cy.checkPermissionGroup(25, "servers.update", false, false, false);
+    cy.checkPermissionGroup(26, "servers.create", false, false, false);
+    cy.checkPermissionGroup(27, "servers.delete", false, false, false);
+
+    cy.checkPermissionGroup(28, "serverPools.viewAny", false, true, false);
+    cy.checkPermissionGroup(29, "serverPools.view", false, false, false);
+    cy.checkPermissionGroup(30, "serverPools.update", false, false, false);
+    cy.checkPermissionGroup(31, "serverPools.create", false, false, false);
+    cy.checkPermissionGroup(32, "serverPools.delete", false, false, false);
+
+    // Trigger 428 error (stale error) again
+    cy.fixture("superuserRole.json").then((role) => {
+      role.data.name = "Standard role 2";
+      role.data.room_limit = -1;
+      role.data.superuser = false;
+
+      cy.intercept("PUT", "api/v1/roles/2", {
+        statusCode: 428,
+        body: {
+          new_model: role.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-role-dialog"]').should("not.exist");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-role-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Overwrite
+    cy.fixture("role.json").then((role) => {
+      role.data.name = "Standard role";
+      role.data.room_limit = -1;
+
+      cy.intercept("PUT", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("saveChangesRequest");
+
+      cy.get('[data-test="stale-dialog-accept-button"]').click();
+
+      // Check that correct data is sent
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: role.data.name,
+          room_limit: role.data.room_limit,
+          permissions: role.data.permissions.map((permission) => permission.id),
+          updated_at: role.data.updated_at,
+        });
+      });
+    });
+
+    // Check that redirect worked
+    cy.url().should("include", "/admin/roles/2");
+    cy.url().should("not.include", "/edit");
+
+    // Reload
+    cy.visit("/admin/roles/2/edit");
+
+    // Check with 404 error
+    cy.interceptAdminRolesIndexRequests();
+    cy.intercept("PUT", "api/v1/roles/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/roles/2/edit");
+    cy.url().should("include", "/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload
+    cy.visit("/admin/roles/2/edit");
+
+    // Check with 401 error
+    cy.intercept("PUT", "api/v1/roles/2", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load permissions errors", function () {
+    const permissionsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/permissions",
+      { statusCode: 500, body: { message: "Test" } },
+      "permissionsRequest",
+    );
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    // Check loading
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("be.disabled");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        permissionsRequest.sendResponse();
+      });
+
+    cy.wait("@permissionsRequest");
+
+    // Check that loading is done
+    // Check that overlay is still shown because of error
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that buttons are still hidden
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("be.disabled");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 200,
+      fixture: "permissions.json",
+    }).as("permissionsRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload with 401 error
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 401,
+    }).as("permissionsRequest");
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      }).as("currentUserRequest");
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+  });
+
+  it("check view for user that is superuser", function () {
+    // Check when viewing role that is not a superuser role
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      }).as("currentUserRequest");
+    });
+
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = 5;
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Check name field not disabled
+    cy.get("#name").should("not.be.disabled");
+
+    // Check room limit field not disabled
+    cy.get("#default").should("not.be.disabled");
+    cy.get("#unlimited").should("not.be.disabled");
+    cy.get("#custom").should("not.be.disabled");
+    cy.get("#room-limit").should("not.be.disabled");
+
+    // Check permission list not disabled
+    cy.get("#rooms\\.create").should("not.be.disabled");
+    cy.get("#rooms\\.view_all").should("not.be.disabled");
+    cy.get("#rooms\\.manage").should("not.be.disabled");
+    cy.get("#meetings\\.view_any").should("not.be.disabled");
+    cy.get("#admin\\.view").should("not.be.disabled");
+    cy.get("#settings\\.view_any").should("not.be.disabled");
+    cy.get("#settings\\.update").should("not.be.disabled");
+    cy.get("#system\\.monitor").should("not.be.disabled");
+    cy.get("#roles\\.view_any").should("not.be.disabled");
+    cy.get("#roles\\.view").should("not.be.disabled");
+    cy.get("#roles\\.update").should("not.be.disabled");
+    cy.get("#roles\\.create").should("not.be.disabled");
+    cy.get("#roles\\.delete").should("not.be.disabled");
+    cy.get("#users\\.view_any").should("not.be.disabled");
+    cy.get("#users\\.view").should("not.be.disabled");
+    cy.get("#users\\.update").should("not.be.disabled");
+    cy.get("#users\\.create").should("not.be.disabled");
+    cy.get("#users\\.delete").should("not.be.disabled");
+    cy.get("#users\\.update_own_attributes").should("not.be.disabled");
+    cy.get("#room_types\\.view").should("not.be.disabled");
+    cy.get("#room_types\\.update").should("not.be.disabled");
+    cy.get("#room_types\\.create").should("not.be.disabled");
+    cy.get("#room_types\\.delete").should("not.be.disabled");
+    cy.get("#servers\\.view_any").should("not.be.disabled");
+    cy.get("#servers\\.view").should("not.be.disabled");
+    cy.get("#servers\\.update").should("not.be.disabled");
+    cy.get("#servers\\.create").should("not.be.disabled");
+    cy.get("#servers\\.delete").should("not.be.disabled");
+    cy.get("#server_pools\\.view_any").should("not.be.disabled");
+    cy.get("#server_pools\\.view").should("not.be.disabled");
+    cy.get("#server_pools\\.update").should("not.be.disabled");
+    cy.get("#server_pools\\.create").should("not.be.disabled");
+    cy.get("#server_pools\\.delete").should("not.be.disabled");
+
+    // Check when viewing role that is a superuser role
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 200,
+      fixture: "superuserRole.json",
+    }).as("roleRequest");
+
+    cy.reload();
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Check name field not disabled
+    cy.get("#name").should("not.be.disabled");
+
+    // Check room limit field is disabled
+    cy.get("#default").should("be.disabled");
+    cy.get("#unlimited").should("be.disabled");
+    cy.get("#custom").should("be.disabled");
+    cy.get("#room-limit").should("not.exist");
+
+    // Check permission list is shown correctly and disabled
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.checkPermissionGroup(0, "rooms.create", true, true, true);
+    cy.checkPermissionGroup(1, "rooms.viewAll", true, true, true);
+    cy.checkPermissionGroup(2, "rooms.manage", true, true, true);
+
+    cy.checkPermissionGroup(3, "meetings.viewAny", true, true, true);
+    cy.checkPermissionGroup(4, "admin.view", true, true, true);
+
+    cy.checkPermissionGroup(5, "settings.viewAny", true, true, true);
+    cy.checkPermissionGroup(6, "settings.update", true, true, true);
+    cy.checkPermissionGroup(7, "system.monitor", true, true, true);
+
+    cy.checkPermissionGroup(8, "users.viewAny", true, true, true);
+    cy.checkPermissionGroup(9, "users.view", true, true, true);
+    cy.checkPermissionGroup(10, "users.update", true, true, true);
+    cy.checkPermissionGroup(11, "users.create", true, true, true);
+    cy.checkPermissionGroup(12, "users.delete", true, true, true);
+    cy.checkPermissionGroup(13, "users.updateOwnAttributes", true, true, true);
+
+    cy.checkPermissionGroup(14, "roles.viewAny", true, true, true);
+    cy.checkPermissionGroup(15, "roles.view", true, true, true);
+    cy.checkPermissionGroup(16, "roles.update", true, true, true);
+    cy.checkPermissionGroup(17, "roles.create", true, true, true);
+    cy.checkPermissionGroup(18, "roles.delete", true, true, true);
+
+    cy.checkPermissionGroup(19, "roomTypes.view", true, true, true);
+    cy.checkPermissionGroup(20, "roomTypes.update", true, true, true);
+    cy.checkPermissionGroup(21, "roomTypes.create", true, true, true);
+    cy.checkPermissionGroup(22, "roomTypes.delete", true, true, true);
+
+    cy.checkPermissionGroup(23, "servers.viewAny", true, true, true);
+    cy.checkPermissionGroup(24, "servers.view", true, true, true);
+    cy.checkPermissionGroup(25, "servers.update", true, true, true);
+    cy.checkPermissionGroup(26, "servers.create", true, true, true);
+    cy.checkPermissionGroup(27, "servers.delete", true, true, true);
+
+    cy.checkPermissionGroup(28, "serverPools.viewAny", true, true, true);
+    cy.checkPermissionGroup(29, "serverPools.view", true, true, true);
+    cy.checkPermissionGroup(30, "serverPools.update", true, true, true);
+    cy.checkPermissionGroup(31, "serverPools.create", true, true, true);
+    cy.checkPermissionGroup(32, "serverPools.delete", true, true, true);
+  });
+
+  it("check view for user that is no superuser", function () {
+    // Check when viewing role that is not a superuser role
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      }).as("currentUserRequest");
+    });
+
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = 5;
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Check name field not disabled
+    cy.get("#name").should("not.be.disabled");
+
+    // Check room limit field not disabled
+    cy.get("#default").should("not.be.disabled");
+    cy.get("#unlimited").should("not.be.disabled");
+    cy.get("#custom").should("not.be.disabled");
+    cy.get("#room-limit").should("not.be.disabled");
+
+    // Check permission list not disabled
+    cy.get("#rooms\\.create").should("not.be.disabled");
+    cy.get("#rooms\\.view_all").should("not.be.disabled");
+    cy.get("#rooms\\.manage").should("not.be.disabled");
+    cy.get("#meetings\\.view_any").should("not.be.disabled");
+    cy.get("#admin\\.view").should("not.be.disabled");
+    cy.get("#settings\\.view_any").should("not.be.disabled");
+    cy.get("#settings\\.update").should("not.be.disabled");
+    cy.get("#system\\.monitor").should("not.be.disabled");
+    cy.get("#roles\\.view_any").should("not.be.disabled");
+    cy.get("#roles\\.view").should("not.be.disabled");
+    cy.get("#roles\\.update").should("not.be.disabled");
+    cy.get("#roles\\.create").should("not.be.disabled");
+    cy.get("#roles\\.delete").should("not.be.disabled");
+    cy.get("#users\\.view_any").should("not.be.disabled");
+    cy.get("#users\\.view").should("not.be.disabled");
+    cy.get("#users\\.update").should("not.be.disabled");
+    cy.get("#users\\.create").should("not.be.disabled");
+    cy.get("#users\\.delete").should("not.be.disabled");
+    cy.get("#users\\.update_own_attributes").should("not.be.disabled");
+    cy.get("#room_types\\.view").should("not.be.disabled");
+    cy.get("#room_types\\.update").should("not.be.disabled");
+    cy.get("#room_types\\.create").should("not.be.disabled");
+    cy.get("#room_types\\.delete").should("not.be.disabled");
+    cy.get("#servers\\.view_any").should("not.be.disabled");
+    cy.get("#servers\\.view").should("not.be.disabled");
+    cy.get("#servers\\.update").should("not.be.disabled");
+    cy.get("#servers\\.create").should("not.be.disabled");
+    cy.get("#servers\\.delete").should("not.be.disabled");
+    cy.get("#server_pools\\.view_any").should("not.be.disabled");
+    cy.get("#server_pools\\.view").should("not.be.disabled");
+    cy.get("#server_pools\\.update").should("not.be.disabled");
+    cy.get("#server_pools\\.create").should("not.be.disabled");
+    cy.get("#server_pools\\.delete").should("not.be.disabled");
+
+    // Check when viewing role that is a superuser role
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 200,
+      fixture: "superuserRole.json",
+    }).as("roleRequest");
+
+    cy.reload();
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Check name field not disabled
+    cy.get("#name").should("not.be.disabled");
+
+    // Check room limit field is disabled
+    cy.get("#default").should("be.disabled");
+    cy.get("#unlimited").should("be.disabled");
+    cy.get("#custom").should("be.disabled");
+    cy.get("#room-limit").should("not.exist");
+
+    // Check permission list is shown correctly and disabled
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.checkPermissionGroup(0, "rooms.create", true, true, true);
+    cy.checkPermissionGroup(1, "rooms.viewAll", true, true, true);
+    cy.checkPermissionGroup(2, "rooms.manage", true, true, true);
+
+    cy.checkPermissionGroup(3, "meetings.viewAny", true, true, true);
+    cy.checkPermissionGroup(4, "admin.view", true, true, true);
+
+    cy.checkPermissionGroup(5, "settings.viewAny", true, true, true);
+    cy.checkPermissionGroup(6, "settings.update", true, true, true);
+    cy.checkPermissionGroup(7, "system.monitor", true, true, true);
+
+    cy.checkPermissionGroup(8, "users.viewAny", true, true, true);
+    cy.checkPermissionGroup(9, "users.view", true, true, true);
+    cy.checkPermissionGroup(10, "users.update", true, true, true);
+    cy.checkPermissionGroup(11, "users.create", true, true, true);
+    cy.checkPermissionGroup(12, "users.delete", true, true, true);
+    cy.checkPermissionGroup(13, "users.updateOwnAttributes", true, true, true);
+
+    cy.checkPermissionGroup(14, "roles.viewAny", true, true, true);
+    cy.checkPermissionGroup(15, "roles.view", true, true, true);
+    cy.checkPermissionGroup(16, "roles.update", true, true, true);
+    cy.checkPermissionGroup(17, "roles.create", true, true, true);
+    cy.checkPermissionGroup(18, "roles.delete", true, true, true);
+
+    cy.checkPermissionGroup(19, "roomTypes.view", true, true, true);
+    cy.checkPermissionGroup(20, "roomTypes.update", true, true, true);
+    cy.checkPermissionGroup(21, "roomTypes.create", true, true, true);
+    cy.checkPermissionGroup(22, "roomTypes.delete", true, true, true);
+
+    cy.checkPermissionGroup(23, "servers.viewAny", true, true, true);
+    cy.checkPermissionGroup(24, "servers.view", true, true, true);
+    cy.checkPermissionGroup(25, "servers.update", true, true, true);
+    cy.checkPermissionGroup(26, "servers.create", true, true, true);
+    cy.checkPermissionGroup(27, "servers.delete", true, true, true);
+
+    cy.checkPermissionGroup(28, "serverPools.viewAny", true, true, true);
+    cy.checkPermissionGroup(29, "serverPools.view", true, true, true);
+    cy.checkPermissionGroup(30, "serverPools.update", true, true, true);
+    cy.checkPermissionGroup(31, "serverPools.create", true, true, true);
+    cy.checkPermissionGroup(32, "serverPools.delete", true, true, true);
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRolesNew.cy.js b/tests/Frontend/e2e/AdminRolesNew.cy.js
new file mode 100644
index 000000000..784954398
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRolesNew.cy.js
@@ -0,0 +1,1460 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin roles new", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRolesNewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/roles/new");
+  });
+
+  it("visit with user without permission to add new roles", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+    cy.visit("/admin/roles/new");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/room_types");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("add new role", function () {
+    cy.visit("/admin/roles/new");
+
+    // Check that header buttons are hidden
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "").type("Standard role");
+      });
+
+    cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should(
+            "include.text",
+            'admin.roles.room_limit.default_{"value":"app.unlimited"}',
+          )
+          .within(() => {
+            cy.get("#default").should("be.checked").and("not.be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited")
+              .should("not.be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+          });
+        cy.get("#room-limit").should("not.exist");
+
+        // Open room limit help dialog
+        cy.get('[data-test="roles-room-limit-help-button"]').click();
+      });
+
+    cy.checkRoomLimitHelpDialog();
+
+    cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
+
+    // Change permissions
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+
+            cy.get("#rooms\\.manage").click();
+
+            cy.checkPermissionGroup(0, "rooms.create", false, true, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, true, false);
+            cy.checkPermissionGroup(2, "rooms.manage", true, true, false);
+
+            cy.get("#rooms\\.create").click();
+            cy.get("#rooms\\.view_all").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, false);
+
+            cy.get("#meetings\\.view_any").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, false);
+
+            cy.get("#admin\\.view").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", false, false, false);
+
+            cy.get("#settings\\.update").click();
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "settings.update", true, true, false);
+
+            cy.get("#settings\\.view_any").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, false);
+
+            cy.get("#system\\.monitor").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#users\\.update_own_attributes").click();
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              true,
+              true,
+              false,
+            );
+
+            cy.get("#users\\.delete").click();
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "users.view", false, true, false);
+            cy.checkPermissionGroup(2, "users.update", false, true, false);
+            cy.checkPermissionGroup(3, "users.create", false, true, false);
+            cy.checkPermissionGroup(4, "users.delete", true, true, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              true,
+              true,
+              false,
+            );
+
+            cy.get("#users\\.create").click();
+            cy.get("#users\\.update").click();
+            cy.get("#users\\.view").click();
+            cy.get("#users\\.view_any").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, false);
+
+            cy.get("#roles\\.delete").click();
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "roles.view", false, true, false);
+            cy.checkPermissionGroup(2, "roles.update", false, true, false);
+            cy.checkPermissionGroup(3, "roles.create", false, true, false);
+            cy.checkPermissionGroup(4, "roles.delete", true, true, false);
+
+            cy.get("#roles\\.create").click();
+            cy.get("#roles\\.update").click();
+            cy.get("#roles\\.view").click();
+            cy.get("#roles\\.view_any").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, false);
+
+            cy.get("#room_types\\.delete").click();
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, true, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, true, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, true, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", true, true, false);
+
+            cy.get("#room_types\\.create").click();
+            cy.get("#room_types\\.update").click();
+            cy.get("#room_types\\.view").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, false);
+
+            cy.get("#servers\\.delete").click();
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "servers.view", false, true, false);
+            cy.checkPermissionGroup(2, "servers.update", false, true, false);
+            cy.checkPermissionGroup(3, "servers.create", false, true, false);
+            cy.checkPermissionGroup(4, "servers.delete", true, true, false);
+
+            cy.get("#servers\\.create").click();
+            cy.get("#servers\\.update").click();
+            cy.get("#servers\\.view").click();
+            cy.get("#servers\\.view_any").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              true,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#server_pools\\.delete").click();
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              true,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, true, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              true,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              true,
+              false,
+            );
+            cy.checkPermissionGroup(4, "serverPools.delete", true, true, false);
+
+            cy.get("#server_pools\\.create").click();
+            cy.get("#server_pools\\.update").click();
+            cy.get("#server_pools\\.view").click();
+            cy.get("#server_pools\\.view_any").click();
+          });
+      });
+
+    // Add new role
+    cy.fixture("superuserRole.json").then((role) => {
+      role.data.id = 40;
+      role.data.name = "Standard role";
+      role.data.superuser = false;
+
+      const newRoleRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/roles",
+        {
+          statusCode: 201,
+          body: role,
+        },
+        "newRoleRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roles/40", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      cy.get("#name").should("be.disabled");
+      cy.get("#default").should("be.disabled");
+      cy.get("#unlimited").should("be.disabled");
+      cy.get("#custom").should("be.disabled");
+      cy.get("#room-limit").should("not.exist");
+
+      cy.get("#rooms\\.create").should("not.exist");
+      cy.get("#rooms\\.view_all").should("not.exist");
+      cy.get("#rooms\\.manage").should("not.exist");
+      cy.get("#meetings\\.view_any").should("not.exist");
+      cy.get("#admin\\.view").should("not.exist");
+      cy.get("#settings\\.view_any").should("not.exist");
+      cy.get("#settings\\.update").should("not.exist");
+      cy.get("#system\\.monitor").should("not.exist");
+      cy.get("#roles\\.view_any").should("not.exist");
+      cy.get("#roles\\.view").should("not.exist");
+      cy.get("#roles\\.update").should("not.exist");
+      cy.get("#roles\\.create").should("not.exist");
+      cy.get("#roles\\.delete").should("not.exist");
+      cy.get("#users\\.view_any").should("not.exist");
+      cy.get("#users\\.view").should("not.exist");
+      cy.get("#users\\.update").should("not.exist");
+      cy.get("#users\\.create").should("not.exist");
+      cy.get("#users\\.delete").should("not.exist");
+      cy.get("#users\\.update_own_attributes").should("not.exist");
+      cy.get("#room_types\\.view").should("not.exist");
+      cy.get("#room_types\\.update").should("not.exist");
+      cy.get("#room_types\\.create").should("not.exist");
+      cy.get("#room_types\\.delete").should("not.exist");
+      cy.get("#servers\\.view_any").should("not.exist");
+      cy.get("#servers\\.view").should("not.exist");
+      cy.get("#servers\\.update").should("not.exist");
+      cy.get("#servers\\.create").should("not.exist");
+      cy.get("#servers\\.delete").should("not.exist");
+      cy.get("#server_pools\\.view_any").should("not.exist");
+      cy.get("#server_pools\\.view").should("not.exist");
+      cy.get("#server_pools\\.update").should("not.exist");
+      cy.get("#server_pools\\.create").should("not.exist");
+      cy.get("#server_pools\\.delete").should("not.exist");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newRoleRequest.sendResponse();
+        });
+
+      cy.wait("@newRoleRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: "Standard role",
+          room_limit: null,
+          permissions: [
+            5, 3, 4, 6, 7, 9, 8, 35, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10,
+            24, 23, 22, 21, 29, 28, 27, 26, 25, 34, 33, 32, 31, 30,
+          ],
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/40");
+  });
+
+  it("add new role with different room limits", function () {
+    cy.visit("/admin/roles/new");
+
+    cy.get("#name").should("have.value", "").type("Standard role");
+
+    // Add new role with custom room limit
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get("#default").should("be.checked").and("not.be.disabled");
+
+        cy.get("#unlimited").should("not.be.checked").and("not.be.disabled");
+
+        cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+        cy.get("#room-limit").should("not.exist");
+
+        cy.get("#custom").click();
+
+        cy.get("#room-limit")
+          .should("be.visible")
+          .and("have.value", "0")
+          .type("5");
+      });
+
+    // Add new role
+    cy.fixture("role.json").then((role) => {
+      role.data.id = 40;
+      role.data.name = "Standard role";
+      role.data.room_limit = 5;
+      role.data.permissions = [];
+
+      const newRoleRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/roles",
+        {
+          statusCode: 201,
+          body: role,
+        },
+        "newRoleRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roles/40", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      cy.get("#name").should("be.disabled");
+      cy.get("#default").should("be.disabled");
+      cy.get("#unlimited").should("be.disabled");
+      cy.get("#custom").should("be.disabled");
+      cy.get("#room-limit").should("be.disabled");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newRoleRequest.sendResponse();
+        });
+
+      cy.wait("@newRoleRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: "Standard role",
+          room_limit: 5,
+          permissions: [],
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/40");
+
+    // Reload page
+    cy.visit("/admin/roles/new");
+
+    cy.get("#name").should("have.value", "").type("Standard role");
+
+    // Add new role with unlimited  room limit
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get("#default").should("be.checked").and("not.be.disabled");
+
+        cy.get("#unlimited")
+          .should("not.be.checked")
+          .and("not.be.disabled")
+          .click();
+
+        cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+        cy.get("#room-limit").should("not.exist");
+      });
+
+    // Add new role
+    cy.fixture("role.json").then((role) => {
+      role.data.id = 40;
+      role.data.name = "Standard role";
+      role.data.room_limit = -1;
+      role.data.permissions = [];
+
+      cy.intercept("POST", "api/v1/roles", {
+        statusCode: 201,
+        body: role,
+      }).as("newRoleRequest");
+
+      cy.intercept("GET", "api/v1/roles/40", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      cy.wait("@newRoleRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: "Standard role",
+          room_limit: -1,
+          permissions: [],
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/40");
+
+    // Reload page
+    cy.visit("/admin/roles/new");
+
+    cy.get("#name").should("have.value", "").type("Standard role");
+
+    // Add new role with default room limit
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get("#default").should("be.checked").and("not.be.disabled");
+
+        cy.get("#unlimited")
+          .should("not.be.checked")
+          .and("not.be.disabled")
+          .click();
+
+        cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+        cy.get("#room-limit").should("not.exist");
+
+        // Switch back to default
+        cy.get("#default").click();
+      });
+
+    // Add new role
+    cy.fixture("role.json").then((role) => {
+      role.data.id = 40;
+      role.data.name = "Standard role";
+      role.data.room_limit = null;
+      role.data.permissions = [];
+
+      cy.intercept("POST", "api/v1/roles", {
+        statusCode: 201,
+        body: role,
+      }).as("newRoleRequest");
+
+      cy.intercept("GET", "api/v1/roles/40", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      cy.wait("@newRoleRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: "Standard role",
+          room_limit: null,
+          permissions: [],
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/40");
+  });
+
+  it("check permission list with different permission dependencies", function () {
+    cy.fixture("permissions.json").then((permissions) => {
+      for (let i = 0; i < permissions.data.length; i++) {
+        permissions.data[i].included_permissions = [];
+      }
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.visit("/admin/roles/new");
+
+    cy.wait("@permissionsRequest");
+
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+
+            cy.get("#rooms\\.manage").click();
+
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", false, false, false);
+
+            cy.get("#settings\\.update").click();
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#users\\.delete").click();
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", true, true, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, false);
+
+            cy.get("#roles\\.delete").click();
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, false);
+
+            cy.get("#room_types\\.delete").click();
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, false);
+
+            cy.get("#servers\\.delete").click();
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#server_pools\\.delete").click();
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(4, "serverPools.delete", true, true, false);
+          });
+      });
+  });
+
+  it("check permission list with restricted permissions", function () {
+    cy.fixture("permissions.json").then((permissions) => {
+      permissions.meta.restrictions = [
+        "servers.*",
+        "system.monitor",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.create",
+        "serverPools.update",
+        "serverPools.delete",
+      ];
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.visit("/admin/roles/new");
+
+    cy.wait("@permissionsRequest");
+
+    // Check that permission list is shown correctly
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "servers.view", false, false, true);
+            cy.checkPermissionGroup(2, "servers.update", false, false, true);
+            cy.checkPermissionGroup(3, "servers.create", false, false, true);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, true);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              true,
+            );
+          });
+
+        // Select permission that includes disabled permission
+        cy.get("#room_types\\.delete").click();
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              true,
+              true,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, true);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              true,
+            );
+          });
+      });
+
+    // Reload with different restricted permissions
+    cy.fixture("permissions.json").then((permissions) => {
+      permissions.meta.restrictions = [
+        "rooms.*",
+        "meetings.viewAny",
+        "admin.view",
+        "settings.*",
+        "users.*",
+        "roles.*",
+        "roomTypes.*",
+      ];
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@permissionsRequest");
+
+    // Check that permission list is shown correctly
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, true);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, true);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "settings.update", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "users.view", false, false, true);
+            cy.checkPermissionGroup(2, "users.update", false, false, true);
+            cy.checkPermissionGroup(3, "users.create", false, false, true);
+            cy.checkPermissionGroup(4, "users.delete", false, false, true);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              true,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "roles.view", false, false, true);
+            cy.checkPermissionGroup(2, "roles.update", false, false, true);
+            cy.checkPermissionGroup(3, "roles.create", false, false, true);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, true);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, true);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, true);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              false,
+            );
+          });
+      });
+  });
+
+  it("add roles errors", function () {
+    cy.visit("/admin/roles/new");
+
+    cy.get("#name").should("have.value", "").type("Standard role");
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/roles", {
+      statusCode: 422,
+      body: {
+        errors: {
+          name: ["The Name field is required."],
+          room_limit: ["The Room limit must be at least -1."],
+          permissions: ["The Permissions field must be present."],
+        },
+      },
+    }).as("newRoleRequest");
+
+    cy.get('[data-test="roles-save-button"]')
+      .should("have.text", "app.save")
+      .click();
+
+    cy.wait("@newRoleRequest");
+
+    // Check error messages
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "The Name field is required.");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "The Room limit must be at least -1.");
+
+    cy.contains("The Permissions field must be present.").should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/roles", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("newRoleRequest");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@newRoleRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("not.include.text", "The Name field is required.");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("not.include.text", "The Room limit must be at least -1.");
+
+    cy.contains("The Permissions field must be present.").should("not.exist");
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/roles", {
+      statusCode: 401,
+    }).as("newRoleRequest");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@newRoleRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load permissions errors", function () {
+    const permissionsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/permissions",
+      { statusCode: 500, body: { message: "Test" } },
+      "permissionsRequest",
+    );
+
+    cy.visit("/admin/roles/new");
+
+    // Check loading
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("be.disabled");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        permissionsRequest.sendResponse();
+      });
+
+    cy.wait("@permissionsRequest");
+
+    // Check that loading is done
+    // Check that overlay is still shown because of error
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that buttons are still hidden
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("be.disabled");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 200,
+      fixture: "permissions.json",
+    }).as("permissionsRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload with 401 error
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 401,
+    }).as("permissionsRequest");
+
+    cy.visit("/admin/roles/new");
+
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRolesView.cy.js b/tests/Frontend/e2e/AdminRolesView.cy.js
index 2d17cbc92..75b306180 100644
--- a/tests/Frontend/e2e/AdminRolesView.cy.js
+++ b/tests/Frontend/e2e/AdminRolesView.cy.js
@@ -116,125 +116,7 @@ describe("Admin roles view", function () {
         cy.get('[data-test="roles-room-limit-help-button"]').click();
       });
 
-    cy.get('[data-test="roles-room-limit-help-dialog"]')
-      .should("be.visible")
-      .and("include.text", "app.room_limit")
-      .and("include.text", "admin.roles.room_limit.help_modal.info")
-      .and("include.text", "admin.roles.room_limit.help_modal.examples")
-      .and("include.text", "admin.roles.room_limit.help_modal.note")
-      .within(() => {
-        // Check that table is shown correctly
-        cy.get("tr").should("have.length", 8);
-
-        cy.get("tr")
-          .eq(0)
-          .within(() => {
-            cy.get("th").should("have.length", 4);
-            cy.get("th")
-              .eq(0)
-              .should(
-                "include.text",
-                "admin.roles.room_limit.help_modal.system_default",
-              );
-            cy.get("th")
-              .eq(1)
-              .should(
-                "include.text",
-                "admin.roles.room_limit.help_modal.role_a",
-              );
-            cy.get("th")
-              .eq(2)
-              .should(
-                "include.text",
-                "admin.roles.room_limit.help_modal.role_b",
-              );
-
-            cy.get("th").eq(3).should("include.text", "app.room_limit");
-          });
-
-        cy.get("tr")
-          .eq(1)
-          .within(() => {
-            cy.get("td").should("have.length", 4);
-            cy.get("td").eq(0).should("include.text", "5");
-            cy.get("td").eq(1).should("include.text", "X");
-            cy.get("td").eq(2).should("include.text", "X");
-            cy.get("td").eq(3).should("include.text", "5");
-          });
-
-        cy.get("tr")
-          .eq(2)
-          .within(() => {
-            cy.get("td").should("have.length", 4);
-            cy.get("td").eq(0).should("include.text", "1");
-            cy.get("td").eq(1).should("include.text", "5");
-            cy.get("td").eq(2).should("include.text", "X");
-            cy.get("td").eq(3).should("include.text", "5");
-          });
-
-        cy.get("tr")
-          .eq(3)
-          .within(() => {
-            cy.get("td").should("have.length", 4);
-            cy.get("td").eq(0).should("include.text", "5");
-            cy.get("td").eq(1).should("include.text", "1");
-            cy.get("td").eq(2).should("include.text", "X");
-            cy.get("td").eq(3).should("include.text", "1");
-          });
-
-        cy.get("tr")
-          .eq(4)
-          .within(() => {
-            cy.get("td").should("have.length", 4);
-            cy.get("td").eq(0).should("include.text", "5");
-            cy.get("td").eq(1).should("include.text", "1");
-            cy.get("td").eq(2).should("include.text", "2");
-            cy.get("td").eq(3).should("include.text", "2");
-          });
-
-        cy.get("tr")
-          .eq(5)
-          .within(() => {
-            cy.get("td").should("have.length", 4);
-            cy.get("td").eq(0).should("include.text", "5");
-            cy.get("td")
-              .eq(1)
-              .should(
-                "include.text",
-                "admin.roles.room_limit.help_modal.system_default",
-              );
-            cy.get("td").eq(2).should("include.text", "2");
-            cy.get("td").eq(3).should("include.text", "5");
-          });
-
-        cy.get("tr")
-          .eq(6)
-          .within(() => {
-            cy.get("td").should("have.length", 4);
-            cy.get("td").eq(0).should("include.text", "5");
-            cy.get("td")
-              .eq(1)
-              .should(
-                "include.text",
-                "admin.roles.room_limit.help_modal.system_default",
-              );
-            cy.get("td").eq(2).should("include.text", "10");
-            cy.get("td").eq(3).should("include.text", "10");
-          });
-
-        cy.get("tr")
-          .eq(7)
-          .within(() => {
-            cy.get("td").should("have.length", 4);
-            cy.get("td").eq(0).should("include.text", "5");
-            cy.get("td").eq(1).should("include.text", "app.unlimited");
-            cy.get("td").eq(2).should("include.text", "2");
-            cy.get("td").eq(3).should("include.text", "app.unlimited");
-          });
-
-        // Close room limit help dialog
-        cy.get('[data-test="dialog-header-close-button"]').click();
-      });
+    cy.checkRoomLimitHelpDialog();
 
     cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
 
@@ -334,10 +216,10 @@ describe("Admin roles view", function () {
           .within(() => {
             cy.get('[data-test="permission-group"]').should("have.length", 4);
 
-            cy.checkPermissionGroup(0, "room_types.view", false, true, true);
-            cy.checkPermissionGroup(1, "room_types.update", true, true, true);
-            cy.checkPermissionGroup(2, "room_types.create", true, true, true);
-            cy.checkPermissionGroup(3, "room_types.delete", true, true, true);
+            cy.checkPermissionGroup(0, "roomTypes.view", false, true, true);
+            cy.checkPermissionGroup(1, "roomTypes.update", true, true, true);
+            cy.checkPermissionGroup(2, "roomTypes.create", true, true, true);
+            cy.checkPermissionGroup(3, "roomTypes.delete", true, true, true);
           });
 
         cy.get('[data-test="permission-category"]')
@@ -563,10 +445,10 @@ describe("Admin roles view", function () {
           .within(() => {
             cy.get('[data-test="permission-group"]').should("have.length", 4);
 
-            cy.checkPermissionGroup(0, "room_types.view", false, false, true);
-            cy.checkPermissionGroup(1, "room_types.update", true, true, true);
-            cy.checkPermissionGroup(2, "room_types.create", true, true, true);
-            cy.checkPermissionGroup(3, "room_types.delete", true, true, true);
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, true);
+            cy.checkPermissionGroup(1, "roomTypes.update", true, true, true);
+            cy.checkPermissionGroup(2, "roomTypes.create", true, true, true);
+            cy.checkPermissionGroup(3, "roomTypes.delete", true, true, true);
           });
 
         cy.get('[data-test="permission-category"]')
diff --git a/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js b/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js
index 18f7178ba..25427550c 100644
--- a/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js
+++ b/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js
@@ -152,5 +152,243 @@ describe("Admin roles view role actions", function () {
     cy.checkToastMessage("app.flash.unauthenticated");
   });
 
-  // ToDo switch between edit and view
+  it("switch between edit and view", function () {
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check values and change them
+    cy.get("#name").should("have.value", "Staff").clear();
+    cy.get("#name").type("Staff 2");
+
+    cy.get("#default").should("be.checked");
+    cy.get("#unlimited").should("not.be.checked");
+    cy.get("#room-limit").should("not.exist");
+    cy.get("#custom").should("not.be.checked").click();
+    cy.get("#room-limit").should("exist").should("have.value", "0").type("10");
+
+    // Permission list
+    cy.checkPermissionGroup(0, "rooms.create", true, true, false);
+    cy.get("#rooms\\.create").click();
+    cy.checkPermissionGroup(1, "rooms.viewAll", true, true, false);
+    cy.get("#rooms\\.view_all").click();
+    cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+    cy.get("#rooms\\.manage").click();
+
+    cy.checkPermissionGroup(3, "meetings.viewAny", true, true, false);
+    cy.get("#meetings\\.view_any").click();
+    cy.checkPermissionGroup(4, "admin.view", false, true, false);
+    cy.get("#admin\\.view").click();
+
+    cy.checkPermissionGroup(5, "settings.viewAny", false, false, false);
+    cy.get("#settings\\.view_any").click();
+    cy.checkPermissionGroup(6, "settings.update", false, false, false);
+    cy.get("#settings\\.update").click();
+    cy.checkPermissionGroup(7, "system.monitor", false, false, false);
+    cy.get("#system\\.monitor").click();
+
+    cy.checkPermissionGroup(8, "users.viewAny", true, true, false);
+    cy.get("#users\\.view_any").click();
+    cy.checkPermissionGroup(9, "users.view", false, false, false);
+    cy.get("#users\\.view").click();
+    cy.checkPermissionGroup(10, "users.update", false, false, false);
+    cy.get("#users\\.update").click();
+    cy.checkPermissionGroup(11, "users.create", false, false, false);
+    cy.get("#users\\.create").click();
+    cy.checkPermissionGroup(12, "users.delete", false, false, false);
+    cy.get("#users\\.delete").click();
+    cy.checkPermissionGroup(
+      13,
+      "users.updateOwnAttributes",
+      false,
+      true,
+      false,
+    );
+    cy.get("#users\\.update_own_attributes").click();
+
+    cy.checkPermissionGroup(14, "roles.viewAny", false, true, false);
+    cy.get("#roles\\.view_any").click();
+    cy.checkPermissionGroup(15, "roles.view", false, false, false);
+    cy.get("#roles\\.view").click();
+    cy.checkPermissionGroup(16, "roles.update", false, false, false);
+    cy.get("#roles\\.update").click();
+    cy.checkPermissionGroup(17, "roles.create", false, false, false);
+    cy.get("#roles\\.create").click();
+    cy.checkPermissionGroup(18, "roles.delete", false, false, false);
+    cy.get("#roles\\.delete").click();
+
+    cy.checkPermissionGroup(19, "roomTypes.view", false, true, false);
+    cy.get("#room_types\\.view").click();
+    cy.checkPermissionGroup(20, "roomTypes.update", true, true, false);
+    cy.get("#room_types\\.update").click();
+    cy.checkPermissionGroup(21, "roomTypes.create", true, true, false);
+    cy.get("#room_types\\.create").click();
+    cy.checkPermissionGroup(22, "roomTypes.delete", true, true, false);
+    cy.get("#room_types\\.delete").click();
+
+    cy.checkPermissionGroup(23, "servers.viewAny", false, false, false);
+    cy.get("#servers\\.view_any").click();
+    cy.checkPermissionGroup(24, "servers.view", false, false, false);
+    cy.get("#servers\\.view").click();
+    cy.checkPermissionGroup(25, "servers.update", false, false, false);
+    cy.get("#servers\\.update").click();
+    cy.checkPermissionGroup(26, "servers.create", false, false, false);
+    cy.get("#servers\\.create").click();
+    cy.checkPermissionGroup(27, "servers.delete", false, false, false);
+    cy.get("#servers\\.delete").click();
+
+    cy.checkPermissionGroup(28, "serverPools.viewAny", false, false, false);
+    cy.get("#server_pools\\.view_any").click();
+    cy.checkPermissionGroup(29, "serverPools.view", false, false, false);
+    cy.get("#server_pools\\.view").click();
+    cy.checkPermissionGroup(30, "serverPools.update", false, false, false);
+    cy.get("#server_pools\\.update").click();
+    cy.checkPermissionGroup(31, "serverPools.create", false, false, false);
+    cy.get("#server_pools\\.create").click();
+    cy.checkPermissionGroup(32, "serverPools.delete", false, false, false);
+    cy.get("#server_pools\\.delete").click();
+
+    // Check that save button is shown
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Switch to view
+    cy.get('[data-test="roles-cancel-edit-button"]').click();
+
+    // Check if redirect worked
+    cy.url().should("include", "/admin/roles/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@roleRequest");
+
+    // Check that changes were not saved
+    cy.get("#name").should("have.value", "Staff").and("be.disabled");
+
+    cy.get("#default").should("be.checked").and("be.disabled");
+    cy.get("#unlimited").should("not.be.checked").and("be.disabled");
+    cy.get("#room-limit").should("not.exist");
+    cy.get("#custom").should("not.be.checked").and("be.disabled");
+
+    // Permission list
+    cy.checkPermissionGroup(0, "rooms.create", true, true, true);
+    cy.checkPermissionGroup(1, "rooms.viewAll", true, true, true);
+    cy.checkPermissionGroup(2, "rooms.manage", false, false, true);
+
+    cy.checkPermissionGroup(3, "meetings.viewAny", true, true, true);
+    cy.checkPermissionGroup(4, "admin.view", false, true, true);
+
+    cy.checkPermissionGroup(5, "settings.viewAny", false, false, true);
+    cy.checkPermissionGroup(6, "settings.update", false, false, true);
+    cy.checkPermissionGroup(7, "system.monitor", false, false, true);
+
+    cy.checkPermissionGroup(8, "users.viewAny", true, true, true);
+    cy.checkPermissionGroup(9, "users.view", false, false, true);
+    cy.checkPermissionGroup(10, "users.update", false, false, true);
+    cy.checkPermissionGroup(11, "users.create", false, false, true);
+    cy.checkPermissionGroup(12, "users.delete", false, false, true);
+    cy.checkPermissionGroup(
+      13,
+      "users.updateOwnAttributes",
+      false,
+      false,
+      true,
+    );
+
+    cy.checkPermissionGroup(14, "roles.viewAny", false, true, true);
+    cy.checkPermissionGroup(15, "roles.view", false, false, true);
+    cy.checkPermissionGroup(16, "roles.update", false, false, true);
+    cy.checkPermissionGroup(17, "roles.create", false, false, true);
+    cy.checkPermissionGroup(18, "roles.delete", false, false, true);
+
+    cy.checkPermissionGroup(19, "roomTypes.view", false, true, true);
+    cy.checkPermissionGroup(20, "roomTypes.update", true, true, true);
+    cy.checkPermissionGroup(21, "roomTypes.create", true, true, true);
+    cy.checkPermissionGroup(22, "roomTypes.delete", true, true, true);
+
+    cy.checkPermissionGroup(23, "servers.viewAny", false, false, true);
+    cy.checkPermissionGroup(24, "servers.view", false, false, true);
+    cy.checkPermissionGroup(25, "servers.update", false, false, true);
+    cy.checkPermissionGroup(26, "servers.create", false, false, true);
+    cy.checkPermissionGroup(27, "servers.delete", false, false, true);
+
+    cy.checkPermissionGroup(28, "serverPools.viewAny", false, true, true);
+    cy.checkPermissionGroup(29, "serverPools.view", false, false, true);
+    cy.checkPermissionGroup(30, "serverPools.update", false, false, true);
+    cy.checkPermissionGroup(31, "serverPools.create", false, false, true);
+    cy.checkPermissionGroup(32, "serverPools.delete", false, false, true);
+
+    // Check that save button is not visible
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+
+    // Switch back to edit page
+    cy.get('[data-test="roles-edit-button"]').click();
+
+    // Check if redirect worked
+    cy.url().should("include", "/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    // Check that original values are shown
+    cy.get("#name").should("have.value", "Staff");
+
+    cy.get("#default").should("be.checked");
+    cy.get("#unlimited").should("not.be.checked");
+    cy.get("#room-limit").should("not.exist");
+    cy.get("#custom").should("not.be.checked");
+
+    // Permission list
+    cy.checkPermissionGroup(0, "rooms.create", true, true, false);
+    cy.checkPermissionGroup(1, "rooms.viewAll", true, true, false);
+    cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+
+    cy.checkPermissionGroup(3, "meetings.viewAny", true, true, false);
+    cy.checkPermissionGroup(4, "admin.view", false, true, false);
+
+    cy.checkPermissionGroup(5, "settings.viewAny", false, false, false);
+    cy.checkPermissionGroup(6, "settings.update", false, false, false);
+    cy.checkPermissionGroup(7, "system.monitor", false, false, false);
+
+    cy.checkPermissionGroup(8, "users.viewAny", true, true, false);
+    cy.checkPermissionGroup(9, "users.view", false, false, false);
+    cy.checkPermissionGroup(10, "users.update", false, false, false);
+    cy.checkPermissionGroup(11, "users.create", false, false, false);
+    cy.checkPermissionGroup(12, "users.delete", false, false, false);
+    cy.checkPermissionGroup(
+      13,
+      "users.updateOwnAttributes",
+      false,
+      false,
+      false,
+    );
+
+    cy.checkPermissionGroup(14, "roles.viewAny", false, true, false);
+    cy.checkPermissionGroup(15, "roles.view", false, false, false);
+    cy.checkPermissionGroup(16, "roles.update", false, false, false);
+    cy.checkPermissionGroup(17, "roles.create", false, false, false);
+    cy.checkPermissionGroup(18, "roles.delete", false, false, false);
+
+    cy.checkPermissionGroup(19, "roomTypes.view", false, true, false);
+    cy.checkPermissionGroup(20, "roomTypes.update", true, true, false);
+    cy.checkPermissionGroup(21, "roomTypes.create", true, true, false);
+    cy.checkPermissionGroup(22, "roomTypes.delete", true, true, false);
+
+    cy.checkPermissionGroup(23, "servers.viewAny", false, false, false);
+    cy.checkPermissionGroup(24, "servers.view", false, false, false);
+    cy.checkPermissionGroup(25, "servers.update", false, false, false);
+    cy.checkPermissionGroup(26, "servers.create", false, false, false);
+    cy.checkPermissionGroup(27, "servers.delete", false, false, false);
+
+    cy.checkPermissionGroup(28, "serverPools.viewAny", false, true, false);
+    cy.checkPermissionGroup(29, "serverPools.view", false, false, false);
+    cy.checkPermissionGroup(30, "serverPools.update", false, false, false);
+    cy.checkPermissionGroup(31, "serverPools.create", false, false, false);
+    cy.checkPermissionGroup(32, "serverPools.delete", false, false, false);
+
+    // Check that save button is shown
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+  });
 });
diff --git a/tests/Frontend/fixtures/superuserRole.json b/tests/Frontend/fixtures/superuserRole.json
new file mode 100644
index 000000000..e83c16ec9
--- /dev/null
+++ b/tests/Frontend/fixtures/superuserRole.json
@@ -0,0 +1,87 @@
+{
+  "data": {
+    "id": 2,
+    "name": "Superuser",
+    "superuser": true,
+    "updated_at": "2025-01-23T18:50:24.000000Z",
+    "permissions": [
+      { "id": 3, "name": "rooms.create" },
+      { "id": 4, "name": "rooms.viewAll" },
+      { "id": 5, "name": "rooms.manage" },
+      { "id": 6, "name": "meetings.viewAny" },
+      { "id": 7, "name": "admin.view" },
+      { "id": 8, "name": "settings.viewAny" },
+      { "id": 9, "name": "settings.update" },
+      { "id": 10, "name": "roles.viewAny" },
+      { "id": 11, "name": "roles.view" },
+      { "id": 12, "name": "roles.update" },
+      {
+        "id": 13,
+        "name": "roles.create"
+      },
+      {
+        "id": 14,
+        "name": "roles.delete"
+      },
+      { "id": 15, "name": "users.viewAny" },
+      { "id": 16, "name": "users.view" },
+      {
+        "id": 17,
+        "name": "users.update"
+      },
+      {
+        "id": 18,
+        "name": "users.create"
+      },
+      {
+        "id": 19,
+        "name": "users.delete"
+      },
+      {
+        "id": 20,
+        "name": "users.updateOwnAttributes"
+      },
+      { "id": 21, "name": "roomTypes.view" },
+      {
+        "id": 22,
+        "name": "roomTypes.update"
+      },
+      {
+        "id": 23,
+        "name": "roomTypes.create"
+      },
+      {
+        "id": 24,
+        "name": "roomTypes.delete"
+      },
+      { "id": 25, "name": "servers.viewAny" },
+      { "id": 26, "name": "servers.view" },
+      { "id": 27, "name": "servers.update" },
+      {
+        "id": 28,
+        "name": "servers.create"
+      },
+      {
+        "id": 29,
+        "name": "servers.delete"
+      },
+      { "id": 30, "name": "serverPools.viewAny" },
+      { "id": 31, "name": "serverPools.view" },
+      {
+        "id": 32,
+        "name": "serverPools.update"
+      },
+      {
+        "id": 33,
+        "name": "serverPools.create"
+      },
+      {
+        "id": 34,
+        "name": "serverPools.delete"
+      },
+      { "id": 35, "name": "system.monitor" }
+    ],
+    "model_name": "Role",
+    "room_limit": -1
+  }
+}
diff --git a/tests/Frontend/support/commands/adminRolesCommands.js b/tests/Frontend/support/commands/adminRolesCommands.js
index 0009e4fca..fceff3f0c 100644
--- a/tests/Frontend/support/commands/adminRolesCommands.js
+++ b/tests/Frontend/support/commands/adminRolesCommands.js
@@ -34,3 +34,125 @@ Cypress.Commands.add(
       });
   },
 );
+
+/**
+ * Check if the room limit help dialog is shown correctly and close it.
+ * @memberof cy
+ * @method roomTypeCheckDefaultRoomSettingCheckboxField
+ * @returns void
+ */
+Cypress.Commands.add("checkRoomLimitHelpDialog", () => {
+  cy.get('[data-test="roles-room-limit-help-dialog"]')
+    .should("be.visible")
+    .and("include.text", "app.room_limit")
+    .and("include.text", "admin.roles.room_limit.help_modal.info")
+    .and("include.text", "admin.roles.room_limit.help_modal.examples")
+    .and("include.text", "admin.roles.room_limit.help_modal.note")
+    .within(() => {
+      // Check that table is shown correctly
+      cy.get("tr").should("have.length", 8);
+
+      cy.get("tr")
+        .eq(0)
+        .within(() => {
+          cy.get("th").should("have.length", 4);
+          cy.get("th")
+            .eq(0)
+            .should(
+              "include.text",
+              "admin.roles.room_limit.help_modal.system_default",
+            );
+          cy.get("th")
+            .eq(1)
+            .should("include.text", "admin.roles.room_limit.help_modal.role_a");
+          cy.get("th")
+            .eq(2)
+            .should("include.text", "admin.roles.room_limit.help_modal.role_b");
+
+          cy.get("th").eq(3).should("include.text", "app.room_limit");
+        });
+
+      cy.get("tr")
+        .eq(1)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "5");
+          cy.get("td").eq(1).should("include.text", "X");
+          cy.get("td").eq(2).should("include.text", "X");
+          cy.get("td").eq(3).should("include.text", "5");
+        });
+
+      cy.get("tr")
+        .eq(2)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "1");
+          cy.get("td").eq(1).should("include.text", "5");
+          cy.get("td").eq(2).should("include.text", "X");
+          cy.get("td").eq(3).should("include.text", "5");
+        });
+
+      cy.get("tr")
+        .eq(3)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "5");
+          cy.get("td").eq(1).should("include.text", "1");
+          cy.get("td").eq(2).should("include.text", "X");
+          cy.get("td").eq(3).should("include.text", "1");
+        });
+
+      cy.get("tr")
+        .eq(4)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "5");
+          cy.get("td").eq(1).should("include.text", "1");
+          cy.get("td").eq(2).should("include.text", "2");
+          cy.get("td").eq(3).should("include.text", "2");
+        });
+
+      cy.get("tr")
+        .eq(5)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "5");
+          cy.get("td")
+            .eq(1)
+            .should(
+              "include.text",
+              "admin.roles.room_limit.help_modal.system_default",
+            );
+          cy.get("td").eq(2).should("include.text", "2");
+          cy.get("td").eq(3).should("include.text", "5");
+        });
+
+      cy.get("tr")
+        .eq(6)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "5");
+          cy.get("td")
+            .eq(1)
+            .should(
+              "include.text",
+              "admin.roles.room_limit.help_modal.system_default",
+            );
+          cy.get("td").eq(2).should("include.text", "10");
+          cy.get("td").eq(3).should("include.text", "10");
+        });
+
+      cy.get("tr")
+        .eq(7)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "5");
+          cy.get("td").eq(1).should("include.text", "app.unlimited");
+          cy.get("td").eq(2).should("include.text", "2");
+          cy.get("td").eq(3).should("include.text", "app.unlimited");
+        });
+
+      // Close room limit help dialog
+      cy.get('[data-test="dialog-header-close-button"]').click();
+    });
+});

From 367b10eefa356e9a3359f119455d7724e7cc59be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 27 Jan 2025 06:54:43 +0100
Subject: [PATCH 61/79] Adjust ForgotPassword tests

---
 tests/Frontend/e2e/ForgotPassword.cy.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/tests/Frontend/e2e/ForgotPassword.cy.js b/tests/Frontend/e2e/ForgotPassword.cy.js
index 8b86abcd3..24ddd0afc 100644
--- a/tests/Frontend/e2e/ForgotPassword.cy.js
+++ b/tests/Frontend/e2e/ForgotPassword.cy.js
@@ -133,6 +133,25 @@ describe("Forgot password", function () {
 
     cy.get("#email").type("JohnDoe@domain.tld");
 
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/password/email", {
+      statusCode: 422,
+      body: {
+        errors: {
+          email: ["The email fiel is required."],
+        },
+      },
+    }).as("forgotPasswordRequest");
+
+    cy.get('[data-test="send-reset-link-button"]').click();
+
+    cy.wait("@forgotPasswordRequest");
+
+    // Check that error message is shown
+    cy.get('[data-test="email-field"]')
+      .should("be.visible")
+      .and("include.text", "The email fiel is required.");
+
     // Check with 500 error
     cy.intercept("POST", "api/v1/password/email", {
       statusCode: 500,
@@ -150,5 +169,10 @@ describe("Forgot password", function () {
       'app.flash.server_error.message_{"message":"Test"}',
       'app.flash.server_error.error_code_{"statusCode":500}',
     ]);
+
+    // Check that 422 error message is hidden
+    cy.get('[data-test="email-field"]')
+      .should("be.visible")
+      .and("not.include.text", "The email fiel is required.");
   });
 });

From 708805a288c7ceb827740c6964a0f78424d50714 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 27 Jan 2025 07:17:19 +0100
Subject: [PATCH 62/79] Rename user roles fixture

---
 tests/Frontend/e2e/AdminRolesIndex.cy.js      | 82 +++++++++----------
 .../e2e/AdminRolesIndexRoleActions.cy.js      |  2 +-
 .../e2e/AdminRolesViewRoleActions.cy.js       |  2 +-
 tests/Frontend/e2e/AdminRoomTypesEdit.cy.js   | 12 +--
 tests/Frontend/e2e/AdminRoomTypesNew.cy.js    |  4 +-
 .../AdminRoomTypesViewRoomTypeActions.cy.js   |  4 +-
 .../Frontend/e2e/AdminUsersEditSecurity.cy.js |  4 +-
 tests/Frontend/e2e/AdminUsersIndex.cy.js      |  4 +-
 tests/Frontend/e2e/AdminUsersNew.cy.js        |  4 +-
 .../fixtures/{userRoles.json => roles.json}   |  0
 .../support/commands/interceptCommands.js     | 16 ++--
 11 files changed, 67 insertions(+), 67 deletions(-)
 rename tests/Frontend/fixtures/{userRoles.json => roles.json} (100%)

diff --git a/tests/Frontend/e2e/AdminRolesIndex.cy.js b/tests/Frontend/e2e/AdminRolesIndex.cy.js
index df5c9164d..8f2c65248 100644
--- a/tests/Frontend/e2e/AdminRolesIndex.cy.js
+++ b/tests/Frontend/e2e/AdminRolesIndex.cy.js
@@ -19,7 +19,7 @@ describe("Admin roles index", function () {
   });
 
   it("visit with user without permission to view roles", function () {
-    // Check with missing userRoles.viewAny permission
+    // Check with missing roles.viewAny permission
     cy.fixture("currentUser.json").then((currentUser) => {
       currentUser.data.permissions = ["admin.view"];
       cy.intercept("GET", "api/v1/currentUser", {
@@ -42,7 +42,7 @@ describe("Admin roles index", function () {
       "GET",
       "api/v1/roles*",
       {
-        fixture: "userRoles.json",
+        fixture: "roles.json",
       },
       "rolesRequest",
     );
@@ -167,7 +167,7 @@ describe("Admin roles index", function () {
 
     cy.intercept("GET", "api/v1/roles*", {
       statusCode: 200,
-      fixture: "userRoles.json",
+      fixture: "roles.json",
     }).as("rolesRequest");
 
     // Check if reload button exists and click it
@@ -219,15 +219,15 @@ describe("Admin roles index", function () {
       cy.get("button").should("be.visible").and("not.be.disabled");
     });
 
-    cy.fixture("userRoles.json").then((userRoles) => {
-      userRoles.data = userRoles.data.slice(0, 1);
-      userRoles.meta.last_page = 1;
-      userRoles.meta.per_page = 1;
-      userRoles.meta.to = 1;
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = roles.data.slice(0, 1);
+      roles.meta.last_page = 1;
+      roles.meta.per_page = 1;
+      roles.meta.to = 1;
 
       cy.intercept("GET", "api/v1/roles*", {
         statusCode: 200,
-        body: userRoles,
+        body: roles,
       }).as("rolesRequest");
     });
 
@@ -282,16 +282,16 @@ describe("Admin roles index", function () {
   });
 
   it("load roles page out of bounds", function () {
-    cy.fixture("userRoles.json").then((userRoles) => {
-      userRoles.data = userRoles.data.slice(0, 1);
-      userRoles.meta.last_page = 2;
-      userRoles.meta.per_page = 1;
-      userRoles.meta.to = 1;
-      userRoles.meta.total = 2;
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = roles.data.slice(0, 1);
+      roles.meta.last_page = 2;
+      roles.meta.per_page = 1;
+      roles.meta.to = 1;
+      roles.meta.total = 2;
 
       cy.intercept("GET", "api/v1/roles*", {
         statusCode: 200,
-        body: userRoles,
+        body: roles,
       }).as("rolesRequest");
     });
 
@@ -300,38 +300,38 @@ describe("Admin roles index", function () {
     cy.wait("@rolesRequest");
 
     // Switch to next page but respond with no roles on second page
-    cy.fixture("userRoles.json").then((userRoles) => {
-      userRoles.data = [];
-      userRoles.meta.current_page = 2;
-      userRoles.meta.last_page = 1;
-      userRoles.meta.from = null;
-      userRoles.meta.per_page = 2;
-      userRoles.meta.to = null;
-      userRoles.meta.total = 2;
-      userRoles.meta.total_no_filter = 2;
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = [];
+      roles.meta.current_page = 2;
+      roles.meta.last_page = 1;
+      roles.meta.from = null;
+      roles.meta.per_page = 2;
+      roles.meta.to = null;
+      roles.meta.total = 2;
+      roles.meta.total_no_filter = 2;
 
       const emptyRolesRequest = interceptIndefinitely(
         "GET",
         "api/v1/roles*",
         {
           statusCode: 200,
-          body: userRoles,
+          body: roles,
         },
         "rolesRequest",
       );
 
       cy.get('[data-test="paginator-next-button"]').eq(1).click();
 
-      cy.fixture("userRoles.json").then((userRoles) => {
-        userRoles.data = userRoles.data.slice(0, 2);
-        userRoles.meta.per_page = 2;
-        userRoles.meta.to = 2;
-        userRoles.meta.total = 2;
-        userRoles.meta.total_no_filter = 2;
+      cy.fixture("roles.json").then((roles) => {
+        roles.data = roles.data.slice(0, 2);
+        roles.meta.per_page = 2;
+        roles.meta.to = 2;
+        roles.meta.total = 2;
+        roles.meta.total_no_filter = 2;
 
         cy.intercept("GET", "api/v1/roles*", {
           statusCode: 200,
-          body: userRoles,
+          body: roles,
         })
           .as("rolesRequest")
           .then(() => {
@@ -372,7 +372,7 @@ describe("Admin roles index", function () {
     });
 
     // Check with no roles found for this search query
-    cy.fixture("userRoles.json").then((roles) => {
+    cy.fixture("roles.json").then((roles) => {
       roles.data = [];
       roles.meta.from = null;
       roles.meta.per_page = 1;
@@ -401,7 +401,7 @@ describe("Admin roles index", function () {
     cy.get('[data-test="role-item"]').should("not.exist");
 
     // Check with no roles available
-    cy.fixture("userRoles.json").then((roles) => {
+    cy.fixture("roles.json").then((roles) => {
       roles.data = [];
       roles.meta.from = null;
       roles.meta.per_page = 1;
@@ -431,7 +431,7 @@ describe("Admin roles index", function () {
     cy.get('[data-test="role-item"]').should("have.length", 0);
 
     // Check with 2 roles on 2 pages
-    cy.fixture("userRoles.json").then((roles) => {
+    cy.fixture("roles.json").then((roles) => {
       roles.data = roles.data.slice(0, 1);
       roles.meta.last_page = 2;
       roles.meta.per_page = 1;
@@ -470,7 +470,7 @@ describe("Admin roles index", function () {
       .eq(0)
       .should("have.attr", "data-p-active", "true");
 
-    cy.fixture("userRoles.json").then((roles) => {
+    cy.fixture("roles.json").then((roles) => {
       roles.data = roles.data.slice(1, 2);
       roles.meta.current_page = 2;
       roles.meta.from = 2;
@@ -509,7 +509,7 @@ describe("Admin roles index", function () {
     cy.get('[data-test="role-item"]').eq(0).should("include.text", "Staff");
 
     // Change search query and make sure that the page is reset
-    cy.fixture("userRoles.json").then((roles) => {
+    cy.fixture("roles.json").then((roles) => {
       roles.data = roles.data.slice(0, 1);
       roles.meta.last_page = 2;
       roles.meta.per_page = 1;
@@ -565,7 +565,7 @@ describe("Admin roles index", function () {
       .and("not.have.attr", "data-p-sortable-column", "true");
 
     // Change sorting direction and response with 3 roles on 3 pages
-    cy.fixture("userRoles.json").then((roles) => {
+    cy.fixture("roles.json").then((roles) => {
       roles.data = roles.data.slice(0, 1);
       roles.meta.last_page = 3;
       roles.meta.per_page = 1;
@@ -603,7 +603,7 @@ describe("Admin roles index", function () {
       .should("have.attr", "data-p-active", "true");
 
     // Switch to next page
-    cy.fixture("userRoles.json").then((roles) => {
+    cy.fixture("roles.json").then((roles) => {
       roles.data = roles.data.slice(1, 2);
       roles.meta.current_page = 2;
       roles.meta.from = 2;
@@ -644,7 +644,7 @@ describe("Admin roles index", function () {
     cy.get('[data-test="role-item"]').eq(0).should("include.text", "Staff");
 
     // Change sorting direction and make sure that the page is reset
-    cy.fixture("userRoles.json").then((roles) => {
+    cy.fixture("roles.json").then((roles) => {
       roles.data = roles.data.slice(0, 1);
       roles.meta.last_page = 3;
       roles.meta.per_page = 1;
diff --git a/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js b/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js
index 4ac5f20fc..e7bb1f004 100644
--- a/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js
+++ b/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js
@@ -52,7 +52,7 @@ describe("Admin roles index role actions", function () {
       "deleteRoleRequest",
     );
 
-    cy.fixture("userRoles.json").then((roles) => {
+    cy.fixture("roles.json").then((roles) => {
       roles.data = roles.data.filter((role) => role.id !== 3);
       roles.meta.to = 2;
       roles.meta.total = 2;
diff --git a/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js b/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js
index 25427550c..0f4f99da8 100644
--- a/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js
+++ b/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js
@@ -47,7 +47,7 @@ describe("Admin roles view role actions", function () {
       "deleteRoleRequest",
     );
 
-    cy.fixture("userRoles.json").then((roles) => {
+    cy.fixture("roles.json").then((roles) => {
       roles.data = roles.data.filter((role) => role.id !== 2);
       roles.meta.to = 2;
       roles.meta.total = 2;
diff --git a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
index 84a4c36c2..82c6c9615 100644
--- a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
@@ -842,7 +842,7 @@ describe("Admin room types edit", function () {
     cy.visit("/admin/room_types/3/edit");
     cy.wait("@roomTypeRequest");
     cy.wait("@serverPoolsRequest");
-    cy.wait("@userRolesRequest");
+    cy.wait("@rolesRequest");
 
     cy.get('[data-test="restrict-field"]')
       .should("be.visible")
@@ -947,7 +947,7 @@ describe("Admin room types edit", function () {
           },
         },
       },
-      "userRolesRequest",
+      "rolesRequest",
     );
 
     cy.get(".multiselect__content")
@@ -980,7 +980,7 @@ describe("Admin room types edit", function () {
         userRoleRequest.sendResponse();
       });
 
-    cy.wait("@userRolesRequest");
+    cy.wait("@rolesRequest");
 
     cy.get(".multiselect__content")
       .eq(1)
@@ -1151,7 +1151,7 @@ describe("Admin room types edit", function () {
 
     cy.wait("@roomTypeRequest");
     cy.wait("@serverPoolsRequest");
-    cy.wait("@userRolesRequest");
+    cy.wait("@rolesRequest");
 
     // Check with 422 error
     cy.intercept("PUT", "api/v1/roomTypes/3", {
@@ -2209,7 +2209,7 @@ describe("Admin room types edit", function () {
 
     // Reload roles without errors
     cy.intercept("GET", "api/v1/roles*", {
-      fixture: "userRoles.json",
+      fixture: "roles.json",
     }).as("rolesRequest");
 
     cy.get('[data-test="roles-reload-button"]').click();
@@ -2312,7 +2312,7 @@ describe("Admin room types edit", function () {
 
     // Visit new page again with roles
     cy.intercept("GET", "api/v1/roles*", {
-      fixture: "userRoles.json",
+      fixture: "roles.json",
     }).as("rolesRequest");
 
     cy.visit("/admin/room_types/3/edit");
diff --git a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
index e04d6e8d4..19fe9d0f8 100644
--- a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
@@ -1550,7 +1550,7 @@ describe("Admin room types new", function () {
 
     // Reload roles without errors
     cy.intercept("GET", "api/v1/roles*", {
-      fixture: "userRoles.json",
+      fixture: "roles.json",
     }).as("rolesRequest");
 
     cy.get('[data-test="roles-reload-button"]').click();
@@ -1623,7 +1623,7 @@ describe("Admin room types new", function () {
 
     // Visit new page again with roles
     cy.intercept("GET", "api/v1/roles*", {
-      fixture: "userRoles.json",
+      fixture: "roles.json",
     }).as("rolesRequest");
 
     cy.visit("/admin/room_types/new");
diff --git a/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
index dd7efe525..8e643c126 100644
--- a/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
@@ -451,7 +451,7 @@ describe("Admin room types view room type actions", function () {
 
     cy.wait("@roomTypeRequest");
     cy.wait("@serverPoolsRequest");
-    cy.wait("@userRolesRequest");
+    cy.wait("@rolesRequest");
 
     // Check values and change them
     cy.get("#room-type-name").should("have.value", "Exam").clear();
@@ -830,7 +830,7 @@ describe("Admin room types view room type actions", function () {
 
     cy.wait("@roomTypeRequest");
     cy.wait("@serverPoolsRequest");
-    cy.wait("@userRolesRequest");
+    cy.wait("@rolesRequest");
 
     // Check that original values are shown
     cy.get("#room-type-name")
diff --git a/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
index b6d81b0e7..046abc278 100644
--- a/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
@@ -835,7 +835,7 @@ describe("Admin users edit email", function () {
 
     // Reload roles without errors
     cy.intercept("GET", "api/v1/roles*", {
-      fixture: "userRoles.json",
+      fixture: "roles.json",
     }).as("rolesRequest");
 
     cy.get('[data-test="roles-reload-button"]').click();
@@ -899,7 +899,7 @@ describe("Admin users edit email", function () {
 
     // Visit edit page again with roles
     cy.intercept("GET", "api/v1/roles*", {
-      fixture: "userRoles.json",
+      fixture: "roles.json",
     }).as("rolesRequest");
 
     cy.visit("/admin/users/2/edit");
diff --git a/tests/Frontend/e2e/AdminUsersIndex.cy.js b/tests/Frontend/e2e/AdminUsersIndex.cy.js
index 8ea4b766c..570b26956 100644
--- a/tests/Frontend/e2e/AdminUsersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndex.cy.js
@@ -556,7 +556,7 @@ describe("Admin users index", function () {
 
     // Reload roles
     cy.intercept("GET", "api/v1/roles*", {
-      fixture: "userRoles.json",
+      fixture: "roles.json",
     }).as("rolesRequest");
 
     cy.get('[data-test="roles-reload-button"]').should("be.visible").click();
@@ -627,7 +627,7 @@ describe("Admin users index", function () {
 
     // Reload roles
     cy.intercept("GET", "api/v1/roles*", {
-      fixture: "userRoles.json",
+      fixture: "roles.json",
     }).as("rolesRequest");
 
     cy.get('[data-test="roles-reload-button"]').should("be.visible").click();
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index ff5225c44..f46e11d83 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -931,7 +931,7 @@ describe("Admin users new", function () {
 
     // Reload roles without errors
     cy.intercept("GET", "api/v1/roles*", {
-      fixture: "userRoles.json",
+      fixture: "roles.json",
     }).as("rolesRequest");
 
     cy.get('[data-test="roles-reload-button"]').click();
@@ -995,7 +995,7 @@ describe("Admin users new", function () {
 
     // Visit new page again with roles
     cy.intercept("GET", "api/v1/roles*", {
-      fixture: "userRoles.json",
+      fixture: "roles.json",
     }).as("rolesRequest");
 
     cy.visit("/admin/users/new");
diff --git a/tests/Frontend/fixtures/userRoles.json b/tests/Frontend/fixtures/roles.json
similarity index 100%
rename from tests/Frontend/fixtures/userRoles.json
rename to tests/Frontend/fixtures/roles.json
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index 9d9dd41ac..e7e344f80 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -191,7 +191,7 @@ Cypress.Commands.add("interceptAdminUsersIndexRequests", () => {
   }).as("usersRequest");
 
   cy.intercept("GET", "api/v1/roles*", {
-    fixture: "userRoles.json",
+    fixture: "roles.json",
   });
 });
 
@@ -203,7 +203,7 @@ Cypress.Commands.add("interceptAdminUsersIndexRequests", () => {
  */
 Cypress.Commands.add("interceptAdminUsersNewRequests", () => {
   cy.intercept("GET", "api/v1/roles*", {
-    fixture: "userRoles.json",
+    fixture: "roles.json",
   });
 
   cy.intercept("GET", "api/v1/getTimezones", { fixture: "timezones.json" });
@@ -221,7 +221,7 @@ Cypress.Commands.add("interceptAdminUsersViewRequests", () => {
   }).as("userRequest");
 
   cy.intercept("GET", "api/v1/roles*", {
-    fixture: "userRoles.json",
+    fixture: "roles.json",
   });
 
   cy.intercept("GET", "api/v1/getTimezones", { fixture: "timezones.json" });
@@ -320,8 +320,8 @@ Cypress.Commands.add("interceptAdminRoomTypesViewRequests", () => {
   }).as("serverPoolsRequest");
 
   cy.intercept("GET", "api/v1/roles*", {
-    fixture: "userRoles.json",
-  }).as("userRolesRequest");
+    fixture: "roles.json",
+  }).as("rolesRequest");
 });
 
 /**
@@ -336,8 +336,8 @@ Cypress.Commands.add("interceptAdminRoomTypesNewRequests", () => {
   }).as("serverPoolsRequest");
 
   cy.intercept("GET", "api/v1/roles*", {
-    fixture: "userRoles.json",
-  }).as("userRolesRequest");
+    fixture: "roles.json",
+  }).as("rolesRequest");
 });
 
 /**
@@ -374,7 +374,7 @@ Cypress.Commands.add("interceptAdminSettingsRequest", () => {
  */
 Cypress.Commands.add("interceptAdminRolesIndexRequests", () => {
   cy.intercept("GET", "api/v1/roles*", {
-    fixture: "userRoles.json",
+    fixture: "roles.json",
   }).as("rolesRequest");
 });
 

From 8c28c4c445fcc74650fe9481f50041b17d9ec154 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Mon, 27 Jan 2025 07:27:53 +0100
Subject: [PATCH 63/79] Improve tests

---
 tests/Frontend/e2e/AdminRolesIndex.cy.js    | 20 ++++++++++++++++----
 tests/Frontend/e2e/AdminRoomTypesEdit.cy.js |  1 +
 tests/Frontend/e2e/AdminRoomTypesNew.cy.js  |  1 +
 tests/Frontend/e2e/AdminUsersNew.cy.js      |  2 ++
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/tests/Frontend/e2e/AdminRolesIndex.cy.js b/tests/Frontend/e2e/AdminRolesIndex.cy.js
index 8f2c65248..1c4372969 100644
--- a/tests/Frontend/e2e/AdminRolesIndex.cy.js
+++ b/tests/Frontend/e2e/AdminRolesIndex.cy.js
@@ -184,7 +184,10 @@ describe("Admin roles index", function () {
 
     // Check that roles are shown and contain the correct data
     cy.get('[data-test="role-item"]').should("have.length", 3);
-    cy.get('[data-test="role-item"]').eq(0).should("include.text", "Superuser");
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser");
     cy.get('[data-test="role-item"]').eq(1).should("include.text", "Staff");
     cy.get('[data-test="role-item"]').eq(2).should("include.text", "Students");
 
@@ -249,7 +252,10 @@ describe("Admin roles index", function () {
 
     // Check that role is shown and contains the correct data
     cy.get('[data-test="role-item"]').should("have.length", 1);
-    cy.get('[data-test="role-item"]').eq(0).should("include.text", "Superuser");
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser");
 
     // Check that correct pagination is active
     cy.get('[data-test="paginator-page"]')
@@ -595,7 +601,10 @@ describe("Admin roles index", function () {
 
     // Check that correct role is shown
     cy.get('[data-test="role-item"]').should("have.length", 1);
-    cy.get('[data-test="role-item"]').eq(0).should("include.text", "Superuser");
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser");
 
     // Check that correct pagination is active
     cy.get('[data-test="paginator-page"]')
@@ -680,7 +689,10 @@ describe("Admin roles index", function () {
 
     // Check that correct role is shown
     cy.get('[data-test="role-item"]').should("have.length", 1);
-    cy.get('[data-test="role-item"]').eq(0).should("include.text", "Superuser");
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser");
   });
 
   it("check button visibility with view permission", function () {
diff --git a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
index 82c6c9615..386a36c97 100644
--- a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
@@ -882,6 +882,7 @@ describe("Admin room types edit", function () {
         cy.get(".multiselect__option")
           .eq(0)
           .should("include.text", "Superuser")
+          .and("include.text", "admin.roles.superuser")
           .and("be.visible");
         cy.get(".multiselect__option")
           .eq(1)
diff --git a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
index 19fe9d0f8..8871dde10 100644
--- a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
@@ -763,6 +763,7 @@ describe("Admin room types new", function () {
         cy.get(".multiselect__option")
           .eq(0)
           .should("include.text", "Superuser")
+          .and("include.text", "admin.roles.superuser")
           .and("be.visible");
         cy.get(".multiselect__option")
           .eq(1)
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index f46e11d83..d7daa844d 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -194,6 +194,7 @@ describe("Admin users new", function () {
     cy.get(".multiselect__option")
       .eq(0)
       .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser")
       .and("be.visible");
     cy.get(".multiselect__option")
       .eq(1)
@@ -394,6 +395,7 @@ describe("Admin users new", function () {
     cy.get(".multiselect__option")
       .eq(0)
       .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser")
       .and("be.visible");
     cy.get(".multiselect__option")
       .eq(1)

From bd2f05bdd9ea8784409b97a8cc6c41b16b94a7f9 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Mon, 27 Jan 2025 09:42:34 +0100
Subject: [PATCH 64/79] Fix access superuser attribute

---
 .../js/components/UserTabSecurityRolesAndPermissionsSection.vue | 2 +-
 resources/js/views/AdminUsersNew.vue                            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue b/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue
index 8bb41fa09..552a8d4b4 100644
--- a/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue
+++ b/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue
@@ -16,7 +16,7 @@
               isBusy || viewOnly || !userPermissions.can('editUserRole', model)
             "
             :automatic-roles="automaticRoles"
-            :disable-superuser="!authStore.currentUser.superuser"
+            :disable-superuser="!authStore.currentUser?.superuser"
             @loading-error="(value) => (rolesLoadingError = value)"
             @busy="(value) => (rolesLoading = value)"
           />
diff --git a/resources/js/views/AdminUsersNew.vue b/resources/js/views/AdminUsersNew.vue
index eabc017de..88432c455 100644
--- a/resources/js/views/AdminUsersNew.vue
+++ b/resources/js/views/AdminUsersNew.vue
@@ -103,7 +103,7 @@
                 aria-labelledby="roles-label"
                 :invalid="formErrors.fieldInvalid('roles', true)"
                 :disabled="isBusy"
-                :disable-superuser="!authStore.currentUser.superuser"
+                :disable-superuser="!authStore.currentUser?.superuser"
                 @loading-error="(value) => (rolesLoadingError = value)"
                 @busy="(value) => (rolesLoading = value)"
               />

From b15d9a75b26e1b61acd2e692d4ddac697f66a8a6 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Mon, 27 Jan 2025 09:43:04 +0100
Subject: [PATCH 65/79] Fix accessing multiselect ref

---
 resources/js/components/RoleSelect.vue | 6 +++---
 resources/js/views/AdminUsersIndex.vue | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/RoleSelect.vue b/resources/js/components/RoleSelect.vue
index 6ae39de9a..76ba808fd 100644
--- a/resources/js/components/RoleSelect.vue
+++ b/resources/js/components/RoleSelect.vue
@@ -1,7 +1,7 @@
 <template>
   <InputGroup>
     <multiselect
-      ref="rolesMultiselectRef"
+      ref="roles-multiselect"
       :aria-labelledby="ariaLabelledby"
       data-test="role-dropdown"
       :placeholder="$t('admin.roles.select_roles')"
@@ -94,7 +94,7 @@
 </template>
 
 <script setup>
-import { onBeforeMount, ref, watch } from "vue";
+import { onBeforeMount, ref, useTemplateRef, watch } from "vue";
 import { useApi } from "../composables/useApi.js";
 import { Multiselect } from "vue-multiselect";
 
@@ -139,7 +139,7 @@ const loading = ref(false);
 const loadingError = ref(false);
 const currentPage = ref(1);
 const hasNextPage = ref(false);
-const rolesMultiselectRef = ref(null);
+const rolesMultiselectRef = useTemplateRef("roles-multiselect");
 
 watch(
   () => props.modelValue,
diff --git a/resources/js/views/AdminUsersIndex.vue b/resources/js/views/AdminUsersIndex.vue
index d73618766..a8b8eeae1 100644
--- a/resources/js/views/AdminUsersIndex.vue
+++ b/resources/js/views/AdminUsersIndex.vue
@@ -22,7 +22,7 @@
       <div class="flex flex-col justify-end gap-2 md:flex-row">
         <InputGroup class="min-w-80 shrink-0 grow">
           <multiselect
-            ref="rolesMultiselectRef"
+            ref="roles-multiselect"
             v-model="filter.role"
             :placeholder="$t('admin.users.role_filter')"
             track-by="id"
@@ -248,7 +248,7 @@
 
 <script setup>
 import { useApi } from "../composables/useApi.js";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, useTemplateRef } from "vue";
 import { useUserPermissions } from "../composables/useUserPermission.js";
 import { useSettingsStore } from "../stores/settings";
 import { Multiselect } from "vue-multiselect";
@@ -284,7 +284,7 @@ const rolesLoading = ref(false);
 const rolesLoadingError = ref(false);
 const rolesCurrentPage = ref(1);
 const rolesHasNextPage = ref(false);
-const rolesMultiselectRef = ref();
+const rolesMultiselectRef = useTemplateRef("roles-multiselect");
 
 /**
  * Loads the user, part of roles that can be selected and enables an event listener

From 059f88f56e0f390ace3de48aa5b3738ae5462220 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Tue, 28 Jan 2025 13:35:59 +0100
Subject: [PATCH 66/79] Add banner tests

---
 tests/Frontend/e2e/Banner.cy.js | 177 ++++++++++++++++++++++++++++++++
 1 file changed, 177 insertions(+)
 create mode 100644 tests/Frontend/e2e/Banner.cy.js

diff --git a/tests/Frontend/e2e/Banner.cy.js b/tests/Frontend/e2e/Banner.cy.js
new file mode 100644
index 000000000..83ddca96b
--- /dev/null
+++ b/tests/Frontend/e2e/Banner.cy.js
@@ -0,0 +1,177 @@
+describe("Banner", function () {
+  beforeEach(function () {
+    cy.init();
+  });
+
+  it("check banner shown when enabled", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.banner.enabled = true;
+      config.data.banner.title = "Banner title";
+      config.data.banner.icon = "fa-solid fa-door-open";
+      config.data.banner.message = "Banner text message";
+      config.data.banner.link = "https://example.org/?foo=a&bar=b";
+      config.data.banner.link_text = "Example link";
+      config.data.banner.link_style = "link";
+      config.data.banner.link_target = "blank";
+      config.data.banner.color = "#FFFFFF";
+      config.data.banner.background = "#000000";
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+
+    cy.wait("@configRequest");
+
+    // Check that banner is shown correctly
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("include", "background-color: rgb(0, 0, 0);");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "https://example.org/?foo=a&bar=b")
+        .and("have.attr", "target", "_blank")
+        .and("have.text", "Example link");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("have.attr", "style")
+        .and("include", "color: rgb(255, 255, 255)");
+    });
+
+    // Reload with different banner settings
+    cy.fixture("config.json").then((config) => {
+      config.data.banner.enabled = true;
+      config.data.banner.title = "New banner title";
+      config.data.banner.message = "Banner message";
+      config.data.banner.color = "#000000";
+      config.data.banner.background = "#ef4444";
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+
+      cy.reload();
+
+      cy.wait("@configRequest");
+
+      // Check that banner is shown correctly
+      cy.get('[data-test="app-banner"]')
+        .should("have.attr", "style")
+        .and("include", "color: rgb(0, 0, 0);")
+        .and("include", "background-color: rgb(239, 68, 68);");
+      cy.get('[data-test="app-banner"]').within(() => {
+        cy.get('[data-test="banner-title"]')
+          .should("be.visible")
+          .and("include.text", "New banner title");
+        cy.get('[data-test="banner-icon"]').should("not.exist");
+        cy.get('[data-test="banner-message"]')
+          .should("be.visible")
+          .and("have.text", "Banner message");
+        cy.get('[data-test="banner-link-button"]').should("not.exist");
+      });
+    });
+  });
+
+  it("check banner link works correctly", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.banner.enabled = true;
+      config.data.banner.title = "Banner title";
+      config.data.banner.link = Cypress.config("baseUrl") + "/rooms";
+      config.data.banner.link_text = "Room link";
+      config.data.banner.link_style = "danger";
+      config.data.banner.link_target = "self";
+      config.data.banner.color = "#FFFFFF";
+      config.data.banner.background = "#000000";
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+
+    cy.interceptRoomIndexRequests();
+
+    // Check that banner is shown correctly
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("include", "background-color: rgb(0, 0, 0);");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]').should("not.exist");
+      cy.get('[data-test="banner-message"]')
+        .should("not.be.visible")
+        .and("have.text", "");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", Cypress.config("baseUrl") + "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Room link");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "danger")
+        .and("not.have.class", "p-0 underline");
+
+      cy.get('[data-test="banner-link-button"]').click();
+    });
+
+    // Check that redirect worked
+    cy.url().should("contain", "/rooms");
+
+    // Check that banner is still shown
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("include", "background-color: rgb(0, 0, 0);");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]').should("not.exist");
+      cy.get('[data-test="banner-message"]')
+        .should("not.be.visible")
+        .and("have.text", "");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", Cypress.config("baseUrl") + "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Room link");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "danger")
+        .and("not.have.class", "p-0 underline");
+    });
+  });
+
+  it("check banner hidden if disabled", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.banner.enabled = false;
+      config.data.banner.title = "Banner title";
+      config.data.banner.icon = "fa-solid fa-door-open";
+      config.data.banner.message = "Banner text message";
+      config.data.banner.link = Cypress.config("baseUrl") + "/rooms";
+      config.data.banner.link_text = "Rooms";
+      config.data.banner.link_style = "link";
+      config.data.banner.link_target = "blank";
+      config.data.banner.color = "#FFFFFF";
+      config.data.banner.background = "#000000";
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+
+    cy.wait("@configRequest");
+
+    // Check that banner is shown correctly
+    cy.get('[data-test="app-banner"]').should("not.exist");
+  });
+});

From c4f9963addcd002c1b10d580afff98bdae676315 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Tue, 28 Jan 2025 21:59:56 +0100
Subject: [PATCH 67/79] Add Footer and helpButton tests

---
 resources/js/components/AppFooter.vue       |   5 +
 tests/Frontend/e2e/Footer.cy.js             | 339 ++++++++++++++++++++
 tests/Frontend/e2e/GeneralApplication.cy.js |  34 ++
 3 files changed, 378 insertions(+)
 create mode 100644 tests/Frontend/e2e/Footer.cy.js

diff --git a/resources/js/components/AppFooter.vue b/resources/js/components/AppFooter.vue
index 9f7f4f545..f4c195217 100644
--- a/resources/js/components/AppFooter.vue
+++ b/resources/js/components/AppFooter.vue
@@ -9,6 +9,7 @@
       "
       ref="footer_container"
       class="border-t bg-white p-2 border-surface dark:bg-surface-900"
+      data-test="app-footer"
     >
       <div class="container">
         <div
@@ -21,6 +22,7 @@
               link
               :href="settingsStore.getSetting('general.legal_notice_url')"
               class="p-0 text-sm"
+              data-test="legal-notice-button"
             >
               {{ $t("app.footer.legal_notice") }}
             </Button>
@@ -41,6 +43,7 @@
               rel="privacy-policy nofollow"
               :href="settingsStore.getSetting('general.privacy_policy_url')"
               class="p-0 text-sm"
+              data-test="privacy-policy-button"
             >
               {{ $t("app.footer.privacy_policy") }}
             </Button>
@@ -53,11 +56,13 @@
               class="p-0 text-sm"
               href="https://github.com/THM-Health/PILOS"
               target="_blank"
+              data-test="github-button"
               ><raw-text>PILOS</raw-text></Button
             >
             <span
               v-if="settingsStore.getSetting('general.version')"
               class="ml-2 text-sm"
+              data-test="version"
             >
               {{ $t("app.version") }}
               {{ settingsStore.getSetting("general.version") }}
diff --git a/tests/Frontend/e2e/Footer.cy.js b/tests/Frontend/e2e/Footer.cy.js
new file mode 100644
index 000000000..75b6e6455
--- /dev/null
+++ b/tests/Frontend/e2e/Footer.cy.js
@@ -0,0 +1,339 @@
+describe("Footer", function () {
+  beforeEach(function () {
+    cy.init();
+  });
+
+  it("check footer shown correctly with 2 links, version and no whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "https://example.org/legal";
+      config.data.general.privacy_policy_url = "https://example.org/privacy";
+      config.data.general.version = "1.0.0";
+      config.data.general.whitelabel = false;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.legal_notice")
+          .and("have.attr", "href", "https://example.org/legal");
+
+        cy.get('[data-test="privacy-policy-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.privacy_policy")
+          .and("have.attr", "href", "https://example.org/privacy");
+
+        cy.get('[data-test="github-button"]')
+          .should("be.visible")
+          .and("have.text", "PILOS")
+          .and("have.attr", "href", "https://github.com/THM-Health/PILOS");
+        cy.get('[data-test="version"]')
+          .should("be.visible")
+          .and("have.text", "app.version 1.0.0");
+      });
+  });
+
+  it("check footer shown correctly with only legal notice link, no version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "https://example.org/legal";
+      config.data.general.privacy_policy_url = "";
+      config.data.general.version = null;
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.legal_notice")
+          .and("have.attr", "href", "https://example.org/legal");
+
+        cy.get('[data-test="privacy-policy-button"]').should("not.exist");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]').should("not.exist");
+      });
+  });
+
+  it("check footer shown correctly with only privacy policy link, no version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "";
+      config.data.general.privacy_policy_url = "https://example.org/privacy";
+      config.data.general.version = null;
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]').should("not.exist");
+
+        cy.get('[data-test="privacy-policy-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.privacy_policy")
+          .and("have.attr", "href", "https://example.org/privacy");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]').should("not.exist");
+      });
+  });
+
+  it("check footer shown correctly with no links, no version and no whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "";
+      config.data.general.privacy_policy_url = "";
+      config.data.general.version = null;
+      config.data.general.whitelabel = false;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]').should("not.exist");
+
+        cy.get('[data-test="privacy-policy-button"]').should("not.exist");
+
+        cy.get('[data-test="github-button"]')
+          .should("be.visible")
+          .and("have.text", "PILOS")
+          .and("have.attr", "href", "https://github.com/THM-Health/PILOS");
+        cy.get('[data-test="version"]').should("not.exist");
+      });
+  });
+
+  it("check footer shown correctly with no links, version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "";
+      config.data.general.privacy_policy_url = "";
+      config.data.general.version = "1.0.0";
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]').should("not.exist");
+
+        cy.get('[data-test="privacy-policy-button"]').should("not.exist");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]')
+          .should("be.visible")
+          .and("have.text", "app.version 1.0.0");
+      });
+  });
+
+  it("check footer shown correctly with 2 links, version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "https://example.org/legal";
+      config.data.general.privacy_policy_url = "https://example.org/privacy";
+      config.data.general.version = "1.0.0";
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.legal_notice")
+          .and("have.attr", "href", "https://example.org/legal");
+
+        cy.get('[data-test="privacy-policy-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.privacy_policy")
+          .and("have.attr", "href", "https://example.org/privacy");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]')
+          .should("be.visible")
+          .and("have.text", "app.version 1.0.0");
+      });
+  });
+
+  it("check footer shown correctly with 2 links, no version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "https://example.org/legal";
+      config.data.general.privacy_policy_url = "https://example.org/privacy";
+      config.data.general.version = "";
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.legal_notice")
+          .and("have.attr", "href", "https://example.org/legal");
+
+        cy.get('[data-test="privacy-policy-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.privacy_policy")
+          .and("have.attr", "href", "https://example.org/privacy");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]').should("not.exist");
+      });
+  });
+
+  it("check footer hidden with no links, no version and whitelabel", function () {
+    // Reload without footer
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "";
+      config.data.general.privacy_policy_url = "";
+      config.data.general.version = "";
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    cy.get('[data-test="app-footer"]').should("not.exist");
+  });
+
+  it("check footer shown correctly with only legal notice link, version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "https://example.org/legal";
+      config.data.general.privacy_policy_url = "";
+      config.data.general.version = "1.2.0";
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.legal_notice")
+          .and("have.attr", "href", "https://example.org/legal");
+
+        cy.get('[data-test="privacy-policy-button"]').should("not.exist");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]')
+          .should("be.visible")
+          .and("have.text", "app.version 1.2.0");
+      });
+  });
+
+  it("check footer shown correctly with only privacy policy link, version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "";
+      config.data.general.privacy_policy_url = "https://example.org/privacy";
+      config.data.general.version = "2.1.0";
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]').should("not.exist");
+
+        cy.get('[data-test="privacy-policy-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.privacy_policy")
+          .and("have.attr", "href", "https://example.org/privacy");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]')
+          .should("be.visible")
+          .and("have.text", "app.version 2.1.0");
+      });
+  });
+
+  it("open legal notice link", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "https://example.org/?foo=a&bar=b";
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    cy.get('[data-test="legal-notice-button"]').click();
+
+    cy.origin("https://example.org", () => {
+      cy.url().should("eq", "https://example.org/?foo=a&bar=b");
+    });
+  });
+
+  it("open privacy policy link", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.privacy_policy_url =
+        "https://example.org/?foo=a&bar=b";
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    cy.get('[data-test="privacy-policy-button"]').click();
+
+    cy.origin("https://example.org", () => {
+      cy.url().should("eq", "https://example.org/?foo=a&bar=b");
+    });
+  });
+});
diff --git a/tests/Frontend/e2e/GeneralApplication.cy.js b/tests/Frontend/e2e/GeneralApplication.cy.js
index befcc868c..974d36b08 100644
--- a/tests/Frontend/e2e/GeneralApplication.cy.js
+++ b/tests/Frontend/e2e/GeneralApplication.cy.js
@@ -186,4 +186,38 @@ describe("General", function () {
     // Check if the welcome page is shown
     cy.get("h1").should("be.visible").and("contain", "home.title");
   });
+
+  it("check help button if help url specified", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.help_url = "https://example.org/?foo=a&bar=b";
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+    cy.visit("/");
+
+    cy.get(".fa-solid.fa-circle-question")
+      .should("be.visible")
+      .parent()
+      .should("have.attr", "href", "https://example.org/?foo=a&bar=b")
+      .and("have.attr", "target", "_blank")
+      .invoke("removeAttr", "target");
+
+    cy.get(".fa-solid.fa-circle-question").click();
+
+    // Check that redirect worked
+    cy.origin("https://example.org", () => {
+      cy.url().should("eq", "https://example.org/?foo=a&bar=b");
+    });
+  });
+
+  it("check help button hidden if help url not specified", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.help_url = "";
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+    cy.visit("/");
+
+    cy.get(".fa-solid.fa-circle-question").should("not.exist");
+  });
 });

From 5d1263a300dffe25ba6017045d59fcce2a9dd5ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 29 Jan 2025 08:03:27 +0100
Subject: [PATCH 68/79] Add checks for breadcrumbs

---
 tests/Frontend/e2e/AdminRolesEdit.cy.js       | 133 ++++++++++++++++++
 tests/Frontend/e2e/AdminRolesIndex.cy.js      |   5 +
 tests/Frontend/e2e/AdminRolesNew.cy.js        |  15 ++
 tests/Frontend/e2e/AdminRolesView.cy.js       |   6 +
 tests/Frontend/e2e/AdminRoomTypesEdit.cy.js   |  60 ++++++++
 tests/Frontend/e2e/AdminRoomTypesIndex.cy.js  |   5 +
 tests/Frontend/e2e/AdminRoomTypesNew.cy.js    |  21 +++
 tests/Frontend/e2e/AdminRoomTypesView.cy.js   |   9 ++
 tests/Frontend/e2e/AdminServerPoolsEdit.cy.js |  59 ++++++++
 .../Frontend/e2e/AdminServerPoolsIndex.cy.js  |   5 +
 tests/Frontend/e2e/AdminServerPoolsNew.cy.js  |  12 ++
 tests/Frontend/e2e/AdminServerPoolsView.cy.js |   9 ++
 tests/Frontend/e2e/AdminServersEdit.cy.js     |  59 ++++++++
 tests/Frontend/e2e/AdminServersIndex.cy.js    |   5 +
 tests/Frontend/e2e/AdminServersNew.cy.js      |  21 +++
 tests/Frontend/e2e/AdminServersView.cy.js     |   9 ++
 tests/Frontend/e2e/AdminSettingsGeneral.cy.js |  10 ++
 tests/Frontend/e2e/AdminUsersEdit.cy.js       |   9 ++
 tests/Frontend/e2e/AdminUsersEditBase.cy.js   |  45 ++++++
 tests/Frontend/e2e/AdminUsersIndex.cy.js      |   5 +
 tests/Frontend/e2e/AdminUsersNew.cy.js        |  24 +++-
 tests/Frontend/e2e/AdminUsersView.cy.js       |   9 ++
 22 files changed, 534 insertions(+), 1 deletion(-)

diff --git a/tests/Frontend/e2e/AdminRolesEdit.cy.js b/tests/Frontend/e2e/AdminRolesEdit.cy.js
index 6fc11a023..36768408a 100644
--- a/tests/Frontend/e2e/AdminRolesEdit.cy.js
+++ b/tests/Frontend/e2e/AdminRolesEdit.cy.js
@@ -88,6 +88,12 @@ describe("Admin roles edit", function () {
       .and("not.be.disabled")
       .and("include.text", "app.save");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should("include.text", 'admin.breakcrumbs.roles.edit_{"name":"Staff"}');
+
     // Change role settings
     cy.get('[data-test="name-field"]')
       .should("be.visible")
@@ -97,6 +103,12 @@ describe("Admin roles edit", function () {
         cy.get("#name").type("Standard role");
       });
 
+    // Check that breadcrumbs stays the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should("include.text", 'admin.breakcrumbs.roles.edit_{"name":"Staff"}');
+
     cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
     cy.get('[data-test="room-limit-field"]')
       .should("be.visible")
@@ -494,6 +506,15 @@ describe("Admin roles edit", function () {
     // Check that role page is shown
     cy.url().should("include", "/admin/roles/2");
     cy.url().should("not.include", "/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.roles.view_{"name":"Standard role"}',
+      );
   });
 
   it("edit role with different room limits", function () {
@@ -1362,6 +1383,12 @@ describe("Admin roles edit", function () {
 
     cy.wait("@roleRequest");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should("include.text", 'admin.breakcrumbs.roles.edit_{"name":"Staff"}');
+
     // Check with 422 error
     cy.intercept("PUT", "api/v1/roles/2", {
       statusCode: 422,
@@ -1458,6 +1485,15 @@ describe("Admin roles edit", function () {
 
     cy.get('[data-test="stale-role-dialog"]').should("not.exist");
 
+    // Check that breadcrumbs is updated
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.roles.edit_{"name":"Standard role"}',
+      );
+
     // Check that correct data is shown
     cy.get("#name").should("have.value", "Standard role");
     cy.get("#unlimited").should("be.checked");
@@ -1554,6 +1590,11 @@ describe("Admin roles edit", function () {
         body: role,
       }).as("saveChangesRequest");
 
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
       cy.get('[data-test="stale-dialog-accept-button"]').click();
 
       // Check that correct data is sent
@@ -1571,6 +1612,15 @@ describe("Admin roles edit", function () {
     cy.url().should("include", "/admin/roles/2");
     cy.url().should("not.include", "/edit");
 
+    // Check that breadcrumbs stays the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.roles.view_{"name":"Standard role"}',
+      );
+
     // Reload
     cy.visit("/admin/roles/2/edit");
 
@@ -1704,6 +1754,89 @@ describe("Admin roles edit", function () {
     cy.checkToastMessage("app.flash.unauthenticated");
   });
 
+  it("load role errors", function () {
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("roleRequest");
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 200,
+      fixture: "role.json",
+    }).as("roleRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload with 404 error
+    cy.interceptAdminRolesIndexRequests();
+
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("roleRequest");
+
+    cy.reload();
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/roles/2/edit");
+    cy.url().should("include", "/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 401,
+    }).as("roleRequest");
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
   it("check button visibility with delete permission", function () {
     cy.fixture("currentUser.json").then((currentUser) => {
       currentUser.data.permissions = [
diff --git a/tests/Frontend/e2e/AdminRolesIndex.cy.js b/tests/Frontend/e2e/AdminRolesIndex.cy.js
index 1c4372969..ffac96514 100644
--- a/tests/Frontend/e2e/AdminRolesIndex.cy.js
+++ b/tests/Frontend/e2e/AdminRolesIndex.cy.js
@@ -76,6 +76,11 @@ describe("Admin roles index", function () {
 
     cy.get('[data-test="roles-add-buton"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index");
+
     // Check that table headers are shown correctly
     cy.get('[data-test="role-header-cell"]').should("have.length", 2);
 
diff --git a/tests/Frontend/e2e/AdminRolesNew.cy.js b/tests/Frontend/e2e/AdminRolesNew.cy.js
index 784954398..c9971f4a0 100644
--- a/tests/Frontend/e2e/AdminRolesNew.cy.js
+++ b/tests/Frontend/e2e/AdminRolesNew.cy.js
@@ -53,6 +53,12 @@ describe("Admin roles new", function () {
     cy.get('[data-test="roles-edit-button"]').should("not.exist");
     cy.get('[data-test="roles-delete-button"]').should("not.exist");
 
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should("include.text", "admin.breakcrumbs.roles.new");
+
     cy.get('[data-test="name-field"]')
       .should("be.visible")
       .and("include.text", "app.model_name")
@@ -473,6 +479,15 @@ describe("Admin roles new", function () {
 
     // Check that role page is shown
     cy.url().should("include", "/admin/roles/40");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.roles.view_{"name":"Standard role"}',
+      );
   });
 
   it("add new role with different room limits", function () {
diff --git a/tests/Frontend/e2e/AdminRolesView.cy.js b/tests/Frontend/e2e/AdminRolesView.cy.js
index 75b306180..316571ec8 100644
--- a/tests/Frontend/e2e/AdminRolesView.cy.js
+++ b/tests/Frontend/e2e/AdminRolesView.cy.js
@@ -74,6 +74,12 @@ describe("Admin roles view", function () {
     cy.get('[data-test="roles-delete-button"]').should("not.exist");
     cy.get('[data-test="roles-save-button"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should("include.text", 'admin.breakcrumbs.roles.view_{"name":"Staff"}');
+
     // Check that role data is shown correctly
     cy.get('[data-test="name-field"]')
       .should("be.visible")
diff --git a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
index 386a36c97..8f72f7239 100644
--- a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
@@ -86,6 +86,15 @@ describe("Admin room types edit", function () {
       .and("not.be.disabled")
       .and("include.text", "app.save");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.edit_{"name":"Exam"}',
+      );
+
     // Change room type settings
     cy.get('[data-test="room-type-name-field"]')
       .should("be.visible")
@@ -95,6 +104,16 @@ describe("Admin room types edit", function () {
         cy.get("#room-type-name").type("Exam 01");
       });
 
+    // Check that breadcrumbs stay the same
+
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.edit_{"name":"Exam"}',
+      );
+
     cy.get('[data-test="description-field"]')
       .should("be.visible")
       .and("include.text", "app.description")
@@ -817,6 +836,15 @@ describe("Admin room types edit", function () {
     // Check that room type view page is shown
     cy.url().should("include", "/admin/room_types/3");
     cy.url().should("not.include", "/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.view_{"name":"Exam 01"}',
+      );
   });
 
   it("edit room type with restrictions", function () {
@@ -1154,6 +1182,15 @@ describe("Admin room types edit", function () {
     cy.wait("@serverPoolsRequest");
     cy.wait("@rolesRequest");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.edit_{"name":"Exam"}',
+      );
+
     // Check with 422 error
     cy.intercept("PUT", "api/v1/roomTypes/3", {
       statusCode: 422,
@@ -1692,6 +1729,15 @@ describe("Admin room types edit", function () {
 
     cy.get('[data-test="stale-room-type-dialog"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.edit_{"name":"Exam 01"}',
+      );
+
     // Check that correct data is shown
     cy.get("#room-type-name").should("have.value", "Exam 01");
     cy.get("#description").should(
@@ -1955,6 +2001,11 @@ describe("Admin room types edit", function () {
         body: roomType,
       }).as("saveChangesRequest");
 
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+
       cy.get('[data-test="stale-dialog-accept-button"]').click();
 
       const roomTypeRequestData = { ...roomType.data };
@@ -1973,6 +2024,15 @@ describe("Admin room types edit", function () {
     cy.url().should("include", "/admin/room_types/3");
     cy.url().should("not.include", "/edit");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.view_{"name":"Exam 01"}',
+      );
+
     // Reload
     cy.visit("/admin/room_types/3/edit");
 
diff --git a/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js b/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
index ee436c4b7..48b796626 100644
--- a/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
@@ -55,6 +55,11 @@ describe("Admin room types index", function () {
 
     cy.get('[data-test="room-types-add-button"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index");
+
     // Check that table headers are displayed correctly
     cy.get('[data-test="room-type-header-cell"]').should("have.length", 2);
 
diff --git a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
index 8871dde10..42314d63d 100644
--- a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
@@ -56,6 +56,12 @@ describe("Admin room types new", function () {
     cy.get('[data-test="room-types-edit-button"]').should("not.exist");
     cy.get('[data-test="room-types-delete-button"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should("include.text", "admin.breakcrumbs.room_types.new");
+
     cy.get('[data-test="room-type-name-field"]')
       .should("be.visible")
       .and("include.text", "app.model_name")
@@ -63,6 +69,12 @@ describe("Admin room types new", function () {
         cy.get("#room-type-name").should("have.value", "").type("Exam 01");
       });
 
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should("include.text", "admin.breakcrumbs.room_types.new");
+
     cy.get('[data-test="description-field"]')
       .should("be.visible")
       .and("include.text", "app.description")
@@ -709,6 +721,15 @@ describe("Admin room types new", function () {
 
     // Check that room type page is shown
     cy.url().should("include", "/admin/room_types/30");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.view_{"name":"Exam 01"}',
+      );
   });
 
   it("add new room type with restrictions", function () {
diff --git a/tests/Frontend/e2e/AdminRoomTypesView.cy.js b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
index 6480e36d1..de7fd19f5 100644
--- a/tests/Frontend/e2e/AdminRoomTypesView.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
@@ -71,6 +71,15 @@ describe("Admin room types view", function () {
     cy.get('[data-test="room-types-delete-button"]').should("not.exist");
     cy.get('[data-test="room-types-save-button"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.view_{"name":"Exam"}',
+      );
+
     // Check that room type data is shown correctly
     cy.get('[data-test="room-type-name-field"]')
       .should("be.visible")
diff --git a/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
index 0f0aab094..1d19cafd6 100644
--- a/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
@@ -103,6 +103,15 @@ describe("Admin server pools edit", function () {
       .and("not.be.disabled")
       .and("include.text", "app.save");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.edit_{"name":"Test"}',
+      );
+
     // Change server pool settings
     cy.get('[data-test="name-field"]')
       .should("be.visible")
@@ -112,6 +121,15 @@ describe("Admin server pools edit", function () {
         cy.get("#name").type("Server Pool 1");
       });
 
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.edit_{"name":"Test"}',
+      );
+
     cy.get('[data-test="description-field"]')
       .should("be.visible")
       .and("include.text", "app.description")
@@ -348,11 +366,29 @@ describe("Admin server pools edit", function () {
     // Check that redirect to server pool view worked
     cy.url().should("include", "/admin/server_pools/1");
     cy.url().should("not.include", "/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.view_{"name":"Server Pool 1"}',
+      );
   });
 
   it("save changes errors", function () {
     cy.visit("/admin/server_pools/1/edit");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.edit_{"name":"Test"}',
+      );
+
     // Set values
     cy.get("#name").clear();
     cy.get("#description").clear();
@@ -473,6 +509,15 @@ describe("Admin server pools edit", function () {
 
     cy.get('[data-test="stale-server-pool-dialog"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.edit_{"name":"Server Pool 1"}',
+      );
+
     // Check that correct data is shown
     cy.get("#name").should("have.value", "Server Pool 1");
     cy.get("#description").should("have.value", "Server Pool 1 description");
@@ -528,6 +573,11 @@ describe("Admin server pools edit", function () {
         body: serverPool,
       }).as("saveChangesRequest");
 
+      cy.intercept("GET", "api/v1/serverPools/1", {
+        statusCode: 200,
+        body: serverPool,
+      }).as("serverPoolRequest");
+
       cy.get('[data-test="stale-dialog-accept-button"]').click();
 
       const serverPoolRequestData = { ...serverPool.data };
@@ -543,6 +593,15 @@ describe("Admin server pools edit", function () {
     cy.url().should("include", "/admin/server_pools/1");
     cy.url().should("not.include", "/edit");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.view_{"name":"Server Pool 1"}',
+      );
+
     // Reload
     cy.visit("/admin/server_pools/1/edit");
 
diff --git a/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
index 98fee9e25..270d126d0 100644
--- a/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
@@ -75,6 +75,11 @@ describe("Admin server pools index", function () {
 
     cy.get('[data-test="server-pools-add-button"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index");
+
     // Check that table headers are displayed correctly
     cy.get('[data-test="server-pool-header-cell"]').should("have.length", 3);
 
diff --git a/tests/Frontend/e2e/AdminServerPoolsNew.cy.js b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
index cffeef8e8..392a5e0f0 100644
--- a/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
@@ -58,6 +58,12 @@ describe("Admin server pools new", function () {
     cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
     cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should("include.text", "admin.breakcrumbs.server_pools.new");
+
     cy.get('[data-test="name-field"]')
       .should("be.visible")
       .and("include.text", "app.model_name")
@@ -65,6 +71,12 @@ describe("Admin server pools new", function () {
         cy.get("#name").should("have.value", "").type("Server Pool 1");
       });
 
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should("include.text", "admin.breakcrumbs.server_pools.new");
+
     cy.get('[data-test="description-field"]')
       .should("be.visible")
       .and("include.text", "app.description")
diff --git a/tests/Frontend/e2e/AdminServerPoolsView.cy.js b/tests/Frontend/e2e/AdminServerPoolsView.cy.js
index 5bb31bb96..a9af1d65b 100644
--- a/tests/Frontend/e2e/AdminServerPoolsView.cy.js
+++ b/tests/Frontend/e2e/AdminServerPoolsView.cy.js
@@ -75,6 +75,15 @@ describe("Admin server pools view", function () {
     cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
     cy.get('[data-test="server-pools-save-button"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.view_{"name":"Test"}',
+      );
+
     // Check that server pool data is shown correctly
     cy.get('[data-test="name-field"]')
       .should("be.visible")
diff --git a/tests/Frontend/e2e/AdminServersEdit.cy.js b/tests/Frontend/e2e/AdminServersEdit.cy.js
index c849e4f05..4b21063e4 100644
--- a/tests/Frontend/e2e/AdminServersEdit.cy.js
+++ b/tests/Frontend/e2e/AdminServersEdit.cy.js
@@ -88,6 +88,15 @@ describe("Admin servers edit", function () {
       .and("not.be.disabled")
       .and("include.text", "app.save");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.edit_{"name":"Server 01"}',
+      );
+
     // Change server settings
     cy.get('[data-test="name-field"]')
       .should("be.visible")
@@ -97,6 +106,15 @@ describe("Admin servers edit", function () {
         cy.get("#name").type("Server 02");
       });
 
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.edit_{"name":"Server 01"}',
+      );
+
     cy.get('[data-test="description-field"]')
       .should("be.visible")
       .and("include.text", "app.description")
@@ -298,11 +316,29 @@ describe("Admin servers edit", function () {
     // Check that redirect to server view worked
     cy.url().should("include", "/admin/servers/1");
     cy.url().should("not.include", "/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.view_{"name":"Server 02"}',
+      );
   });
 
   it("save changes errors", function () {
     cy.visit("/admin/servers/1/edit");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.edit_{"name":"Server 01"}',
+      );
+
     // Check with 422 error
     cy.intercept("PUT", "api/v1/servers/1", {
       statusCode: 422,
@@ -470,6 +506,15 @@ describe("Admin servers edit", function () {
 
     cy.get('[data-test="stale-server-dialog"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.edit_{"name":"Server 03"}',
+      );
+
     // Check that correct data is shown
     cy.get("#name").should("have.value", "Server 03");
     cy.get("#description").should(
@@ -542,6 +587,11 @@ describe("Admin servers edit", function () {
         body: server,
       }).as("saveChangesRequest");
 
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+
       cy.get('[data-test="stale-dialog-accept-button"]').click();
 
       // Check that correct data is sent
@@ -554,6 +604,15 @@ describe("Admin servers edit", function () {
     cy.url().should("include", "/admin/servers/1");
     cy.url().should("not.include", "/edit");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.view_{"name":"Server 03"}',
+      );
+
     // Reload
     cy.visit("/admin/servers/1/edit");
 
diff --git a/tests/Frontend/e2e/AdminServersIndex.cy.js b/tests/Frontend/e2e/AdminServersIndex.cy.js
index f58fe14da..6ea6f0d1c 100644
--- a/tests/Frontend/e2e/AdminServersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminServersIndex.cy.js
@@ -77,6 +77,11 @@ describe("Admin servers index", function () {
 
     cy.wait("@serversRequest");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index");
+
     // Check that loading is over
     cy.get('[data-test="overlay"]').should("not.exist");
 
diff --git a/tests/Frontend/e2e/AdminServersNew.cy.js b/tests/Frontend/e2e/AdminServersNew.cy.js
index cd828e0b9..848c8e32b 100644
--- a/tests/Frontend/e2e/AdminServersNew.cy.js
+++ b/tests/Frontend/e2e/AdminServersNew.cy.js
@@ -57,6 +57,12 @@ describe("Admin servers view", function () {
     cy.get('[data-test="servers-edit-button"]').should("not.exist");
     cy.get('[data-test="servers-delete-button"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should("include.text", "admin.breakcrumbs.servers.new");
+
     cy.get('[data-test="name-field"]')
       .should("be.visible")
       .and("include.text", "app.model_name")
@@ -64,6 +70,12 @@ describe("Admin servers view", function () {
         cy.get("#name").should("have.value", "").type("Server 01");
       });
 
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should("include.text", "admin.breakcrumbs.servers.new");
+
     cy.get('[data-test="description-field"]')
       .should("be.visible")
       .and("include.text", "app.description")
@@ -269,6 +281,15 @@ describe("Admin servers view", function () {
 
     // Check that redirect to server view worked
     cy.url().should("include", "/admin/servers/30");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.view_{"name":"Server 01"}',
+      );
   });
 
   it("add new server errors", function () {
diff --git a/tests/Frontend/e2e/AdminServersView.cy.js b/tests/Frontend/e2e/AdminServersView.cy.js
index 82bdd64fa..baa39a8ba 100644
--- a/tests/Frontend/e2e/AdminServersView.cy.js
+++ b/tests/Frontend/e2e/AdminServersView.cy.js
@@ -74,6 +74,15 @@ describe("Admin servers view", function () {
     cy.get('[data-test="servers-delete-button"]').should("not.exist");
     cy.get('[data-test="servers-save-button"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.view_{"name":"Server 01"}',
+      );
+
     // Check that server data is shown correctly
     cy.get('[data-test="name-field"]')
       .should("be.visible")
diff --git a/tests/Frontend/e2e/AdminSettingsGeneral.cy.js b/tests/Frontend/e2e/AdminSettingsGeneral.cy.js
index d09fb1588..5f6b8f290 100644
--- a/tests/Frontend/e2e/AdminSettingsGeneral.cy.js
+++ b/tests/Frontend/e2e/AdminSettingsGeneral.cy.js
@@ -74,6 +74,11 @@ describe("Admin settings general", function () {
 
     // Check if settings are shown
     cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.settings");
   });
 
   it("check loading with edit permission", function () {
@@ -102,6 +107,11 @@ describe("Admin settings general", function () {
 
     // Check if settings are shown
     cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.settings");
   });
 
   it("load settings errors", function () {
diff --git a/tests/Frontend/e2e/AdminUsersEdit.cy.js b/tests/Frontend/e2e/AdminUsersEdit.cy.js
index bc2718b4a..89965dae2 100644
--- a/tests/Frontend/e2e/AdminUsersEdit.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEdit.cy.js
@@ -177,6 +177,15 @@ describe("Admin users edit", function () {
       .and("not.be.disabled")
       .and("include.text", "app.save");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.edit_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
     cy.get('[data-test="base-tab-button"]').should("be.visible");
     cy.get('[data-test="email-tab-button"]').should("be.visible");
     cy.get('[data-test="security-tab-button"]').should("be.visible");
diff --git a/tests/Frontend/e2e/AdminUsersEditBase.cy.js b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
index 4f51f3f82..2d9b22c76 100644
--- a/tests/Frontend/e2e/AdminUsersEditBase.cy.js
+++ b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
@@ -39,6 +39,15 @@ describe("Admin users edit base", function () {
 
     cy.contains("admin.users.base_data").should("be.visible");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.edit_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
     cy.get('[data-test="default-profile-image-preview"]')
       .should("be.visible")
       .and("include.text", "LR");
@@ -67,6 +76,15 @@ describe("Admin users edit base", function () {
         cy.get("#lastname").type("Walter");
       });
 
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.edit_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
     // Check authenticator setting
     cy.get('[data-test="authenticator-field"]')
       .should("be.visible")
@@ -412,6 +430,15 @@ describe("Admin users edit base", function () {
     cy.url().should("include", "/admin/users/2");
     cy.url().should("not.include", "/edit");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.view_{"firstname":"Juan","lastname":"Walter"}',
+      );
+
     cy.wait("@userRequest");
 
     // Reload edit page and save again
@@ -532,6 +559,15 @@ describe("Admin users edit base", function () {
 
     cy.wait("@userRequest");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.edit_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
     // Check with 422 error
     cy.intercept("POST", "api/v1/users/2", {
       statusCode: 422,
@@ -647,6 +683,15 @@ describe("Admin users edit base", function () {
 
     cy.wait("@userRequest");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.view_{"firstname":"Juan","lastname":"Walter"}',
+      );
+
     // Visit edit page again
     cy.visit("/admin/users/2/edit");
 
diff --git a/tests/Frontend/e2e/AdminUsersIndex.cy.js b/tests/Frontend/e2e/AdminUsersIndex.cy.js
index 570b26956..efc491fa4 100644
--- a/tests/Frontend/e2e/AdminUsersIndex.cy.js
+++ b/tests/Frontend/e2e/AdminUsersIndex.cy.js
@@ -108,6 +108,11 @@ describe("Admin users index", function () {
 
     cy.get('[data-test="users-add-button"]').should("not.exist");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index");
+
     // Check that headers are displayed correctly
     cy.get('[data-test="user-header-cell"]').should("have.length", 7);
 
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
index d7daa844d..a8b89aabd 100644
--- a/tests/Frontend/e2e/AdminUsersNew.cy.js
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -74,6 +74,12 @@ describe("Admin users new", function () {
     // Check general settings and change them
     cy.contains("rooms.settings.general.title").should("be.visible");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should("include.text", "admin.breakcrumbs.users.new");
+
     cy.get('[data-test="firstname-field"]')
       .should("be.visible")
       .and("include.text", "app.firstname")
@@ -88,6 +94,12 @@ describe("Admin users new", function () {
         cy.get("#lastname").should("have.value", "").type("Doe");
       });
 
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should("include.text", "admin.breakcrumbs.users.new");
+
     cy.get('[data-test="email-field"]')
       .should("be.visible")
       .and("include.text", "app.email")
@@ -281,7 +293,8 @@ describe("Admin users new", function () {
     cy.fixture("userDataUser.json").then((user) => {
       user.data.id = 20;
       user.data.firstname = "Max";
-      user.data.email = "Doe";
+      user.data.lastname = "Doe";
+      user.data.email = "maxdoe@domain.tld";
       user.data.roles = [
         {
           id: 2,
@@ -358,6 +371,15 @@ describe("Admin users new", function () {
 
     // Check that user page is shown
     cy.url().should("include", "/admin/users/20");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.view_{"firstname":"Max","lastname":"Doe"}',
+      );
   });
 
   it("add new user with generated password and several roles", function () {
diff --git a/tests/Frontend/e2e/AdminUsersView.cy.js b/tests/Frontend/e2e/AdminUsersView.cy.js
index 21dd4eeed..741f71356 100644
--- a/tests/Frontend/e2e/AdminUsersView.cy.js
+++ b/tests/Frontend/e2e/AdminUsersView.cy.js
@@ -101,6 +101,15 @@ describe("Admin users view", function () {
     cy.get('[data-test="security-tab-button"]').should("be.visible");
     cy.get('[data-test="others-tab-button"]').should("be.visible");
 
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.view_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
     // Check that user data is shown and all inputs are disabled
     // Base tab
     cy.get('[data-test="firstname-field"]')

From 0f4c332102a69cac6adf4651905212137eee58c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 29 Jan 2025 08:34:53 +0100
Subject: [PATCH 69/79] Add missing data-test

---
 resources/js/views/AdminLayout.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/views/AdminLayout.vue b/resources/js/views/AdminLayout.vue
index 69066d0dc..1801ad552 100644
--- a/resources/js/views/AdminLayout.vue
+++ b/resources/js/views/AdminLayout.vue
@@ -12,6 +12,7 @@
             :home="home"
             class="px-0 py-2"
             :model="breakcrumbs"
+            data-test="admin-breadcrumb"
           >
             <template #item="{ item, props }">
               <router-link

From 74c2165ac743ad41f8b8e586e3a13c40f66b7530 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 29 Jan 2025 08:35:28 +0100
Subject: [PATCH 70/79] Add admin index tests

---
 resources/js/views/AdminIndex.vue   |  24 +-
 tests/Frontend/e2e/AdminIndex.cy.js | 344 ++++++++++++++++++++++++++++
 2 files changed, 362 insertions(+), 6 deletions(-)
 create mode 100644 tests/Frontend/e2e/AdminIndex.cy.js

diff --git a/resources/js/views/AdminIndex.vue b/resources/js/views/AdminIndex.vue
index 3f65441a2..5ba745d77 100644
--- a/resources/js/views/AdminIndex.vue
+++ b/resources/js/views/AdminIndex.vue
@@ -7,7 +7,10 @@
         v-if="userPermissions.can('viewAny', 'SettingsPolicy')"
         class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4"
       >
-        <router-link :to="{ name: 'admin.settings' }">
+        <router-link
+          :to="{ name: 'admin.settings' }"
+          data-test="admin-settings-link"
+        >
           <Card
             :pt="{
               title: { class: 'text-center text-primary' },
@@ -33,7 +36,7 @@
         v-if="userPermissions.can('viewAny', 'UserPolicy')"
         class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4"
       >
-        <router-link :to="{ name: 'admin.users' }">
+        <router-link :to="{ name: 'admin.users' }" data-test="admin-users-link">
           <Card
             :pt="{
               title: { class: 'text-center text-primary' },
@@ -59,7 +62,7 @@
         v-if="userPermissions.can('viewAny', 'RolePolicy')"
         class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4"
       >
-        <router-link :to="{ name: 'admin.roles' }">
+        <router-link :to="{ name: 'admin.roles' }" data-test="admin-roles-link">
           <Card
             :pt="{
               title: { class: 'text-center text-primary' },
@@ -85,7 +88,10 @@
         v-if="userPermissions.can('viewAny', 'RoomTypePolicy')"
         class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4"
       >
-        <router-link :to="{ name: 'admin.room_types' }">
+        <router-link
+          :to="{ name: 'admin.room_types' }"
+          data-test="admin-room-types-link"
+        >
           <Card
             :pt="{
               title: { class: 'text-center text-primary' },
@@ -111,7 +117,10 @@
         v-if="userPermissions.can('viewAny', 'ServerPolicy')"
         class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4"
       >
-        <router-link :to="{ name: 'admin.servers' }">
+        <router-link
+          :to="{ name: 'admin.servers' }"
+          data-test="admin-servers-link"
+        >
           <Card
             :pt="{
               title: { class: 'text-center text-primary' },
@@ -137,7 +146,10 @@
         v-if="userPermissions.can('viewAny', 'ServerPoolPolicy')"
         class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4"
       >
-        <router-link :to="{ name: 'admin.server_pools' }">
+        <router-link
+          :to="{ name: 'admin.server_pools' }"
+          data-test="admin-server-pools-link"
+        >
           <Card
             :pt="{
               title: { class: 'text-center text-primary' },
diff --git a/tests/Frontend/e2e/AdminIndex.cy.js b/tests/Frontend/e2e/AdminIndex.cy.js
new file mode 100644
index 000000000..861962fa0
--- /dev/null
+++ b/tests/Frontend/e2e/AdminIndex.cy.js
@@ -0,0 +1,344 @@
+describe("Admin index", function () {
+  beforeEach(function () {
+    cy.init();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin");
+  });
+
+  it("visit without permission to view admin pages", function () {
+    cy.intercept("GET", "api/v1/currentUser", {
+      statusCode: 200,
+      fixture: "currentUser.json",
+    });
+
+    cy.visit("/admin");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check admin index with all permissions", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "settings.viewAny",
+        "roles.viewAny",
+        "users.viewAny",
+        "serverPools.viewAny",
+        "servers.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/settings")
+      .and("include.text", "admin.settings.title")
+      .and("include.text", "admin.settings.tile_description");
+
+    cy.get('[data-test="admin-users-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/users")
+      .and("include.text", "app.users")
+      .and("include.text", "admin.users.tile_description");
+
+    cy.get('[data-test="admin-roles-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/roles")
+      .and("include.text", "app.roles")
+      .and("include.text", "admin.roles.tile_description");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/servers")
+      .and("include.text", "app.servers")
+      .and("include.text", "admin.servers.tile_description");
+
+    cy.get('[data-test="admin-server-pools-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/server_pools")
+      .and("include.text", "app.server_pools")
+      .and("include.text", "admin.server_pools.tile_description");
+  });
+
+  it("open admin settings", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "settings.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/settings")
+      .and("include.text", "admin.settings.title")
+      .and("include.text", "admin.settings.tile_description");
+
+    cy.get('[data-test="admin-users-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-roles-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-server-pools-link"]').should("not.exist");
+
+    cy.interceptAdminSettingsRequest();
+    cy.get('[data-test="admin-settings-link"]').click();
+
+    cy.url().should("include", "/admin/settings");
+  });
+
+  it("open admin users", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-users-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/users")
+      .and("include.text", "app.users")
+      .and("include.text", "admin.users.tile_description");
+
+    cy.get('[data-test="admin-roles-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/roles")
+      .and("include.text", "app.roles")
+      .and("include.text", "admin.roles.tile_description");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-server-pools-link"]').should("not.exist");
+
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.get('[data-test="admin-users-link"]').click();
+
+    cy.url().should("include", "/admin/users");
+  });
+
+  it("open admin roles", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roles.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-users-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-roles-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/roles")
+      .and("include.text", "app.roles")
+      .and("include.text", "admin.roles.tile_description");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-server-pools-link"]').should("not.exist");
+
+    cy.interceptAdminRolesIndexRequests();
+
+    cy.get('[data-test="admin-roles-link"]').click();
+
+    cy.url().should("include", "/admin/roles");
+  });
+
+  it("open admin room types", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-users-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-roles-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-server-pools-link"]').should("not.exist");
+
+    cy.interceptAdminRoomTypesIndexRequests();
+
+    cy.get('[data-test="admin-room-types-link"]').click();
+
+    cy.url().should("include", "/admin/room_types");
+  });
+
+  it("open admin servers", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "servers.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-users-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-roles-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/servers")
+      .and("include.text", "app.servers")
+      .and("include.text", "admin.servers.tile_description");
+
+    cy.get('[data-test="admin-server-pools-link"]').should("not.exist");
+
+    cy.interceptAdminServersIndexRequests();
+
+    cy.get('[data-test="admin-servers-link"]').click();
+
+    cy.url().should("include", "/admin/servers");
+  });
+
+  it("open admin server pools", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "serverPools.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-users-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-roles-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-server-pools-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/server_pools")
+      .and("include.text", "app.server_pools")
+      .and("include.text", "admin.server_pools.tile_description");
+
+    cy.interceptAdminServerPoolsIndexRequests();
+
+    cy.get('[data-test="admin-server-pools-link"]').click();
+
+    cy.url().should("include", "/admin/server_pools");
+  });
+});

From c641fb2022f1afac4268aae4af37b1d79d4ca0f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 29 Jan 2025 08:45:25 +0100
Subject: [PATCH 71/79] Code cleanup

---
 tests/Frontend/e2e/AdminRoomTypesIndex.cy.js  |  5 ++-
 .../AdminRoomTypesIndexRoomTypeActions.cy.js  |  1 -
 .../AdminRoomTypesViewRoomTypeActions.cy.js   | 36 -------------------
 tests/Frontend/e2e/RoomsViewMembers.cy.js     |  1 -
 .../e2e/RoomsViewPersonalizedLinks.cy.js      |  1 -
 .../Frontend/support/commands/roomCommands.js |  2 --
 6 files changed, 2 insertions(+), 44 deletions(-)

diff --git a/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js b/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
index 48b796626..1314146c7 100644
--- a/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
@@ -127,7 +127,7 @@ describe("Admin room types index", function () {
       'app.flash.server_error.error_code_{"statusCode":500}',
     ]);
 
-    // Check that overlay is shown ToDo this is not implemented yet!!!! so careful when keeping this part of the test !!!!
+    // Check that overlay is shown
     cy.get('[data-test="overlay"]').should("be.visible");
 
     // Check that components are not disabled
@@ -135,8 +135,7 @@ describe("Admin room types index", function () {
       cy.get("input").should("be.visible").and("not.be.disabled");
       cy.get("button").should("be.visible").and("not.be.disabled");
     });
-    // ToDo this is not implemented yet!!!! so careful when keeping this part of the test !!!!
-    //  (Only important for 500 error part)
+
     cy.intercept("GET", "api/v1/roomTypes*", {
       statusCode: 200,
       fixture: "roomTypes.json",
diff --git a/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js b/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js
index 5a625b765..7d97ab6d9 100644
--- a/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js
@@ -440,7 +440,6 @@ describe("Admin room types index room type actions", function () {
       'app.flash.server_error.error_code_{"statusCode":500}',
     ]);
 
-    // ToDo this is not implemented yet!!!! so careful when keeping this part of the test !!!!
     // Check that dropdown is disabled
     cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
       cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
diff --git a/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
index 8e643c126..1c49c7589 100644
--- a/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
+++ b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
@@ -287,41 +287,6 @@ describe("Admin room types view room type actions", function () {
       "Replacement room type required! Rooms are still assigned to this room type.",
     );
 
-    // Check with 404 error //ToDo not implemented yet on view page
-    // cy.intercept("DELETE", "api/v1/roomTypes/3", {
-    //   statusCode: 404,
-    //   body: {
-    //     message: "No query results for model",
-    //   },
-    // }).as("deleteRoomTypeRequest");
-    //
-    // cy.get('[data-test="dialog-continue-button"]').click();
-    //
-    // cy.wait("@deleteRoomTypeRequest");
-    // cy.wait("@roomTypesRequest");
-    //
-    // // Check that redirect worked
-    // cy.url().should("not.include", "/admin/room_types/3");
-    // cy.url().should("include", "/admin/room_types");
-    //
-    // // Check that error message
-    // cy.checkToastMessage([
-    //   'app.flash.server_error.message_{"message":"No query results for model"}',
-    //   'app.flash.server_error.error_code_{"statusCode":404}',
-    // ]);
-    //
-    // // Reload page
-    // cy.visit("/admin/room_types/3");
-    //
-    // cy.wait("@roomTypeRequest");
-    //
-    // cy.get('[data-test="room-types-delete-button"]').click();
-    //
-    // // Check that replacement room types are loaded
-    // cy.wait("@roomTypesRequest");
-    //
-    // cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
-
     // Check with 401 error
     cy.intercept("DELETE", "api/v1/roomTypes/3", {
       statusCode: 401,
@@ -378,7 +343,6 @@ describe("Admin room types view room type actions", function () {
       'app.flash.server_error.error_code_{"statusCode":500}',
     ]);
 
-    // ToDo this is not implemented yet!!!! so careful when keeping this part of the test !!!!
     // Check that dropdown is disabled
     cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
       cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
diff --git a/tests/Frontend/e2e/RoomsViewMembers.cy.js b/tests/Frontend/e2e/RoomsViewMembers.cy.js
index e493fa830..93df40810 100644
--- a/tests/Frontend/e2e/RoomsViewMembers.cy.js
+++ b/tests/Frontend/e2e/RoomsViewMembers.cy.js
@@ -295,7 +295,6 @@ describe("Rooms view members", function () {
       .eq(0)
       .should("have.attr", "data-p-active", "true");
 
-    // ToDo Change to custom command (difficult because members need to be loaded "normally" first)
     // Switch to next page with 401 error
     cy.fixture("room.json").then((room) => {
       room.data.current_user = null;
diff --git a/tests/Frontend/e2e/RoomsViewPersonalizedLinks.cy.js b/tests/Frontend/e2e/RoomsViewPersonalizedLinks.cy.js
index 2c1c78468..72c83e286 100644
--- a/tests/Frontend/e2e/RoomsViewPersonalizedLinks.cy.js
+++ b/tests/Frontend/e2e/RoomsViewPersonalizedLinks.cy.js
@@ -307,7 +307,6 @@ describe("Rooms view personalized links", function () {
       .eq(0)
       .should("have.attr", "data-p-active", "true");
 
-    // ToDo Change to custom command (difficult because members need to be loaded "normally" first)
     // Switch to next page with 401 error
     cy.fixture("room.json").then((room) => {
       room.data.current_user = null;
diff --git a/tests/Frontend/support/commands/roomCommands.js b/tests/Frontend/support/commands/roomCommands.js
index d21f510d6..7e165fc9b 100644
--- a/tests/Frontend/support/commands/roomCommands.js
+++ b/tests/Frontend/support/commands/roomCommands.js
@@ -294,8 +294,6 @@ Cypress.Commands.add(
  * @param  {string} roomTabName
  * @returns void
  */
-// ToDo add possibility to load with correct data and then trigger error
-// ToDo add possibility to change room data (maybe get room data(additional room data as parameter)
 Cypress.Commands.add(
   "checkRoomAuthErrors",
   (triggerRequestActions, requestMethod, requestUrl, roomTabName) => {

From e400f6d5e9def7a7c2432d148a904fa931cc401d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 29 Jan 2025 11:59:45 +0100
Subject: [PATCH 72/79] Update changelog

---
 CHANGELOG.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3d8b744a..cf7c37b78 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add missing loading retry button (Admin RoomTypesIndex) ([#1588])
+- Add reload button for replacement room type (RoomTypesDeleteButton) ([#1588])
 - Permission restrictions to prevent non-superusers from editing and deleting superusers ([#1651])
 - Permission restrictions to prevent non-superusers from assigning the superuser role ([#1651])
 - Environment variable for configuring restricted permissions that cannot be assigned to non-superuser roles ([#1651])
@@ -21,10 +23,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Real-time input validation on create superuser command ([#1651])
 - Error handling in room statistics ([#1535], [#1600])
 - Error handling in room attendance ([#1535], [#1600])
+- Close multiselect dropdowns on selection ([#1588])
 - Improve frontend tests for login page ([#1794])
 
 ### Fixed
 
+- Search not disabled during loading (admin index pages) ([#1675], [#1588])
+- Overlays not shown after loading error (admin view pages) ([#1677], [#1588])
+- Dialog buttons not disabled correctly during actions on admin pages ([#1711], [#1588])
+- Error messages (AdminServerPoolsView, AdminRoomTypesView, AdminSettings) ([#1588])
+- Error handling (AdminUsersIndex, AdminServerPoolsView (staleError), RoomTypesDeleteButton (404 error)) ([#1588])
+- BBB logo image url input ([#1751], [#1588])
+- Access superuser attribute ([#1588])
+- Accessing multiselect ref ([#1588])
+- Overlay reload buttons ([#1588])
 - Wrong error message shown for 422 errors when verifying email ([#1744], [#1758])
 - Broken banner link style 'warning' ([#1759], [#1760])
 - Inconsistent select/multiselect loading states ([#1772])
@@ -328,6 +340,7 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#1559]: https://github.com/THM-Health/PILOS/issues/1559
 [#1561]: https://github.com/THM-Health/PILOS/pull/1561
 [#1565]: https://github.com/THM-Health/PILOS/pull/1565
+[#1588]: https://github.com/THM-Health/PILOS/pull/1588
 [#1569]: https://github.com/THM-Health/PILOS/pull/1569
 [#1595]: https://github.com/THM-Health/PILOS/pull/1595
 [#1600]: https://github.com/THM-Health/PILOS/pull/1600
@@ -338,12 +351,16 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#1617]: https://github.com/THM-Health/PILOS/pull/1617
 [#1618]: https://github.com/THM-Health/PILOS/pull/1618
 [#1651]: https://github.com/THM-Health/PILOS/issues/1651
+[#1675]: https://github.com/THM-Health/PILOS/issues/1675
+[#1677]: https://github.com/THM-Health/PILOS/issues/1677
 [#1679]: https://github.com/THM-Health/PILOS/issues/1679
 [#1702]: https://github.com/THM-Health/PILOS/pull/1702
 [#1704]: https://github.com/THM-Health/PILOS/pull/1704
+[#1711]: https://github.com/THM-Health/PILOS/issues/1711
 [#1721]: https://github.com/THM-Health/PILOS/issues/1721
 [#1724]: https://github.com/THM-Health/PILOS/pull/1724
 [#1744]: https://github.com/THM-Health/PILOS/issues/1744
+[#1751]: https://github.com/THM-Health/PILOS/issues/1751
 [#1758]: https://github.com/THM-Health/PILOS/pull/1758
 [#1759]: https://github.com/THM-Health/PILOS/issues/1759
 [#1760]: https://github.com/THM-Health/PILOS/pull/1760

From 239b4cebde991a544f1597b2d5b9f3a482cfd8e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 29 Jan 2025 13:32:09 +0100
Subject: [PATCH 73/79] Improve RoomsViewMeeting test

---
 tests/Frontend/e2e/RoomsViewMeetings.cy.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/tests/Frontend/e2e/RoomsViewMeetings.cy.js b/tests/Frontend/e2e/RoomsViewMeetings.cy.js
index e82512580..99df615c9 100644
--- a/tests/Frontend/e2e/RoomsViewMeetings.cy.js
+++ b/tests/Frontend/e2e/RoomsViewMeetings.cy.js
@@ -283,6 +283,8 @@ describe("Rooms view meetings", function () {
       }).as("roomRequest");
     });
 
+    cy.interceptRoomFilesRequest();
+
     cy.visit("/rooms/abc-def-123");
 
     cy.get('[data-test="room-join-button"]').click();
@@ -353,6 +355,8 @@ describe("Rooms view meetings", function () {
       },
     }).as("joinRequest");
 
+    cy.interceptRoomFilesRequest();
+
     cy.visit("/rooms/abc-def-123");
 
     // Test with invalid name
@@ -430,6 +434,7 @@ describe("Rooms view meetings", function () {
         body: room,
       }).as("roomRequest");
     });
+    cy.interceptRoomFilesRequest();
 
     cy.visit("/rooms/abc-def-123");
 
@@ -663,6 +668,8 @@ describe("Rooms view meetings", function () {
       },
     }).as("joinRequest");
 
+    cy.interceptRoomFilesRequest();
+
     // Visit room with token
     cy.visit(
       "/rooms/abc-def-123/xWDCevVTcMys1ftzt3nFPgU56Wf32fopFWgAEBtklSkFU22z1ntA4fBHsHeMygMiOa9szJbNEfBAgEWSLNWg2gcF65PwPZ2ylPQR",
@@ -1204,6 +1211,8 @@ describe("Rooms view meetings", function () {
       }).as("roomRequest");
     });
 
+    cy.interceptRoomFilesRequest();
+
     cy.visit("/rooms/abc-def-123");
 
     // Test with invalid name
@@ -1269,6 +1278,8 @@ describe("Rooms view meetings", function () {
       },
     }).as("startRequest");
 
+    cy.interceptRoomFilesRequest();
+
     cy.visit("/rooms/abc-def-123");
 
     // Test with invalid name
@@ -1342,6 +1353,7 @@ describe("Rooms view meetings", function () {
         body: room,
       }).as("roomRequest");
     });
+    cy.interceptRoomFilesRequest();
 
     cy.visit("/rooms/abc-def-123");
 
@@ -1545,6 +1557,8 @@ describe("Rooms view meetings", function () {
       },
     }).as("startRequest");
 
+    cy.interceptRoomFilesRequest();
+
     // Visit room with token
     cy.visit(
       "/rooms/abc-def-123/xWDCevVTcMys1ftzt3nFPgU56Wf32fopFWgAEBtklSkFU22z1ntA4fBHsHeMygMiOa9szJbNEfBAgEWSLNWg2gcF65PwPZ2ylPQR",

From 2468a7a954f57c0422b0cd3652b32c44410e2f42 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Wed, 29 Jan 2025 14:32:46 +0100
Subject: [PATCH 74/79] Fix access id attribute

---
 resources/js/components/UserTabEmail.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/UserTabEmail.vue b/resources/js/components/UserTabEmail.vue
index 7bd7febad..8da387fd3 100644
--- a/resources/js/components/UserTabEmail.vue
+++ b/resources/js/components/UserTabEmail.vue
@@ -121,7 +121,7 @@ const isBusy = ref(false);
 const validationRequiredEmail = ref(null);
 
 const isOwnUser = computed(() => {
-  return authStore.currentUser.id === props.user.id;
+  return authStore.currentUser?.id === props.user.id;
 });
 
 onBeforeMount(() => {

From 45b76b1b9c8de8424b2b91e62d17e6f4be03ece4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 29 Jan 2025 16:07:42 +0100
Subject: [PATCH 75/79] Adjust AdminRolesEdit tests

---
 tests/Frontend/e2e/AdminRolesEdit.cy.js | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/tests/Frontend/e2e/AdminRolesEdit.cy.js b/tests/Frontend/e2e/AdminRolesEdit.cy.js
index 36768408a..5a23579d8 100644
--- a/tests/Frontend/e2e/AdminRolesEdit.cy.js
+++ b/tests/Frontend/e2e/AdminRolesEdit.cy.js
@@ -1679,11 +1679,7 @@ describe("Admin roles edit", function () {
     cy.wait("@roleRequest");
 
     // Check loading
-    cy.get('[data-test="roles-cancel-edit-button"]')
-      .should("be.visible")
-      .and("not.be.disabled")
-      .and("include.text", "app.cancel_editing")
-      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
     cy.get('[data-test="roles-edit-button"]').should("not.exist");
     cy.get('[data-test="roles-delete-button"]').should("not.exist");
     cy.get('[data-test="roles-save-button"]')
@@ -1703,11 +1699,7 @@ describe("Admin roles edit", function () {
     cy.get('[data-test="overlay"]').should("be.visible");
 
     // Check that buttons are still hidden
-    cy.get('[data-test="roles-cancel-edit-button"]')
-      .should("be.visible")
-      .and("not.be.disabled")
-      .and("include.text", "app.cancel_editing")
-      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
     cy.get('[data-test="roles-edit-button"]').should("not.exist");
     cy.get('[data-test="roles-delete-button"]').should("not.exist");
     cy.get('[data-test="roles-save-button"]')

From 26e7535250868906dcd3c66907f5cc9476f3758d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 29 Jan 2025 16:12:36 +0100
Subject: [PATCH 76/79] Change permissions loading behaviour (AdminRolesView)

---
 resources/js/views/AdminRolesView.vue | 46 ++++++++++++++++++---------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/resources/js/views/AdminRolesView.vue b/resources/js/views/AdminRolesView.vue
index c5825fb61..a9d630942 100644
--- a/resources/js/views/AdminRolesView.vue
+++ b/resources/js/views/AdminRolesView.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
     <div class="mb-6 flex justify-end">
-      <div v-if="model.id && id !== 'new'" class="flex gap-2">
+      <div
+        v-if="model.id && id !== 'new' && permissionsLoaded"
+        class="flex gap-2"
+      >
         <Button
           v-if="!viewOnly && userPermissions.can('view', model)"
           as="router-link"
@@ -29,16 +32,18 @@
       </div>
     </div>
 
-    <OverlayComponent :show="isBusy || modelLoadingError">
+    <OverlayComponent
+      :show="isBusy || modelLoadingError || permissionsLoadingError"
+    >
       <template #overlay>
         <LoadingRetryButton
-          :error="modelLoadingError"
+          :error="modelLoadingError || permissionsLoadingError"
           @reload="load()"
         ></LoadingRetryButton>
       </template>
 
       <form
-        :aria-hidden="modelLoadingError"
+        :aria-hidden="modelLoadingError || permissionsLoadingError"
         class="flex flex-col gap-4"
         @submit.prevent="saveRole"
       >
@@ -53,7 +58,7 @@
               class="w-full"
               type="text"
               :invalid="formErrors.fieldInvalid('name')"
-              :disabled="isBusy || modelLoadingError || viewOnly"
+              :disabled="formFieldsDisabled"
             />
             <FormError :errors="formErrors.fieldError('name')" />
           </div>
@@ -66,7 +71,9 @@
               <Button
                 severity="link"
                 class="secondary"
-                :disabled="isBusy || modelLoadingError"
+                :disabled="
+                  isBusy || modelLoadingError || permissionsLoadingError
+                "
                 icon="fa-solid fa-circle-info"
                 @click="helpRoomLimitModalVisible = true"
               />
@@ -82,9 +89,7 @@
                 v-model="roomLimitMode"
                 :input-id="option.value"
                 :value="option.value"
-                :disabled="
-                  isBusy || modelLoadingError || viewOnly || model.superuser
-                "
+                :disabled="formFieldsDisabled || model.superuser"
                 @change="roomLimitModeChanged(option.value)"
               />
               <label :for="option.value" class="ml-2">{{ option.text }}</label>
@@ -98,7 +103,7 @@
               show-buttons
               :min="0"
               :invalid="formErrors.fieldInvalid('room_limit')"
-              :disabled="isBusy || modelLoadingError || viewOnly"
+              :disabled="formFieldsDisabled"
             />
             <FormError :errors="formErrors.fieldError('room_limit')" />
           </div>
@@ -154,9 +159,7 @@
                       :input-id="permission.name"
                       :value="permission.id"
                       :disabled="
-                        isBusy ||
-                        modelLoadingError ||
-                        viewOnly ||
+                        formFieldsDisabled ||
                         model.superuser ||
                         permission.restricted
                       "
@@ -203,7 +206,7 @@
         <div v-if="!viewOnly">
           <div class="flex justify-end">
             <Button
-              :disabled="isBusy || modelLoadingError"
+              :disabled="formFieldsDisabled"
               type="submit"
               icon="fa-solid fa-save"
               :label="$t('app.save')"
@@ -357,6 +360,8 @@ watch(
 
 const includedPermissionMap = ref({});
 const permissions = ref({});
+const permissionsLoaded = ref(false);
+const permissionsLoadingError = ref(false);
 const roomLimitMode = ref("default");
 const busyCounter = ref(0);
 const modelLoadingError = ref(false);
@@ -393,6 +398,15 @@ const includedPermissions = computed(() => {
   );
 });
 
+const formFieldsDisabled = computed(() => {
+  return (
+    isBusy.value ||
+    modelLoadingError.value ||
+    props.viewOnly ||
+    permissionsLoadingError.value
+  );
+});
+
 /**
  * Boolean that indicates, whether any request for this form is pending or not.
  */
@@ -448,6 +462,7 @@ function load() {
  * Loads the permissions that can be selected through checkboxes.
  */
 function loadPermissions() {
+  permissionsLoadingError.value = false;
   busyCounter.value++;
 
   api
@@ -518,9 +533,10 @@ function loadPermissions() {
         .forEach((key) => {
           permissions.value[key] = newPermissions[key];
         });
+      permissionsLoaded.value = true;
     })
     .catch((error) => {
-      modelLoadingError.value = true;
+      permissionsLoadingError.value = true;
       api.error(error);
     })
     .finally(() => {

From 49be3d133a3af0e7305917f3bd6311be43362423 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 29 Jan 2025 16:15:45 +0100
Subject: [PATCH 77/79] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cf7c37b78..4cb00cf51 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Error handling in room statistics ([#1535], [#1600])
 - Error handling in room attendance ([#1535], [#1600])
 - Close multiselect dropdowns on selection ([#1588])
+- Permissions loading behaviour (AdminRolesView) ([#1588])
 - Improve frontend tests for login page ([#1794])
 
 ### Fixed

From c8524ec027b99a427322c0453c1ecda58606d8a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 29 Jan 2025 16:28:49 +0100
Subject: [PATCH 78/79] Increase number of workers

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2d826aa97..6b34238f4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -205,7 +205,7 @@ jobs:
       fail-fast: false
       matrix:
         # run copies of the current job in parallel
-        containers: [1, 2, 3, 4, 5]
+        containers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
 
     steps:
       - name: Checkout

From 352fae1f888c46eef355672d4d630f79169ad260 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sabrina=20W=C3=BCst?=
 <119059706+Sabr1n4W@users.noreply.github.com>
Date: Wed, 29 Jan 2025 16:38:17 +0100
Subject: [PATCH 79/79] Increase number of workers

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6b34238f4..39a215adf 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -205,7 +205,7 @@ jobs:
       fail-fast: false
       matrix:
         # run copies of the current job in parallel
-        containers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
+        containers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
 
     steps:
       - name: Checkout