Merge branch 'dev' into SCRUM-304-backend-handle-user-deletion

Author: bernhaaard

Frontend/.env.example

@@ -1,4 +1,4 @@
-NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
-NUXT_CLERK_SECRET_KEY=
+NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY= #Reach out to admin for the Secret Key
+NUXT_CLERK_SECRET_KEY= #Reach out to admin for the Secret Key
 NEST_API_URL=http://localhost:8080/
-ALLOWED_EMAIL_DOMAINS=example.com,another-domain.edu
+ALLOWED_EMAIL_DOMAINS=fhstp.ac.at

Frontend/README.md

@@ -1,35 +1,64 @@
+# Superwise Frontend
+
+This is the frontend application for the Superwise project, built with Nuxt 3, Vue 3, Pinia, and TailwindCSS. It provides a modern, responsive interface for students and supervisors to manage supervision requests, profiles, and onboarding.
+
+
 ## Tech stack
-- **Nuxt** framwork for Vue   
+- **Nuxt** framework for Vue
 - **Vitest** for testing
-- **I8ln** for localisation 
-- **Pinia** for state managment
+- **I18n** for localisation
+- **Pinia** for state management
 - **DaisyUI** for css designs
 
+## Features
+
+- **Authentication:** Secure sign-in and sign-out using Clerk.
+- **Role-based Dashboards:** Separate dashboards for students and supervisors.
+- **Supervision Requests:** Students can send, withdraw, and track supervision requests; supervisors can accept, reject, and manage them.
+- **Profile Management:** Users can edit their profiles and manage tags/interests.
+- **Onboarding:** Guided onboarding flows for both students and supervisors.
+- **Responsive Design:** Optimized for both desktop and mobile devices.
+- **Localization:** Multi-language support using Vue I18n.
+- **State Management:** Uses Pinia for global state and store management.
+- **API Integration:** Communicates with the backend via RESTful API endpoints.
+
+## Project Structure
+
+- `pages/` — Main application pages (student, supervisor, onboarding, etc.)
+- `components/` — Reusable Vue components (cards, modals, navigation, etc.)
+- `stores/` — Pinia stores for state management
+- `plugins/` — Nuxt plugins (e.g., Clerk, FontAwesome)
+- `middleware/` — Route guards and global middleware
+- `server/` — Nuxt backend API routes and server logic
+- `assets/` — Static assets (images, styles)
+- `locales/` — Localization files
+
+## Getting Started
+
 ## Installation and running
 
-1. Clone the repository
-2. Change into the frontend directory
+1. **Clone the repository to local directory**
+2. **ensure you are in the Frontend directory**
 
 ```bash
-cd FeMatchMaker
+cd Frontend
 ```
 
-3. Install dependencies: 
+3. **Install dependencies**:
+
 ```bash
 npm install
 ```
-4. Run the application
-```bash
-npm run dev
-```
 
-## Testing with PWA
-The PWA module is not fully compataibile with hot module replacement due to caching and other "middle man" functionalities. As a result whenever testing with PWA run the following command to boot the applicaiton
+4. **Environment Variables:**
+
+Copy the `.env.example` to an `.env` file in the root directory and ensure all the environment variables are set correctly. Refer to the README file in the root directory of this repository if you are unsure about the environment variables.
+
+5. **Run the application**
 ```bash
-npm run generate-preview
+npm run dev
 ```
 
