All files / src/views CallbackView.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth.store'
import { Loader2 } from 'lucide-vue-next'
 
const router = useRouter()
const authStore = useAuthStore()
const error = ref<string | null>(null)
 
onMounted(async () => {
  try {
    // Handle OAuth callback
    const returnUrl = await authStore.handleCallback()
    
    // Redirect to original destination or dashboard
    router.push(returnUrl || '/dashboard')
  } catch (err: any) {
    console.error('Callback error:', err)
    error.value = err.message || 'Authentication failed'
    
    // Redirect to login after short delay
    setTimeout(() => {
      router.push('/login')
    }, 3000)
  }
})
</script>
 
<template>
  <div class="flex flex-col items-center justify-center min-h-screen">
    <div class="text-center">
      <div v-if="!error" class="flex flex-col items-center gap-4">
        <Loader2 class="animate-spin text-primary" :size="48" />
        <p class="text-gray-600">Completing authentication...</p>
      </div>
      
      <div v-else class="flex flex-col items-center gap-4">
        <div class="text-red-500">
          <p class="font-semibold">Authentication Error</p>
          <p class="text-sm mt-2">{{ error }}</p>
        </div>
        <p class="text-sm text-gray-600">Redirecting to login...</p>
      </div>
    </div>
  </div>
</template>