Refactor links

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Improved error handling when a room requires an access code but none was provided ([#3035])
 
+### Fixed
+
+- Buttons insufficiently disabled during loading actions ([#1811])
+
 ## [v4.14.2] - 2026-04-10
 
 ### Fixed
@@ -662,6 +666,7 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#1795]: https://github.com/THM-Health/PILOS/pull/1795
 [#1801]: https://github.com/THM-Health/PILOS/pull/1801
 [#1802]: https://github.com/THM-Health/PILOS/pull/1802
+[#1811]: https://github.com/THM-Health/PILOS/pull/1811
 [#1824]: https://github.com/THM-Health/PILOS/issues/1824
 [#1825]: https://github.com/THM-Health/PILOS/pull/1825
 [#1827]: https://github.com/THM-Health/PILOS/issues/1827

resources/js/components/AdminStreamingRoomTypeEditButton.vue

@@ -10,6 +10,7 @@
     severity="info"
     icon="fa-solid fa-edit"
     data-test="streaming-room-type-settings-edit-button"
+    :disabled="disabled"
     @click="showModal"
   />
 

resources/js/components/AdminStreamingRoomTypeTable.vue

@@ -104,6 +104,7 @@
         <div>
           <AdminStreamingRoomTypeEditButton
             :room-type="slotProps.data"
+            :disabled="isBusy"
             @edited="emit('edited')"
           />
         </div>
@@ -133,5 +134,9 @@ defineProps({
     type: Array,
     required: true,
   },
+  isBusy: {
+    type: Boolean,
+    required: true,
+  },
 });
 </script>

resources/js/components/AppBanner.vue

@@ -28,26 +28,28 @@
       <p class="m-0 whitespace-pre-wrap" data-test="banner-message">
         {{ message }}
       </p>
-      <a
-        v-if="link"
-        :href="link"
-        :target="`_${linkTarget}`"
-        data-test="banner-link-button"
-      >
+      <div>
         <Button
+          v-if="link"
+          as="a"
+          data-test="banner-link-button"
+          :href="link"
+          :target="`_${linkTarget}`"
           :link="linkStyle === 'link'"
-          :style="linkStyle === 'link' ? { color: color } : {}"
-          :class="linkStyle === 'link' ? 'p-0 underline' : ''"
+          :style="buttonStyle"
+          :class="buttonClass"
           :severity="linkStyle"
           :label="linkText ? linkText : link"
         />
-      </a>
+      </div>
     </div>
   </Message>
 </template>
 
 <script setup>
-defineProps({
+import { computed } from "vue";
+
+const props = defineProps({
   background: {
     type: String,
     default: null,
@@ -93,6 +95,14 @@ defineProps({
     default: null,
   },
 });
+
+const buttonClass = computed(() => {
+  return props.linkStyle === "link" ? "p-0 underline" : "";
+});
+
+const buttonStyle = computed(() => {
+  return props.linkStyle === "link" ? { color: props.color } : {};
+});
 </script>
 <style scoped>
 .banner-message {

resources/js/components/RoomTabFilesViewButton.vue

@@ -21,7 +21,7 @@
     :href="downloadUrl"
     icon="fa-solid fa-eye"
     data-test="room-files-view-button"
-    as="a"
+    :as="disabled ? 'button' : 'a'"
   />
 
   <Popover ref="op" class="max-w-96" data-test="terms-of-use-required-info">

resources/js/components/RoomTabRecordingsDownloadButton.vue

@@ -1,7 +1,7 @@
 <template>
   <Button
     v-tooltip:top="$t('rooms.recordings.download')"
-    as="a"
+    :as="props.disabled ? 'button' : 'a'"
     target="_blank"
     :href="downloadUrl"
     severity="help"
@@ -29,9 +29,6 @@ const props = defineProps({
 });
 
 const downloadUrl = computed(() => {
-  if (props.disabled) {
-    return null;
-  }
   return (
     settingsStore.getSetting("general.base_url") +
     "/download/recording/" +

resources/js/components/SettingsRolesDeleteButton.vue

@@ -2,7 +2,7 @@
   <Button
     v-tooltip="$t('admin.roles.delete.item', { id: props.name })"
     :aria-label="$t('admin.roles.delete.item', { id: props.name })"
-    :disabled="isBusy"
+    :disabled="isBusy || props.disabled"
     severity="danger"
     icon="fa-solid fa-trash"
     data-test="roles-delete-button"
@@ -58,6 +58,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["deleted"]);

resources/js/components/SettingsRoomTypesDeleteButton.vue

@@ -2,7 +2,7 @@
   <Button
     v-tooltip="$t('admin.room_types.delete.item', { id: props.name })"
     :aria-label="$t('admin.room_types.delete.item', { id: props.name })"
-    :disabled="isBusy"
+    :disabled="isBusy || props.disabled"
     severity="danger"
     icon="fa-solid fa-trash"
     data-test="room-types-delete-button"
@@ -125,6 +125,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["deleted", "notFound"]);

resources/js/components/SettingsServerPoolsDeleteButton.vue

@@ -2,7 +2,7 @@
   <Button
     v-tooltip="$t('admin.server_pools.delete.item', { name: props.name })"
     :aria-label="$t('admin.server_pools.delete.item', { name: props.name })"
-    :disabled="isBusy"
+    :disabled="isBusy || props.disabled"
     icon="fa-solid fa-trash"
     severity="danger"
     data-test="server-pools-delete-button"
@@ -82,6 +82,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["deleted"]);

resources/js/components/SettingsServersDeleteButton.vue

@@ -3,7 +3,7 @@
     v-tooltip="$t('admin.servers.delete.item', { name: props.name })"
     severity="danger"
     icon="fa-solid fa-trash"
-    :disabled="isBusy"
+    :disabled="isBusy || props.disabled"
     :aria-label="$t('admin.servers.delete.item', { name: props.name })"
     data-test="servers-delete-button"
     @click="showModal()"
@@ -56,6 +56,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["deleted"]);

resources/js/components/SettingsUsersDeleteButton.vue

@@ -12,7 +12,7 @@
         lastname: props.lastname,
       })
     "
-    :disabled="isBusy"
+    :disabled="isBusy || props.disabled"
     severity="danger"
     icon="fa-solid fa-trash"
     data-test="users-delete-button"
@@ -76,6 +76,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["deleted"]);

resources/js/components/SettingsUsersResetPasswordButton.vue

@@ -13,7 +13,7 @@
         lastname: props.lastname,
       })
     "
-    :disabled="isBusy"
+    :disabled="isBusy || props.disabled"
     severity="warn"
     icon="fa-solid fa-key"
     data-test="users-reset-password-button"
@@ -86,6 +86,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const modalVisible = ref(false);

resources/js/components/UserTabEmail.vue

@@ -86,7 +86,7 @@
 <script setup>
 import env from "../env";
 import { useAuthStore } from "../stores/auth";
-import { computed, onBeforeMount, ref } from "vue";
+import { computed, onBeforeMount, ref, watch } from "vue";
 import { useApi } from "../composables/useApi.js";
 import { useUserPermissions } from "../composables/useUserPermission.js";
 import { useFormErrors } from "../composables/useFormErrors.js";
@@ -105,7 +105,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["updateUser", "notFoundError"]);
+const emit = defineEmits(["updateUser", "notFoundError", "busy"]);
 
 const api = useApi();
 const userPermissions = useUserPermissions();
@@ -128,6 +128,10 @@ onBeforeMount(() => {
   validationRequiredEmail.value = null;
 });
 
+watch(isBusy, () => {
+  emit("busy", isBusy.value);
+});
+
 function save(event) {
   if (event) {
     event.preventDefault();

resources/js/components/UserTabOtherSettings.vue

@@ -58,7 +58,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["updateUser", "notFoundError", "staleError"]);
+const emit = defineEmits(["updateUser", "notFoundError", "staleError", "busy"]);
 
 const model = ref(null);
 const isBusy = ref(false);
@@ -74,6 +74,10 @@ watch(
   { deep: true },
 );
 
+watch(isBusy, () => {
+  emit("busy", isBusy.value);
+});
+
 onBeforeMount(() => {
   model.value = _.cloneDeep(props.user);
 });

resources/js/components/UserTabProfile.vue

@@ -184,7 +184,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["updateUser", "notFoundError", "staleError"]);
+const emit = defineEmits(["updateUser", "notFoundError", "staleError", "busy"]);
 
 const isBusy = ref(false);
 const model = ref({});
@@ -208,6 +208,10 @@ watch(
   { deep: true },
 );
 
+watch(isBusy, () => {
+  emit("busy", isBusy.value);
+});
+
 onBeforeMount(() => {
   model.value = _.cloneDeep(props.user);
 });