project-manager/web/src/App.vue

<script setup lang="ts">
import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
import { useAuthStore } from './stores/auth'
import { useCardsStore } from './stores/cards'
import { useProjectsStore } from './stores/projects'

const auth = useAuthStore()
const projects = useProjectsStore()
const cards = useCardsStore()
const router = useRouter()
const route = useRoute()

async function onLogout() {
  auth.logout()
  projects.reset()
  cards.reset()
  await router.push({ name: 'login' })
}
</script>

<template>
  <div class="app">
    <header class="app__bar">
      <span class="app__brand">Projects</span>

      <div v-if="auth.isAuthenticated" class="app__account">
        <RouterLink v-if="!auth.emailVerified" to="/profile" class="badge badge--warn">
          verify email
        </RouterLink>
        <RouterLink to="/profile" class="app__email">{{ auth.user?.email }}</RouterLink>
        <button type="button" class="link" @click="onLogout">Log out</button>
      </div>
    </header>

    <main class="app__main" :class="{ 'app__main--wide': route.meta.wide }">
      <RouterView />
    </main>
  </div>
</template>