port-nimara-client-portal/pages/dashboard/auth-test.vue

<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <h1 class="text-h4 mb-4">Authentication Test</h1>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" md="6">
        <v-card>
          <v-card-title>Current Authentication Status</v-card-title>
          <v-card-text>
            <v-list>
              <v-list-item>
                <template #prepend>
                  <v-icon :color="isAuthenticated ? 'success' : 'error'">
                    {{ isAuthenticated ? 'mdi-check-circle' : 'mdi-close-circle' }}
                  </v-icon>
                </template>
                <v-list-item-title>Authentication Status</v-list-item-title>
                <v-list-item-subtitle>{{ isAuthenticated ? 'Authenticated' : 'Not Authenticated' }}</v-list-item-subtitle>
              </v-list-item>

              <v-list-item v-if="authSource">
                <template #prepend>
                  <v-icon>mdi-shield-account</v-icon>
                </template>
                <v-list-item-title>Auth Source</v-list-item-title>
                <v-list-item-subtitle>{{ authSource }}</v-list-item-subtitle>
              </v-list-item>
            </v-list>
          </v-card-text>
        </v-card>
      </v-col>

      <v-col cols="12" md="6">
        <v-card v-if="user">
          <v-card-title>User Information</v-card-title>
          <v-card-text>
            <v-list>
              <v-list-item>
                <template #prepend>
                  <v-icon>mdi-identifier</v-icon>
                </template>
                <v-list-item-title>User ID</v-list-item-title>
                <v-list-item-subtitle>{{ user.id }}</v-list-item-subtitle>
              </v-list-item>

              <v-list-item>
                <template #prepend>
                  <v-icon>mdi-email</v-icon>
                </template>
                <v-list-item-title>Email</v-list-item-title>
                <v-list-item-subtitle>{{ user.email }}</v-list-item-subtitle>
              </v-list-item>

              <v-list-item>
                <template #prepend>
                  <v-icon>mdi-account</v-icon>
                </template>
                <v-list-item-title>Name</v-list-item-title>
                <v-list-item-subtitle>{{ user.name }}</v-list-item-subtitle>
              </v-list-item>

              <v-list-item>
                <template #prepend>
                  <v-icon>mdi-medal</v-icon>
                </template>
                <v-list-item-title>Tier</v-list-item-title>
                <v-list-item-subtitle>
                  <v-chip :color="user.tier === 'admin' ? 'error' : 'primary'" size="small">
                    {{ user.tier || 'basic' }}
                  </v-chip>
                </v-list-item-subtitle>
              </v-list-item>

              <v-list-item v-if="isAdmin">
                <template #prepend>
                  <v-icon color="error">mdi-shield-crown</v-icon>
                </template>
                <v-list-item-title>Admin Status</v-list-item-title>
                <v-list-item-subtitle>User has admin privileges</v-list-item-subtitle>
              </v-list-item>
            </v-list>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <v-row v-if="user">
      <v-col cols="12">
        <v-card>
          <v-card-title>Raw User Data</v-card-title>
          <v-card-text>
            <v-expansion-panels>
              <v-expansion-panel>
                <v-expansion-panel-title>Click to view raw data</v-expansion-panel-title>
                <v-expansion-panel-text>
                  <pre class="text-caption">{{ JSON.stringify(user.raw, null, 2) }}</pre>
                </v-expansion-panel-text>
              </v-expansion-panel>
            </v-expansion-panels>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <v-row class="mt-4">
      <v-col cols="12">
        <v-card>
          <v-card-title>Test Actions</v-card-title>
          <v-card-text>
            <v-btn color="error" @click="testLogout" prepend-icon="mdi-logout">
              Test Logout
            </v-btn>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard-unified'
});

const { user, isAuthenticated, authSource, isAdmin, logout } = useUnifiedAuth();
const router = useRouter();

const testLogout = async () => {
  await logout();
  // The middleware should redirect to login automatically
};

useHead({
  title: 'Authentication Test'
});
</script>