Merge branch 'dev' into SCRUM-314-frontend-do-emergency-aria-fixes

Author: FelixTeutsch

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. You can reach out to the admin for the secret keys.
+
+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/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/i18n/locales/de-DE.json

@@ -232,6 +232,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!",
     "nothing": "Nichts",
     "pendingRequestTo": "Ausstehende Anfrage an",
@@ -296,7 +298,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": {
@@ -499,6 +512,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"
   }
 }

Frontend/i18n/locales/en-GB.json

@@ -232,6 +232,8 @@
     "loading": "Loading",
     "logoAlt": "logo",
     "mail": "Mail",
+    "manageRequest": "Manage Request",
+    "addStudent": "Add as supervisee",
     "noVideoSupport": "Your browser does not support HTML video... i think its time to upgrade your device!",
     "nothing": "Nothing",
     "pendingRequestTo": "Pending request to",
@@ -296,7 +298,18 @@
     "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.",
     "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"
+    "withdrawSupervisionHeadline": "Withdraw Supervision Request",
+    "handleRequest": {
+      "accept": "Accept Request",
+      "dismiss": "Dismiss Request",
+      "description": "{firstName} {lastName} has a pending request for supervision. Would you like to accept or dismiss this request?",
+      "headline": "Pending Supervision Request"
+    },
+    "supervisee": {
+      "accept": "Add as Supervisee",
+      "headline": "Add Student as Supervisee",
+      "description": "Adding a student as supervisee will skip the confirmation process and directly add them to your supervised students. Do you wish to proceed?"
+    }
   },
   "multiStepForm": {
     "description": {
@@ -499,6 +512,10 @@
   },
   "toast": {
     "withdrawRequestFailed": "Failed to withdraw the supervision request",
-    "withdrawnRequest": "You have withdrawn the supervision request"
+    "withdrawnRequest": "You have withdrawn the supervision request",
+    "withdrawnStudentRequest": "Student request has been dismissed",
+    "acceptedStudentRequest": "Student request has been accepted",
+    "somethingWentWrong": "Something went wrong, please try again later",
+    "addedStudentAsSupervisee": "Student has been added as supervisee"
   }
 }

Frontend/pages/admin/dashboard.vue

@@ -20,7 +20,7 @@
         >{{ t("admin.availableSpots") }}
         </span>
       </div>
-      <hr class="border-base-300">
+      <hr class="border-base-300" >
       <div class="p-8 gap-4 admin-overview-grid">
         <FontAwesomeIcon class="opacity-75" icon="user-group"/>
         <span class="text-body text-primary"