Merge pull request #89 from LCOGT/fix/logout-view

Fix/logout view
LCOGT · Nov 14, 2024 · 099e678 · 099e678
2 parents 856414b + ee99f7d
commit 099e678
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -21,6 +21,13 @@ function handleObserveClick () {
   router.push('/dashboard')
 }
 
+function logout () {
+  userDataStore.username = ''
+  userDataStore.authToken = ''
+  userDataStore.profile = {}
+  router.push('/login')
+}
+
 onMounted(async () => {
   try {
     const response = await fetch('/config/config.json')
@@ -59,7 +66,7 @@ watch(
 
 <template>
   <template v-if="loadedConfig">
-  <nav class="navbar" role="navigation" aria-label="main navigation">
+  <nav v-if="username" class="navbar" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <router-link class="navbar-item" to="/">
         <img src="@/assets/ptr_logo.png" alt="Photon Ranch logo"/>
@@ -81,8 +88,13 @@ watch(
         <router-link class="navbar-item" to="/observe">Observe</router-link>
         <router-link class="navbar-item" to="/datalab">DataLab</router-link>
         <div class="buttons">
-          <span class="navbar-item" v-if="username">{{ username }}</span>
-            <router-link class="navbar-item button red-bg" to="/login" v-else-if="!username">Login</router-link>
+          <div class="navbar-item has-dropdown is-hoverable">
+            <a class="navbar-link">{{ username }}</a>
+            <div class="navbar-dropdown">
+            <a class="navbar-item" @click="logout">Log Out</a>
+          </div>
+        </div>
+          <router-link class="navbar-item button red-bg" to="/login" v-if="!username">Login</router-link>
         </div>
       </div>
     </div>
@@ -92,7 +104,7 @@ watch(
     <AboutView @observeClicked="handleObserveClick"/>
   </div>
   <div v-else>
-    <section class="hero">
+    <section v-if="username" class="hero">
       <div class="container">
         <div class="columns is-vcentered">
           <div class="column is-one-quarter">

diff --git a/src/components/Views/AboutView.vue b/src/components/Views/AboutView.vue
@@ -2,7 +2,6 @@
 import { defineEmits } from 'vue'
 import { useRouter } from 'vue-router'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import LogIn from '../LogIn/LogIn.vue'
 
 const emit = defineEmits(['observeClicked'])
 const router = useRouter()

diff --git a/src/router/index.js b/src/router/index.js
@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useUserDataStore } from '../stores/userData'
 import RealTimeInterface from '../components/Views/RealTimeInterfaceView.vue'
 import Dashboard from '../components/Views/DashboardView.vue'
 import Images from '../components/Views/ImagesView.vue'
@@ -58,4 +59,17 @@ const router = createRouter({
   routes
 })
 
+// Add navigation guard
+router.beforeEach((to, from, next) => {
+  const userDataStore = useUserDataStore()
+  const isLoggedIn = !!userDataStore.username
+
+  // Allow access only to the login page if not logged in
+  if (!isLoggedIn && to.path !== '/login') {
+    next('/login')
+  } else {
+    next()
+  }
+})
+
 export default router