Profile & Dashboard

What's Included

• User profile display (name, email, verification status)
• Subscription status card with plan details
• Change password form
• Authenticated layout with sidebar navigation

Profile Page (/profile)

The profile page is protected by the auth middleware and shows:

1. User Profile Card — Name, email, email verification badge, user ID
2. Subscription Card — Current plan, status badge (active/canceled/past_due/trial), payment type, period end date
3. Change Password Form — Old password + new password fields

Profile Composable (useProfile)

const {
  fetchProfile,    // () → fetches user profile from API
  changePassword,  // (oldPassword, newPassword) → changes password
  isLoading,       // Ref<boolean>
  error            // Ref<string | null>
} = useProfile()

Subscription Composable (useSubscription)

const {
  subscription,  // Ref<SubscriptionStatus | null>
  fetchSubscription,
  isLoading,
  error
} = useSubscription()

Returns null for the subscription if the user has no subscription (404 from API is handled gracefully).

Authenticated Layout

Authenticated pages use AuthenticatedLayout.vue — a two-column layout with:

• Top navbar — Logo, user menu with avatar dropdown (Profile, Sign Out)
• Left sidebar — Navigation links for feature pages
• Main content area — Page content via <slot />

On mobile, the sidebar is hidden behind a toggle button with a backdrop overlay.

Dashboard

The dashboard (pages/index.vue for authenticated users) shows a simple welcome message. It's the entry point for authenticated navigation.

Feature Pages

Three placeholder feature pages are included (/feature-1, /feature-2, /feature-3) protected by auth middleware. These demonstrate the authenticated layout pattern and can be replaced with your actual features.