From aacff36893a823a39a71d1747805082ccfcde9b4 Mon Sep 17 00:00:00 2001
From: None of your business <lenastadlinger@gmail.com>
Date: Fri, 13 Jun 2025 14:16:48 +0200
Subject: [PATCH 01/11] fixes(fe): added translation for pending request, added
 translation for matching swipe right request modal headline, added text to
 swiping to make it more clear and improve ux, delete data gives a (fake)
 toast that data is deleted

---
 Frontend/changelog.md                         |   4 +
 .../SwipeContainer/SwipeContainer.vue         | 195 ++++++++++--------
 Frontend/i18n/locales/de-DE.json              |   8 +-
 Frontend/i18n/locales/en-GB.json              |   8 +-
 Frontend/pages/admin/data-protection.vue      |  50 +++--
 Frontend/pages/student/data-protection.vue    |  95 +++++----
 Frontend/pages/student/matching.vue           |  12 +-
 Frontend/pages/student/requests.vue           | 119 ++++++-----
 Frontend/pages/supervisor/data-protection.vue |  95 +++++----
 9 files changed, 326 insertions(+), 260 deletions(-)
 create mode 100644 Frontend/changelog.md

diff --git a/Frontend/changelog.md b/Frontend/changelog.md
new file mode 100644
index 00000000..f7394663
--- /dev/null
+++ b/Frontend/changelog.md
@@ -0,0 +1,4 @@
+- added translation for pending request
+- added translation for matching swipe right request modal headline
+- added text to swiping to make it more clear and improve ux
+- delete data gives a (fake) toast that data is deleted
\ No newline at end of file
diff --git a/Frontend/components/SwipeContainer/SwipeContainer.vue b/Frontend/components/SwipeContainer/SwipeContainer.vue
index ffaf82de..03d8ae81 100644
--- a/Frontend/components/SwipeContainer/SwipeContainer.vue
+++ b/Frontend/components/SwipeContainer/SwipeContainer.vue
@@ -1,113 +1,132 @@
 <script setup lang="ts">
-import { usePointerSwipe } from '@vueuse/core'
-import { computed, shallowRef } from 'vue'
+import { usePointerSwipe } from "@vueuse/core";
+import { computed, shallowRef, ref } from "vue";
 
 interface Props {
-    swipeThreshold?: number
+  swipeThreshold?: number;
+  swipeLeftText?: string;
+  swipeRightText?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    swipeThreshold: 40,
-})
+  swipeThreshold: 40,
+  swipeLeftText: "Request",
+  swipeRightText: "Reject",
+});
 
-const emit = defineEmits(['swipeRight', 'swipeLeft'])
+const emit = defineEmits(["swipeRight", "swipeLeft"]);
 
 defineExpose({
-    reset,
-})
+  reset,
+});
 
-const target = shallowRef<HTMLElement | null>(null)
-const container = shallowRef<HTMLElement | null>(null)
+const target = shallowRef<HTMLElement | null>(null);
+const container = shallowRef<HTMLElement | null>(null);
 
-const containerWidth = computed(() => container.value?.offsetWidth || 0)
+const containerWidth = computed(() => container.value?.offsetWidth || 0);
 
-const left = shallowRef('0')
-const opacity = shallowRef(1)
+const left = shallowRef("0");
+const opacity = shallowRef(1);
 
-const cardIsAtStartPosition = ref(false)
+const cardIsAtStartPosition = ref(false);
 
 function reset() {
-    left.value = '0'
-    opacity.value = 1
-    cardIsAtStartPosition.value = true
+  left.value = "0";
+  opacity.value = 1;
+  cardIsAtStartPosition.value = true;
 }
 
 const { distanceX, isSwiping } = usePointerSwipe(target, {
-    disableTextSelect: true,
-    threshold: props.swipeThreshold,
-    onSwipe() {
-        cardIsAtStartPosition.value = false
-        if (containerWidth.value) {
-            if (distanceX.value < 0) {
-                // Swipe right direction (negative distanceX)
-                const distance = Math.abs(distanceX.value)
-                left.value = `${distance}px`
-                opacity.value = 1.25 - distance / containerWidth.value
-            }
-            else if (distanceX.value > 0) {
-                // Swipe left direction (positive distanceX)
-                const distance = distanceX.value
-                left.value = `-${distance}px`
-                opacity.value = 1.25 - distance / containerWidth.value
-            }
-            else {
-                left.value = '0'
-                opacity.value = 1
-            }
-        }
-    },
-    onSwipeEnd() {
-        if (containerWidth.value) {
-            // Calculate the ratio relative to container width
-            const ratio = Math.abs(distanceX.value) / containerWidth.value
-            
-            if (distanceX.value < 0 && ratio >= 0.5) {
-                // Swipe right direction threshold reached
-                left.value = '100%'
-                opacity.value = 0
-                emit('swipeRight')
-            }
-            else if (distanceX.value > 0 && ratio >= 0.5) {
-                // Swipe left direction threshold reached
-                left.value = '-100%'
-                opacity.value = 0
-                emit('swipeLeft')
-            }
-            else {
-                // Reset if threshold not reached
-                cardIsAtStartPosition.value = true
-                left.value = '0'
-                opacity.value = 1
-            }
-        }
-    },
-})
+  disableTextSelect: true,
+  threshold: props.swipeThreshold,
+  onSwipe() {
+    cardIsAtStartPosition.value = false;
+    if (containerWidth.value) {
+      if (distanceX.value < 0) {
+        // Swipe right direction (negative distanceX)
+        const distance = Math.abs(distanceX.value);
+        left.value = `${distance}px`;
+        opacity.value = 1.25 - distance / containerWidth.value;
+      } else if (distanceX.value > 0) {
+        // Swipe left direction (positive distanceX)
+        const distance = distanceX.value;
+        left.value = `-${distance}px`;
+        opacity.value = 1.25 - distance / containerWidth.value;
+      } else {
+        left.value = "0";
+        opacity.value = 1;
+      }
+    }
+  },
+  onSwipeEnd() {
+    if (containerWidth.value) {
+      // Calculate the ratio relative to container width
+      const ratio = Math.abs(distanceX.value) / containerWidth.value;
 
-const backgroundColorClasses = computed(() => {
-    return {
-        'bg-base-100': cardIsAtStartPosition.value,
-        'bg-success': distanceX.value < -props.swipeThreshold/10,
-        'bg-error':  distanceX.value > props.swipeThreshold/10,
+      if (distanceX.value < 0 && ratio >= 0.5) {
+        // Swipe right direction threshold reached
+        left.value = "100%";
+        opacity.value = 0;
+        emit("swipeRight");
+      } else if (distanceX.value > 0 && ratio >= 0.5) {
+        // Swipe left direction threshold reached
+        left.value = "-100%";
+        opacity.value = 0;
+        emit("swipeLeft");
+      } else {
+        // Reset if threshold not reached
+        cardIsAtStartPosition.value = true;
+        left.value = "0";
+        opacity.value = 1;
+      }
     }
-})
+  },
+});
+
+const backgroundColorClasses = computed(() => ({
+  "bg-base-100": cardIsAtStartPosition.value,
+  "bg-success": distanceX.value < -props.swipeThreshold / 10,
+  "bg-error": distanceX.value > props.swipeThreshold / 10,
+}));
+
+const swipeText = computed(() => {
+  if (distanceX.value < -props.swipeThreshold / 10) return props.swipeLeftText;
+  if (distanceX.value > props.swipeThreshold / 10) return props.swipeRightText;
+  return "";
+});
 
+const textPositionClass = computed(() => {
+  if (distanceX.value < -props.swipeThreshold / 10) return "left-4";
+  if (distanceX.value > props.swipeThreshold / 10) return "right-4";
+  return "";
+});
 </script>
 
 <template>
-    <div class="inline-flex">
-        <div
-            ref="container"
-            class="rounded-3xl relative inline-block overflow-hidden shadow-lg"
-            :class="backgroundColorClasses"
-        >
-            <div
-                ref="target"
-                class="relative w-full flex items-center justify-center"
-                :class="{ 'transition-all duration-200 ease-linear': !isSwiping }"
-                :style="{ left, opacity }"
-            >
-                <slot />
-            </div>
-        </div>
+  <div class="inline-flex">
+    <div
+      ref="container"
+      class="rounded-3xl relative inline-block overflow-hidden shadow-lg"
+      :class="backgroundColorClasses"
+    >
+      <div
+        ref="target"
+        class="relative w-full flex items-center justify-center"
+        :class="{ 'transition-all duration-200 ease-linear': !isSwiping }"
+        :style="{ left, opacity }"
+      >
+        <slot />
+      </div>
+      <!-- Overlay text for swipe direction -->
+      <div
+        v-if="swipeText"
+        class="absolute top-1/2 transform -translate-y-1/2 pointer-events-none"
+        :class="textPositionClass"
+      >
+        <span class="text-xl font-bold text-white">
+          {{ swipeText }}
+        </span>
+      </div>
     </div>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/Frontend/i18n/locales/de-DE.json b/Frontend/i18n/locales/de-DE.json
index 79b944ab..ee359678 100644
--- a/Frontend/i18n/locales/de-DE.json
+++ b/Frontend/i18n/locales/de-DE.json
@@ -152,7 +152,8 @@
       "dataDeletionSubtitle": "🗑 Datenlöschung",
       "deleteMyData": "Meine Daten löschen",
       "generalInfoText": "Bei SuperWise nehmen wir Ihre Privatsphäre und den Schutz Ihrer persönlichen Daten sehr ernst. Diese Richtlinie beschreibt, wie wir Ihre Daten erfassen, verwenden und verwalten – für maximale Transparenz und Ihr beruhigtes Gewissen.",
