198222c3ff
This commit introduces internationalization for several page components by identifying hardcoded strings, adding them to translation files, and updating the components to use translation keys. Processed pages: - fe/src/pages/AuthCallbackPage.vue: I internationalized an error message. - fe/src/pages/ChoresPage.vue: I internationalized console error messages and an input placeholder. - fe/src/pages/ErrorNotFound.vue: I found no missing translations. - fe/src/pages/GroupDetailPage.vue: I internationalized various UI elements (ARIA labels, button text, fallback user display names) and console/error messages. - fe/src/pages/GroupsPage.vue: I internationalized error messages and console logs. - fe/src/pages/IndexPage.vue: I found no missing user-facing translations. - fe/src/pages/ListDetailPage.vue: My analysis is complete, and I identified a console message and a fallback string for translation (implementation of changes for this page is pending). For each processed page where changes were needed: - I added new keys to `fe/src/i18n/en.json`. - I added corresponding placeholder keys `"[TRANSLATE] Original Text"` to `fe/src/i18n/de.json`, `fe/src/i18n/es.json`, and `fe/src/i18n/fr.json`. - I updated the Vue component to use the `t()` function with the new keys. Further pages in `fe/src/pages/` are pending analysis and internationalization as per our original plan.
100 lines
2.6 KiB
Vue
100 lines
2.6 KiB
Vue
<template>
|
|
<main class="flex items-center justify-center page-container">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<div v-if="loading" class="spinner-dots" role="status">
|
|
<span /><span /><span />
|
|
</div>
|
|
<p v-else-if="error" class="text-error">{{ error }}</p>
|
|
<p v-else>{{ t('authCallbackPage.redirecting') }}</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useAuthStore } from '@/stores/auth';
|
|
import { useNotificationStore } from '@/stores/notifications';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const authStore = useAuthStore();
|
|
const notificationStore = useNotificationStore();
|
|
|
|
const { t } = useI18n();
|
|
|
|
const loading = ref(true);
|
|
const error = ref<string | null>(null);
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const accessToken = route.query.access_token as string | undefined;
|
|
const refreshToken = route.query.refresh_token as string | undefined;
|
|
const legacyToken = route.query.token as string | undefined;
|
|
|
|
const tokenToUse = accessToken || legacyToken;
|
|
|
|
if (!tokenToUse) {
|
|
throw new Error(t('authCallbackPage.errors.noTokenProvided'));
|
|
}
|
|
|
|
await authStore.setTokens({ access_token: tokenToUse, refresh_token: refreshToken });
|
|
notificationStore.addNotification({ message: t('loginPage.notifications.loginSuccess'), type: 'success' });
|
|
router.push('/');
|
|
} catch (err) {
|
|
error.value = err instanceof Error ? err.message : t('authCallbackPage.errors.authenticationFailed');
|
|
notificationStore.addNotification({ message: error.value, type: 'error' });
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-container {
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.card {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
text-align: center;
|
|
}
|
|
|
|
.spinner-dots {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.spinner-dots span {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
background-color: var(--primary);
|
|
border-radius: 50%;
|
|
animation: bounce 0.5s infinite alternate;
|
|
}
|
|
|
|
.spinner-dots span:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.spinner-dots span:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
from {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
to {
|
|
transform: translateY(-0.5rem);
|
|
}
|
|
}
|
|
</style> |