timetracker update

bo/src/views/VerifyEmailView.vue

@@ -3,12 +3,12 @@ import { ref, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useFetchJson } from '@/composable/useFetchJson'
+import { i18n } from '@/plugins/02_i18n'
 
 const { t, te } = useI18n()
 const router = useRouter()
 const route = useRoute()
 
-// Helper function to get translation with fallback
 function tt(key: string, fallback: string): string {
   return te(key) ? t(key) : fallback
 }
@@ -20,22 +20,19 @@ const success = ref(false)
 const verificationInProgress = ref(true)
 
 onMounted(() => {
-  // Get token from URL query params
   token.value = (route.query.token as string) || ''
 
   if (!token.value) {
-    error.value = tt('verify_email.invalid_token', 'Invalid or missing verification token')
+    error.value = i18n.t('verify_email.invalid_token')
     verificationInProgress.value = false
     return
   }
-
-  // Automatically verify email on page load
   handleVerifyEmail()
 })
 
 async function handleVerifyEmail() {
   if (!token.value) {
-    error.value = tt('verify_email.invalid_token', 'Invalid or missing verification token')
+    error.value = i18n.t('verify_email.invalid_token')
     return
   }
 
@@ -43,7 +40,7 @@ async function handleVerifyEmail() {
   error.value = null
 
   try {
-    await useFetchJson('/api/v1/auth/complete-registration', {
+    await useFetchJson('/api/v1/public/auth/complete-registration', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ token: token.value }),
@@ -52,12 +49,11 @@ async function handleVerifyEmail() {
     success.value = true
     verificationInProgress.value = false
 
-    // Redirect to login after 3 seconds
     setTimeout(() => {
       router.push({ name: 'login' })
     }, 3000)
   } catch (e: any) {
-    error.value = e?.message ?? tt('verify_email.verification_failed', 'Email verification failed')
+    error.value = e?.message ?? i18n.t('verify_email.verification_failed')
     verificationInProgress.value = false
   } finally {
     loading.value = false
@@ -74,81 +70,72 @@ function goToLogin() {
     class="min-h-screen bg-gradient-to-br from-primary-50 via-white to-primary-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
     <div class="pt-20 pb-8 flex items-center justify-center px-4 sm:px-6 lg:px-8">
       <div class="w-full max-w-md">
-        <!-- Logo/Brand Section -->
         <div class="text-center mb-8">
           <div
             class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-500 text-white mb-4 shadow-lg shadow-primary-500/30">
-            <UIcon name="i-heroicons-envelope-check" class="w-8 h-8" />
+            <UIcon name="i-heroicons-clock" class="w-8 h-8" />
           </div>
           <h1 class="text-3xl font-bold text-gray-900 dark:text-white">TimeTracker</h1>
         </div>
 
-        <!-- Verify Email Card -->
         <UCard class="shadow-xl shadow-gray-200/50 dark:shadow-gray-900/50">
           <template #header>
             <div class="text-center">
-              <!-- Loading State -->
               <div v-if="verificationInProgress && loading">
                 <UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-primary-500 mx-auto mb-4" />
                 <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
-                  {{ tt('verify_email.verifying', 'Verifying your email...') }}
+                  {{ $t('verify_email.verifying') }}
                 </h2>
               </div>
-
-              <!-- Success State -->
               <div v-else-if="success">
                 <div
                   class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-100 text-green-600 mb-4">
                   <UIcon name="i-heroicons-check-circle" class="w-6 h-6" />
                 </div>
                 <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
-                  {{ tt('verify_email.success_title', 'Email Verified!') }}
+                  {{ $t('verify_email.success_title') }}
                 </h2>
                 <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                  {{ tt('verify_email.success_message', 'Your email has been verified successfully.') }}
+                  {{ $t('verify_email.success_message') }}
                 </p>
               </div>
-
-              <!-- Error State -->
               <div v-else-if="error">
                 <div
                   class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 text-red-600 mb-4">
                   <UIcon name="i-heroicons-exclamation-circle" class="w-6 h-6" />
                 </div>
                 <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
-                  {{ tt('verify_email.error_title', 'Verification Failed') }}
+                  {{ $t('verify_email.error_title') }}
                 </h2>
                 <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                  {{ tt('verify_email.error_message', 'We could not verify your email.') }}
+                  {{ $t('verify_email.error_message') }}
                 </p>
               </div>
             </div>
           </template>
 
-          <!-- Success State Content -->
           <div v-if="success" class="text-center py-4">
-            <p class="text-gray-600 dark:text-gray-400 mb-4">{{ tt('verify_email.redirect_message', 'You will be redirected to login page...') }}</p>
-            <UButton color="primary" @click="goToLogin">{{ tt('verify_email.go_to_login', 'Go to Login') }}</UButton>
+            <p class="text-gray-600 dark:text-gray-400 mb-4">{{ $t('verify_email.redirect_message') }}</p>
+            <UButton color="primary" @click="goToLogin">{{ $t('verify_email.go_to_login') }}</UButton>
           </div>
-
-          <!-- Error State Content -->
           <div v-else-if="error" class="text-center py-4">
             <UAlert :color="'error'" variant="subtle" icon="i-heroicons-exclamation-triangle" :title="error"
               class="mb-4" />
-            <UButton color="primary" @click="goToLogin">{{ tt('verify_email.go_to_login', 'Go to Login') }}</UButton>
+            <UButton color="primary" @click="goToLogin" class="cursor-pointer">{{ $t('verify_email.go_to_login') }}
+            </UButton>
           </div>
-
-          <!-- Loading State Content -->
           <div v-else-if="verificationInProgress && loading" class="text-center py-4">
-            <p class="text-gray-500 dark:text-gray-400">{{ tt('verify_email.please_wait', 'Please wait while we verify your email address.') }}</p>
+            <p class="text-gray-500 dark:text-gray-400">{{ $t('verify_email.please_wait') }}</p>
           </div>
 
           <template #footer>
             <div class="text-center">
               <p class="text-sm text-gray-600 dark:text-gray-400">
-                {{ tt('verify_email.already_registered', 'Already have an account?') }}
-                <UButton variant="link" size="sm" @click="goToLogin"> {{ tt('verify_email.sign_in', 'Sign in') }}
-                </UButton>
+                {{ $t('verify_email.already_registered') }}
+                <button variant="link" size="sm" @click="goToLogin"
+                  class="cursor-pointer text-(--color-blue-600) dark:text-(--color-blue-500)"> {{ $t('general.sign_in')
+                  }}
+                </button>
               </p>
             </div>
           </template>