feat(frontend): kosmetische verbeteringen & i18n in de callback-pagina

frontend/src/i18n/locale/de.json

@@ -75,5 +75,7 @@
     "sent": "sent",
     "failed": "gescheitert",
     "wrong": "etwas ist schief gelaufen",
-    "created": "erstellt"
+    "created": "erstellt",
+    "callbackLoading": "Sie werden angemeldet...",
+    "loginUnexpectedError": "Anmeldung fehlgeschlagen"
 }

frontend/src/i18n/locale/en.json

@@ -75,5 +75,7 @@
     "sent": "sent",
     "failed": "failed",
     "wrong": "something went wrong",
-    "created": "created"
+    "created": "created",
+    "callbackLoading": "You are being logged in...",
+    "loginUnexpectedError": "Login failed"
 }

frontend/src/i18n/locale/fr.json

@@ -75,5 +75,7 @@
     "sent": "envoyé",
     "failed": "échoué",
     "wrong": "quelque chose n'a pas fonctionné",
-    "created": "créé"
+    "created": "créé",
+    "callbackLoading": "Vous serez connecté...",
+    "loginUnexpectedError": "La connexion a échoué"
 }

frontend/src/i18n/locale/nl.json

@@ -75,5 +75,7 @@
     "sent": "verzonden",
     "failed": "mislukt",
     "wrong": "er ging iets verkeerd",
-    "created": "gecreëerd"
+    "created": "gecreëerd",
+    "callbackLoading": "Je wordt ingelogd...",
+    "loginUnexpectedError": "Inloggen mislukt"
 }

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,26 @@
             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>