From 09790a26484a19392159b34e31c0c45870afde50 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Wed, 22 Jan 2025 14:53:28 +0100
Subject: [PATCH 1/4] Refactor links

---
 resources/js/components/AppBanner.vue | 1 +
 resources/js/views/MeetingsIndex.vue  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/resources/js/components/AppBanner.vue b/resources/js/components/AppBanner.vue
index 7fa728cf2..a0b332c43 100644
--- a/resources/js/components/AppBanner.vue
+++ b/resources/js/components/AppBanner.vue
@@ -27,6 +27,7 @@
       <p class="m-0 whitespace-pre-wrap">
         {{ message }}
       </p>
+      <!-- TODO Refactor -->
       <a v-if="link" :href="link" :target="`_${linkTarget}`">
         <Button
           :link="linkStyle === 'link'"
diff --git a/resources/js/views/MeetingsIndex.vue b/resources/js/views/MeetingsIndex.vue
index bc8ab5aca..47fddfa27 100644
--- a/resources/js/views/MeetingsIndex.vue
+++ b/resources/js/views/MeetingsIndex.vue
@@ -198,6 +198,7 @@
           <Column :style="{ width: '100px' }" :header="$t('app.actions')">
             <template #body="slotProps">
               <div class="flex justify-between">
+                <!-- TODO Refactor -->
                 <router-link
                   :to="{
                     name: 'rooms.view',

From bfaabb44946c4b5dbd5a8133abfb43747d9d4aed Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Thu, 23 Jan 2025 12:56:48 +0100
Subject: [PATCH 2/4] Refactor nested button links

---
 resources/js/components/AppBanner.vue | 25 ++++++++++++++++-----
 resources/js/views/MeetingsIndex.vue  | 32 ++++++++++++---------------
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/resources/js/components/AppBanner.vue b/resources/js/components/AppBanner.vue
index a0b332c43..1e5d5897f 100644
--- a/resources/js/components/AppBanner.vue
+++ b/resources/js/components/AppBanner.vue
@@ -27,22 +27,27 @@
       <p class="m-0 whitespace-pre-wrap">
         {{ message }}
       </p>
-      <!-- TODO Refactor -->
-      <a v-if="link" :href="link" :target="`_${linkTarget}`">
+      <div>
         <Button
+          v-if="link"
+          as="a"
+          :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,
@@ -88,6 +93,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 {
diff --git a/resources/js/views/MeetingsIndex.vue b/resources/js/views/MeetingsIndex.vue
index 47fddfa27..a2ac1e575 100644
--- a/resources/js/views/MeetingsIndex.vue
+++ b/resources/js/views/MeetingsIndex.vue
@@ -198,28 +198,24 @@
           <Column :style="{ width: '100px' }" :header="$t('app.actions')">
             <template #body="slotProps">
               <div class="flex justify-between">
-                <!-- TODO Refactor -->
-                <router-link
+                <Button
+                  v-tooltip="
+                    $t('meetings.view_room', {
+                      name: slotProps.data.room.name,
+                    })
+                  "
                   :to="{
                     name: 'rooms.view',
                     params: { id: slotProps.data.room.id },
                   }"
-                  :disabled="true"
-                >
-                  <Button
-                    v-tooltip="
-                      $t('meetings.view_room', {
-                        name: slotProps.data.room.name,
-                      })
-                    "
-                    :aria-label="
-                      $t('meetings.view_room', {
-                        name: slotProps.data.room.name,
-                      })
-                    "
-                    icon="fa-solid fa-eye"
-                  />
-                </router-link>
+                  as="router-link"
+                  :aria-label="
+                    $t('meetings.view_room', {
+                      name: slotProps.data.room.name,
+                    })
+                  "
+                  icon="fa-solid fa-eye"
+                />
               </div>
             </template>
           </Column>

From b0144b45a78a18a50a21c2b374b346828c1f3a1d Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Fri, 24 Jan 2025 15:32:32 +0100
Subject: [PATCH 3/4] Change button type in disabled state, add missing
 disabled prop

