strat-gameplay-webapp/frontend-sba/pages/auth/callback.vue

<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary to-blue-700 px-4">
    <div class="max-w-md w-full">
      <div class="bg-white rounded-2xl shadow-2xl p-8">
        <!-- Loading State -->
        <div v-if="isProcessing" class="text-center">
          <div class="mb-6">
            <div class="w-16 h-16 mx-auto border-4 border-primary/20 border-t-primary rounded-full animate-spin"></div>
          </div>
          <h2 class="text-xl font-bold text-gray-900 mb-2">
            Authenticating...
          </h2>
          <p class="text-gray-600">
            Please wait while we complete your sign in
          </p>
        </div>

        <!-- Success State -->
        <div v-else-if="success" class="text-center">
          <div class="mb-6">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-16 w-16 mx-auto text-green-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>
          <h2 class="text-xl font-bold text-gray-900 mb-2">
            Sign In Successful!
          </h2>
          <p class="text-gray-600 mb-6">
            Redirecting you now...
          </p>
        </div>

        <!-- Error State -->
        <div v-else-if="error" class="text-center">
          <div class="mb-6">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-16 w-16 mx-auto text-red-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>
          <h2 class="text-xl font-bold text-gray-900 mb-2">
            Authentication Failed
          </h2>
          <p class="text-gray-600 mb-6">
            {{ error }}
          </p>

          <!-- Retry Button -->
          <NuxtLink
            to="/auth/login"
            class="inline-block px-6 py-3 bg-primary hover:bg-blue-700 text-white font-semibold rounded-lg transition"
          >
            Try Again
          </NuxtLink>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '~/store/auth'

definePageMeta({
  layout: false, // Don't use default layout
})

const authStore = useAuthStore()
const route = useRoute()
const router = useRouter()

const isProcessing = ref(true)
const success = ref(false)
const error = ref<string | null>(null)

onMounted(async () => {
  try {
    // Get OAuth code and state from query parameters
    const code = route.query.code as string
    const state = route.query.state as string

    if (!code || !state) {
      throw new Error('Missing authentication parameters')
    }

    // Process the OAuth callback
    const result = await authStore.handleDiscordCallback(code, state)

    if (result) {
      success.value = true

      // Redirect after a short delay
      setTimeout(() => {
        const redirect = (route.query.redirect as string) || '/'
        router.push(redirect)
      }, 1500)
    } else {
      // Error is already set in authStore
      error.value = authStore.error || 'Authentication failed. Please try again.'
    }
  } catch (err: any) {
    console.error('OAuth callback error:', err)
    error.value = err.message || 'An unexpected error occurred'
  } finally {
    isProcessing.value = false
  }
})
</script>

<style scoped>
/* Additional component styles if needed */
</style>