-
 ## Testing
 To Run all the test in the application, run the command
 ```bash

Frontend/components/ActionCard/ActionCard.vue

@@ -2,52 +2,53 @@
 import CustomButton from "../CustomButton/CustomButton.vue";
 
 const props = defineProps({
-    buttonText: {
-        type: String,
-        default: "Click Me",
-    },
-    cardType: {
-        type: String,
-        default: 'ghost',
-        validator: (value) => !value || ["ghost", "primary"].includes(value),
-    },
-    headerText: {
-        type: String,
-        default: ''
-    },
+  buttonText: {
+    type: String,
+    default: "Click Me",
+  },
+  cardType: {
+    type: String,
+    default: 'ghost',
+    validator: (value) => !value || ["ghost", "primary"].includes(value),
+  },
+  headerText: {
+    type: String,
+    default: ''
+  },
 });
 
 const emit = defineEmits(['actionButtonClicked']);
+
 function emitActionEvent() {
   emit('actionButtonClicked');
 }
 </script>
 
 <template>
-    <div>
-        <p v-if="props.headerText" class="mb-2 ml-4 text-lg font-bold">
-          {{ props.headerText }}
-        </p>
-        <div class="card shadow-xl border border-base-300">
-            <slot/>
-            <!-- Action button at the bottom -->
-            <div class="px-16 py-4 border-t border-base-300">
-                <CustomButton
-                    v-if="props.cardType === 'ghost'"
-                    :text="props.buttonText"
-                    block
-                    color="default"
-                    variant="ghost"
-                    @click="emitActionEvent"
-                />
-                <CustomButton
-                    v-else
-                    :text="props.buttonText"
-                    block
-                    color="primary"
-                    @click="emitActionEvent"
-                />
-            </div>
-        </div>
+  <div>
+    <p v-if="props.headerText" class="mb-2 ml-4 text-lg font-bold">
+      {{ props.headerText }}
+    </p>
+    <div class="card shadow-xl border border-base-300">
+      <slot/>
+      <!-- Action button at the bottom -->
+      <div class="px-8 py-4 border-t border-base-300">
+        <CustomButton
+            v-if="props.cardType === 'ghost'"
+            :text="props.buttonText"
+            block
+            color="default"
+            variant="ghost"
+            @click="emitActionEvent"
+        />
+        <CustomButton
+            v-else
+            :text="props.buttonText"
+            block
+            color="primary"
+            @click="emitActionEvent"
+        />
+      </div>
     </div>
+  </div>
 </template>

Frontend/components/ConfirmationModal/ConfirmationModal.vue

@@ -86,7 +86,7 @@ const handleConfirm = () => {
           {{ props.headline }}
         </h3>
         <div class="mx-4 mt-1">
-          <FontAwesomeIcon :icon="props.icon"/>
+          <FontAwesomeIcon :icon="props.icon" @click="props.icon=='xmark'? closeModal() : null"/>
         </div>
       </div>
 

Frontend/components/Progress/Progress.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+
+interface ProgressProps {
+  progress: number;
+  text: string;
+}
+
+const props = defineProps<ProgressProps>();
+
+</script>
+
+<template>
+  <div class="w-full h-fit flex flex-row p-6 gap-6 items-center border-b border-b-base-300">
+    <div>
+      <div
+          :style="'--value:'+props.progress+';'" aria-valuenow="70"
+          class="radial-progress bg-success text-success-content border-success border-4"
+          role="progressbar"
+      >
+        {{ props.progress }}%
+      </div>
+    </div>
+    <p class="text-body opacity-75">
+      {{ props.text }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

Frontend/components/SupervisorCard/SupervisorCard.vue

@@ -19,7 +19,8 @@ const props = defineProps({
   },
   image: {
     type: String,
-    required: true,
+    required: false,
+    default: '',
   },
   firstName: {
     type: String,
@@ -57,11 +58,11 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
-    dontShowStatistics: {
+  dontShowStatistics: {
     type: Boolean,
     default: false,
     required: false,
-    }
+  }
 });
 
 const limitedTags = computed(() =>
@@ -82,14 +83,6 @@ const cardSizeClasses = computed(() => ({
   'card-xl': props.fullWidth && props.size === 'xl',
 }));
 
-const imageSizeClasses = computed(() => ({
-  'size-8': props.size === 'xs',
-  'size-10': props.size === 'sm',
-  'size-12': props.size === 'md',
-  'size-14': props.size === 'lg',
-  'size-16': props.size === 'xl',
-}));
-
 // Regular tag size based on card size
 const regularTagSize = computed(() => {
   switch (props.size) {
@@ -152,14 +145,13 @@ const descriptionClasses = computed(() => ({
       :class="cardSizeClasses" class="card bg-base-100 shadow-lg border border-base-300">
     <div class="card-body">
       <h2 class="card-title font-bold">
-        <div class="mask mask-squircle">
-          <img
-              :alt="t('supervisorCard.profilePictureAlt',{firstName: props.firstName,lastName: props.lastName})"
-              :class="imageSizeClasses"
-              :src="props.image || getPlaceholderImage(props.firstName,props.lastName)"
-              class="rounded-box"
-          >
-        </div>
+        <Avatar
+            :alt="t('supervisorCard.profilePictureAlt',{firstName: props.firstName,lastName: props.lastName})"
+            :first-name="props.firstName"
+            :last-name="props.lastName"
+            :size="props.size"
+            :src="props.image"
+        />
         <p class="text-large capitalize">
           {{ props.firstName }} {{ props.lastName }}
         </p>

Frontend/i18n/locales/de-DE.json

@@ -19,6 +19,20 @@
   },
   "admin": {
     "availableSpots": "Verfügbare Plätze",
+    "deleteUser": {
+      "deleteButton": "Benutzer Löschen",
+      "deleting": "Lösche...",
+      "description": "Dies setzt das Benutzerkonto vollständig auf den nicht registrierten Zustand zurück, wobei die E-Mail-Adresse für eine erneute Registrierung erhalten bleibt.",
+      "generalError": "Ein Fehler ist beim Zurücksetzen des Benutzers aufgetreten",
+      "noUsersFound": "Keine Benutzer gefunden für",
+      "permissionError": "Berechtigung verweigert - Admin-Benutzer können nicht zurückgesetzt werden",
+      "searchInstruction": "Tippen Sie, um nach Benutzern zu suchen...",
+      "searchPlaceholder": "Benutzer nach Name, E-Mail oder Rolle suchen...",
+      "selectUserError": "Bitte wählen Sie einen Benutzer zum Löschen aus",
+      "selectedUser": "Ausgewählter Benutzer:",
+      "title": "Benutzer Löschen",
+      "userNotFoundError": "Benutzer nicht gefunden"
+    },
     "downloadDescription": "Laden Sie die bestätigten Betreuer-Studenten-Paare herunter",
     "downloadFileName": "lade confirmed_supervisions.csv herunter",
     "downloadTitle": "Bestätigte Betreuungen herunterladen",
@@ -151,6 +165,10 @@
     "supervising": "Sie betreuen {firstName}"
   },
   "dashboard": {
+    "progress": {
+      "button": "Profil vervollständigen...",
+      "text": "Dein Profil ist fast vollständig! Füge die letzten dinge hinzu für die beste SuperWise erfahrung!"
+    },
     "student": {
       "downloadConfirmation": "Bestätigung herunterladen",
       "findSupervisor": "Finde jetzt deinen Betreuer!",
@@ -220,6 +238,8 @@
     "loading": "Lädt",
     "logoAlt": "Logo",
     "mail": "E-Mail",
+    "manageRequest": "Anfrage verwalten",
+    "addStudent": "Als Betreute*r hinzufügen",
     "noVideoSupport": "Dein Browser unterstützt kein HTML-Video... ich denke, es ist Zeit für ein Upgrade deines Geräts!",
     "pendingRequestTo": "Ausstehende Anfrage an",
     "profile": "Profil",
@@ -279,7 +299,18 @@
     "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.",
     "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"
+    "withdrawSupervisionHeadline": "Betreuungsanfrage zurückziehen",
+    "handleRequest": {
+      "accept": "Anfrage annehmen",
+      "dismiss": "Anfrage ablehnen",
+      "description": "{firstName} {lastName} hat eine ausstehende Anfrage zur Betreuung. Möchten Sie diese Anfrage annehmen oder ablehnen?",
+      "headline": "Ausstehende Betreuungsanfrage"
+    },
+    "supervisee": {
+      "accept": "Als Betreuer hinzufügen",
+      "headline": "Student als Betreuer hinzufügen",
+      "description": "Das Hinzufügen eines Studenten als Betreuer überspringt den Bestätigungsprozess und fügt ihn direkt zu deinen betreuten Studenten hinzu. Möchtest du fortfahren?"
+    }
   },
   "multiStepForm": {
     "description": {
@@ -383,7 +414,8 @@
     },
     "noResults": "Keine Suchergebnisse...",
     "placeholderForStudents": "Betreuer suchen...",
-    "placeholderForSupervisors": "Studenten suchen..."
+    "placeholderForSupervisors": "Studenten suchen...",
+    "placeholderForAdmins": "Benutzer suchen..."
   },
   "searchBar": {
     "noResults": "Keine Ergebnisse gefunden"
@@ -475,6 +507,10 @@
   },
   "toast": {
     "withdrawRequestFailed": "Fehler beim Zurückziehen der Betreuungsanfrage",
-    "withdrawnRequest": "Sie haben die Betreuungsanfrage zurückgezogen"
+    "withdrawnRequest": "Sie haben die Betreuungsanfrage zurückgezogen",
+    "withdrawnStudentRequest": "Die Anfrage des Studierenden wurde abgelehnt",
+    "acceptedStudentRequest": "Die Anfrage des Studierenden wurde angenommen",
+    "somethingWentWrong": "Etwas ist schief gelaufen, bitte versuchen Sie es später noch einmal",
+    "addedStudentAsSupervisee": "Student wurde als Betreuer hinzugefügt"
   }
 }