Refactor links

CHANGELOG.md

@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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
 
@@ -352,6 +353,7 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#1787]: https://github.com/THM-Health/PILOS/pull/1787
 [#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

resources/js/components/AppBanner.vue

@@ -27,21 +27,27 @@
       <p class="m-0 whitespace-pre-wrap">
         {{ message }}
       </p>
-      <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,
@@ -87,6 +93,14 @@
     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/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"
     @click="showModal"
@@ -53,6 +53,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"
@@ -101,6 +101,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"
     @click="showModal"
@@ -70,6 +70,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 })"
     @click="showModal()"
   />
@@ -51,6 +51,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"
     @click="showModal"
@@ -71,6 +71,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"
     @click="showModal"
@@ -81,6 +81,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const modalVisible = ref(false);

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();

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);
 });

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);
 });

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);