From 4f2f2982ec1f4a65ffe834e2c21f847c8a945881 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Wed, 29 Jan 2025 17:49:14 +0100
Subject: [PATCH] Fix Admin-UI management bugs (#1588)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

*  Close multiselect dropdowns on selection

*  Bugfix overlay reload buttons

*  Fix overlays not shown after loading error (admin view pages)

*  Fix search not disabled during loading (admin index pages)

*  Fix dialog buttons not disabled correctly during actions on admin pages

*  Fix error messages (AdminServerPoolsView, AdminRoomTypesView, AdminSettings)

*  Fix error handling (AdminUsersIndex, AdminServerPoolsView (staleError), RoomTypesDeleteButton (404 error))

*  Add missing loading retry button (Admin RoomTypesIndex)

*  Add reload button for replacement room type (RoomTypesDeleteButton)

*  Fix bbb logo image url input

*  Fix access superuser attribute

*  Fix accessing multiselect ref

*  Permissions loading behaviour (AdminRolesView)

* Prevent dialogs from being closable during loading

* Update CHANGELOG.md

* Improve accessibility on reload buttons

---------

Co-authored-by: Sabrina Wüst <119059706+Sabr1n4W@users.noreply.github.com>
---
 CHANGELOG.md                                  | 20 +++++
 app/Http/Requests/UpdateSettings.php          |  2 +-
 resources/js/components/RoleSelect.vue        |  7 +-
 .../components/SettingsRolesDeleteButton.vue  |  3 +-
 .../SettingsRoomTypesDeleteButton.vue         | 87 +++++++++++--------
 .../SettingsServerPoolsDeleteButton.vue       |  3 +-
 .../SettingsServersDeleteButton.vue           |  3 +-
 .../components/SettingsUsersDeleteButton.vue  |  3 +-
 .../SettingsUsersResetPasswordButton.vue      |  3 +-
 resources/js/components/TimezoneSelect.vue    |  1 +
 resources/js/components/UserTabEmail.vue      |  2 +-
 ...rTabSecurityRolesAndPermissionsSection.vue |  2 +-
 resources/js/views/AdminRolesIndex.vue        |  2 +
 resources/js/views/AdminRolesView.vue         | 48 ++++++----
 resources/js/views/AdminRoomTypesIndex.vue    | 11 ++-
 resources/js/views/AdminRoomTypesView.vue     |  7 +-
 resources/js/views/AdminServerPoolsIndex.vue  |  2 +
 resources/js/views/AdminServerPoolsView.vue   |  9 +-
 resources/js/views/AdminServersIndex.vue      |  2 +
 resources/js/views/AdminServersView.vue       |  4 +-
 resources/js/views/AdminSettings.vue          |  8 +-
 resources/js/views/AdminUsersIndex.vue        | 11 +--
 resources/js/views/AdminUsersNew.vue          |  2 +-
 resources/js/views/RoomsIndex.vue             |  1 +
 tests/Backend/Feature/api/v1/SettingsTest.php |  5 +-
 25 files changed, 165 insertions(+), 83 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ef71f6531..f7b5ec446 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
 
+- Missing loading retry button on room types overview page ([#1588])
+- Reload button for replacement room type in delete dialog on room types overview page ([#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,11 +23,24 @@ 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])
+- Permissions loading behaviour on view/edit page of roles ([#1588])
 - Improve frontend tests for login page ([#1794])
 - Access code input type on room settings section to hide browser arrow buttons ([#1827], [#1829])
 
 ### Fixed
 
+- Search not disabled during loading on the overview pages for roles, room types, servers and server pools ([#1675], [#1588])
+- Overlays not shown after loading error on view/edit pages of servers and server pools ([#1677], [#1588])
+- Dialog buttons not disabled correctly during actions on the overview/view/edit pages for roles, room types, servers and server pools ([#1711], [#1588])
+- Dialogs being closable during loading on the overview/view/edit pages for roles, room types, servers and server pools ([#1588])
+- Form validation error messages on view/edit pages room types, server pools and application settings ([#1588])
+- Error handling on the overview page of users ([#1588])
+- Stale error handling on the view/edit page of sever pools ([#1588])
+- 404 error handling on the room types delete dialog ([#1588])
+- Set empty BBB logo image url ([#1751], [#1588])
+- 401 error handling on view/edit/create page of users ([#1588])
+- Overlay reload buttons on view/edit/create page of roles, room types, servers and server pools ([#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])
@@ -331,6 +346,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
@@ -342,13 +358,17 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#1618]: https://github.com/THM-Health/PILOS/pull/1618
 [#1636]: https://github.com/THM-Health/PILOS/issues/1636
 [#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
 [#1678]: https://github.com/THM-Health/PILOS/pull/1678
 [#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
diff --git a/app/Http/Requests/UpdateSettings.php b/app/Http/Requests/UpdateSettings.php
index daed11ab3..3b94a499f 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/components/RoleSelect.vue b/resources/js/components/RoleSelect.vue
index 6ae39de9a..aab0f14f4 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')"
@@ -87,6 +87,7 @@
       severity="secondary"
       outlined
       icon="fa-solid fa-sync"
+      :aria-label="$t('app.reload')"
       data-test="roles-reload-button"
       @click="loadRoles(currentPage)"
     />
@@ -94,7 +95,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 +140,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/components/SettingsRolesDeleteButton.vue b/resources/js/components/SettingsRolesDeleteButton.vue
index 24e1a167f..4a6c9a9fc 100644
--- a/resources/js/components/SettingsRolesDeleteButton.vue
+++ b/resources/js/components/SettingsRolesDeleteButton.vue
@@ -16,7 +16,7 @@
     :breakpoints="{ '575px': '90vw' }"
     :close-on-escape="!isBusy"
     :dismissable-mask="!isBusy"
-    :closeable="!isBusy"
+    :closable="!isBusy"
     :draggable="false"
   >
     <span>
@@ -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 547e9827d..7cfcf14bd 100644
--- a/resources/js/components/SettingsRoomTypesDeleteButton.vue
+++ b/resources/js/components/SettingsRoomTypesDeleteButton.vue
@@ -17,7 +17,7 @@
     :breakpoints="{ '575px': '90vw' }"
     :close-on-escape="!isBusy"
     :dismissable-mask="!isBusy"
-    :closeable="!isBusy"
+    :closable="!isBusy"
     :draggable="false"
     data-test="room-types-delete-dialog"
   >
@@ -29,39 +29,52 @@
       <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 || loadingRoomTypes"
-        :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
-        :pt="{
-          listContainer: {
-            'data-test': 'replacement-room-type-dropdown-items',
-          },
-          option: {
-            'data-test': 'replacement-room-type-dropdown-option',
-          },
-        }"
-      >
-        <template #clearicon="{ clearCallback }">
-          <i
-            class="fa-solid fa-times p-icon p-select-clear-icon"
-            role="button"
-            @click.stop="clearCallback"
-          />
-        </template>
-      </Select>
+      <InputGroup>
+        <Select
+          id="replacement-room-type"
+          v-model.number="replacement"
+          data-test="replacement-room-type-dropdown"
+          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
+          :pt="{
+            listContainer: {
+              'data-test': 'replacement-room-type-dropdown-items',
+            },
+            option: {
+              'data-test': 'replacement-room-type-dropdown-option',
+            },
+          }"
+        >
+          <template #clearicon="{ clearCallback }">
+            <i
+              class="fa-solid fa-times p-icon p-select-clear-icon"
+              role="button"
+              @click.stop="clearCallback"
+            />
+          </template>
+        </Select>
+        <Button
+          v-if="replacementRoomTypesLoadingError"
+          :disabled="isBusy"
+          outlined
+          severity="secondary"
+          icon="fa-solid fa-sync"
+          :aria-label="$t('app.reload')"
+          @click="loadReplacementRoomTypes()"
+        />
+      </InputGroup>
       <FormError :errors="formErrors.fieldError('replacement_room_type')" />
       <small id="replacement-help">{{
         $t("admin.room_types.delete.replacement_info")
@@ -70,6 +83,7 @@
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
         @click="modalVisible = false"
       />
@@ -110,6 +124,7 @@ const isBusy = ref(false);
 const replacement = ref(null);
 const replacementRoomTypes = ref([]);
 const loadingRoomTypes = ref(false);
+const replacementRoomTypesLoadingError = ref(false);
 
 /**
  * Shows the delete modal
@@ -124,6 +139,8 @@ function showModal() {
 
 function loadReplacementRoomTypes() {
   loadingRoomTypes.value = true;
+  replacementRoomTypesLoadingError.value = false;
+
   api
     .call("roomTypes")
     .then((response) => {
@@ -139,6 +156,7 @@ function loadReplacementRoomTypes() {
         });
     })
     .catch((error) => {
+      replacementRoomTypesLoadingError.value = true;
       api.error(error);
     })
     .finally(() => {
@@ -174,7 +192,6 @@ function deleteRoomType() {
       if (error.response && error.response.status === env.HTTP_NOT_FOUND) {
         modalVisible.value = false;
         emit("notFound");
-        return;
       }
       api.error(error);
     })
diff --git a/resources/js/components/SettingsServerPoolsDeleteButton.vue b/resources/js/components/SettingsServerPoolsDeleteButton.vue
index 66b5df7ae..c43abcc32 100644
--- a/resources/js/components/SettingsServerPoolsDeleteButton.vue
+++ b/resources/js/components/SettingsServerPoolsDeleteButton.vue
@@ -12,7 +12,7 @@
     v-model:visible="modalVisible"
     :breakpoints="{ '575px': '90vw' }"
     :close-on-escape="!isBusy"
-    :closeable="!isBusy"
+    :closable="!isBusy"
     :dismissable-mask="!isBusy"
     :draggable="false"
     :header="$t('admin.server_pools.delete.title')"
@@ -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..6f485078d 100644
--- a/resources/js/components/SettingsServersDeleteButton.vue
+++ b/resources/js/components/SettingsServersDeleteButton.vue
@@ -14,7 +14,7 @@
     :breakpoints="{ '575px': '90vw' }"
     modal
     :close-on-escape="!isBusy"
-    :closeable="!isBusy"
+    :closable="!isBusy"
     :dismissable-mask="!isBusy"
     :draggable="false"
   >
@@ -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..ce81fb0cb 100644
--- a/resources/js/components/SettingsUsersDeleteButton.vue
+++ b/resources/js/components/SettingsUsersDeleteButton.vue
@@ -25,7 +25,7 @@
     :breakpoints="{ '575px': '90vw' }"
     :close-on-escape="!isBusy"
     :dismissable-mask="!isBusy"
-    :closeable="!isBusy"
+    :closable="!isBusy"
     :draggable="false"
   >
     <span>
@@ -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..6242f9e99 100644
--- a/resources/js/components/SettingsUsersResetPasswordButton.vue
+++ b/resources/js/components/SettingsUsersResetPasswordButton.vue
@@ -27,7 +27,7 @@
     :breakpoints="{ '575px': '90vw' }"
     :close-on-escape="!isBusy"
     :dismissable-mask="!isBusy"
-    :closeable="!isBusy"
+    :closable="!isBusy"
     :draggable="false"
   >
     <span>
@@ -42,6 +42,7 @@
       <Button
         :label="$t('app.no')"
         severity="secondary"
+        :disabled="isBusy"
         @click="modalVisible = false"
       />
       <Button
diff --git a/resources/js/components/TimezoneSelect.vue b/resources/js/components/TimezoneSelect.vue
index e589522bb..39b409b3c 100644
--- a/resources/js/components/TimezoneSelect.vue
+++ b/resources/js/components/TimezoneSelect.vue
@@ -25,6 +25,7 @@
       outlined
       severity="secondary"
       icon="fa-solid fa-sync"
+      :aria-label="$t('app.reload')"
       data-test="timezone-reload-button"
       @click="loadTimezones()"
     />
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(() => {
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/AdminRolesIndex.vue b/resources/js/views/AdminRolesIndex.vue
index f5937e195..b82605742 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/AdminRolesView.vue b/resources/js/views/AdminRolesView.vue
index 87b00cfe0..b6b851838 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">
-      <template #loading>
+    <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(() => {
diff --git a/resources/js/views/AdminRoomTypesIndex.vue b/resources/js/views/AdminRoomTypesIndex.vue
index d0c3dd934..bdb143a0c 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"
@@ -36,7 +38,7 @@
       :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',
@@ -64,6 +66,9 @@
         },
       }"
     >
+      <template #loading>
+        <LoadingRetryButton :error="loadingError" @reload="loadData()" />
+      </template>
       <template #empty>
         <InlineNote v-if="roomTypes.length === 0">{{
           $t("admin.room_types.no_data")
@@ -157,6 +162,7 @@ const actionColumn = useActionColumn([
 ]);
 
 const isBusy = ref(false);
+const loadingError = ref(false);
 const roomTypes = ref([]);
 const nameSearch = ref("");
 const filters = ref({
@@ -172,6 +178,8 @@ onMounted(() => {
  */
 function loadData() {
   isBusy.value = true;
+  loadingError.value = false;
+
   api
     .call("roomTypes")
     .then((response) => {
@@ -179,6 +187,7 @@ function loadData() {
     })
     .catch((error) => {
       api.error(error);
+      loadingError.value = true;
     })
     .finally(() => {
       isBusy.value = false;
diff --git a/resources/js/views/AdminRoomTypesView.vue b/resources/js/views/AdminRoomTypesView.vue
index db9aac04b..7135eae20 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"
@@ -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"
@@ -190,6 +190,7 @@
                   severity="secondary"
                   outlined
                   icon="fa-solid fa-sync"
+                  :aria-label="$t('app.reload')"
                   @click="loadServerPools(serverPoolsCurrentPage)"
                 />
               </InputGroup>
@@ -695,7 +696,7 @@
               <div class="flex justify-between gap-6">
                 <FormError
                   :errors="
-                    formErrors.fieldError('auto_start_recording_enforced')
+                    formErrors.fieldError('auto_start_recording_default')
                   "
                 />
                 <FormError
diff --git a/resources/js/views/AdminServerPoolsIndex.vue b/resources/js/views/AdminServerPoolsIndex.vue
index 6e51c1a0d..0614efaa4 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/AdminServerPoolsView.vue b/resources/js/views/AdminServerPoolsView.vue
index c140e1e7f..548880972 100644
--- a/resources/js/views/AdminServerPoolsView.vue
+++ b/resources/js/views/AdminServerPoolsView.vue
@@ -30,8 +30,8 @@
       </div>
     </div>
 
-    <OverlayComponent :show="isBusy">
-      <template #loading>
+    <OverlayComponent :show="isBusy || modelLoadingError">
+      <template #overlay>
         <LoadingRetryButton
           :error="modelLoadingError"
           @reload="load"
@@ -156,11 +156,12 @@
                 outlined
                 severity="secondary"
                 icon="fa-solid fa-sync"
+                :aria-label="$t('app.reload')"
                 @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">
@@ -381,7 +382,7 @@ function handleStaleError(staleError) {
     },
     reject: () => {
       model.value = staleError.new_model;
-      name.value = staleError.newMember.name;
+      name.value = staleError.new_model.name;
     },
   });
 }
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"
diff --git a/resources/js/views/AdminServersView.vue b/resources/js/views/AdminServersView.vue
index fbe328fd8..e3e54f476 100644
--- a/resources/js/views/AdminServersView.vue
+++ b/resources/js/views/AdminServersView.vue
@@ -29,8 +29,8 @@
       </div>
     </div>
 
-    <OverlayComponent :show="isBusy">
-      <template #loading>
+    <OverlayComponent :show="isBusy || modelLoadingError">
+      <template #overlay>
         <LoadingRetryButton
           :error="modelLoadingError"
           @reload="load"
diff --git a/resources/js/views/AdminSettings.vue b/resources/js/views/AdminSettings.vue
index 7fd932740..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>
@@ -1285,7 +1287,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);
   }
 
diff --git a/resources/js/views/AdminUsersIndex.vue b/resources/js/views/AdminUsersIndex.vue
index e89772256..4d690781c 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"
@@ -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"
@@ -83,6 +83,7 @@
             outlined
             severity="secondary"
             icon="fa-solid fa-sync"
+            :aria-label="$t('app.reload')"
             @click="loadRoles(rolesCurrentPage)"
           />
         </InputGroup>
@@ -248,7 +249,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 +285,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
@@ -321,7 +322,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;
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)"
               />
diff --git a/resources/js/views/RoomsIndex.vue b/resources/js/views/RoomsIndex.vue
index 12babfc23..46f499a29 100644
--- a/resources/js/views/RoomsIndex.vue
+++ b/resources/js/views/RoomsIndex.vue
@@ -165,6 +165,7 @@
                 severity="secondary"
                 outlined
                 icon="fa-solid fa-sync"
+                :aria-label="$t('app.reload')"
                 :loading="roomTypesBusy"
                 @click="loadRoomTypes"
               />
diff --git a/tests/Backend/Feature/api/v1/SettingsTest.php b/tests/Backend/Feature/api/v1/SettingsTest.php
index 023023675..c3d8d3c78 100644
--- a/tests/Backend/Feature/api/v1/SettingsTest.php
+++ b/tests/Backend/Feature/api/v1/SettingsTest.php
@@ -504,7 +504,6 @@ public function test_update_with_invalid_inputs()
             'recording_attendance_retention_period' => 'notnumber',
             'recording_recording_retention_period' => 'notnumber',
 
-            'bbb_logo' => '',
             'bbb_logo_file' => 'notimagefile',
         ];
 
@@ -556,7 +555,6 @@ public function test_update_with_invalid_inputs()
                 'recording_attendance_retention_period',
                 'recording_recording_retention_period',
 
-                'bbb_logo',
                 'bbb_logo_file',
             ]);
 
@@ -906,7 +904,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);
@@ -989,6 +987,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);