Merge branch 'dev' into feat/assignment-page

frontend/src/views/CallbackPage.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
     import { useRouter } from "vue-router";
+    import { useI18n } from "vue-i18n";
     import { onMounted, ref, type Ref } from "vue";
     import auth from "../services/auth/auth-service.ts";
 
+    const { t } = useI18n();
+
     const router = useRouter();
 
     const errorMessage: Ref<string | null> = ref(null);
@@ -12,14 +15,34 @@
             await auth.handleLoginCallback();
             await router.replace("/user"); // Redirect to theme page
         } catch (error) {
-            errorMessage.value = `OIDC callback error: ${error}`;
+            errorMessage.value = `${t("loginUnexpectedError")}: ${error}`;
         }
     });
 </script>
 
 <template>
-    <p v-if="!errorMessage">Logging you in...</p>
-    <p v-else>{{ errorMessage }}</p>
+    <div class="callback">
+        <div
+            class="callback-loading"
+            v-if="!errorMessage"
+        >
+            <v-progress-circular indeterminate></v-progress-circular>
+            <p>{{ t("callbackLoading") }}</p>
+        </div>
+        <v-alert
+            icon="mdi-alert-circle"
+            type="error"
+            variant="elevated"
+            v-if="errorMessage"
+        >
+            {{ errorMessage }}
+        </v-alert>
+    </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+    .callback {
+        text-align: center;
+        margin: 20px;
+    }
+</style>