---
 CHANGELOG.md                                  |  7 ++-
 composer.lock                                 | 47 ++++++++++---------
 package-lock.json                             | 39 ++++++++-------
 package.json                                  |  8 ++--
 .../RoomTabRecordingsDownloadButton.vue       |  5 +-
 .../components/SettingsRolesDeleteButton.vue  |  6 ++-
 .../SettingsRoomTypesDeleteButton.vue         |  6 ++-
 .../SettingsServerPoolsDeleteButton.vue       |  6 ++-
 .../SettingsServersDeleteButton.vue           |  6 ++-
 .../components/SettingsUsersDeleteButton.vue  |  6 ++-
 .../SettingsUsersResetPasswordButton.vue      |  6 ++-
 resources/js/views/AdminRolesIndex.vue        |  5 +-
 resources/js/views/AdminRolesView.vue         |  5 +-
 resources/js/views/AdminRoomTypesIndex.vue    |  5 +-
 resources/js/views/AdminRoomTypesView.vue     |  5 +-
 resources/js/views/AdminServerPoolsIndex.vue  |  5 +-
 resources/js/views/AdminServerPoolsView.vue   |  5 +-
 resources/js/views/AdminServersIndex.vue      |  5 +-
 resources/js/views/AdminServersView.vue       |  5 +-
 resources/js/views/AdminUsersIndex.vue        |  6 ++-
 resources/js/views/ForgotPassword.vue         | 12 +++++
 21 files changed, 129 insertions(+), 71 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a796742d8..bbc69517d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Broken banner link style 'warning' ([#1759], [#1760])
 - Inconsistent select/multiselect loading states ([#1772])
 - Input fields not disabled correctly on login page ([#1791], [#1794])
+- Style of 'clear' button of the room replacement selector in the 'Delete room type' dialog ([#1784], [#1787])
+- Missing form validation feedback on forgot password page ([#1802])
+- Missing form validation feedback for password fields on login page ([#1801])
 
 ## [v4.2.0] - 2025-01-06
 
@@ -335,8 +338,8 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#1616]: https://github.com/THM-Health/PILOS/pull/1616
 [#1617]: https://github.com/THM-Health/PILOS/pull/1617
 [#1618]: https://github.com/THM-Health/PILOS/pull/1618
-[#1679]: https://github.com/THM-Health/PILOS/issues/1679
 [#1651]: https://github.com/THM-Health/PILOS/issues/1651
+[#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
 [#1721]: https://github.com/THM-Health/PILOS/issues/1721
@@ -348,6 +351,8 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#1772]: https://github.com/THM-Health/PILOS/pull/1772
 [#1791]: https://github.com/THM-Health/PILOS/issues/1791
 [#1794]: https://github.com/THM-Health/PILOS/pull/1794
+[#1801]: https://github.com/THM-Health/PILOS/pull/1801
+[#1802]: https://github.com/THM-Health/PILOS/pull/1802
 [unreleased]: https://github.com/THM-Health/PILOS/compare/v4.2.0...develop
 [v3.0.0]: https://github.com/THM-Health/PILOS/releases/tag/v3.0.0
 [v3.0.1]: https://github.com/THM-Health/PILOS/releases/tag/v3.0.1
diff --git a/composer.lock b/composer.lock
index 5283f7b17..6a4dcd812 100644
--- a/composer.lock
+++ b/composer.lock
@@ -3713,37 +3713,37 @@
         },
         {
             "name": "nunomaduro/collision",
-            "version": "v8.5.0",
+            "version": "v8.6.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/nunomaduro/collision.git",
-                "reference": "f5c101b929c958e849a633283adff296ed5f38f5"
+                "reference": "86f003c132143d5a2ab214e19933946409e0cae7"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/nunomaduro/collision/zipball/f5c101b929c958e849a633283adff296ed5f38f5",
-                "reference": "f5c101b929c958e849a633283adff296ed5f38f5",
+                "url": "https://api.github.com/repos/nunomaduro/collision/zipball/86f003c132143d5a2ab214e19933946409e0cae7",
+                "reference": "86f003c132143d5a2ab214e19933946409e0cae7",
                 "shasum": ""
             },
             "require": {
                 "filp/whoops": "^2.16.0",
-                "nunomaduro/termwind": "^2.1.0",
+                "nunomaduro/termwind": "^2.3.0",
                 "php": "^8.2.0",
-                "symfony/console": "^7.1.5"
+                "symfony/console": "^7.2.1"
             },
             "conflict": {
-                "laravel/framework": "<11.0.0 || >=12.0.0",
-                "phpunit/phpunit": "<10.5.1 || >=12.0.0"
+                "laravel/framework": "<11.39.1 || >=13.0.0",
+                "phpunit/phpunit": "<11.5.3 || >=12.0.0"
             },
             "require-dev": {
-                "larastan/larastan": "^2.9.8",
-                "laravel/framework": "^11.28.0",
-                "laravel/pint": "^1.18.1",
-                "laravel/sail": "^1.36.0",
-                "laravel/sanctum": "^4.0.3",
+                "larastan/larastan": "^2.9.12",
+                "laravel/framework": "^11.39.1",
+                "laravel/pint": "^1.20.0",
+                "laravel/sail": "^1.40.0",
+                "laravel/sanctum": "^4.0.7",
                 "laravel/tinker": "^2.10.0",
-                "orchestra/testbench-core": "^9.5.3",
-                "pestphp/pest": "^2.36.0 || ^3.4.0",
+                "orchestra/testbench-core": "^9.9.2",
+                "pestphp/pest": "^3.7.3",
                 "sebastian/environment": "^6.1.0 || ^7.2.0"
             },
             "type": "library",
@@ -3781,6 +3781,7 @@
                 "cli",
                 "command-line",
                 "console",
+                "dev",
                 "error",
                 "handling",
                 "laravel",
@@ -3806,7 +3807,7 @@
                     "type": "patreon"
                 }
             ],
-            "time": "2024-10-15T16:06:32+00:00"
+            "time": "2025-01-23T13:41:43+00:00"
         },
         {
             "name": "nunomaduro/termwind",
@@ -10583,16 +10584,16 @@
         },
         {
             "name": "squizlabs/php_codesniffer",
-            "version": "3.11.2",
+            "version": "3.11.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/PHPCSStandards/PHP_CodeSniffer.git",
-                "reference": "1368f4a58c3c52114b86b1abe8f4098869cb0079"
+                "reference": "ba05f990e79cbe69b9f35c8c1ac8dca7eecc3a10"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/PHPCSStandards/PHP_CodeSniffer/zipball/1368f4a58c3c52114b86b1abe8f4098869cb0079",
-                "reference": "1368f4a58c3c52114b86b1abe8f4098869cb0079",
+                "url": "https://api.github.com/repos/PHPCSStandards/PHP_CodeSniffer/zipball/ba05f990e79cbe69b9f35c8c1ac8dca7eecc3a10",
+                "reference": "ba05f990e79cbe69b9f35c8c1ac8dca7eecc3a10",
                 "shasum": ""
             },
             "require": {
@@ -10657,9 +10658,13 @@
                 {
                     "url": "https://opencollective.com/php_codesniffer",
                     "type": "open_collective"
+                },
+                {
+                    "url": "https://thanks.dev/phpcsstandards",
+                    "type": "thanks_dev"
                 }
             ],
-            "time": "2024-12-11T16:04:26+00:00"
+            "time": "2025-01-23T17:04:15+00:00"
         },
         {
             "name": "staabm/side-effects-detector",
diff --git a/package-lock.json b/package-lock.json
index 4fcb3ccae..24abdc697 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,21 +48,21 @@
         "vue-chartjs": "^5.3.2",
         "vue-cropperjs": "^5.0.0",
         "vue-i18n": "^11.0",
-        "vue-multiselect": "^3.1.0",
+        "vue-multiselect": "^3.2.0",
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
         "@cypress/code-coverage": "^3.13.10",
         "@eslint/eslintrc": "^3.1.0",
         "@eslint/js": "^9.18.0",
-        "@eslint/json": "^0.9.1",
+        "@eslint/json": "^0.10.0",
         "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
         "cypress": "^14.0.0",
         "eslint": "^9.18.0",
         "eslint-config-prettier": "^10.0.1",
         "eslint-plugin-cypress": "^4.1.0",
         "eslint-plugin-import": "^2.31.0",
-        "eslint-plugin-jsonc": "^2.18.2",
+        "eslint-plugin-jsonc": "^2.19.0",
         "eslint-plugin-mocha": "^10.5.0",
         "eslint-plugin-vue": "^9.32.0",
         "globals": "^15.14.0",
@@ -71,7 +71,7 @@
         "happo.io": "^11.0.1",
         "nyc": "^17.1.0",
         "prettier": "^3.4.2",
-        "prettier-plugin-tailwindcss": "^0.6.10",
+        "prettier-plugin-tailwindcss": "^0.6.11",
         "vite-plugin-istanbul": "^6.0.2",
         "vue-eslint-parser": "^9.4.3"
       },
@@ -2711,14 +2711,16 @@
       }
     },
     "node_modules/@eslint/json": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@eslint/json/-/json-0.9.1.tgz",
-      "integrity": "sha512-mscUtoUx9SOwbiz3aCP2Ittlo6w5NujHOQJge1KKOq2fEe1Zki+C0GCqtRqZBKwShNlzgPtvv1uj7MorMl43OQ==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@eslint/json/-/json-0.10.0.tgz",
+      "integrity": "sha512-aW0181XofoAwuB0sI263bhwnvAlb6OGnGGxHjTZQNLFErfsAXCnwRD+Uxx6/pK73XtKuQ2w1wbhiTJ2BC/erAQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "@eslint/core": "^0.10.0",
         "@eslint/plugin-kit": "^0.2.5",
-        "@humanwhocodes/momoa": "^3.3.4"
+        "@humanwhocodes/momoa": "^3.3.4",
+        "natural-compare": "^1.4.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -7234,10 +7236,11 @@
       }
     },
     "node_modules/eslint-plugin-jsonc": {
-      "version": "2.18.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.18.2.tgz",
-      "integrity": "sha512-SDhJiSsWt3nItl/UuIv+ti4g3m4gpGkmnUJS9UWR3TrpyNsIcnJoBRD7Kof6cM4Rk3L0wrmY5Tm3z7ZPjR2uGg==",
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.19.0.tgz",
+      "integrity": "sha512-Y2H5CCaXWkvh4/RnXrd5RYNdiJg6tFeCs2mMDXQtigZ3WbTc1pA+avpYR1jpL9kAxK4GtqXfzEqjK3Y/v7HkCg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "eslint-compat-utils": "^0.6.0",
@@ -11383,10 +11386,11 @@
       }
     },
     "node_modules/prettier-plugin-tailwindcss": {
-      "version": "0.6.10",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.10.tgz",
-      "integrity": "sha512-ndj2WLDaMzACnr1gAYZiZZLs5ZdOeBYgOsbBmHj3nvW/6q8h8PymsXiEnKvj/9qgCCAoHyvLOisoQdIcsDvIgw==",
+      "version": "0.6.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
+      "integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=14.21.3"
       },
@@ -14162,9 +14166,10 @@
       }
     },
     "node_modules/vue-multiselect": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.1.0.tgz",
-      "integrity": "sha512-+i/fjTqFBpaay9NP+lU7obBeNaw2DdFDFs4mqhsM0aEtKRdvIf7CfREAx2o2B4XDmPrBt1r7x1YCM3BOMLaUgQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.2.0.tgz",
+      "integrity": "sha512-ExI+IPvSbILbtaHrU0CgbBmfbD6yBpIWJKsGLPmuQMC7VWK8Nj1XSAI9eIt3n9/e+LSFYdt8VgfHxeS1O1OeVA==",
+      "license": "MIT",
       "engines": {
         "node": ">= 14.18.1",
         "npm": ">= 6.14.15"
diff --git a/package.json b/package.json
index babae7149..900e2e451 100644
--- a/package.json
+++ b/package.json
@@ -20,14 +20,14 @@
     "@cypress/code-coverage": "^3.13.10",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.18.0",
-    "@eslint/json": "^0.9.1",
+    "@eslint/json": "^0.10.0",
     "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
     "cypress": "^14.0.0",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsonc": "^2.18.2",
+    "eslint-plugin-jsonc": "^2.19.0",
     "eslint-plugin-mocha": "^10.5.0",
     "eslint-plugin-vue": "^9.32.0",
     "globals": "^15.14.0",
@@ -36,7 +36,7 @@
     "happo.io": "^11.0.1",
     "nyc": "^17.1.0",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.10",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "vite-plugin-istanbul": "^6.0.2",
     "vue-eslint-parser": "^9.4.3"
   },
@@ -84,7 +84,7 @@
     "vue-chartjs": "^5.3.2",
     "vue-cropperjs": "^5.0.0",
     "vue-i18n": "^11.0",
-    "vue-multiselect": "^3.1.0",
+    "vue-multiselect": "^3.2.0",
     "vue-router": "^4.5.0"
   },
   "engines": {
diff --git a/resources/js/components/RoomTabRecordingsDownloadButton.vue b/resources/js/components/RoomTabRecordingsDownloadButton.vue
index 3cf41b4ff..f261c6900 100644
--- a/resources/js/components/RoomTabRecordingsDownloadButton.vue
+++ b/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/" +
diff --git a/resources/js/components/SettingsRolesDeleteButton.vue b/resources/js/components/SettingsRolesDeleteButton.vue
index 24e1a167f..ca8bffaf0 100644
--- a/resources/js/components/SettingsRolesDeleteButton.vue
+++ b/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"
     @click="showModal"
@@ -53,6 +53,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["deleted"]);
diff --git a/resources/js/components/SettingsRoomTypesDeleteButton.vue b/resources/js/components/SettingsRoomTypesDeleteButton.vue
index f9b805709..c0090fa14 100644
--- a/resources/js/components/SettingsRoomTypesDeleteButton.vue
+++ b/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"
     @click="showModal"
@@ -92,6 +92,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["deleted", "notFound"]);
diff --git a/resources/js/components/SettingsServerPoolsDeleteButton.vue b/resources/js/components/SettingsServerPoolsDeleteButton.vue
index 66b5df7ae..838709252 100644
--- a/resources/js/components/SettingsServerPoolsDeleteButton.vue
+++ b/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"
     @click="showModal"
@@ -70,6 +70,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["deleted"]);
diff --git a/resources/js/components/SettingsServersDeleteButton.vue b/resources/js/components/SettingsServersDeleteButton.vue
index a48968165..6247db617 100644
--- a/resources/js/components/SettingsServersDeleteButton.vue
+++ b/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 })"
     @click="showModal()"
   />
@@ -51,6 +51,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["deleted"]);
diff --git a/resources/js/components/SettingsUsersDeleteButton.vue b/resources/js/components/SettingsUsersDeleteButton.vue
index 46f6aa725..4bc8c9711 100644
--- a/resources/js/components/SettingsUsersDeleteButton.vue
+++ b/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"
     @click="showModal"
@@ -71,6 +71,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["deleted"]);
diff --git a/resources/js/components/SettingsUsersResetPasswordButton.vue b/resources/js/components/SettingsUsersResetPasswordButton.vue
index bee1b1139..b2f7bd184 100644
--- a/resources/js/components/SettingsUsersResetPasswordButton.vue
+++ b/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"
     @click="showModal"
@@ -81,6 +81,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const modalVisible = ref(false);
diff --git a/resources/js/views/AdminRolesIndex.vue b/resources/js/views/AdminRolesIndex.vue
index f5937e195..11603d729 100644
--- a/resources/js/views/AdminRolesIndex.vue
+++ b/resources/js/views/AdminRolesIndex.vue
@@ -91,7 +91,7 @@
             <Button
               v-if="userPermissions.can('view', slotProps.data)"
               v-tooltip="$t('admin.roles.view', { name: slotProps.data.name })"
-              as="router-link"
+              :as="isBusy ? 'button' : 'router-link'"
               :aria-label="
                 $t('admin.roles.view', { name: slotProps.data.name })
               "
@@ -105,7 +105,7 @@
             <Button
               v-if="userPermissions.can('update', slotProps.data)"
               v-tooltip="$t('admin.roles.edit', { name: slotProps.data.name })"
-              as="router-link"
+              :as="isBusy ? 'button' : 'router-link'"
               severity="info"
               :aria-label="
                 $t('admin.roles.edit', { name: slotProps.data.name })
@@ -121,6 +121,7 @@
               v-if="userPermissions.can('delete', slotProps.data)"
               :id="slotProps.data.id"
               :name="slotProps.data.name"
+              :disabled="isBusy"
               @deleted="loadData()"
             />
           </div>
diff --git a/resources/js/views/AdminRolesView.vue b/resources/js/views/AdminRolesView.vue
index eddf17426..28eee5175 100644
--- a/resources/js/views/AdminRolesView.vue
+++ b/resources/js/views/AdminRolesView.vue
@@ -4,7 +4,7 @@
       <div v-if="model.id && id !== 'new'" class="flex gap-2">
         <Button
           v-if="!viewOnly && userPermissions.can('view', model)"
-          as="router-link"
+          :as="isBusy ? 'button' : 'router-link'"
           severity="secondary"
           :disabled="isBusy"
           :to="{ name: 'admin.roles.view', params: { id: model.id } }"
@@ -13,7 +13,7 @@
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', model)"
-          as="router-link"
+          :as="isBusy ? 'button' : 'router-link'"
           severity="info"
           :disabled="isBusy"
           :to="{ name: 'admin.roles.edit', params: { id: model.id } }"
@@ -24,6 +24,7 @@
           v-if="userPermissions.can('delete', model)"
           :id="model.id"
           :name="name"
+          :disabled="isBusy"
           @deleted="$router.push({ name: 'admin.roles' })"
         />
       </div>
diff --git a/resources/js/views/AdminRoomTypesIndex.vue b/resources/js/views/AdminRoomTypesIndex.vue
index 9db8862e4..8df2ce20f 100644
--- a/resources/js/views/AdminRoomTypesIndex.vue
+++ b/resources/js/views/AdminRoomTypesIndex.vue
@@ -74,7 +74,7 @@
               v-tooltip="
                 $t('admin.room_types.view', { name: slotProps.data.name })
               "
-              as="router-link"
+              :as="isBusy ? 'button' : 'router-link'"
               :aria-label="
                 $t('admin.room_types.view', { name: slotProps.data.name })
               "
@@ -90,7 +90,7 @@
               v-tooltip="
                 $t('admin.room_types.edit', { name: slotProps.data.name })
               "
-              as="router-link"
+              :as="isBusy ? 'button' : 'router-link'"
               severity="info"
               :aria-label="
                 $t('admin.room_types.edit', { name: slotProps.data.name })
@@ -106,6 +106,7 @@
               v-if="userPermissions.can('delete', slotProps.data)"
               :id="slotProps.data.id"
               :name="slotProps.data.name"
+              :disabled="isBusy"
               @deleted="loadData()"
               @not-found="loadData()"
             />
diff --git a/resources/js/views/AdminRoomTypesView.vue b/resources/js/views/AdminRoomTypesView.vue
index db9aac04b..efcd0dd7e 100644
--- a/resources/js/views/AdminRoomTypesView.vue
+++ b/resources/js/views/AdminRoomTypesView.vue
@@ -4,7 +4,7 @@
       <div v-if="model.id && id !== 'new'" class="flex gap-2">
         <Button
           v-if="!viewOnly && userPermissions.can('view', model)"
-          as="router-link"
+          :as="isBusy ? 'button' : 'router-link'"
           severity="secondary"
           :disabled="isBusy"
           :to="{ name: 'admin.room_types.view', params: { id: model.id } }"
@@ -13,7 +13,7 @@
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', model)"
-          as="router-link"
+          :as="isBusy ? 'button' : 'router-link'"
           severity="info"
           :disabled="isBusy"
           :to="{ name: 'admin.room_types.edit', params: { id: model.id } }"
@@ -24,6 +24,7 @@
           v-if="userPermissions.can('delete', model)"
           :id="model.id"
           :name="name"
+          :disabled="isBusy"
           @deleted="$router.push({ name: 'admin.room_types' })"
         />
       </div>
diff --git a/resources/js/views/AdminServerPoolsIndex.vue b/resources/js/views/AdminServerPoolsIndex.vue
index 6e51c1a0d..3b06e02e6 100644
--- a/resources/js/views/AdminServerPoolsIndex.vue
+++ b/resources/js/views/AdminServerPoolsIndex.vue
@@ -85,7 +85,7 @@
               v-tooltip="
                 $t('admin.server_pools.view', { name: slotProps.data.name })
               "
-              as="router-link"
+              :as="isBusy ? 'button' : 'router-link'"
               :aria-label="
                 $t('admin.server_pools.view', { name: slotProps.data.name })
               "
@@ -101,7 +101,7 @@
               v-tooltip="
                 $t('admin.server_pools.edit', { name: slotProps.data.name })
               "
-              as="router-link"
+              :as="isBusy ? 'button' : 'router-link'"
               :aria-label="
                 $t('admin.server_pools.edit', { name: slotProps.data.name })
               "
@@ -117,6 +117,7 @@
               v-if="userPermissions.can('delete', slotProps.data)"
               :id="slotProps.data.id"
               :name="slotProps.data.name"
+              :disabled="isBusy"
               @deleted="loadData()"
             >
             </SettingsServerPoolsDeleteButton>
diff --git a/resources/js/views/AdminServerPoolsView.vue b/resources/js/views/AdminServerPoolsView.vue
index c140e1e7f..f3aaefff3 100644
--- a/resources/js/views/AdminServerPoolsView.vue
+++ b/resources/js/views/AdminServerPoolsView.vue
@@ -4,7 +4,7 @@
       <div v-if="model.id && id !== 'new'" class="flex gap-2">
         <Button
           v-if="!viewOnly && userPermissions.can('view', model)"
-          as="router-link"
+          :as="isBusy ? 'button' : 'router-link'"
           :disabled="isBusy"
           :to="{ name: 'admin.server_pools.view', params: { id: model.id } }"
           severity="secondary"
@@ -13,7 +13,7 @@
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', model)"
-          as="router-link"
+          :as="isBusy ? 'button' : 'router-link'"
           :disabled="isBusy"
           :to="{ name: 'admin.server_pools.edit', params: { id: model.id } }"
           severity="info"
@@ -24,6 +24,7 @@
           v-if="userPermissions.can('delete', model)"
           :id="model.id"
           :name="name"
+          :disabled="isBusy"
           @deleted="$router.push({ name: 'admin.server_pools' })"
         >
         </SettingsServerPoolsDeleteButton>
diff --git a/resources/js/views/AdminServersIndex.vue b/resources/js/views/AdminServersIndex.vue
index d896d736d..64ce55ac8 100644
--- a/resources/js/views/AdminServersIndex.vue
+++ b/resources/js/views/AdminServersIndex.vue
@@ -209,7 +209,7 @@
               v-tooltip="
                 $t('admin.servers.view', { name: slotProps.data.name })
               "
-              as="router-link"
+              :as="isBusy ? 'button' : 'router-link'"
               :disabled="isBusy"
               :aria-label="
                 $t('admin.servers.view', { name: slotProps.data.name })
@@ -225,7 +225,7 @@
               v-tooltip="
                 $t('admin.servers.edit', { name: slotProps.data.name })
               "
-              as="router-link"
+              :as="isBusy ? 'button' : 'router-link'"
               :disabled="isBusy"
               :aria-label="
                 $t('admin.servers.edit', { name: slotProps.data.name })
@@ -244,6 +244,7 @@
               "
               :id="slotProps.data.id"
               :name="slotProps.data.name"
+              :disabled="isBusy"
               @deleted="loadData(null, false)"
             ></SettingsServersDeleteButton>
           </div>
diff --git a/resources/js/views/AdminServersView.vue b/resources/js/views/AdminServersView.vue
index fbe328fd8..ef1a7ce46 100644
--- a/resources/js/views/AdminServersView.vue
+++ b/resources/js/views/AdminServersView.vue
@@ -4,7 +4,7 @@
       <div v-if="model.id !== null && id !== 'new'" class="flex gap-2">
         <Button
           v-if="!viewOnly && userPermissions.can('view', model)"
-          as="router-link"
+          :as="isBusy ? 'button' : 'router-link'"
           :disabled="isBusy"
           :to="{ name: 'admin.servers.view', params: { id: model.id } }"
           severity="secondary"
@@ -13,7 +13,7 @@
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', model)"
-          as="router-link"
+          :as="isBusy ? 'button' : 'router-link'"
           :disabled="isBusy"
           :to="{ name: 'admin.servers.edit', params: { id: model.id } }"
           severity="info"
@@ -24,6 +24,7 @@
           v-if="userPermissions.can('delete', model) && isDisabled"
           :id="model.id"
           :name="name"
+          :disabled="isBusy"
           @deleted="$router.push({ name: 'admin.servers' })"
         ></SettingsServersDeleteButton>
       </div>
diff --git a/resources/js/views/AdminUsersIndex.vue b/resources/js/views/AdminUsersIndex.vue
index e89772256..15755ef8e 100644
--- a/resources/js/views/AdminUsersIndex.vue
+++ b/resources/js/views/AdminUsersIndex.vue
@@ -185,7 +185,7 @@
                   lastname: slotProps.data.lastname,
                 })
               "
-              as="router-link"
+              :as="isBusy ? 'button' : 'router-link'"
               :aria-label="
                 $t('admin.users.view', {
                   firstname: slotProps.data.firstname,
@@ -207,7 +207,7 @@
                   lastname: slotProps.data.lastname,
                 })
               "
-              as="router-link"
+              :as="isBusy ? 'button' : 'router-link'"
               severity="info"
               :aria-label="
                 $t('admin.users.edit', {
@@ -231,6 +231,7 @@
               :firstname="slotProps.data.firstname"
               :lastname="slotProps.data.lastname"
               :email="slotProps.data.email"
+              :disabled="isBusy"
             />
             <SettingsUsersDeleteButton
               v-if="userPermissions.can('delete', slotProps.data)"
@@ -238,6 +239,7 @@
               :firstname="slotProps.data.firstname"
               :lastname="slotProps.data.lastname"
               @deleted="loadData()"
+              :disabled="isBusy"
             />
           </div>
         </template>
diff --git a/resources/js/views/ForgotPassword.vue b/resources/js/views/ForgotPassword.vue
index 8c48bf4b0..e6349f3b8 100644
--- a/resources/js/views/ForgotPassword.vue
+++ b/resources/js/views/ForgotPassword.vue
@@ -23,6 +23,7 @@
               </div>
 
               <Button
+                class="mt-6"
                 type="submit"
                 :disabled="loading"
                 :loading="loading"
@@ -42,6 +43,7 @@ import { useApi } from "../composables/useApi.js";
 import { useRouter } from "vue-router";
 import { ref } from "vue";
 import { useToast } from "../composables/useToast.js";
+import env from "../env.js";
 
 const email = ref(null);
 const loading = ref(false);
@@ -56,6 +58,8 @@ const router = useRouter();
  */
 function submit() {
   loading.value = true;
+  formErrors.clear();
+
   const config = {
     method: "post",
     data: {
@@ -70,6 +74,14 @@ function submit() {
       router.push({ name: "home" });
     })
     .catch((error) => {
+      // failed due to form validation errors
+      if (
+        error.response &&
+        error.response.status === env.HTTP_UNPROCESSABLE_ENTITY
+      ) {
+        formErrors.set(error.response.data.errors);
+        return;
+      }
       api.error(error);
     })
     .finally(() => {

From 0651cb88c945ebe50e963b8fd3ec2f1ad351cf9a Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Fri, 24 Jan 2025 17:35:05 +0100
Subject: [PATCH 4/4] Add busy state events to user components to disable
 button during loading

---
 resources/js/components/UserTabEmail.vue      |  8 +++-
 .../js/components/UserTabOtherSettings.vue    |  6 ++-
 resources/js/components/UserTabProfile.vue    |  6 ++-
 resources/js/components/UserTabSection.vue    | 37 ++++++++++++++++---
 resources/js/components/UserTabSecurity.vue   | 19 ++++++++--
 .../UserTabSecurityPasswordSection.vue        | 20 +++++++---
 ...rTabSecurityRolesAndPermissionsSection.vue | 17 +++++++--
 .../UserTabSecuritySessionsSection.vue        | 35 ++++++++++++------
 resources/js/views/AdminUsersIndex.vue        |  2 +-
 resources/js/views/AdminUsersView.vue         | 18 +++++++--
 10 files changed, 132 insertions(+), 36 deletions(-)

diff --git a/resources/js/components/UserTabEmail.vue b/resources/js/components/UserTabEmail.vue
index 7bd7febad..1208e108d 100644
--- a/resources/js/components/UserTabEmail.vue
+++ b/resources/js/components/UserTabEmail.vue
@@ -87,7 +87,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";
@@ -106,7 +106,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["updateUser", "notFoundError"]);
+const emit = defineEmits(["updateUser", "notFoundError", "busy"]);
 
 const api = useApi();
 const userPermissions = useUserPermissions();
@@ -129,6 +129,10 @@ onBeforeMount(() => {
   validationRequiredEmail.value = null;
 });
 
+watch(isBusy, () => {
+  emit("busy", isBusy.value);
+});
+
 function save(event) {
   if (event) {
     event.preventDefault();
diff --git a/resources/js/components/UserTabOtherSettings.vue b/resources/js/components/UserTabOtherSettings.vue
index 8cf5b6b0a..8a4f88abb 100644
--- a/resources/js/components/UserTabOtherSettings.vue
+++ b/resources/js/components/UserTabOtherSettings.vue
@@ -59,7 +59,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);
@@ -75,6 +75,10 @@ watch(
   { deep: true },
 );
 
+watch(isBusy, () => {
+  emit("busy", isBusy.value);
+});
+
 onBeforeMount(() => {
   model.value = _.cloneDeep(props.user);
 });
diff --git a/resources/js/components/UserTabProfile.vue b/resources/js/components/UserTabProfile.vue
index d6351c79c..e7dd509f6 100644
--- a/resources/js/components/UserTabProfile.vue
+++ b/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);
 });
diff --git a/resources/js/components/UserTabSection.vue b/resources/js/components/UserTabSection.vue
index 8c8c3a6d9..8223146a2 100644
--- a/resources/js/components/UserTabSection.vue
+++ b/resources/js/components/UserTabSection.vue
@@ -6,18 +6,30 @@
       </template>
       <Tabs v-if="!isBusy && user" value="base" scrollable lazy>
         <TabList>
-          <Tab value="base" data-test="base-tab-button"
+          <Tab
+            value="base"
+            data-test="base-tab-button"
+            :disabled="isLoadingAction"
             ><i class="fa-solid fa-user mr-2" />
             {{ $t("admin.users.base_data") }}</Tab
           >
-          <Tab value="email" data-test="email-tab-button"
+          <Tab
+            value="email"
+            data-test="email-tab-button"
+            :disabled="isLoadingAction"
             ><i class="fa-solid fa-envelope mr-2" /> {{ $t("app.email") }}</Tab
           >
-          <Tab value="security" data-test="security-tab-button"
+          <Tab
+            value="security"
+            data-test="security-tab-button"
+            :disabled="isLoadingAction"
             ><i class="fa-solid fa-user-shield mr-2" />
             {{ $t("app.security") }}</Tab
           >
-          <Tab value="others" data-test="others-tab-button"
+          <Tab
+            value="others"
+            data-test="others-tab-button"
+            :disabled="isLoadingAction"
             ><i class="fa-solid fa-user-gear mr-2" />
             {{ $t("admin.users.other_settings") }}</Tab
           >
@@ -30,6 +42,7 @@
               @update-user="updateUser"
               @stale-error="handleStaleError"
               @not-found-error="handleNotFoundError"
+              @busy="(state) => (isLoadingAction = state)"
             />
           </TabPanel>
           <TabPanel value="email">
@@ -38,6 +51,7 @@
               :view-only="viewOnly"
               @update-user="updateUser"
               @not-found-error="handleNotFoundError"
+              @busy="(state) => (isLoadingAction = state)"
             />
           </TabPanel>
           <TabPanel value="security">
@@ -47,6 +61,7 @@
               @update-user="updateUser"
               @stale-error="handleStaleError"
               @not-found-error="handleNotFoundError"
+              @busy="(state) => (isLoadingAction = state)"
             />
           </TabPanel>
           <TabPanel value="others">
@@ -56,6 +71,7 @@
               @update-user="updateUser"
               @stale-error="handleStaleError"
               @not-found-error="handleNotFoundError"
+              @busy="(state) => (isLoadingAction = state)"
             />
           </TabPanel>
         </TabPanels>
@@ -109,10 +125,11 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["updateUser"]);
+const emit = defineEmits(["updateUser", "busy", "loadingAction"]);
 
 const user = ref(null);
 const isBusy = ref(false);
+const isLoadingAction = ref(false);
 const loadingError = ref(false);
 const staleError = ref({});
 const modalVisible = ref(false);
@@ -125,6 +142,16 @@ onMounted(() => {
   loadUser();
 });
 
+// detect busy status while data fetching and notify parent
+watch(isBusy, () => {
+  console.log(isBusy.value);
+  emit("busy", isBusy.value);
+});
+watch(isLoadingAction, () => {
+  console.log(isLoadingAction.value);
+  emit("loadingAction", isLoadingAction.value);
+});
+
 function handleNotFoundError(error) {
   router.push({ name: "admin.users" });
   api.error(error);
diff --git a/resources/js/components/UserTabSecurity.vue b/resources/js/components/UserTabSecurity.vue
index 3b309ca14..886344cde 100644
--- a/resources/js/components/UserTabSecurity.vue
+++ b/resources/js/components/UserTabSecurity.vue
@@ -4,9 +4,11 @@
       <UserTabSecurityRolesAndPermissionsSection
         :user="user"
         :view-only="viewOnly"
+        :disabled="isBusy"
         @update-user="updateUser"
         @stale-error="handleStaleError"
         @not-found-error="handleNotFoundError"
+        @busy="(state) => (isBusy = state)"
       />
     </AdminPanel>
 
@@ -16,13 +18,18 @@
     >
       <UserTabSecurityPasswordSection
         :user="user"
+        :disabled="isBusy"
         @update-user="updateUser"
         @not-found-error="handleNotFoundError"
+        @busy="(state) => (isBusy = state)"
       />
     </AdminPanel>
 
     <AdminPanel v-if="isOwnUser" :title="$t('auth.sessions.active')">
-      <UserTabSecuritySessionsSection />
+      <UserTabSecuritySessionsSection
+        :disabled="isBusy"
+        @busy="(state) => (isBusy = state)"
+      />
     </AdminPanel>
   </div>
 </template>
@@ -30,7 +37,7 @@
 <script setup>
 import { useSettingsStore } from "../stores/settings";
 import { useAuthStore } from "../stores/auth";
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 
 const props = defineProps({
   user: {
@@ -43,11 +50,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["staleError", "updateUser", "notFoundError"]);
+const emit = defineEmits(["staleError", "updateUser", "notFoundError", "busy"]);
 
 const authStore = useAuthStore();
 const settingsStore = useSettingsStore();
 
+const isBusy = ref(false);
+
 const isOwnUser = computed(() => {
   return authStore.currentUser?.id === props.user.id;
 });
@@ -58,6 +67,10 @@ const canChangePassword = computed(() => {
   );
 });
 
+watch(isBusy, () => {
+  emit("busy", isBusy.value);
+});
+
 function handleStaleError(error) {
   emit("staleError", error);
 }
diff --git a/resources/js/components/UserTabSecurityPasswordSection.vue b/resources/js/components/UserTabSecurityPasswordSection.vue
index 7e1f415b9..cd81a3e39 100644
--- a/resources/js/components/UserTabSecurityPasswordSection.vue
+++ b/resources/js/components/UserTabSecurityPasswordSection.vue
@@ -18,7 +18,7 @@
             autocomplete="current-password"
             type="password"
             required
-            :disabled="isBusy"
+            :disabled="isBusy || disabled"
             class="w-full"
             :invalid="formErrors.fieldInvalid('current_password')"
           />
@@ -39,7 +39,7 @@
             :autocomplete="isOwnUser ? 'new-password' : 'off'"
             type="password"
             required
-            :disabled="isBusy"
+            :disabled="isBusy || disabled"
             class="w-full"
             :invalid="formErrors.fieldInvalid('new_password')"
           />
@@ -63,7 +63,7 @@
             :autocomplete="isOwnUser ? 'new-password' : 'off'"
             type="password"
             required
-            :disabled="isBusy"
+            :disabled="isBusy || disabled"
             class="w-full"
             :invalid="formErrors.fieldInvalid('new_password_confirmation')"
           />
@@ -74,7 +74,7 @@
       </div>
       <div class="flex justify-end">
         <Button
-          :disabled="isBusy"
+          :disabled="isBusy || disabled"
           type="submit"
           :loading="isBusy"
           :label="$t('auth.change_password')"
@@ -89,7 +89,7 @@
 <script setup>
 import env from "../env";
 import { useAuthStore } from "../stores/auth";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { useApi } from "../composables/useApi.js";
 import { useFormErrors } from "../composables/useFormErrors.js";
 import { useToast } from "../composables/useToast.js";
@@ -100,9 +100,13 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(["updateUser", "notFoundError"]);
+const emit = defineEmits(["updateUser", "notFoundError", "busy"]);
 
 const api = useApi();
 const formErrors = useFormErrors();
@@ -119,6 +123,10 @@ const isOwnUser = computed(() => {
   return authStore.currentUser?.id === props.user.id;
 });
 
+watch(isBusy, () => {
+  emit("busy", isBusy.value);
+});
+
 function changePassword(event) {
   if (event) {
     event.preventDefault();
diff --git a/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue b/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue
index 8bb41fa09..82af55b26 100644
--- a/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue
+++ b/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue
@@ -13,7 +13,10 @@
             aria-labelledby="roles-label"
             :invalid="formErrors.fieldInvalid('roles', true)"
             :disabled="
-              isBusy || viewOnly || !userPermissions.can('editUserRole', model)
+              isBusy ||
+              viewOnly ||
+              !userPermissions.can('editUserRole', model) ||
+              disabled
             "
             :automatic-roles="automaticRoles"
             :disable-superuser="!authStore.currentUser.superuser"
@@ -26,7 +29,7 @@
       <div class="flex justify-end">
         <Button
           v-if="!viewOnly && userPermissions.can('editUserRole', model)"
-          :disabled="isBusy || rolesLoadingError || rolesLoading"
+          :disabled="isBusy || rolesLoadingError || rolesLoading || disabled"
           type="submit"
           :loading="isBusy"
           :label="$t('app.save')"
@@ -55,9 +58,13 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(["staleError", "updateUser", "notFoundError"]);
+const emit = defineEmits(["staleError", "updateUser", "notFoundError", "busy"]);
 
 const userPermissions = useUserPermissions();
 const api = useApi();
@@ -91,6 +98,10 @@ watch(
   { deep: true },
 );
 
+watch(isBusy, () => {
+  emit("busy", isBusy.value);
+});
+
 onBeforeMount(() => {
   model.value = _.cloneDeep(props.user);
 });
diff --git a/resources/js/components/UserTabSecuritySessionsSection.vue b/resources/js/components/UserTabSecuritySessionsSection.vue
index b324d542b..43f0bbd34 100644
--- a/resources/js/components/UserTabSecuritySessionsSection.vue
+++ b/resources/js/components/UserTabSecuritySessionsSection.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <OverlayComponent :show="loading || loadingError">
+    <OverlayComponent :show="isBusy || loadingError">
       <template #overlay>
         <LoadingRetryButton :error="loadingError" @reload="getSessions()" />
       </template>
@@ -54,11 +54,11 @@
       <div class="flex justify-end">
         <Button
           severity="danger"
-          :disabled="loading || loadingError"
+          :disabled="isBusy || loadingError || disabled"
           class="mt-4"
           :label="$t('auth.sessions.logout_all')"
           icon="fa-solid fa-right-from-bracket"
-          :loading="loading"
+          :loading="isBusy"
           data-test="logout-all-sessions-button"
           @click="deleteAllSessions"
         />
@@ -68,20 +68,33 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useApi } from "../composables/useApi.js";
 import { useToast } from "../composables/useToast.js";
 import { useI18n } from "vue-i18n";
 import UAParser from "ua-parser-js";
 
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["busy"]);
+
 const sessions = ref([]);
-const loading = ref(false);
+const isBusy = ref(false);
 const loadingError = ref(false);
 
 const api = useApi();
 const toast = useToast();
 const { t } = useI18n();
 
+watch(isBusy, () => {
+  emit("busy", isBusy.value);
+});
+
 onMounted(() => {
   getSessions();
 });
@@ -90,22 +103,22 @@ onMounted(() => {
  * Get the user's sessions.
  */
 function getSessions() {
-  loading.value = true;
+  isBusy.value = true;
   api
     .call("sessions")
     .then((response) => {
-      loadingError.value = false;
+      isBusy.value = false;
       sessions.value = response.data.data.map((session) => {
         session.user_agent = parseAgent(session.user_agent);
         return session;
       });
     })
     .catch((error) => {
-      loadingError.value = true;
+      isBusy.value = true;
       api.error(error);
     })
     .finally(() => {
-      loading.value = false;
+      isBusy.value = false;
     });
 }
 
@@ -125,7 +138,7 @@ function parseAgent(agent) {
  * Delete all other sessions
  */
 function deleteAllSessions() {
-  loading.value = true;
+  isBusy.value = true;
 
   api
     .call("sessions", { method: "DELETE" })
@@ -137,7 +150,7 @@ function deleteAllSessions() {
       api.error(error);
     })
     .finally(() => {
-      loading.value = false;
+      isBusy.value = false;
     });
 }
 </script>
diff --git a/resources/js/views/AdminUsersIndex.vue b/resources/js/views/AdminUsersIndex.vue
index 15755ef8e..becab83b6 100644
--- a/resources/js/views/AdminUsersIndex.vue
+++ b/resources/js/views/AdminUsersIndex.vue
@@ -238,8 +238,8 @@
               :id="slotProps.data.id"
               :firstname="slotProps.data.firstname"
               :lastname="slotProps.data.lastname"
-              @deleted="loadData()"
               :disabled="isBusy"
+              @deleted="loadData()"
             />
           </div>
         </template>
diff --git a/resources/js/views/AdminUsersView.vue b/resources/js/views/AdminUsersView.vue
index 182066d8c..c4a4e17e6 100644
--- a/resources/js/views/AdminUsersView.vue
+++ b/resources/js/views/AdminUsersView.vue
@@ -4,20 +4,22 @@
       <div v-if="user" class="flex gap-2">
         <Button
           v-if="!viewOnly && userPermissions.can('view', user)"
-          as="router-link"
+          :as="isBusy || isLoadingAction ? 'button' : 'router-link'"
           :to="{ name: 'admin.users.view', params: { id: user.id } }"
           :label="$t('app.cancel_editing')"
           icon="fa-solid fa-times"
           severity="secondary"
+          :disabled="isBusy || isLoadingAction"
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', user)"
-          as="router-link"
+          :as="isBusy || isLoadingAction ? 'button' : 'router-link'"
           class="p-button p-button-secondary"
           :to="{ name: 'admin.users.edit', params: { id: user.id } }"
           :label="$t('app.edit')"
           icon="fa-solid fa-edit"
           severity="info"
+          :disabled="isBusy || isLoadingAction"
         />
         <SettingsUsersResetPasswordButton
           v-if="
@@ -28,18 +30,26 @@
           :firstname="user.firstname"
           :lastname="user.lastname"
           :email="user.email"
+          :disabled="isBusy || isLoadingAction"
         />
         <SettingsUsersDeleteButton
           v-if="userPermissions.can('delete', user)"
           :id="user.id"
           :firstname="user.firstname"
           :lastname="user.lastname"
+          :disabled="isBusy || isLoadingAction"
           @deleted="$router.push({ name: 'admin.users' })"
         />
       </div>
     </div>
 
-    <UserTabSection :id="id" :view-only="viewOnly" @update-user="updateUser" />
+    <UserTabSection
+      :id="id"
+      :view-only="viewOnly"
+      @update-user="updateUser"
+      @busy="(state) => (isBusy = state)"
+      @loading-action="(state) => (isLoadingAction = state)"
+    />
   </div>
 </template>
 
@@ -53,6 +63,8 @@ const router = useRouter();
 const userPermissions = useUserPermissions();
 const settingsStore = useSettingsStore();
 const breakcrumbLabelData = inject("breakcrumbLabelData");
+const isBusy = ref(false);
+const isLoadingAction = ref(false);
 
 defineProps({
   id: {