5424bf9086
- Add environment configuration with type-safe config.ts - Implement navigation guards (requireAuth, requireGuest, requireStarter) - Update router to match sitePlan routes and layouts - Create placeholder pages for all sitePlan routes - Update auth store User interface for OAuth flow - Add phase plan tracking for F0 Phase F0 progress: 4/8 tasks complete Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
59 lines
1.4 KiB
Vue
59 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* User profile page.
|
|
*
|
|
* Displays user info, linked accounts, and logout option.
|
|
*/
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
|
const auth = useAuthStore()
|
|
|
|
function logout() {
|
|
auth.logout()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-4 md:p-6">
|
|
<h1 class="mb-6 text-2xl font-bold">
|
|
Profile
|
|
</h1>
|
|
|
|
<div class="max-w-md space-y-6">
|
|
<!-- Avatar and Name -->
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex h-16 w-16 items-center justify-center rounded-full bg-gray-200 text-2xl">
|
|
{{ auth.user?.displayName?.charAt(0) || '?' }}
|
|
</div>
|
|
<div>
|
|
<div class="text-lg font-semibold">
|
|
{{ auth.user?.displayName || 'Unknown' }}
|
|
</div>
|
|
<div class="text-sm text-gray-500">
|
|
Player
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Linked Accounts -->
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 font-semibold">
|
|
Linked Accounts
|
|
</h2>
|
|
<div class="text-sm text-gray-500">
|
|
<!-- TODO: Display linked OAuth accounts -->
|
|
No linked accounts information available
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logout -->
|
|
<button
|
|
class="w-full rounded bg-red-600 px-4 py-2 text-white hover:bg-red-700"
|
|
@click="logout"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|