Added basic app wide user state

client/src/App.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onBeforeMount } from 'vue'
 
 import Signup from './components/Signup.vue'
 import Login from './components/Login.vue'
 import Clicker from './components/Clicker.vue'
-import ThemeToggle from './components/ThemeToggle.vue'
 import Chat from './components/Chat.vue'
 import Header from './components/Header.vue'
 
@@ -16,6 +15,8 @@ const routes = {
   '/chat': Chat,
 }
 
+let user = ref('')
+
 const currentPath = ref(window.location.hash)
 
 window.addEventListener('hashchange', () => {
@@ -26,18 +27,23 @@ const currentView = computed(() => {
   return routes[currentPath.value.slice(1) || '/'] || NotFound
 })
 
+onBeforeMount(async () => {
+  let resp = await fetch("/api/user")
+  if (resp.ok) {
+    user.value = await resp.json()
+  } else {
+    window.location.hash = "/login"
+  }
+})
 </script>
 
 
 <template>
-  <Header />
+  <Header v-model=user />
   <Suspense>
-    <component :is="currentView" />
+    <component :is="currentView" v-model=user />
     <template #fallback>
       Loading...
     </template>
   </Suspense>
-  <div class="position-fixed bottom-0 end-0 mb-3 me-3">
-    <!--<ThemeToggle />-->
-  </div>
 </template>

client/src/components/Chat.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 
+const props = defineProps(['modelValue'])
+const emit = defineEmits(['update:modelValue'])
+
 const input = ref('')
 const msgs = ref(['Server: Welcome to chat app', 'Server: This is an example message'])
 let ws;
@@ -21,6 +24,7 @@ onMounted(async () => {
 
   ws.onerror = function (event) {
     console.log('WebSocket connection failed:', event);
+    emit('update:modelValue', '')
     //alert("Not logged in!")
     window.location.hash = "/login"
   };

client/src/components/Clicker.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { ref } from 'vue'
 
+const props = defineProps(['modelValue'])
+const emit = defineEmits(['update:modelValue'])
+
 async function get_clicks() {
   const api_url = '/api/num'
 
@@ -12,6 +15,7 @@ async function get_clicks() {
     return ans
   }
   else {
+    emit('update:modelValue', '')
     window.location.hash = "/login"
     return 'ERROR'
   }
@@ -38,6 +42,7 @@ async function signout(ev) {
   }
   let resp = await fetch(api_url, fetch_options)
   console.log(resp)
+  emit('update:modelValue', '')
   window.location.reload()
 }
 

client/src/components/Header.vue

@@ -1,26 +1,9 @@
 <script setup>
 import ThemeToggle from './ThemeToggle.vue'
-import { ref, onMounted } from 'vue';
 
-let user = ref('')
-let page = ref('')
+const props = defineProps(['modelValue'])
+defineEmits(['update:modelValue'])
 
-window.addEventListener('hashchange', () => {
-  page.value = window.location.hash
-})
-
-async function checkUser(ev) {
-  ev.preventDefault();
-  const api_url = '/api/user'
-  const fetch_options = {
-    headers: { 'content-type': 'application/json' }
-  }
-
-  let resp = await fetch(api_url, fetch_options)
-  if (resp.ok) {
-    user.value = await resp.json()
-  }
-}
 async function signout(ev) {
   ev.preventDefault()
 
@@ -58,7 +41,7 @@ async function signout(ev) {
 
         <div class="offcanvas-body px-2">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
-            <li v-if="page != '/login'" class="nav-item mx-2 mt-2">
+            <li v-if="modelValue !== ''" class="nav-item mx-2 mt-2">
               <button @click="signout" class="btn btn-outline-success">Sign out</button>
             </li>
             <li class="nav-item mf-3 mt-1">

client/src/components/Login.vue

@@ -5,6 +5,9 @@ import IconLogo from './icons/IconLogo.vue';
 const user = ref('')
 const pass = ref('')
 
+defineProps(['modelValue'])
+const emit = defineEmits(['update:modelValue'])
+
 async function login(ev) {
   ev.preventDefault()
   const api_url = '/api/auth'
@@ -19,6 +22,7 @@ async function login(ev) {
 
   let resp = await fetch(api_url, fetch_options)
   if (resp.ok) {
+    emit('update:modelValue', user.value)
     window.location.hash = "/"
   } else {
     user.value = ''
@@ -29,6 +33,7 @@ async function login(ev) {
 onMounted(async () => {
   let resp = await fetch("/api/user")
   if (resp.ok) {
+    emit('update:modelValue', await resp.json())
     window.location.hash = "/"
   }
 })

client/src/components/Signup.vue

@@ -2,6 +2,9 @@
 import { ref } from 'vue'
 import IconLogo from './icons/IconLogo.vue';
 
+const props = defineProps(['modelValue'])
+const emit = defineEmits(['update:modelValue'])
+
 const user = ref('')
 const pass = ref('')
 const refe = ref('')
@@ -23,6 +26,8 @@ async function signup(ev) {
 
   let resp = await fetch(api_url, fetch_options)
   if (resp.ok) {
+    let user = resp.json()
+    emit('update:modelValue', user)
     err.value = ''
     window.location.hash = "/"
   }