frontend: add router guards and update MainLayout

frontend/src/layouts/MainLayout.vue

@@ -1,9 +1,23 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout view="hHh Lpr lFf">
     <q-header elevated>
       <q-toolbar>
-        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
-        <q-toolbar-title>git-extract</q-toolbar-title>
+        <q-toolbar-title>
+          <router-link to="/repos" class="text-white text-decoration-none">git-extract</router-link>
+        </q-toolbar-title>
+
+        <template v-if="auth.isLoggedIn">
+          <q-chip outline color="white" class="q-mr-sm">
+            <q-avatar>
+              <img v-if="auth.user?.avatar_url" :src="auth.user.avatar_url" />
+              <q-icon v-else name="person" />
+            </q-avatar>
+            {{ auth.user?.login || auth.user?.username }}
+            <q-badge :label="auth.provider" color="grey-7" class="q-ml-xs" />
+          </q-chip>
+
+          <q-btn flat dense label="Logout" @click="logout" />
+        </template>
       </q-toolbar>
     </q-header>
 
@@ -14,11 +28,14 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { useAuthStore } from '../stores/auth.js'
+import { useRouter } from 'vue-router'
 
-const leftDrawerOpen = ref(false)
+const auth = useAuthStore()
+const router = useRouter()
 
-function toggleLeftDrawer() {
-  leftDrawerOpen.value = !leftDrawerOpen.value
+function logout() {
+  auth.logout()
+  router.push('/login')
 }
 </script>

frontend/src/pages/ExtractPage.vue

@@ -0,0 +1,5 @@
+<template>
+  <q-page padding>
+    <div class="text-h5">Extract</div>
+  </q-page>
+</template>

frontend/src/router/index.js

@@ -1,6 +1,7 @@
 import { route } from 'quasar/wrappers'
 import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
 import routes from './routes'
+import { useAuthStore } from '../stores/auth.js'
 
 export default route(function (/* { store, ssrContext } */) {
   const createHistory = process.env.SERVER
@@ -15,5 +16,11 @@ export default route(function (/* { store, ssrContext } */) {
     history: createHistory(process.env.VUE_ROUTER_BASE),
   })
 
+  Router.beforeEach((to) => {
+    if (to.meta.requiresAuth && !useAuthStore().isLoggedIn) {
+      return '/login'
+    }
+  })
+
   return Router
 })

frontend/src/router/routes.js

@@ -3,17 +3,15 @@ const routes = [
     path: '/',
     component: () => import('layouts/MainLayout.vue'),
     children: [
-      { path: '', component: () => import('pages/IndexPage.vue') },
+      { path: '', redirect: '/repos' },
       { path: '/login', component: () => import('pages/LoginPage.vue') },
       { path: '/auth/github', component: () => import('pages/AuthCallback.vue') },
       { path: '/auth/gitlab', component: () => import('pages/AuthCallback.vue') },
-      { path: '/repos', component: () => import('pages/ReposPage.vue') },
+      { path: '/repos', component: () => import('pages/ReposPage.vue'), meta: { requiresAuth: true } },
+      { path: '/extract', component: () => import('pages/ExtractPage.vue'), meta: { requiresAuth: true } },
     ],
   },
-  {
-    path: '/:catchAll(.*)*',
-    component: () => import('pages/ErrorNotFound.vue'),
-  },
+  { path: '/:catchAll(.*)*', component: () => import('pages/ErrorNotFound.vue') },
 ]
 
 export default routes