-      "generalInfoTitle": "🛡️ SuperWise Datenschutzrichtlinie"
+      "generalInfoTitle": "🛡️ SuperWise Datenschutzrichtlinie",
+      "dataDeleted": "Daten erfolgreich gelöscht"
     },
     "student&supervisor": {
       "changesAndOverwritesText": "Wenn Sie persönliche Daten wie Ihren Namen, Ihr Profilbild, die Themenbeschreibung oder die Biografie aktualisieren, wird die vorherige Version dauerhaft überschrieben. Wir speichern keine früheren Versionen oder Backups Ihrer persönlichen Daten.",
@@ -226,6 +227,9 @@
     "sentRequest": "Betreuungsanfrage wurde gesendet",
     "supervisionRequest": "{name} will von dir betreut werden!",
     "supervisorDismissed": "Betreuer wurde abgelehnt",
+    "swipeRightHeadline": "{firstName} {lastName} anfragen",
+    "swipeLeftText": "Anfragen",
+    "swipeRightText": "Entfernen",
     "swipeLeft": {
       "description": "Wenn Sie {firstName} {lastName} entfernen, wird er nie wieder vorgeschlagen, Sie können jedoch weiterhin nach ihm suchen. Sind Sie sicher, dass Sie fortfahren möchten?",
       "headline": "Betreuer entfernen",
@@ -241,7 +245,7 @@
     "confirm": "Bestätigen",
     "dontShowAgain": "Nicht mehr anzeigen",
     "sendSupervisionRequestHeadline": "Betreuungsanfrage senden",
-    "supervisionInfo": "Wenn du eine Anfrage zur Betreuung einer Abschlussarbeit sendest, wird diese an die ausgewählten Betreuenden weitergeleitet. Sie können dann entscheiden, ob sie die Anfrage annehmen oder ablehnen möchten. Wenn sie die Anfrage annehmen, wird eine Bestätigung erstellt, die du herunterladen kannst.",
+    "supervisionInfo": "Wenn du eine Anfrage an {firstName} {lastName} sendest, wird er/sie benachrichtigt und kann die Anfrage annehmen oder ablehnen. Wenn er/sie die Anfrage annimmt, erhältst Du eine automatisch erstellte Bestätigung, die du herunterladen kannst. Wenn er/sie ablehnt, solltest du einen weiteren Betreuer anfragen.",
     "withdrawSupervisionConfirm": "Anfrage zurückziehen",
     "withdrawSupervisionDescription": "Möchten Sie die Betreuungsanfrage von {name} zurückziehen? Nach dem Zurückziehen kann der Betreuer diese Anfrage nicht mehr sehen.",
     "withdrawSupervisionHeadline": "Betreuungsanfrage zurückziehen"
diff --git a/Frontend/i18n/locales/en-GB.json b/Frontend/i18n/locales/en-GB.json
index f20f67e1..712850a7 100644
--- a/Frontend/i18n/locales/en-GB.json
+++ b/Frontend/i18n/locales/en-GB.json
@@ -152,7 +152,8 @@
       "dataDeletionSubtitle": "🗑 Data Deletion",
       "deleteMyData": "Delete my data",
       "generalInfoText": "At SuperWise, we take your privacy and the protection of your personal data seriously. This policy outlines how we collect, use, and manage your information to ensure transparency and your peace of mind.",
-      "generalInfoTitle": "🛡 SuperWise Data Protection Policy"
+      "generalInfoTitle": "🛡 SuperWise Data Protection Policy",
+      "dataDeleted": "Data deleted successfully"
     },
     "student&supervisor": {
       "changesAndOverwritesText": "When you update your personal data, such as your name, profile picture, topic description, or bio, the previous version is permanently overwritten. We do not retain copies or backups of your previous personal data.",
@@ -226,6 +227,9 @@
     "sentRequest": "Supervision request has been sent",
     "supervisionRequest": "{name} wants to be supervised by you!",
     "supervisorDismissed": "Supervisor has been dismissed",
+    "swipeRightHeadline": "Request {firstName} {lastName}",
+    "swipeLeftText": "Request",
+    "swipeRightText": "Reject",
     "swipeLeft": {
       "description": "By dismissing {firstName} {lastName}, they will never get suggested again, but you can still search for them. Are you sure you want to do this?",
       "headline": "Dismiss Supervisor",
@@ -241,7 +245,7 @@
     "confirm": "Confirm",
     "dontShowAgain": "Don't show again",
     "sendSupervisionRequestHeadline": "Send supervision request",
-    "supervisionInfo": "When you send a thesis supervision request, it will be forwarded to the selected supervisors. They can then decide whether to accept or decline the request. If they accept the request, a confirmation will be created that you can download.",
+    "supervisionInfo": "When you send a thesis supervision request to {firstName} {lastName}, they will be notified and can accept or deny your request. If they accept the request, a confirmation will be created that you can download, otherwise you will need to choose a different supervisor.",
     "withdrawSupervisionConfirm": "Withdraw Request",
     "withdrawSupervisionDescription": "Would you like to withdraw the supervision request from {name}? Once withdrawn, the supervisor will no longer see this request.",
     "withdrawSupervisionHeadline": "Withdraw Supervision Request"
diff --git a/Frontend/pages/admin/data-protection.vue b/Frontend/pages/admin/data-protection.vue
index 31cdce25..53539f3b 100644
--- a/Frontend/pages/admin/data-protection.vue
+++ b/Frontend/pages/admin/data-protection.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 const pageContent = [
   "dataProtection.generic.generalInfoTitle",
   "dataProtection.generic.generalInfoText",
@@ -18,15 +17,25 @@ const pageContent = [
 ];
 
 const getStyle = (content: string) => {
-  if (content.match(/Subtitle(\.\d+)?$/))
-    return "pt-6";
+  if (content.match(/Subtitle(\.\d+)?$/)) return "pt-6";
 };
 
 const { t } = useI18n();
 
+const toastData = ref({
+  visible: false,
+  type: "success",
+  message: "",
+});
+
 const deleteData = () => {
   // Implement the logic to delete data
   console.log("Delete data button clicked");
+  toastData.value = {
+    visible: true,
+    type: "success",
+    message: t("dataProtection.generic.dataDeleted"),
+  };
 };
 
 definePageMeta({
@@ -37,9 +46,9 @@ definePageMeta({
 <template>
   <div class="p-8 flex flex-col gap-2">
     <div
-        v-for="content in pageContent"
-        :key="content"
-        :class="getStyle(content)"
+      v-for="content in pageContent"
+      :key="content"
+      :class="getStyle(content)"
     >
       <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
         <li v-for="(item, index) in t(content).split('\n')" :key="index">
@@ -47,20 +56,31 @@ definePageMeta({
         </li>
       </ul>
 
+      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
+        {{ t(content) }}
+      </h2>
 
-      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">{{ t(content) }}</h2>
-
-      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">{{ t(content) }}</h1>
+      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
+        {{ t(content) }}
+      </h1>
 
       <p v-else class="text-body">{{ t(content) }}</p>
     </div>
     <CustomButton
-        :text="t('dataProtection.generic.deleteMyData')"
-        block
-        class="py-8"
-        color="error"
-        left-icon="trash-can"
-        @click="deleteData"
+      :text="t('dataProtection.generic.deleteMyData')"
+      block
+      class="py-8"
+      color="error"
+      left-icon="trash-can"
+      @click="deleteData"
+    />
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
     />
   </div>
 </template>
diff --git a/Frontend/pages/student/data-protection.vue b/Frontend/pages/student/data-protection.vue
index d07a97c3..32425a5e 100644
--- a/Frontend/pages/student/data-protection.vue
+++ b/Frontend/pages/student/data-protection.vue
@@ -1,27 +1,38 @@
 <script lang="ts" setup>
 const pageContent = [
-  'dataProtection.generic.generalInfoTitle',
-  'dataProtection.generic.generalInfoText',
-  'dataProtection.generic.collectedDataSubtitle',
-  'dataProtection.student&supervisor.collectedDataText',
-  'dataProtection.student&supervisor.collectedDataList',
-  'dataProtection.generic.changesAndOverwritesSubtitle',
-  'dataProtection.student&supervisor.changesAndOverwritesText',
-  'dataProtection.generic.dataDeletionSubtitle',
-  'dataProtection.student&supervisor.dataDeletionText.1',
-  'dataProtection.student&supervisor.dataDeletionList',
-  'dataProtection.student&supervisor.dataDeletionText.2',
+  "dataProtection.generic.generalInfoTitle",
+  "dataProtection.generic.generalInfoText",
+  "dataProtection.generic.collectedDataSubtitle",
+  "dataProtection.student&supervisor.collectedDataText",
+  "dataProtection.student&supervisor.collectedDataList",
+  "dataProtection.generic.changesAndOverwritesSubtitle",
+  "dataProtection.student&supervisor.changesAndOverwritesText",
+  "dataProtection.generic.dataDeletionSubtitle",
+  "dataProtection.student&supervisor.dataDeletionText.1",
+  "dataProtection.student&supervisor.dataDeletionList",
+  "dataProtection.student&supervisor.dataDeletionText.2",
 ];
 
 const getStyle = (content: string) => {
-  if (content.match(/Subtitle(\.\d+)?$/)) return 'pt-6';
+  if (content.match(/Subtitle(\.\d+)?$/)) return "pt-6";
 };
 
 const { t } = useI18n();
 
+const toastData = ref({
+  visible: false,
+  type: "success",
+  message: "",
+});
+
 const deleteData = () => {
   // Implement the logic to delete data
-  console.log('Delete data button clicked');
+  console.log("Delete data button clicked");
+  toastData.value = {
+    visible: true,
+    type: "success",
+    message: t("dataProtection.generic.dataDeleted"),
+  };
 };
 
 definePageMeta({
@@ -30,57 +41,43 @@ definePageMeta({
 </script>
 
 <template>
-  <div
-      class="p-8 flex flex-col gap-2"
-  >
+  <div class="p-8 flex flex-col gap-2">
     <div
-        v-for="content in pageContent"
-        :key="content"
-        :class="getStyle(content)"
+      v-for="content in pageContent"
+      :key="content"
+      :class="getStyle(content)"
     >
-      <ul
-          v-if="content.match(/List(\.\d+)?$/)"
-          class="list-disc pl-5"
-      >
-        <li
-            v-for="(item, index) in t(
-							content,
-						).split('\n')"
-            :key="index"
-        >
+      <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
+        <li v-for="(item, index) in t(content).split('\n')" :key="index">
           {{ item }}
         </li>
       </ul>
 
-      <h2
-          v-else-if="
-						content.match(
-							/Subtitle(\.\d+)?$/,
-						)
-					"
-          class="text-large"
-      >
+      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
         {{ t(content) }}
       </h2>
 
-      <h1
-          v-else-if="
-						content.match(/Title(\.\d+)?$/)
-					"
-          class="text-header"
-      >
+      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
         {{ t(content) }}
       </h1>
 
       <p v-else class="text-body">{{ t(content) }}</p>
     </div>
     <CustomButton
-        :text="t('dataProtection.generic.deleteMyData')"
-        block
-        class="py-8"
-        color="error"
-        left-icon="trash-can"
-        @click="deleteData"
+      :text="t('dataProtection.generic.deleteMyData')"
+      block
+      class="py-8"
+      color="error"
+      left-icon="trash-can"
+      @click="deleteData"
+    />
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
     />
   </div>
 </template>
diff --git a/Frontend/pages/student/matching.vue b/Frontend/pages/student/matching.vue
index 05939c97..4b575b62 100644
--- a/Frontend/pages/student/matching.vue
+++ b/Frontend/pages/student/matching.vue
@@ -6,6 +6,8 @@
         :key="supervisor.supervisor_userId || index"
         :ref="(el) => setItemRef(el, supervisor.supervisor_userId)"
         class="mb-4"
+        :swipe-left-text="t('matching.swipeLeftText')"
+        :swipe-right-text="t('matching.swipeRightText')"
         @swipe-left="handleSwipeLeft(supervisor)"
         @swipe-right="handleSwipeRight(supervisor)"
       >
@@ -170,10 +172,16 @@ const handleSwipeRight = async (supervisor: SupervisorData) => {
   removedSupervisor.value = supervisor;
   modalInformation.value = {
     type: supervisionRequestType.CONFIRM,
-    headline: `Request ${supervisor.firstName} ${supervisor.lastName}`,
+    headline: t("matching.swipeRightHeadline", {
+      firstName: supervisor.firstName,
+      lastName: supervisor.lastName,
+    }),
     icon: "",
     warning: "",
-    description: t("modal.supervisionInfo"),
+    description: t("modal.supervisionInfo", {
+      firstName: supervisor.firstName,
+      lastName: supervisor.lastName,
+    }),
     confirmButtonText: t("modal.confirm"),
     confirmButtonColor: "primary",
     supervisor: supervisor,
diff --git a/Frontend/pages/student/requests.vue b/Frontend/pages/student/requests.vue
index afd2c355..c9fed4ec 100644
--- a/Frontend/pages/student/requests.vue
+++ b/Frontend/pages/student/requests.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { useStudentStore } from "~/stores/useStudentStore";
 import EmptyPagePlaceholder from "~/components/Placeholder/EmptyPagePlaceholder.vue";
-import { supervisionRequestStatus, supervisionRequestType, HttpMethods } from "~/shared/enums/enums";
+import {
+  supervisionRequestStatus,
+  supervisionRequestType,
+  HttpMethods,
+} from "~/shared/enums/enums";
 import type { ConfirmationDialogData } from "~/shared/types/userInterfaces";
 import { nextTick, ref } from "vue";
 import type { SupervisionRequestsData } from "~/shared/types/supervisorInterfaces";
@@ -11,8 +15,9 @@ const { t } = useI18n();
 const studentStore = useStudentStore();
 const settingsStore = useSettingsStore();
 
-const { pendingSupervisionRequests, rejectedSupervisionRequests } = storeToRefs(studentStore)
-const modalInformation = ref<ConfirmationDialogData | null>(null)
+const { pendingSupervisionRequests, rejectedSupervisionRequests } =
+  storeToRefs(studentStore);
+const modalInformation = ref<ConfirmationDialogData | null>(null);
 const toast = ref({
   visible: false,
   type: "success",
@@ -30,10 +35,9 @@ onUnmounted(async () => {
 });
 
 const sortedRequests = computed(() => {
-  return [ ...(pendingSupervisionRequests.value || []) ]
-      .sort((a, b) => {
-        return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
-      })
+  return [...(pendingSupervisionRequests.value || [])].sort((a, b) => {
+    return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+  });
 });
 
 function navigate(route: string) {
@@ -44,16 +48,16 @@ async function handleWithdrawRequest(request: SupervisionRequestsData) {
   if (toast.value.visible && modalInformation.value) {
     await handleToastClosed();
   }
-   modalInformation.value = {
+  modalInformation.value = {
     type: supervisionRequestType.DISMISS,
-    headline: t('modal.withdrawSupervisionHeadline'),
-    icon: '',
-    warning: '',
-    description: t('modal.withdrawSupervisionDescription', {
-      name: `${request.supervisor.user.first_name} ${request.supervisor.user.last_name}`
+    headline: t("modal.withdrawSupervisionHeadline"),
+    icon: "",
+    warning: "",
+    description: t("modal.withdrawSupervisionDescription", {
+      name: `${request.supervisor.user.first_name} ${request.supervisor.user.last_name}`,
     }),
-    confirmButtonText: t('modal.withdrawSupervisionConfirm'),
-    confirmButtonColor: 'error',
+    confirmButtonText: t("modal.withdrawSupervisionConfirm"),
+    confirmButtonColor: "error",
     request: request,
   };
   if (settingsStore.settings?.showSupervisionAcceptModal) {
@@ -78,7 +82,7 @@ const handleToastClosed = () => {
 };
 
 const handleWithdrawAction = async (request: SupervisionRequestsData) => {
-   try {
+  try {
     await $fetch(`/api/supervision-requests/${request.id}`, {
       method: HttpMethods.PATCH,
       body: {
@@ -91,11 +95,11 @@ const handleWithdrawAction = async (request: SupervisionRequestsData) => {
     toast.value = {
       visible: true,
       type: "error",
-      message: t('toast.withdrawRequestFailed'),
+      message: t("toast.withdrawRequestFailed"),
     };
     modalInformation.value = null;
   }
-}
+};
 
 const handleToastUndoClick = async () => {
   toast.value.visible = false;
@@ -110,12 +114,14 @@ const showToastInformation = () => {
     handleToastClosed();
   }
   if (modalInformation.value?.request) {
-    studentStore.removePendingSupervisionRequest(modalInformation.value.request.id);
+    studentStore.removePendingSupervisionRequest(
+      modalInformation.value.request.id
+    );
   }
   toast.value = {
     visible: true,
     type: "success",
-    message: t('toast.withdrawnRequest'),
+    message: t("toast.withdrawnRequest"),
   };
 };
 
@@ -128,9 +134,11 @@ const handleModalDontShowAgain = () => {
 
 const openModal = async () => {
   await nextTick();
-  const modal = document.getElementById('confirmationModal') as HTMLDialogElement
-  modal?.showModal()
-}
+  const modal = document.getElementById(
+    "confirmationModal"
+  ) as HTMLDialogElement;
+  modal?.showModal();
+};
 
 definePageMeta({
   layout: "student-base-layout",
@@ -140,18 +148,18 @@ definePageMeta({
 <template>
   <div class="size-full flex overflow-y-auto flex-col py-3 px-8">
     <MiniCard
-        v-for="pendingRequest in sortedRequests"
-        :key="pendingRequest.id"
-        :bottom-text="new Date(pendingRequest.updated_at).toLocaleDateString()"
-        :first-name="pendingRequest.supervisor.user.first_name"
-        :image="pendingRequest.supervisor.user.profile_image"
-        :last-name="pendingRequest.supervisor.user.last_name"
-        :preview-text="`Pending Request to ${pendingRequest.supervisor.user.first_name}`"
-        bottom-icon="tag"
-        class="cursor-pointer"
-        top-icon="user-group"
-        :show-delete="true"
-        @delete-clicked="handleWithdrawRequest(pendingRequest)"
+      v-for="pendingRequest in sortedRequests"
+      :key="pendingRequest.id"
+      :bottom-text="new Date(pendingRequest.updated_at).toLocaleDateString()"
+      :first-name="pendingRequest.supervisor.user.first_name"
+      :image="pendingRequest.supervisor.user.profile_image"
+      :last-name="pendingRequest.supervisor.user.last_name"
+      :preview-text="t('miniCard.pending', {firstName: pendingRequest.supervisor.user.first_name})"
+      bottom-icon="tag"
+      class="cursor-pointer"
+      top-icon="user-group"
+      :show-delete="true"
+      @delete-clicked="handleWithdrawRequest(pendingRequest)"
     />
 
     <EmptyPagePlaceholder
@@ -185,28 +193,33 @@ definePageMeta({
       />
     </CustomAccordion>
     <Toast
-        v-if="toast.visible"
-        :duration="3000"
-        :message="toast.message"
-        :type="toast.type"
-        button-text="Undo"
-        @close="handleToastClosed"
-        @button-click="handleToastUndoClick"
+      v-if="toast.visible"
+      :duration="3000"
+      :message="toast.message"
+      :type="toast.type"
+      button-text="Undo"
+      @close="handleToastClosed"
+      @button-click="handleToastUndoClick"
     />
     <ConfirmationModal
-        v-if="modalInformation && modalInformation.request"
-        :confirm-button-color="modalInformation.confirmButtonColor"
-        :confirm-button-text="modalInformation.confirmButtonText"
-        :description="modalInformation.description"
-        :headline="modalInformation.headline"
-        :icon="modalInformation.icon"
-        :image="modalInformation.request.supervisor.user.profile_image || getPlaceholderImage(modalInformation.request.supervisor.user.first_name, modalInformation.request.supervisor.user.last_name)"
-        linked-component-id="confirmationModal"
-        @confirm="showToastInformation()"
-        @dont-show-again="handleModalDontShowAgain"
+      v-if="modalInformation && modalInformation.request"
+      :confirm-button-color="modalInformation.confirmButtonColor"
+      :confirm-button-text="modalInformation.confirmButtonText"
+      :description="modalInformation.description"
+      :headline="modalInformation.headline"
+      :icon="modalInformation.icon"
+      :image="
+        modalInformation.request.supervisor.user.profile_image ||
+        getPlaceholderImage(
+          modalInformation.request.supervisor.user.first_name,
+          modalInformation.request.supervisor.user.last_name
+        )
+      "
+      linked-component-id="confirmationModal"
+      @confirm="showToastInformation()"
+      @dont-show-again="handleModalDontShowAgain"
     />
   </div>
-
 </template>
 
 <style scoped></style>
diff --git a/Frontend/pages/supervisor/data-protection.vue b/Frontend/pages/supervisor/data-protection.vue
index 08f66bea..5433c4a3 100644
--- a/Frontend/pages/supervisor/data-protection.vue
+++ b/Frontend/pages/supervisor/data-protection.vue
@@ -1,28 +1,39 @@
 <script lang="ts" setup>
 const pageContent = [
-  'dataProtection.generic.generalInfoTitle',
-  'dataProtection.generic.generalInfoText',
-  'dataProtection.generic.collectedDataSubtitle',
-  'dataProtection.student&supervisor.collectedDataText',
-  'dataProtection.student&supervisor.collectedDataList',
-  'dataProtection.generic.changesAndOverwritesSubtitle',
-  'dataProtection.student&supervisor.changesAndOverwritesText',
-  'dataProtection.generic.dataDeletionSubtitle',
-  'dataProtection.student&supervisor.dataDeletionText.1',
-  'dataProtection.student&supervisor.dataDeletionList',
-  'dataProtection.student&supervisor.dataDeletionText.2',
+  "dataProtection.generic.generalInfoTitle",
+  "dataProtection.generic.generalInfoText",
+  "dataProtection.generic.collectedDataSubtitle",
+  "dataProtection.student&supervisor.collectedDataText",
+  "dataProtection.student&supervisor.collectedDataList",
+  "dataProtection.generic.changesAndOverwritesSubtitle",
+  "dataProtection.student&supervisor.changesAndOverwritesText",
+  "dataProtection.generic.dataDeletionSubtitle",
+  "dataProtection.student&supervisor.dataDeletionText.1",
+  "dataProtection.student&supervisor.dataDeletionList",
+  "dataProtection.student&supervisor.dataDeletionText.2",
 ];
 
 const getStyle = (content: string) => {
-  if (content.match(/Subtitle(\.\d+)?$/)) return 'pt-6';
+  if (content.match(/Subtitle(\.\d+)?$/)) return "pt-6";
   // Removed unnecessary commented-out style conditions to reduce clutter.
 };
 
 const { t } = useI18n();
 
+const toastData = ref({
+  visible: false,
+  type: "success",
+  message: "",
+});
+
 const deleteData = () => {
   // Implement the logic to delete data
-  console.log('Delete data button clicked');
+  console.log("Delete data button clicked");
+  toastData.value = {
+    visible: true,
+    type: "success",
+    message: t("dataProtection.generic.dataDeleted"),
+  };
 };
 
 definePageMeta({
@@ -31,57 +42,43 @@ definePageMeta({
 </script>
 
 <template>
-  <div
-      class="p-8 flex flex-col gap-2"
-  >
+  <div class="p-8 flex flex-col gap-2">
     <div
-        v-for="content in pageContent"
-        :key="content"
-        :class="getStyle(content)"
+      v-for="content in pageContent"
+      :key="content"
+      :class="getStyle(content)"
     >
-      <ul
-          v-if="content.match(/List(\.\d+)?$/)"
-          class="list-disc pl-5"
-      >
-        <li
-            v-for="(item, index) in t(
-							content,
-						).split('\n')"
-            :key="index"
-        >
+      <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
+        <li v-for="(item, index) in t(content).split('\n')" :key="index">
           {{ item }}
         </li>
       </ul>
 
-      <h2
-          v-else-if="
-						content.match(
-							/Subtitle(\.\d+)?$/,
-						)
-					"
-          class="text-large"
-      >
+      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
         {{ t(content) }}
       </h2>
 
-      <h1
-          v-else-if="
-						content.match(/Title(\.\d+)?$/)
-					"
-          class="text-header"
-      >
+      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
         {{ t(content) }}
       </h1>
 
       <p v-else class="text-body">{{ t(content) }}</p>
     </div>
     <CustomButton
-        :text="t('dataProtection.generic.deleteMyData')"
-        block
-        class="py-8"
-        color="error"
-        left-icon="trash-can"
-        @click="deleteData"
+      :text="t('dataProtection.generic.deleteMyData')"
+      block
+      class="py-8"
+      color="error"
+      left-icon="trash-can"
+      @click="deleteData"
+    />
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
     />
   </div>
 </template>

From b034ccab24d99c2ceb47556f8d42f1fa437afbff Mon Sep 17 00:00:00 2001
From: None of your business <lenastadlinger@gmail.com>
Date: Tue, 17 Jun 2025 20:13:06 +0200
Subject: [PATCH 02/11] fix(fe): toast for add student error

---
 Frontend/changelog.md                         |  4 --
 Frontend/i18n/locales/de-DE.json              |  4 +-
 Frontend/i18n/locales/en-GB.json              |  4 +-
 .../supervisor/currently-supervising.vue      | 53 +++++++++++---
 Frontend/pages/supervisor/dashboard.vue       | 70 ++++++++++---------
 5 files changed, 88 insertions(+), 47 deletions(-)
 delete mode 100644 Frontend/changelog.md

diff --git a/Frontend/changelog.md b/Frontend/changelog.md
deleted file mode 100644
index f7394663..00000000
--- a/Frontend/changelog.md
+++ /dev/null
@@ -1,4 +0,0 @@
-- added translation for pending request
-- added translation for matching swipe right request modal headline
-- added text to swiping to make it more clear and improve ux
-- delete data gives a (fake) toast that data is deleted
\ No newline at end of file
diff --git a/Frontend/i18n/locales/de-DE.json b/Frontend/i18n/locales/de-DE.json
index ee359678..40218514 100644
--- a/Frontend/i18n/locales/de-DE.json
+++ b/Frontend/i18n/locales/de-DE.json
@@ -129,7 +129,7 @@
     "supervisor": {
       "manageStudents": "Studenten Verwalten",
       "noRequests": "Es gibt keine offenen Anfragen...",
-      "slotsFilled": "Belegte Slots"
+      "slotsFilled": "Freie Slots"
     }
   },
   "dataProtection": {
@@ -178,6 +178,7 @@
     "done": "Fertig",
     "download": "Herunterladen",
     "edit": "Bearbeiten",
+    "error": "Fehler",
     "english": "🇬🇧 English",
     "french": "🇫🇷 Français",
     "german": "🇩🇪 Deutsch",
@@ -197,6 +198,7 @@
     "showLess": "Weniger anzeigen",
     "spanish": "🇪🇸 Español",
     "student": "Studierende",
+    "success": "Erfolgreich ausgeführt",
     "supervise": "Betreuen",
     "supervisionRequest": "Betreuungsanfrage",
     "supervisor": "Betreuende",
diff --git a/Frontend/i18n/locales/en-GB.json b/Frontend/i18n/locales/en-GB.json
index 712850a7..2d2a9031 100644
--- a/Frontend/i18n/locales/en-GB.json
+++ b/Frontend/i18n/locales/en-GB.json
@@ -129,7 +129,7 @@
     "supervisor": {
       "manageStudents": "Manage Students",
       "noRequests": "There are no open requests...",
-      "slotsFilled": "Slots filled"
+      "slotsFilled": "Free slots"
     }
   },
   "dataProtection": {
@@ -178,6 +178,7 @@
     "done": "Done",
     "download": "Download",
     "edit": "Edit",
+    "error": "Error",
     "english": "🇬🇧 English",
     "french": "🇫🇷 Français",
     "german": "🇩🇪 Deutsch",
@@ -197,6 +198,7 @@
     "showLess": "Show less",
     "spanish": "🇪🇸 Español",
     "student": "Student",
+    "success": "Success",
     "supervise": "Supervise",
     "supervisionRequest": "Supervision request",
     "supervisor": "Supervisor",
diff --git a/Frontend/pages/supervisor/currently-supervising.vue b/Frontend/pages/supervisor/currently-supervising.vue
index de66145a..d413645a 100644
--- a/Frontend/pages/supervisor/currently-supervising.vue
+++ b/Frontend/pages/supervisor/currently-supervising.vue
@@ -17,6 +17,8 @@ const { getUserByEmail } = useUserApi();
 const current_user = ref<UserData | null>(null);
 const supervisor_data = ref<SupervisorData | null>(null);
 
+const { t } = useI18n();
+
 const {
   data: requests,
   pending,
@@ -24,6 +26,12 @@ const {
   refresh,
 } = useSupervisionRequests("ACCEPTED");
 
+const toastData = ref({
+  visible: false,
+  type: "success",
+  message: "",
+});
+
 const students = computed(() =>
   (requests.value ?? []).map((request) => ({
     id: request.student.user_id,
@@ -83,14 +91,33 @@ async function addStudent(email: string) {
   );
 
   if (!existingStudent) {
-    await $fetch("/api/supervision-requests", {
-      method: "POST",
-      body: {
-        // This "id" usage is correct based on the current backend, even if you ide says its not
-        supervisor_id: supervisor_data.value.id,
-        student_email: email,
-      },
-    });
+    try {
+      await $fetch("/api/supervision-requests", {
+        method: "POST",
+        body: {
+          // This "id" usage is correct based on the current backend, even if you ide says its not
+          supervisor_id: supervisor_data.value.id,
+          student_email: email,
+        },
+      });
+      toastData.value = {
+        visible: true,
+        type: "success",
+        message: t("generic.success"), // or any other suitable success message
+      };
+    } catch (err) {
+      const errorMessage =
+        (err as { data?: { message?: string }; message?: string })?.data
+          ?.message ||
+        (err as { message?: string })?.message ||
+        t("generic.error");
+
+      toastData.value = {
+        visible: true,
+        type: "error",
+        message: errorMessage,
+      };
+    }
   }
   await refresh();
 }
@@ -109,7 +136,7 @@ definePageMeta({
       v-if="pending || error"
       class="w-full h-fit min-h-64 p-4 border border-base-300 rounded-3xl flex flex-col justify-center items-center"
     >
-      <div v-if="pending">Loading…</div>
+      <div v-if="pending">{{ t("generic.loading") }}</div>
       <div v-else-if="error" class="text-red-600">{{ error.message }}</div>
     </div>
     <!-- your IDE says that total_spots doesnt exists. Its lying. The interfaces are fucked up, we gotta fix that later-->
@@ -120,6 +147,14 @@ definePageMeta({
       @add-student="addStudent"
       @remove-student="removeStudent"
     />
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
+    />
   </div>
 </template>
 
diff --git a/Frontend/pages/supervisor/dashboard.vue b/Frontend/pages/supervisor/dashboard.vue
index 9e73ec02..99c7a80a 100644
--- a/Frontend/pages/supervisor/dashboard.vue
+++ b/Frontend/pages/supervisor/dashboard.vue
@@ -7,8 +7,8 @@ import { useSupervisionRequests } from "~/composables/useSupervisionRequests";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import EmptyPagePlaceholder from "~/components/Placeholder/EmptyPagePlaceholder.vue";
 
-const authStore = useAuthStore()
-const { user } = storeToRefs(authStore)
+const authStore = useAuthStore();
+const { user } = storeToRefs(authStore);
 const { getUserByEmail } = useUserApi();
 const { getSupervisorByUserId } = useSupervisorApi();
 const userStore = useUserStore();
@@ -33,15 +33,15 @@ const visibleRequests = computed(
 );
 
 watch(
-    () => user.value?.primaryEmailAddress?.emailAddress,
-    async (email) => {
-      if (!email) return;
+  () => user.value?.primaryEmailAddress?.emailAddress,
+  async (email) => {
+    if (!email) return;
 
-      if (!userStore.user) {
-        const fetched = (await getUserByEmail(email)) as UserData;
-        userStore.setUser(fetched);
-      }
-      current_user.value = userStore.user;
+    if (!userStore.user) {
+      const fetched = (await getUserByEmail(email)) as UserData;
+      userStore.setUser(fetched);
+    }
+    current_user.value = userStore.user;
 
       if (current_user.value?.id) {
         const data = (await getSupervisorByUserId(
@@ -73,14 +73,14 @@ definePageMeta({
 <template>
   <div class="flex flex-col w-full gap-8 p-8">
     <ActionCard
-        :button-text="t('dashboard.supervisor.manageStudents')"
-        card-type="primary"
-        class="w-full text-center"
-        @action-button-clicked="navigate('/supervisor/currently-supervising')"
+      :button-text="t('dashboard.supervisor.manageStudents')"
+      card-type="primary"
+      class="w-full text-center"
+      @action-button-clicked="navigate('/supervisor/currently-supervising')"
     >
       <div class="py-8 px-16 w-full">
         <h2 class="text-xl">
-          <FontAwesomeIcon icon="user-group"/>
+          <FontAwesomeIcon icon="user-group" />
           {{
             // this works, even though the IDE tells you it doesnt. The frontend interface types are not consitent with the backend types. Dont ask why.
             (supervisor_data?.total_spots ?? 0) - (supervisor_data?.available_spots ?? 0)
@@ -93,31 +93,37 @@ definePageMeta({
     </ActionCard>
 
     <ActionCard
-        :button-text="t('generic.showAll')"
-        :disabled="visibleCount >= (pendingRequests?.length ?? 0)"
-        :header-text="t('generic.requests')"
-        card-type="ghost"
-        @action-button-clicked="navigateTo('/supervisor/matching')"
+      :button-text="t('generic.showAll')"
+      :disabled="visibleCount >= (pendingRequests?.length ?? 0)"
+      :header-text="t('generic.requests')"
+      card-type="ghost"
+      @action-button-clicked="navigateTo('/supervisor/matching')"
     >
       <EmptyPagePlaceholder
-          :render-condition="visibleRequests"
-          :text="t('dashboard.supervisor.noRequests')"
+        :render-condition="visibleRequests"
+        :text="t('dashboard.supervisor.noRequests')"
       />
       <NuxtLink
-          v-for="request in visibleRequests"
-          :key="request.id"
-          :to="`/profiles/${request.student.user_id}`"
+        v-for="request in visibleRequests"
+        :key="request.id"
+        :to="`/profiles/${request.student.user_id}`"
       >
         <MiniCard
-            :bottom-text="formatTimeString(request.updated_at, undefined)"
-            :first-name="request.student.user.first_name"
-            :image="request.student.user.profile_image || getPlaceholderImage(request.student.user.first_name, request.student.user.last_name) || ''"
-            :last-name="request.student.user.last_name"
-            :preview-text="request.student.thesis_description"
-            top-icon="message"
+          :bottom-text="formatTimeString(request.updated_at, undefined)"
+          :first-name="request.student.user.first_name"
+          :image="
+            request.student.user.profile_image ||
+            getPlaceholderImage(
+              request.student.user.first_name,
+              request.student.user.last_name
+            ) ||
+            ''
+          "
+          :last-name="request.student.user.last_name"
+          :preview-text="request.student.thesis_description"
+          top-icon="message"
         />
       </NuxtLink>
-
     </ActionCard>
   </div>
 </template>

From e238e0632490be878aafa2502f3b069985015e7a Mon Sep 17 00:00:00 2001
From: None of your business <lenastadlinger@gmail.com>
Date: Tue, 17 Jun 2025 20:17:57 +0200
Subject: [PATCH 03/11] fix(fe): fixed translation keys

---
 .../SupervisorStudentList.vue                 | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue b/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue
index aac551b5..2e984aea 100644
--- a/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue
+++ b/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue
@@ -226,8 +226,10 @@ watch(
           lastName: studentToRemove?.lastName,
         })
       "
-      :confirm-text="t('supervisorStudentList.removeStudent.confirmText')"
-      :checkbox-label="t('supervisorStudentList.checkboxLabel')"
+      :confirm-text="
+        t('settings.supervisorStudentList.removeStudent.confirmText')
+      "
+      :checkbox-label="t('settings.supervisorStudentList.checkboxLabel')"
       setting-key="showRemoveStudentModal"
       :title="t('supervisorStudentList.removeStudent.title')"
       icon="trash"
@@ -254,8 +256,10 @@ watch(
         })
       "
       :show-checkbox="true"
-      :checkbox-label="t('supervisorStudentList.checkboxLabel')"
-      :confirm-text="t('supervisorStudentList.addExistingStudent.confirmText')"
+      :checkbox-label="t('settings.supervisorStudentList.checkboxLabel')"
+      :confirm-text="
+        t('settings.supervisorStudentList.addExistingStudent.confirmText')
+      "
       icon="user-group"
       setting-key="showAddStudentModal"
       :sub-text="t('supervisorStudentList.addExistingStudent.subText')"
@@ -273,14 +277,18 @@ watch(
         })
       "
       :show-checkbox="true"
-      :checkbox-label="t('supervisorStudentList.checkboxLabel')"
-      confirm-text=""
+      :checkbox-label="t('settings.supervisorStudentList.checkboxLabel')"
+      :confirm-text="
+        t('settings.supervisorStudentList.addNotExistingStudent.confirmText')
+      "
       icon="user-group"
       image-alt="Logo"
       image-src="../images/Superwise_Logo.svg"
       setting-key="showAddStudentModal"
-      :sub-text="t('supervisorStudentList.addExistingStudent.subText')"
-      :title="t('supervisorStudentList.addNewStudent.title')"
+      :sub-text="
+        t('settings.supervisorStudentList.addNotExistingStudent.subText')
+      "
+      :title="t('settings.supervisorStudentList.addNewStudent.title')"
       @confirm="addStudent"
     />
   </div>

From 532011594a56563067a3d62ec4ca05872792bda5 Mon Sep 17 00:00:00 2001
From: None of your business <lenastadlinger@gmail.com>
Date: Fri, 13 Jun 2025 14:16:48 +0200
Subject: [PATCH 04/11] fixes(fe): added translation for pending request, added
 translation for matching swipe right request modal headline, added text to
 swiping to make it more clear and improve ux, delete data gives a (fake)
 toast that data is deleted

---
 Frontend/changelog.md                         |   4 +
 .../SwipeContainer/SwipeContainer.vue         | 195 ++++++++++--------
 Frontend/i18n/locales/de-DE.json              |   8 +-
 Frontend/i18n/locales/en-GB.json              |   8 +-
 Frontend/pages/admin/data-protection.vue      |  50 +++--
 Frontend/pages/student/data-protection.vue    |  95 +++++----
 Frontend/pages/student/matching.vue           |  12 +-
 Frontend/pages/student/requests.vue           | 119 ++++++-----
 Frontend/pages/supervisor/data-protection.vue |  95 +++++----
 9 files changed, 326 insertions(+), 260 deletions(-)
 create mode 100644 Frontend/changelog.md

diff --git a/Frontend/changelog.md b/Frontend/changelog.md
new file mode 100644
index 00000000..f7394663
--- /dev/null
+++ b/Frontend/changelog.md
@@ -0,0 +1,4 @@
+- added translation for pending request
+- added translation for matching swipe right request modal headline
+- added text to swiping to make it more clear and improve ux
+- delete data gives a (fake) toast that data is deleted
\ No newline at end of file
diff --git a/Frontend/components/SwipeContainer/SwipeContainer.vue b/Frontend/components/SwipeContainer/SwipeContainer.vue
index ffaf82de..03d8ae81 100644
--- a/Frontend/components/SwipeContainer/SwipeContainer.vue
+++ b/Frontend/components/SwipeContainer/SwipeContainer.vue
@@ -1,113 +1,132 @@
 <script setup lang="ts">
-import { usePointerSwipe } from '@vueuse/core'
-import { computed, shallowRef } from 'vue'
+import { usePointerSwipe } from "@vueuse/core";
+import { computed, shallowRef, ref } from "vue";
 
 interface Props {
-    swipeThreshold?: number
+  swipeThreshold?: number;
+  swipeLeftText?: string;
+  swipeRightText?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    swipeThreshold: 40,
-})
+  swipeThreshold: 40,
+  swipeLeftText: "Request",
+  swipeRightText: "Reject",
+});
 
-const emit = defineEmits(['swipeRight', 'swipeLeft'])
+const emit = defineEmits(["swipeRight", "swipeLeft"]);
 
 defineExpose({
-    reset,
-})
+  reset,
+});
 
-const target = shallowRef<HTMLElement | null>(null)
-const container = shallowRef<HTMLElement | null>(null)
+const target = shallowRef<HTMLElement | null>(null);
+const container = shallowRef<HTMLElement | null>(null);
 
-const containerWidth = computed(() => container.value?.offsetWidth || 0)
+const containerWidth = computed(() => container.value?.offsetWidth || 0);
 
-const left = shallowRef('0')
-const opacity = shallowRef(1)
+const left = shallowRef("0");
+const opacity = shallowRef(1);
 
-const cardIsAtStartPosition = ref(false)
+const cardIsAtStartPosition = ref(false);
 
 function reset() {
-    left.value = '0'
-    opacity.value = 1
-    cardIsAtStartPosition.value = true
+  left.value = "0";
+  opacity.value = 1;
+  cardIsAtStartPosition.value = true;
 }
 
 const { distanceX, isSwiping } = usePointerSwipe(target, {
-    disableTextSelect: true,
-    threshold: props.swipeThreshold,
-    onSwipe() {
-        cardIsAtStartPosition.value = false
-        if (containerWidth.value) {
-            if (distanceX.value < 0) {
-                // Swipe right direction (negative distanceX)
-                const distance = Math.abs(distanceX.value)
-                left.value = `${distance}px`
-                opacity.value = 1.25 - distance / containerWidth.value
-            }
-            else if (distanceX.value > 0) {
-                // Swipe left direction (positive distanceX)
-                const distance = distanceX.value
-                left.value = `-${distance}px`
-                opacity.value = 1.25 - distance / containerWidth.value
-            }
-            else {
-                left.value = '0'
-                opacity.value = 1
-            }
-        }
-    },
-    onSwipeEnd() {
-        if (containerWidth.value) {
-            // Calculate the ratio relative to container width
-            const ratio = Math.abs(distanceX.value) / containerWidth.value
-            
-            if (distanceX.value < 0 && ratio >= 0.5) {
-                // Swipe right direction threshold reached
-                left.value = '100%'
-                opacity.value = 0
-                emit('swipeRight')
-            }
-            else if (distanceX.value > 0 && ratio >= 0.5) {
-                // Swipe left direction threshold reached
-                left.value = '-100%'
-                opacity.value = 0
-                emit('swipeLeft')
-            }
-            else {
-                // Reset if threshold not reached
-                cardIsAtStartPosition.value = true
-                left.value = '0'
-                opacity.value = 1
-            }
-        }
-    },
-})
+  disableTextSelect: true,
+  threshold: props.swipeThreshold,
+  onSwipe() {
+    cardIsAtStartPosition.value = false;
+    if (containerWidth.value) {
+      if (distanceX.value < 0) {
+        // Swipe right direction (negative distanceX)
+        const distance = Math.abs(distanceX.value);
+        left.value = `${distance}px`;
+        opacity.value = 1.25 - distance / containerWidth.value;
+      } else if (distanceX.value > 0) {
+        // Swipe left direction (positive distanceX)
+        const distance = distanceX.value;
+        left.value = `-${distance}px`;
+        opacity.value = 1.25 - distance / containerWidth.value;
+      } else {
+        left.value = "0";
+        opacity.value = 1;
+      }
+    }
+  },
+  onSwipeEnd() {
+    if (containerWidth.value) {
+      // Calculate the ratio relative to container width
+      const ratio = Math.abs(distanceX.value) / containerWidth.value;
 
-const backgroundColorClasses = computed(() => {
-    return {
-        'bg-base-100': cardIsAtStartPosition.value,
-        'bg-success': distanceX.value < -props.swipeThreshold/10,
-        'bg-error':  distanceX.value > props.swipeThreshold/10,
+      if (distanceX.value < 0 && ratio >= 0.5) {
+        // Swipe right direction threshold reached
+        left.value = "100%";
+        opacity.value = 0;
+        emit("swipeRight");
+      } else if (distanceX.value > 0 && ratio >= 0.5) {
+        // Swipe left direction threshold reached
+        left.value = "-100%";
+        opacity.value = 0;
+        emit("swipeLeft");
+      } else {
+        // Reset if threshold not reached
+        cardIsAtStartPosition.value = true;
+        left.value = "0";
+        opacity.value = 1;
+      }
     }
-})
+  },
+});
+
+const backgroundColorClasses = computed(() => ({
+  "bg-base-100": cardIsAtStartPosition.value,
+  "bg-success": distanceX.value < -props.swipeThreshold / 10,
+  "bg-error": distanceX.value > props.swipeThreshold / 10,
+}));
+
+const swipeText = computed(() => {
+  if (distanceX.value < -props.swipeThreshold / 10) return props.swipeLeftText;
+  if (distanceX.value > props.swipeThreshold / 10) return props.swipeRightText;
+  return "";
+});
 
+const textPositionClass = computed(() => {
+  if (distanceX.value < -props.swipeThreshold / 10) return "left-4";
+  if (distanceX.value > props.swipeThreshold / 10) return "right-4";
+  return "";
+});
 </script>
 
 <template>
-    <div class="inline-flex">
-        <div
-            ref="container"
-            class="rounded-3xl relative inline-block overflow-hidden shadow-lg"
-            :class="backgroundColorClasses"
-        >
-            <div
-                ref="target"
-                class="relative w-full flex items-center justify-center"
-                :class="{ 'transition-all duration-200 ease-linear': !isSwiping }"
-                :style="{ left, opacity }"
-            >
-                <slot />
-            </div>
-        </div>
+  <div class="inline-flex">
+    <div
+      ref="container"
+      class="rounded-3xl relative inline-block overflow-hidden shadow-lg"
+      :class="backgroundColorClasses"
+    >
+      <div
+        ref="target"
+        class="relative w-full flex items-center justify-center"
+        :class="{ 'transition-all duration-200 ease-linear': !isSwiping }"
+        :style="{ left, opacity }"
+      >
+        <slot />
+      </div>
+      <!-- Overlay text for swipe direction -->
+      <div
+        v-if="swipeText"
+        class="absolute top-1/2 transform -translate-y-1/2 pointer-events-none"
+        :class="textPositionClass"
+      >
+        <span class="text-xl font-bold text-white">
+          {{ swipeText }}
+        </span>
+      </div>
     </div>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/Frontend/i18n/locales/de-DE.json b/Frontend/i18n/locales/de-DE.json
index 79b944ab..ee359678 100644
--- a/Frontend/i18n/locales/de-DE.json
+++ b/Frontend/i18n/locales/de-DE.json
@@ -152,7 +152,8 @@
       "dataDeletionSubtitle": "🗑 Datenlöschung",
       "deleteMyData": "Meine Daten löschen",
       "generalInfoText": "Bei SuperWise nehmen wir Ihre Privatsphäre und den Schutz Ihrer persönlichen Daten sehr ernst. Diese Richtlinie beschreibt, wie wir Ihre Daten erfassen, verwenden und verwalten – für maximale Transparenz und Ihr beruhigtes Gewissen.",
-      "generalInfoTitle": "🛡️ SuperWise Datenschutzrichtlinie"
+      "generalInfoTitle": "🛡️ SuperWise Datenschutzrichtlinie",
+      "dataDeleted": "Daten erfolgreich gelöscht"
     },
     "student&supervisor": {
       "changesAndOverwritesText": "Wenn Sie persönliche Daten wie Ihren Namen, Ihr Profilbild, die Themenbeschreibung oder die Biografie aktualisieren, wird die vorherige Version dauerhaft überschrieben. Wir speichern keine früheren Versionen oder Backups Ihrer persönlichen Daten.",
@@ -226,6 +227,9 @@
     "sentRequest": "Betreuungsanfrage wurde gesendet",
     "supervisionRequest": "{name} will von dir betreut werden!",
     "supervisorDismissed": "Betreuer wurde abgelehnt",
+    "swipeRightHeadline": "{firstName} {lastName} anfragen",
+    "swipeLeftText": "Anfragen",
+    "swipeRightText": "Entfernen",
     "swipeLeft": {
       "description": "Wenn Sie {firstName} {lastName} entfernen, wird er nie wieder vorgeschlagen, Sie können jedoch weiterhin nach ihm suchen. Sind Sie sicher, dass Sie fortfahren möchten?",
       "headline": "Betreuer entfernen",
@@ -241,7 +245,7 @@
     "confirm": "Bestätigen",
     "dontShowAgain": "Nicht mehr anzeigen",
     "sendSupervisionRequestHeadline": "Betreuungsanfrage senden",
-    "supervisionInfo": "Wenn du eine Anfrage zur Betreuung einer Abschlussarbeit sendest, wird diese an die ausgewählten Betreuenden weitergeleitet. Sie können dann entscheiden, ob sie die Anfrage annehmen oder ablehnen möchten. Wenn sie die Anfrage annehmen, wird eine Bestätigung erstellt, die du herunterladen kannst.",
+    "supervisionInfo": "Wenn du eine Anfrage an {firstName} {lastName} sendest, wird er/sie benachrichtigt und kann die Anfrage annehmen oder ablehnen. Wenn er/sie die Anfrage annimmt, erhältst Du eine automatisch erstellte Bestätigung, die du herunterladen kannst. Wenn er/sie ablehnt, solltest du einen weiteren Betreuer anfragen.",
     "withdrawSupervisionConfirm": "Anfrage zurückziehen",
     "withdrawSupervisionDescription": "Möchten Sie die Betreuungsanfrage von {name} zurückziehen? Nach dem Zurückziehen kann der Betreuer diese Anfrage nicht mehr sehen.",
     "withdrawSupervisionHeadline": "Betreuungsanfrage zurückziehen"
diff --git a/Frontend/i18n/locales/en-GB.json b/Frontend/i18n/locales/en-GB.json
index f20f67e1..712850a7 100644
--- a/Frontend/i18n/locales/en-GB.json
+++ b/Frontend/i18n/locales/en-GB.json
@@ -152,7 +152,8 @@
       "dataDeletionSubtitle": "🗑 Data Deletion",
       "deleteMyData": "Delete my data",
       "generalInfoText": "At SuperWise, we take your privacy and the protection of your personal data seriously. This policy outlines how we collect, use, and manage your information to ensure transparency and your peace of mind.",
-      "generalInfoTitle": "🛡 SuperWise Data Protection Policy"
+      "generalInfoTitle": "🛡 SuperWise Data Protection Policy",
+      "dataDeleted": "Data deleted successfully"
     },
     "student&supervisor": {
       "changesAndOverwritesText": "When you update your personal data, such as your name, profile picture, topic description, or bio, the previous version is permanently overwritten. We do not retain copies or backups of your previous personal data.",
@@ -226,6 +227,9 @@
     "sentRequest": "Supervision request has been sent",
     "supervisionRequest": "{name} wants to be supervised by you!",
     "supervisorDismissed": "Supervisor has been dismissed",
+    "swipeRightHeadline": "Request {firstName} {lastName}",
+    "swipeLeftText": "Request",
+    "swipeRightText": "Reject",
     "swipeLeft": {
       "description": "By dismissing {firstName} {lastName}, they will never get suggested again, but you can still search for them. Are you sure you want to do this?",
       "headline": "Dismiss Supervisor",
@@ -241,7 +245,7 @@
     "confirm": "Confirm",
     "dontShowAgain": "Don't show again",
     "sendSupervisionRequestHeadline": "Send supervision request",
-    "supervisionInfo": "When you send a thesis supervision request, it will be forwarded to the selected supervisors. They can then decide whether to accept or decline the request. If they accept the request, a confirmation will be created that you can download.",
+    "supervisionInfo": "When you send a thesis supervision request to {firstName} {lastName}, they will be notified and can accept or deny your request. If they accept the request, a confirmation will be created that you can download, otherwise you will need to choose a different supervisor.",
     "withdrawSupervisionConfirm": "Withdraw Request",
     "withdrawSupervisionDescription": "Would you like to withdraw the supervision request from {name}? Once withdrawn, the supervisor will no longer see this request.",
     "withdrawSupervisionHeadline": "Withdraw Supervision Request"
diff --git a/Frontend/pages/admin/data-protection.vue b/Frontend/pages/admin/data-protection.vue
index 31cdce25..53539f3b 100644
--- a/Frontend/pages/admin/data-protection.vue
+++ b/Frontend/pages/admin/data-protection.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 const pageContent = [
   "dataProtection.generic.generalInfoTitle",
   "dataProtection.generic.generalInfoText",
@@ -18,15 +17,25 @@ const pageContent = [
 ];
 
 const getStyle = (content: string) => {
-  if (content.match(/Subtitle(\.\d+)?$/))
-    return "pt-6";
+  if (content.match(/Subtitle(\.\d+)?$/)) return "pt-6";
 };
 
 const { t } = useI18n();
 
+const toastData = ref({
+  visible: false,
+  type: "success",
+  message: "",
+});
+
 const deleteData = () => {
   // Implement the logic to delete data
   console.log("Delete data button clicked");
+  toastData.value = {
+    visible: true,
+    type: "success",
+    message: t("dataProtection.generic.dataDeleted"),
+  };
 };
 
 definePageMeta({
@@ -37,9 +46,9 @@ definePageMeta({
 <template>
   <div class="p-8 flex flex-col gap-2">
     <div
-        v-for="content in pageContent"
-        :key="content"
-        :class="getStyle(content)"
+      v-for="content in pageContent"
+      :key="content"
+      :class="getStyle(content)"
     >
       <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
         <li v-for="(item, index) in t(content).split('\n')" :key="index">
@@ -47,20 +56,31 @@ definePageMeta({
         </li>
       </ul>
 
+      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
+        {{ t(content) }}
+      </h2>
 
-      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">{{ t(content) }}</h2>
-
-      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">{{ t(content) }}</h1>
+      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
+        {{ t(content) }}
+      </h1>
 
       <p v-else class="text-body">{{ t(content) }}</p>
     </div>
     <CustomButton
-        :text="t('dataProtection.generic.deleteMyData')"
-        block
-        class="py-8"
-        color="error"
-        left-icon="trash-can"
-        @click="deleteData"
+      :text="t('dataProtection.generic.deleteMyData')"
+      block
+      class="py-8"
+      color="error"
+      left-icon="trash-can"
+      @click="deleteData"
+    />
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
     />
   </div>
 </template>
diff --git a/Frontend/pages/student/data-protection.vue b/Frontend/pages/student/data-protection.vue
index d07a97c3..32425a5e 100644
--- a/Frontend/pages/student/data-protection.vue
+++ b/Frontend/pages/student/data-protection.vue
@@ -1,27 +1,38 @@
 <script lang="ts" setup>
 const pageContent = [
-  'dataProtection.generic.generalInfoTitle',
-  'dataProtection.generic.generalInfoText',
-  'dataProtection.generic.collectedDataSubtitle',
-  'dataProtection.student&supervisor.collectedDataText',
-  'dataProtection.student&supervisor.collectedDataList',
-  'dataProtection.generic.changesAndOverwritesSubtitle',
-  'dataProtection.student&supervisor.changesAndOverwritesText',
-  'dataProtection.generic.dataDeletionSubtitle',
-  'dataProtection.student&supervisor.dataDeletionText.1',
-  'dataProtection.student&supervisor.dataDeletionList',
-  'dataProtection.student&supervisor.dataDeletionText.2',
+  "dataProtection.generic.generalInfoTitle",
+  "dataProtection.generic.generalInfoText",
+  "dataProtection.generic.collectedDataSubtitle",
+  "dataProtection.student&supervisor.collectedDataText",
+  "dataProtection.student&supervisor.collectedDataList",
+  "dataProtection.generic.changesAndOverwritesSubtitle",
+  "dataProtection.student&supervisor.changesAndOverwritesText",
+  "dataProtection.generic.dataDeletionSubtitle",
+  "dataProtection.student&supervisor.dataDeletionText.1",
+  "dataProtection.student&supervisor.dataDeletionList",
+  "dataProtection.student&supervisor.dataDeletionText.2",
 ];
 
 const getStyle = (content: string) => {
-  if (content.match(/Subtitle(\.\d+)?$/)) return 'pt-6';
+  if (content.match(/Subtitle(\.\d+)?$/)) return "pt-6";
 };
 
 const { t } = useI18n();
 
+const toastData = ref({
+  visible: false,
+  type: "success",
+  message: "",
+});
+
 const deleteData = () => {
   // Implement the logic to delete data
-  console.log('Delete data button clicked');
+  console.log("Delete data button clicked");
+  toastData.value = {
+    visible: true,
+    type: "success",
+    message: t("dataProtection.generic.dataDeleted"),
+  };
 };
 
 definePageMeta({
@@ -30,57 +41,43 @@ definePageMeta({
 </script>
 
 <template>
-  <div
-      class="p-8 flex flex-col gap-2"
-  >
+  <div class="p-8 flex flex-col gap-2">
     <div
-        v-for="content in pageContent"
-        :key="content"
-        :class="getStyle(content)"
+      v-for="content in pageContent"
+      :key="content"
+      :class="getStyle(content)"
     >
-      <ul
-          v-if="content.match(/List(\.\d+)?$/)"
-          class="list-disc pl-5"
-      >
-        <li
-            v-for="(item, index) in t(
-							content,
-						).split('\n')"
-            :key="index"
-        >
+      <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
+        <li v-for="(item, index) in t(content).split('\n')" :key="index">
           {{ item }}
         </li>
       </ul>
 
-      <h2
-          v-else-if="
-						content.match(
-							/Subtitle(\.\d+)?$/,
-						)
-					"
-          class="text-large"
-      >
+      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
         {{ t(content) }}
       </h2>
 
-      <h1
-          v-else-if="
-						content.match(/Title(\.\d+)?$/)
-					"
-          class="text-header"
-      >
+      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
         {{ t(content) }}
       </h1>
 
       <p v-else class="text-body">{{ t(content) }}</p>
     </div>
     <CustomButton
-        :text="t('dataProtection.generic.deleteMyData')"
-        block
-        class="py-8"
-        color="error"
-        left-icon="trash-can"
-        @click="deleteData"
+      :text="t('dataProtection.generic.deleteMyData')"
+      block
+      class="py-8"
+      color="error"
+      left-icon="trash-can"
+      @click="deleteData"
+    />
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
     />
   </div>
 </template>
diff --git a/Frontend/pages/student/matching.vue b/Frontend/pages/student/matching.vue
index 05939c97..4b575b62 100644
--- a/Frontend/pages/student/matching.vue
+++ b/Frontend/pages/student/matching.vue
@@ -6,6 +6,8 @@
         :key="supervisor.supervisor_userId || index"
         :ref="(el) => setItemRef(el, supervisor.supervisor_userId)"
         class="mb-4"
+        :swipe-left-text="t('matching.swipeLeftText')"
+        :swipe-right-text="t('matching.swipeRightText')"
         @swipe-left="handleSwipeLeft(supervisor)"
         @swipe-right="handleSwipeRight(supervisor)"
       >
@@ -170,10 +172,16 @@ const handleSwipeRight = async (supervisor: SupervisorData) => {
   removedSupervisor.value = supervisor;
   modalInformation.value = {
     type: supervisionRequestType.CONFIRM,
-    headline: `Request ${supervisor.firstName} ${supervisor.lastName}`,
+    headline: t("matching.swipeRightHeadline", {
+      firstName: supervisor.firstName,
+      lastName: supervisor.lastName,
+    }),
     icon: "",
     warning: "",
-    description: t("modal.supervisionInfo"),
+    description: t("modal.supervisionInfo", {
+      firstName: supervisor.firstName,
+      lastName: supervisor.lastName,
+    }),
     confirmButtonText: t("modal.confirm"),
     confirmButtonColor: "primary",
     supervisor: supervisor,
diff --git a/Frontend/pages/student/requests.vue b/Frontend/pages/student/requests.vue
index afd2c355..c9fed4ec 100644
--- a/Frontend/pages/student/requests.vue
+++ b/Frontend/pages/student/requests.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { useStudentStore } from "~/stores/useStudentStore";
 import EmptyPagePlaceholder from "~/components/Placeholder/EmptyPagePlaceholder.vue";
-import { supervisionRequestStatus, supervisionRequestType, HttpMethods } from "~/shared/enums/enums";
+import {
+  supervisionRequestStatus,
+  supervisionRequestType,
+  HttpMethods,
+} from "~/shared/enums/enums";
 import type { ConfirmationDialogData } from "~/shared/types/userInterfaces";
 import { nextTick, ref } from "vue";
 import type { SupervisionRequestsData } from "~/shared/types/supervisorInterfaces";
@@ -11,8 +15,9 @@ const { t } = useI18n();
 const studentStore = useStudentStore();
 const settingsStore = useSettingsStore();
 
-const { pendingSupervisionRequests, rejectedSupervisionRequests } = storeToRefs(studentStore)
-const modalInformation = ref<ConfirmationDialogData | null>(null)
+const { pendingSupervisionRequests, rejectedSupervisionRequests } =
+  storeToRefs(studentStore);
+const modalInformation = ref<ConfirmationDialogData | null>(null);
 const toast = ref({
   visible: false,
   type: "success",
@@ -30,10 +35,9 @@ onUnmounted(async () => {
 });
 
 const sortedRequests = computed(() => {
-  return [ ...(pendingSupervisionRequests.value || []) ]
-      .sort((a, b) => {
-        return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
-      })
+  return [...(pendingSupervisionRequests.value || [])].sort((a, b) => {
+    return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+  });
 });
 
 function navigate(route: string) {
@@ -44,16 +48,16 @@ async function handleWithdrawRequest(request: SupervisionRequestsData) {
   if (toast.value.visible && modalInformation.value) {
     await handleToastClosed();
   }
-   modalInformation.value = {
+  modalInformation.value = {
     type: supervisionRequestType.DISMISS,
-    headline: t('modal.withdrawSupervisionHeadline'),
-    icon: '',
-    warning: '',
-    description: t('modal.withdrawSupervisionDescription', {
-      name: `${request.supervisor.user.first_name} ${request.supervisor.user.last_name}`
+    headline: t("modal.withdrawSupervisionHeadline"),
+    icon: "",
+    warning: "",
+    description: t("modal.withdrawSupervisionDescription", {
+      name: `${request.supervisor.user.first_name} ${request.supervisor.user.last_name}`,
     }),
-    confirmButtonText: t('modal.withdrawSupervisionConfirm'),
-    confirmButtonColor: 'error',
+    confirmButtonText: t("modal.withdrawSupervisionConfirm"),
+    confirmButtonColor: "error",
     request: request,
   };
   if (settingsStore.settings?.showSupervisionAcceptModal) {
@@ -78,7 +82,7 @@ const handleToastClosed = () => {
 };
 
 const handleWithdrawAction = async (request: SupervisionRequestsData) => {
-   try {
+  try {
     await $fetch(`/api/supervision-requests/${request.id}`, {
       method: HttpMethods.PATCH,
       body: {
@@ -91,11 +95,11 @@ const handleWithdrawAction = async (request: SupervisionRequestsData) => {
     toast.value = {
       visible: true,
       type: "error",
-      message: t('toast.withdrawRequestFailed'),
+      message: t("toast.withdrawRequestFailed"),
     };
     modalInformation.value = null;
   }
-}
+};
 
 const handleToastUndoClick = async () => {
   toast.value.visible = false;
@@ -110,12 +114,14 @@ const showToastInformation = () => {
     handleToastClosed();
   }
   if (modalInformation.value?.request) {
-    studentStore.removePendingSupervisionRequest(modalInformation.value.request.id);
+    studentStore.removePendingSupervisionRequest(
+      modalInformation.value.request.id
+    );
   }
   toast.value = {
     visible: true,
     type: "success",
-    message: t('toast.withdrawnRequest'),
+    message: t("toast.withdrawnRequest"),
   };
 };
 
@@ -128,9 +134,11 @@ const handleModalDontShowAgain = () => {
 
 const openModal = async () => {
   await nextTick();
-  const modal = document.getElementById('confirmationModal') as HTMLDialogElement
-  modal?.showModal()
-}
+  const modal = document.getElementById(
+    "confirmationModal"
+  ) as HTMLDialogElement;
+  modal?.showModal();
+};
 
 definePageMeta({
   layout: "student-base-layout",
@@ -140,18 +148,18 @@ definePageMeta({
 <template>
   <div class="size-full flex overflow-y-auto flex-col py-3 px-8">
     <MiniCard
-        v-for="pendingRequest in sortedRequests"
-        :key="pendingRequest.id"
-        :bottom-text="new Date(pendingRequest.updated_at).toLocaleDateString()"
-        :first-name="pendingRequest.supervisor.user.first_name"
-        :image="pendingRequest.supervisor.user.profile_image"
-        :last-name="pendingRequest.supervisor.user.last_name"
-        :preview-text="`Pending Request to ${pendingRequest.supervisor.user.first_name}`"
-        bottom-icon="tag"
-        class="cursor-pointer"
-        top-icon="user-group"
-        :show-delete="true"
-        @delete-clicked="handleWithdrawRequest(pendingRequest)"
+      v-for="pendingRequest in sortedRequests"
+      :key="pendingRequest.id"
+      :bottom-text="new Date(pendingRequest.updated_at).toLocaleDateString()"
+      :first-name="pendingRequest.supervisor.user.first_name"
+      :image="pendingRequest.supervisor.user.profile_image"
+      :last-name="pendingRequest.supervisor.user.last_name"
+      :preview-text="t('miniCard.pending', {firstName: pendingRequest.supervisor.user.first_name})"
+      bottom-icon="tag"
+      class="cursor-pointer"
+      top-icon="user-group"
+      :show-delete="true"
+      @delete-clicked="handleWithdrawRequest(pendingRequest)"
     />
 
     <EmptyPagePlaceholder
@@ -185,28 +193,33 @@ definePageMeta({
       />
     </CustomAccordion>
     <Toast
-        v-if="toast.visible"
-        :duration="3000"
-        :message="toast.message"
-        :type="toast.type"
-        button-text="Undo"
-        @close="handleToastClosed"
-        @button-click="handleToastUndoClick"
+      v-if="toast.visible"
+      :duration="3000"
+      :message="toast.message"
+      :type="toast.type"
+      button-text="Undo"
+      @close="handleToastClosed"
+      @button-click="handleToastUndoClick"
     />
     <ConfirmationModal
-        v-if="modalInformation && modalInformation.request"
-        :confirm-button-color="modalInformation.confirmButtonColor"
-        :confirm-button-text="modalInformation.confirmButtonText"
-        :description="modalInformation.description"
-        :headline="modalInformation.headline"
-        :icon="modalInformation.icon"
-        :image="modalInformation.request.supervisor.user.profile_image || getPlaceholderImage(modalInformation.request.supervisor.user.first_name, modalInformation.request.supervisor.user.last_name)"
-        linked-component-id="confirmationModal"
-        @confirm="showToastInformation()"
-        @dont-show-again="handleModalDontShowAgain"
+      v-if="modalInformation && modalInformation.request"
+      :confirm-button-color="modalInformation.confirmButtonColor"
+      :confirm-button-text="modalInformation.confirmButtonText"
+      :description="modalInformation.description"
+      :headline="modalInformation.headline"
+      :icon="modalInformation.icon"
+      :image="
+        modalInformation.request.supervisor.user.profile_image ||
+        getPlaceholderImage(
+          modalInformation.request.supervisor.user.first_name,
+          modalInformation.request.supervisor.user.last_name
+        )
+      "
+      linked-component-id="confirmationModal"
+      @confirm="showToastInformation()"
+      @dont-show-again="handleModalDontShowAgain"
     />
   </div>
-
 </template>
 
 <style scoped></style>
diff --git a/Frontend/pages/supervisor/data-protection.vue b/Frontend/pages/supervisor/data-protection.vue
index 08f66bea..5433c4a3 100644
--- a/Frontend/pages/supervisor/data-protection.vue
+++ b/Frontend/pages/supervisor/data-protection.vue
@@ -1,28 +1,39 @@
 <script lang="ts" setup>
 const pageContent = [
-  'dataProtection.generic.generalInfoTitle',
-  'dataProtection.generic.generalInfoText',
-  'dataProtection.generic.collectedDataSubtitle',
-  'dataProtection.student&supervisor.collectedDataText',
-  'dataProtection.student&supervisor.collectedDataList',
-  'dataProtection.generic.changesAndOverwritesSubtitle',
-  'dataProtection.student&supervisor.changesAndOverwritesText',
-  'dataProtection.generic.dataDeletionSubtitle',
-  'dataProtection.student&supervisor.dataDeletionText.1',
-  'dataProtection.student&supervisor.dataDeletionList',
-  'dataProtection.student&supervisor.dataDeletionText.2',
+  "dataProtection.generic.generalInfoTitle",
+  "dataProtection.generic.generalInfoText",
+  "dataProtection.generic.collectedDataSubtitle",
+  "dataProtection.student&supervisor.collectedDataText",
+  "dataProtection.student&supervisor.collectedDataList",
+  "dataProtection.generic.changesAndOverwritesSubtitle",
+  "dataProtection.student&supervisor.changesAndOverwritesText",
+  "dataProtection.generic.dataDeletionSubtitle",
+  "dataProtection.student&supervisor.dataDeletionText.1",
+  "dataProtection.student&supervisor.dataDeletionList",
+  "dataProtection.student&supervisor.dataDeletionText.2",
 ];
 
 const getStyle = (content: string) => {
-  if (content.match(/Subtitle(\.\d+)?$/)) return 'pt-6';
+  if (content.match(/Subtitle(\.\d+)?$/)) return "pt-6";
   // Removed unnecessary commented-out style conditions to reduce clutter.
 };
 
 const { t } = useI18n();
 
+const toastData = ref({
+  visible: false,
+  type: "success",
+  message: "",
+});
+
 const deleteData = () => {
   // Implement the logic to delete data
-  console.log('Delete data button clicked');
+  console.log("Delete data button clicked");
+  toastData.value = {
+    visible: true,
+    type: "success",
+    message: t("dataProtection.generic.dataDeleted"),
+  };
 };
 
 definePageMeta({
@@ -31,57 +42,43 @@ definePageMeta({
 </script>
 
 <template>
-  <div
-      class="p-8 flex flex-col gap-2"
-  >
+  <div class="p-8 flex flex-col gap-2">
     <div
-        v-for="content in pageContent"
-        :key="content"
-        :class="getStyle(content)"
+      v-for="content in pageContent"
+      :key="content"
+      :class="getStyle(content)"
     >
-      <ul
-          v-if="content.match(/List(\.\d+)?$/)"
-          class="list-disc pl-5"
-      >
-        <li
-            v-for="(item, index) in t(
-							content,
-						).split('\n')"
-            :key="index"
-        >
+      <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
+        <li v-for="(item, index) in t(content).split('\n')" :key="index">
           {{ item }}
         </li>
       </ul>
 
-      <h2
-          v-else-if="
-						content.match(
-							/Subtitle(\.\d+)?$/,
-						)
-					"
-          class="text-large"
-      >
+      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
         {{ t(content) }}
       </h2>
 
-      <h1
-          v-else-if="
-						content.match(/Title(\.\d+)?$/)
-					"
-          class="text-header"
-      >
+      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
         {{ t(content) }}
       </h1>
 
       <p v-else class="text-body">{{ t(content) }}</p>
     </div>
     <CustomButton
-        :text="t('dataProtection.generic.deleteMyData')"
-        block
-        class="py-8"
-        color="error"
-        left-icon="trash-can"
-        @click="deleteData"
+      :text="t('dataProtection.generic.deleteMyData')"
+      block
+      class="py-8"
+      color="error"
+      left-icon="trash-can"
+      @click="deleteData"
+    />
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
     />
   </div>
 </template>

From 834692aa187e99d1b0cbc3f1399af60bea639c43 Mon Sep 17 00:00:00 2001
From: None of your business <lenastadlinger@gmail.com>
Date: Tue, 17 Jun 2025 20:13:06 +0200
Subject: [PATCH 05/11] fix(fe): toast for add student error

---
 Frontend/changelog.md                         |  4 --
 Frontend/i18n/locales/de-DE.json              |  4 +-
 Frontend/i18n/locales/en-GB.json              |  4 +-
 .../supervisor/currently-supervising.vue      | 53 +++++++++++---
 Frontend/pages/supervisor/dashboard.vue       | 70 ++++++++++---------
 5 files changed, 88 insertions(+), 47 deletions(-)
 delete mode 100644 Frontend/changelog.md

diff --git a/Frontend/changelog.md b/Frontend/changelog.md
deleted file mode 100644
index f7394663..00000000
--- a/Frontend/changelog.md
+++ /dev/null
@@ -1,4 +0,0 @@
-- added translation for pending request
-- added translation for matching swipe right request modal headline
-- added text to swiping to make it more clear and improve ux
-- delete data gives a (fake) toast that data is deleted
\ No newline at end of file
diff --git a/Frontend/i18n/locales/de-DE.json b/Frontend/i18n/locales/de-DE.json
index ee359678..40218514 100644
--- a/Frontend/i18n/locales/de-DE.json
+++ b/Frontend/i18n/locales/de-DE.json
@@ -129,7 +129,7 @@
     "supervisor": {
       "manageStudents": "Studenten Verwalten",
       "noRequests": "Es gibt keine offenen Anfragen...",
-      "slotsFilled": "Belegte Slots"
+      "slotsFilled": "Freie Slots"
     }
   },
   "dataProtection": {
@@ -178,6 +178,7 @@
     "done": "Fertig",
     "download": "Herunterladen",
     "edit": "Bearbeiten",
+    "error": "Fehler",
     "english": "🇬🇧 English",
     "french": "🇫🇷 Français",
     "german": "🇩🇪 Deutsch",
@@ -197,6 +198,7 @@
     "showLess": "Weniger anzeigen",
     "spanish": "🇪🇸 Español",
     "student": "Studierende",
+    "success": "Erfolgreich ausgeführt",
     "supervise": "Betreuen",
     "supervisionRequest": "Betreuungsanfrage",
     "supervisor": "Betreuende",
diff --git a/Frontend/i18n/locales/en-GB.json b/Frontend/i18n/locales/en-GB.json
index 712850a7..2d2a9031 100644
--- a/Frontend/i18n/locales/en-GB.json
+++ b/Frontend/i18n/locales/en-GB.json
@@ -129,7 +129,7 @@
     "supervisor": {
       "manageStudents": "Manage Students",
       "noRequests": "There are no open requests...",
-      "slotsFilled": "Slots filled"
+      "slotsFilled": "Free slots"
     }
   },
   "dataProtection": {
@@ -178,6 +178,7 @@
     "done": "Done",
     "download": "Download",
     "edit": "Edit",
+    "error": "Error",
     "english": "🇬🇧 English",
     "french": "🇫🇷 Français",
     "german": "🇩🇪 Deutsch",
@@ -197,6 +198,7 @@
     "showLess": "Show less",
     "spanish": "🇪🇸 Español",
     "student": "Student",
+    "success": "Success",
     "supervise": "Supervise",
     "supervisionRequest": "Supervision request",
     "supervisor": "Supervisor",
diff --git a/Frontend/pages/supervisor/currently-supervising.vue b/Frontend/pages/supervisor/currently-supervising.vue
index de66145a..d413645a 100644
--- a/Frontend/pages/supervisor/currently-supervising.vue
+++ b/Frontend/pages/supervisor/currently-supervising.vue
@@ -17,6 +17,8 @@ const { getUserByEmail } = useUserApi();
 const current_user = ref<UserData | null>(null);
 const supervisor_data = ref<SupervisorData | null>(null);
 
+const { t } = useI18n();
+
 const {
   data: requests,
   pending,
@@ -24,6 +26,12 @@ const {
   refresh,
 } = useSupervisionRequests("ACCEPTED");
 
+const toastData = ref({
+  visible: false,
+  type: "success",
+  message: "",
+});
+
 const students = computed(() =>
   (requests.value ?? []).map((request) => ({
     id: request.student.user_id,
@@ -83,14 +91,33 @@ async function addStudent(email: string) {
   );
 
   if (!existingStudent) {
-    await $fetch("/api/supervision-requests", {
-      method: "POST",
-      body: {
-        // This "id" usage is correct based on the current backend, even if you ide says its not
-        supervisor_id: supervisor_data.value.id,
-        student_email: email,
-      },
-    });
+    try {
+      await $fetch("/api/supervision-requests", {
+        method: "POST",
+        body: {
+          // This "id" usage is correct based on the current backend, even if you ide says its not
+          supervisor_id: supervisor_data.value.id,
+          student_email: email,
+        },
+      });
+      toastData.value = {
+        visible: true,
+        type: "success",
+        message: t("generic.success"), // or any other suitable success message
+      };
+    } catch (err) {
+      const errorMessage =
+        (err as { data?: { message?: string }; message?: string })?.data
+          ?.message ||
+        (err as { message?: string })?.message ||
+        t("generic.error");
+
+      toastData.value = {
+        visible: true,
+        type: "error",
+        message: errorMessage,
+      };
+    }
   }
   await refresh();
 }
@@ -109,7 +136,7 @@ definePageMeta({
       v-if="pending || error"
       class="w-full h-fit min-h-64 p-4 border border-base-300 rounded-3xl flex flex-col justify-center items-center"
     >
-      <div v-if="pending">Loading…</div>
+      <div v-if="pending">{{ t("generic.loading") }}</div>
       <div v-else-if="error" class="text-red-600">{{ error.message }}</div>
     </div>
     <!-- your IDE says that total_spots doesnt exists. Its lying. The interfaces are fucked up, we gotta fix that later-->
@@ -120,6 +147,14 @@ definePageMeta({
       @add-student="addStudent"
       @remove-student="removeStudent"
     />
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
+    />
   </div>
 </template>
 
diff --git a/Frontend/pages/supervisor/dashboard.vue b/Frontend/pages/supervisor/dashboard.vue
index 9e73ec02..99c7a80a 100644
--- a/Frontend/pages/supervisor/dashboard.vue
+++ b/Frontend/pages/supervisor/dashboard.vue
@@ -7,8 +7,8 @@ import { useSupervisionRequests } from "~/composables/useSupervisionRequests";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import EmptyPagePlaceholder from "~/components/Placeholder/EmptyPagePlaceholder.vue";
 
-const authStore = useAuthStore()
-const { user } = storeToRefs(authStore)
+const authStore = useAuthStore();
+const { user } = storeToRefs(authStore);
 const { getUserByEmail } = useUserApi();
 const { getSupervisorByUserId } = useSupervisorApi();
 const userStore = useUserStore();
@@ -33,15 +33,15 @@ const visibleRequests = computed(
 );
 
 watch(
-    () => user.value?.primaryEmailAddress?.emailAddress,
-    async (email) => {
-      if (!email) return;
+  () => user.value?.primaryEmailAddress?.emailAddress,
+  async (email) => {
+    if (!email) return;
 
-      if (!userStore.user) {
-        const fetched = (await getUserByEmail(email)) as UserData;
-        userStore.setUser(fetched);
-      }
-      current_user.value = userStore.user;
+    if (!userStore.user) {
+      const fetched = (await getUserByEmail(email)) as UserData;
+      userStore.setUser(fetched);
+    }
+    current_user.value = userStore.user;
 
       if (current_user.value?.id) {
         const data = (await getSupervisorByUserId(
@@ -73,14 +73,14 @@ definePageMeta({
 <template>
   <div class="flex flex-col w-full gap-8 p-8">
     <ActionCard
-        :button-text="t('dashboard.supervisor.manageStudents')"
-        card-type="primary"
-        class="w-full text-center"
-        @action-button-clicked="navigate('/supervisor/currently-supervising')"
+      :button-text="t('dashboard.supervisor.manageStudents')"
+      card-type="primary"
+      class="w-full text-center"
+      @action-button-clicked="navigate('/supervisor/currently-supervising')"
     >
       <div class="py-8 px-16 w-full">
         <h2 class="text-xl">
-          <FontAwesomeIcon icon="user-group"/>
+          <FontAwesomeIcon icon="user-group" />
           {{
             // this works, even though the IDE tells you it doesnt. The frontend interface types are not consitent with the backend types. Dont ask why.
             (supervisor_data?.total_spots ?? 0) - (supervisor_data?.available_spots ?? 0)
@@ -93,31 +93,37 @@ definePageMeta({
     </ActionCard>
 
     <ActionCard
-        :button-text="t('generic.showAll')"
-        :disabled="visibleCount >= (pendingRequests?.length ?? 0)"
-        :header-text="t('generic.requests')"
-        card-type="ghost"
-        @action-button-clicked="navigateTo('/supervisor/matching')"
+      :button-text="t('generic.showAll')"
+      :disabled="visibleCount >= (pendingRequests?.length ?? 0)"
+      :header-text="t('generic.requests')"
+      card-type="ghost"
+      @action-button-clicked="navigateTo('/supervisor/matching')"
     >
       <EmptyPagePlaceholder
-          :render-condition="visibleRequests"
-          :text="t('dashboard.supervisor.noRequests')"
+        :render-condition="visibleRequests"
+        :text="t('dashboard.supervisor.noRequests')"
       />
       <NuxtLink
-          v-for="request in visibleRequests"
-          :key="request.id"
-          :to="`/profiles/${request.student.user_id}`"
+        v-for="request in visibleRequests"
+        :key="request.id"
+        :to="`/profiles/${request.student.user_id}`"
       >
         <MiniCard
-            :bottom-text="formatTimeString(request.updated_at, undefined)"
-            :first-name="request.student.user.first_name"
-            :image="request.student.user.profile_image || getPlaceholderImage(request.student.user.first_name, request.student.user.last_name) || ''"
-            :last-name="request.student.user.last_name"
-            :preview-text="request.student.thesis_description"
-            top-icon="message"
+          :bottom-text="formatTimeString(request.updated_at, undefined)"
+          :first-name="request.student.user.first_name"
+          :image="
+            request.student.user.profile_image ||
+            getPlaceholderImage(
+              request.student.user.first_name,
+              request.student.user.last_name
+            ) ||
+            ''
+          "
+          :last-name="request.student.user.last_name"
+          :preview-text="request.student.thesis_description"
+          top-icon="message"
         />
       </NuxtLink>
-
     </ActionCard>
   </div>
 </template>

From 7c1894857ff76554440b797bc6958a380b04ddca Mon Sep 17 00:00:00 2001
From: None of your business <lenastadlinger@gmail.com>
Date: Tue, 17 Jun 2025 20:17:57 +0200
Subject: [PATCH 06/11] fix(fe): fixed translation keys

---
 .../SupervisorStudentList.vue                 | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue b/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue
index aac551b5..2e984aea 100644
--- a/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue
+++ b/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue
@@ -226,8 +226,10 @@ watch(
           lastName: studentToRemove?.lastName,
         })
       "
-      :confirm-text="t('supervisorStudentList.removeStudent.confirmText')"
-      :checkbox-label="t('supervisorStudentList.checkboxLabel')"
+      :confirm-text="
+        t('settings.supervisorStudentList.removeStudent.confirmText')
+      "
+      :checkbox-label="t('settings.supervisorStudentList.checkboxLabel')"
       setting-key="showRemoveStudentModal"
       :title="t('supervisorStudentList.removeStudent.title')"
       icon="trash"
@@ -254,8 +256,10 @@ watch(
         })
       "
       :show-checkbox="true"
-      :checkbox-label="t('supervisorStudentList.checkboxLabel')"
-      :confirm-text="t('supervisorStudentList.addExistingStudent.confirmText')"
+      :checkbox-label="t('settings.supervisorStudentList.checkboxLabel')"
+      :confirm-text="
+        t('settings.supervisorStudentList.addExistingStudent.confirmText')
+      "
       icon="user-group"
       setting-key="showAddStudentModal"
       :sub-text="t('supervisorStudentList.addExistingStudent.subText')"
@@ -273,14 +277,18 @@ watch(
         })
       "
       :show-checkbox="true"
-      :checkbox-label="t('supervisorStudentList.checkboxLabel')"
-      confirm-text=""
+      :checkbox-label="t('settings.supervisorStudentList.checkboxLabel')"
+      :confirm-text="
+        t('settings.supervisorStudentList.addNotExistingStudent.confirmText')
+      "
       icon="user-group"
       image-alt="Logo"
       image-src="../images/Superwise_Logo.svg"
       setting-key="showAddStudentModal"
-      :sub-text="t('supervisorStudentList.addExistingStudent.subText')"
-      :title="t('supervisorStudentList.addNewStudent.title')"
+      :sub-text="
+        t('settings.supervisorStudentList.addNotExistingStudent.subText')
+      "
+      :title="t('settings.supervisorStudentList.addNewStudent.title')"
       @confirm="addStudent"
     />
   </div>

From 7a57fdc9e04bd90fb887ac3e40ec6278fb47e494 Mon Sep 17 00:00:00 2001
From: None of your business <lenastadlinger@gmail.com>
Date: Thu, 19 Jun 2025 18:35:59 +0200
Subject: [PATCH 07/11] delte data actually deletes the user now and logs them
 out

---
 Frontend/composables/useUserApi.ts            | 17 ++++++++-----
 Frontend/pages/admin/data-protection.vue      | 24 ++++++++++++------
 Frontend/pages/student/data-protection.vue    | 25 +++++++++++++------
 .../supervisor/currently-supervising.vue      |  6 ++---
 Frontend/pages/supervisor/data-protection.vue | 25 +++++++++++++------
 5 files changed, 63 insertions(+), 34 deletions(-)

diff --git a/Frontend/composables/useUserApi.ts b/Frontend/composables/useUserApi.ts
index fe93ad67..3bbf267e 100644
--- a/Frontend/composables/useUserApi.ts
+++ b/Frontend/composables/useUserApi.ts
@@ -1,11 +1,11 @@
-import {makeRequest} from './useApi'
-import type {UserCreateData, UserRegistrationData} from "~/shared/types/userInterfaces";
+import { makeRequest } from './useApi'
+import type { UserCreateData, UserRegistrationData } from "~/shared/types/userInterfaces";
 
 export const useUserApi = () => {
 
   const getUserRegistrationStatus = async (email: string) => {
-      const data = await $fetch(`/api/users/check-registration?email=${email}`);
-      return data as UserRegistrationData;
+    const data = await $fetch(`/api/users/check-registration?email=${email}`);
+    return data as UserRegistrationData;
   }
   const createUser = async (data: UserCreateData) => {
     return await makeRequest('users', 'POST', data)
@@ -40,13 +40,17 @@ export const useUserApi = () => {
   const getRecommendedSupervisors = async (data: string) => {
     return await makeRequest(`match/${data}`, 'GET');
   }
-  
+
   const createStudentProfile = async (data: string) => {
     return await makeRequest('students', 'POST', {
       thesis_description: data
     })
   }
 
+  const deleteUser = async (data: Record<string, unknown>) => {
+    return await makeRequest(`users/${data.id}`, 'DELETE')
+  }
+
   return {
     getUserRegistrationStatus,
     createUser,
@@ -56,7 +60,8 @@ export const useUserApi = () => {
     getUserById,
     addUserTag,
     getRecommendedSupervisors,
-    createStudentProfile
+    createStudentProfile,
+    deleteUser
   }
 
 }
\ No newline at end of file
diff --git a/Frontend/pages/admin/data-protection.vue b/Frontend/pages/admin/data-protection.vue
index 53539f3b..166d9023 100644
--- a/Frontend/pages/admin/data-protection.vue
+++ b/Frontend/pages/admin/data-protection.vue
@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+const { deleteUser } = useUserApi();
+const userStore = useUserStore();
+
 const pageContent = [
   "dataProtection.generic.generalInfoTitle",
   "dataProtection.generic.generalInfoText",
@@ -31,6 +34,7 @@ const toastData = ref({
 const deleteData = () => {
   // Implement the logic to delete data
   console.log("Delete data button clicked");
+  deleteUser(userStore.user.id);
   toastData.value = {
     visible: true,
     type: "success",
@@ -66,14 +70,18 @@ definePageMeta({
 
       <p v-else class="text-body">{{ t(content) }}</p>
     </div>
-    <CustomButton
-      :text="t('dataProtection.generic.deleteMyData')"
-      block
-      class="py-8"
-      color="error"
-      left-icon="trash-can"
-      @click="deleteData"
-    />
+    <SignOutButton>
+      <a href="/">
+        <CustomButton
+          :text="t('dataProtection.generic.deleteMyData')"
+          block
+          class="py-8"
+          color="error"
+          left-icon="trash-can"
+          @click="deleteData"
+        />
+      </a>
+    </SignOutButton>
     <Toast
       v-if="toastData.visible"
       :duration="3000"
diff --git a/Frontend/pages/student/data-protection.vue b/Frontend/pages/student/data-protection.vue
index 32425a5e..f82be7af 100644
--- a/Frontend/pages/student/data-protection.vue
+++ b/Frontend/pages/student/data-protection.vue
@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+const { deleteUser } = useUserApi();
+const userStore = useUserStore();
+
 const pageContent = [
   "dataProtection.generic.generalInfoTitle",
   "dataProtection.generic.generalInfoText",
@@ -28,6 +31,7 @@ const toastData = ref({
 const deleteData = () => {
   // Implement the logic to delete data
   console.log("Delete data button clicked");
+  deleteUser(userStore.user.id);
   toastData.value = {
     visible: true,
     type: "success",
@@ -63,14 +67,19 @@ definePageMeta({
 
       <p v-else class="text-body">{{ t(content) }}</p>
     </div>
-    <CustomButton
-      :text="t('dataProtection.generic.deleteMyData')"
-      block
-      class="py-8"
-      color="error"
-      left-icon="trash-can"
-      @click="deleteData"
-    />
+
+    <SignOutButton>
+      <a href="/">
+        <CustomButton
+          :text="t('dataProtection.generic.deleteMyData')"
+          block
+          class="py-8"
+          color="error"
+          left-icon="trash-can"
+          @click="deleteData"
+        />
+      </a>
+    </SignOutButton>
     <Toast
       v-if="toastData.visible"
       :duration="3000"
diff --git a/Frontend/pages/supervisor/currently-supervising.vue b/Frontend/pages/supervisor/currently-supervising.vue
index d413645a..46afcec3 100644
--- a/Frontend/pages/supervisor/currently-supervising.vue
+++ b/Frontend/pages/supervisor/currently-supervising.vue
@@ -5,7 +5,7 @@ import { useSupervisionRequests } from "~/composables/useSupervisionRequests";
 import type { SupervisorData } from "~/shared/types/supervisorInterfaces";
 import type { UserData } from "~/shared/types/userInterfaces";
 import { supervisionRequestStatus } from "#shared/enums/enums";
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
 
 const authStore = useAuthStore();
 await authStore.initialize();
@@ -122,8 +122,6 @@ async function addStudent(email: string) {
   await refresh();
 }
 
-const { t } = useI18n();
-
 definePageMeta({
   layout: "generic-back-layout",
 });
@@ -131,7 +129,7 @@ definePageMeta({
 
 <template>
   <div class="w-full h-fit flex flex-col gap-2 p-8">
-    <span class="text-large p-4">{{ t('nav.currentlySupervising') }}</span>
+    <span class="text-large p-4">{{ t("nav.currentlySupervising") }}</span>
     <div
       v-if="pending || error"
       class="w-full h-fit min-h-64 p-4 border border-base-300 rounded-3xl flex flex-col justify-center items-center"
diff --git a/Frontend/pages/supervisor/data-protection.vue b/Frontend/pages/supervisor/data-protection.vue
index 5433c4a3..b8411b5d 100644
--- a/Frontend/pages/supervisor/data-protection.vue
+++ b/Frontend/pages/supervisor/data-protection.vue
@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+const { deleteUser } = useUserApi();
+const userStore = useUserStore();
+
 const pageContent = [
   "dataProtection.generic.generalInfoTitle",
   "dataProtection.generic.generalInfoText",
@@ -29,6 +32,7 @@ const toastData = ref({
 const deleteData = () => {
   // Implement the logic to delete data
   console.log("Delete data button clicked");
+  deleteUser(userStore.user.id);
   toastData.value = {
     visible: true,
     type: "success",
@@ -64,14 +68,19 @@ definePageMeta({
 
       <p v-else class="text-body">{{ t(content) }}</p>
     </div>
-    <CustomButton
-      :text="t('dataProtection.generic.deleteMyData')"
-      block
-      class="py-8"
-      color="error"
-      left-icon="trash-can"
-      @click="deleteData"
-    />
+    <SignOutButton>
+      <a href="/">
+        <CustomButton
+          :text="t('dataProtection.generic.deleteMyData')"
+          block
+          class="py-8"
+          color="error"
+          left-icon="trash-can"
+          @click="deleteData"
+        />
+      </a>
+    </SignOutButton>
+
     <Toast
       v-if="toastData.visible"
       :duration="3000"

From 0472c52c808ef58ca145feb372e7e015518fba47 Mon Sep 17 00:00:00 2001
From: None of your business <lenastadlinger@gmail.com>
Date: Thu, 19 Jun 2025 18:43:54 +0200
Subject: [PATCH 08/11] delte data actually deletes the user now and logs them
 out

---
 Frontend/composables/useUserApi.ts            | 4 ++--
 Frontend/pages/admin/data-protection.vue      | 2 ++
 Frontend/pages/student/data-protection.vue    | 2 ++
 Frontend/pages/supervisor/data-protection.vue | 2 ++
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/Frontend/composables/useUserApi.ts b/Frontend/composables/useUserApi.ts
index 3bbf267e..73cbcf4c 100644
--- a/Frontend/composables/useUserApi.ts
+++ b/Frontend/composables/useUserApi.ts
@@ -47,8 +47,8 @@ export const useUserApi = () => {
     })
   }
 
-  const deleteUser = async (data: Record<string, unknown>) => {
-    return await makeRequest(`users/${data.id}`, 'DELETE')
+  const deleteUser = async (id: string) => {
+    return await makeRequest(`users/${id}`, 'DELETE')
   }
 
   return {
diff --git a/Frontend/pages/admin/data-protection.vue b/Frontend/pages/admin/data-protection.vue
index 166d9023..ba3668ab 100644
--- a/Frontend/pages/admin/data-protection.vue
+++ b/Frontend/pages/admin/data-protection.vue
@@ -34,6 +34,8 @@ const toastData = ref({
 const deleteData = () => {
   // Implement the logic to delete data
   console.log("Delete data button clicked");
+  if (!userStore.user) return;
+
   deleteUser(userStore.user.id);
   toastData.value = {
     visible: true,
diff --git a/Frontend/pages/student/data-protection.vue b/Frontend/pages/student/data-protection.vue
index f82be7af..204c37f8 100644
--- a/Frontend/pages/student/data-protection.vue
+++ b/Frontend/pages/student/data-protection.vue
@@ -31,6 +31,8 @@ const toastData = ref({
 const deleteData = () => {
   // Implement the logic to delete data
   console.log("Delete data button clicked");
+  if (!userStore.user) return;
+
   deleteUser(userStore.user.id);
   toastData.value = {
     visible: true,
diff --git a/Frontend/pages/supervisor/data-protection.vue b/Frontend/pages/supervisor/data-protection.vue
index b8411b5d..8bb83b7a 100644
--- a/Frontend/pages/supervisor/data-protection.vue
+++ b/Frontend/pages/supervisor/data-protection.vue
@@ -32,6 +32,8 @@ const toastData = ref({
 const deleteData = () => {
   // Implement the logic to delete data
   console.log("Delete data button clicked");
+  if (!userStore.user) return;
+
   deleteUser(userStore.user.id);
   toastData.value = {
     visible: true,

From bc1e2fc20e60b2aa755529776a888199cb4a421c Mon Sep 17 00:00:00 2001
From: None of your business <lenastadlinger@gmail.com>
Date: Thu, 19 Jun 2025 19:16:17 +0200
Subject: [PATCH 09/11] fix(fe): fixed swipe container icon visual bug

---
 .../SwipeContainer/SwipeContainer.vue         | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/Frontend/components/SwipeContainer/SwipeContainer.vue b/Frontend/components/SwipeContainer/SwipeContainer.vue
index 03d8ae81..20564ac2 100644
--- a/Frontend/components/SwipeContainer/SwipeContainer.vue
+++ b/Frontend/components/SwipeContainer/SwipeContainer.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { usePointerSwipe } from "@vueuse/core";
 import { computed, shallowRef, ref } from "vue";
+import { faCheck, faBan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 interface Props {
   swipeThreshold?: number;
@@ -89,10 +91,12 @@ const backgroundColorClasses = computed(() => ({
   "bg-error": distanceX.value > props.swipeThreshold / 10,
 }));
 
-const swipeText = computed(() => {
-  if (distanceX.value < -props.swipeThreshold / 10) return props.swipeLeftText;
-  if (distanceX.value > props.swipeThreshold / 10) return props.swipeRightText;
-  return "";
+const swipeIcon = computed(() => {
+  if (!isSwiping.value) return null;
+
+  if (distanceX.value < -props.swipeThreshold / 10) return faCheck;
+  if (distanceX.value > props.swipeThreshold / 10) return faBan;
+  return null;
 });
 
 const textPositionClass = computed(() => {
@@ -111,7 +115,7 @@ const textPositionClass = computed(() => {
     >
       <div
         ref="target"
-        class="relative w-full flex items-center justify-center"
+        class="relative w-full flex items-center justify-center z-10"
         :class="{ 'transition-all duration-200 ease-linear': !isSwiping }"
         :style="{ left, opacity }"
       >
@@ -119,13 +123,11 @@ const textPositionClass = computed(() => {
       </div>
       <!-- Overlay text for swipe direction -->
       <div
-        v-if="swipeText"
+        v-if="swipeIcon"
         class="absolute top-1/2 transform -translate-y-1/2 pointer-events-none"
         :class="textPositionClass"
       >
-        <span class="text-xl font-bold text-white">
-          {{ swipeText }}
-        </span>
+        <FontAwesomeIcon :icon="swipeIcon" class="text-3xl text-white" />
       </div>
     </div>
   </div>

From 71e8bde21ddd9bc31c33901c9a40035e14c5d32a Mon Sep 17 00:00:00 2001
From: None of your business <lenastadlinger@gmail.com>
Date: Thu, 19 Jun 2025 19:51:34 +0200
Subject: [PATCH 10/11] fix(fe): fixed lint errors

---
 Frontend/pages/admin/data-protection.vue      | 15 ---------------
 Frontend/pages/student/data-protection.vue    | 14 --------------
 Frontend/pages/supervisor/data-protection.vue | 14 --------------
 3 files changed, 43 deletions(-)

diff --git a/Frontend/pages/admin/data-protection.vue b/Frontend/pages/admin/data-protection.vue
index e8cea3db..94d8faea 100644
--- a/Frontend/pages/admin/data-protection.vue
+++ b/Frontend/pages/admin/data-protection.vue
@@ -32,12 +32,6 @@ const toastData = ref({
   message: "",
 });
 
-const toastData = ref({
-  visible: false,
-  type: "success",
-  message: "",
-});
-
 const deleteData = () => {
   // Implement the logic to delete data
   console.log("Delete data button clicked");
@@ -62,9 +56,6 @@ definePageMeta({
       v-for="content in pageContent"
       :key="content"
       :class="getStyle(content)"
-      v-for="content in pageContent"
-      :key="content"
-      :class="getStyle(content)"
     >
       <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
         <li v-for="(item, index) in t(content).split('\n')" :key="index">
@@ -72,16 +63,10 @@ definePageMeta({
         </li>
       </ul>
 
-      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
-        {{ t(content) }}
-      </h2>
       <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
         {{ t(content) }}
       </h2>
 
-      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
-        {{ t(content) }}
-      </h1>
       <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
         {{ t(content) }}
       </h1>
diff --git a/Frontend/pages/student/data-protection.vue b/Frontend/pages/student/data-protection.vue
index b7848d28..bd083117 100644
--- a/Frontend/pages/student/data-protection.vue
+++ b/Frontend/pages/student/data-protection.vue
@@ -40,12 +40,6 @@ const toastData = ref({
   message: "",
 });
 
-const toastData = ref({
-  visible: false,
-  type: "success",
-  message: "",
-});
-
 const deleteData = () => {
   // Implement the logic to delete data
   console.log("Delete data button clicked");
@@ -65,30 +59,22 @@ definePageMeta({
 </script>
 
 <template>
-  <div class="p-8 flex flex-col gap-2">
   <div class="p-8 flex flex-col gap-2">
     <div
       v-for="content in pageContent"
       :key="content"
       :class="getStyle(content)"
-      v-for="content in pageContent"
-      :key="content"
-      :class="getStyle(content)"
     >
-      <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
-        <li v-for="(item, index) in t(content).split('\n')" :key="index">
       <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
         <li v-for="(item, index) in t(content).split('\n')" :key="index">
           {{ item }}
         </li>
       </ul>
 
-      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
       <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
         {{ t(content) }}
       </h2>
 
-      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
       <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
         {{ t(content) }}
       </h1>
diff --git a/Frontend/pages/supervisor/data-protection.vue b/Frontend/pages/supervisor/data-protection.vue
index 543aa530..ab34d1c6 100644
--- a/Frontend/pages/supervisor/data-protection.vue
+++ b/Frontend/pages/supervisor/data-protection.vue
@@ -41,12 +41,6 @@ const toastData = ref({
   message: "",
 });
 
-const toastData = ref({
-  visible: false,
-  type: "success",
-  message: "",
-});
-
 const deleteData = () => {
   // Implement the logic to delete data
   console.log("Delete data button clicked");
@@ -66,30 +60,22 @@ definePageMeta({
 </script>
 
 <template>
-  <div class="p-8 flex flex-col gap-2">
   <div class="p-8 flex flex-col gap-2">
     <div
       v-for="content in pageContent"
       :key="content"
       :class="getStyle(content)"
-      v-for="content in pageContent"
-      :key="content"
-      :class="getStyle(content)"
     >
-      <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
-        <li v-for="(item, index) in t(content).split('\n')" :key="index">
       <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
         <li v-for="(item, index) in t(content).split('\n')" :key="index">
           {{ item }}
         </li>
       </ul>
 
-      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
       <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
         {{ t(content) }}
       </h2>
 
-      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
       <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
         {{ t(content) }}
       </h1>

From a04a0bad8091fcda4703d398aa1eee1b8b6bf5a8 Mon Sep 17 00:00:00 2001
From: None of your business <lenastadlinger@gmail.com>
Date: Fri, 20 Jun 2025 10:41:44 +0200
Subject: [PATCH 11/11] fix(fe): added missing subtext

---
 .../SupervisorStudentList.vue                 | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue b/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue
index 2e984aea..9a3f80b7 100644
--- a/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue
+++ b/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue
@@ -83,13 +83,12 @@ const emailAddress = ref("");
 const clearInput = ref(false);
 const emailDomain = "fhstp.ac.at";
 
-
 const updateMail = (value: string) => {
   emailAddress.value = value;
 };
 
 const editButtonLabel = computed(() => {
-  return isEditing.value ? t('generic.done') : t('generic.edit');
+  return isEditing.value ? t("generic.done") : t("generic.edit");
 });
 
 const editButtonIcon = computed(() => {
@@ -219,7 +218,14 @@ watch(
             studentToRemove?.lastName
           : ''
       "
-      :image-src="studentToRemove?.src || getPlaceholderImage(studentToRemove?.firstName, studentToRemove?.lastName) || ''"
+      :image-src="
+        studentToRemove?.src ||
+        getPlaceholderImage(
+          studentToRemove?.firstName,
+          studentToRemove?.lastName
+        ) ||
+        ''
+      "
       :main-text="
         t('supervisorStudentList.removeStudent.mainText', {
           firstName: studentToRemove?.firstName,
@@ -232,6 +238,7 @@ watch(
       :checkbox-label="t('settings.supervisorStudentList.checkboxLabel')"
       setting-key="showRemoveStudentModal"
       :title="t('supervisorStudentList.removeStudent.title')"
+      :sub-text="t('supervisorStudentList.removeStudent.subText')"
       icon="trash"
       @confirm="confirmRemoveStudent"
     />
@@ -248,7 +255,11 @@ watch(
             modal_user.last_name
           : ''
       "
-      :image-src="modal_user?.profile_image || getPlaceholderImage(modal_user?.first_name, modal_user?.last_name) || ''"
+      :image-src="
+        modal_user?.profile_image ||
+        getPlaceholderImage(modal_user?.first_name, modal_user?.last_name) ||
+        ''
+      "
       :main-text="
         t('supervisorStudentList.addExistingStudent.mainText', {
           firstName: modal_user?.first_name,