Renamed user store to token store

src/components/LoginForm.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {ref} from "vue";
-import {setLoggedInUser} from "./stores/user.js";
+import {setToken} from "./stores/token.js";
 import * as gateway from "./lib/gateway.js";
 
 const formData = ref({username: '', password: ''})
@@ -17,7 +17,7 @@ async function formSubmit() {
   if(response.status === 200) {
     const responseData = await response.json()
     console.log(responseData)
-    setLoggedInUser(responseData.token, responseData.expiresAt)
+    setToken(responseData)
   }
 }
 </script>

src/components/TopNav.astro

@@ -9,7 +9,7 @@ import UserAction from './top_nav/UserAction.vue'
         <li><Link href="/auctions">Auctions</Link></li>
     </ul>
     <ul class="right">
-        <li><UserAction client:load /></li>
+        <li><UserAction client:only /></li>
     </ul>
 </nav>
 

src/components/lib/gateway.js

@@ -19,6 +19,7 @@ export async function request(path, options) {
         headers: {
             'Content-Type': options.contentType ||
                 (safeFetch ? null : 'application/json'),
+            'X-Requested-With': 'fetch',
             'Authorization': authorization
         }
     }

src/components/scripts/user_store.js

@@ -1,18 +1,17 @@
-import {$user, setAnonUser, setLoggedInUser} from "../stores/user.js";
+import {$token, setAnon, setToken} from "../stores/token.js";
 
-const LOCAL_STORAGE_KEY="user"
+const LOCAL_STORAGE_KEY="token"
 
-$user.subscribe(value => {
-    if(value == null || !value.initialized) return;
+$token.subscribe(value => {
+    if(value == null || !value.token) return;
     localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(value)
 })
 
 window.addEventListener('load', () => {
     let data = localStorage[LOCAL_STORAGE_KEY]
-    if (data == null) { return setAnonUser() }
+    if (data == null) { return setAnon() }
     data = JSON.parse(data)
-    if (data == null || data.token == null) { return setAnonUser() }
-    if(Date.parse(data.expiresAt) < Date()) { return setAnonUser() }
+    if (data == null || data.token == null) { return setAnon() }
 
-    setLoggedInUser(data.token, data.expiresAt)
+    setToken(data)
 })

src/components/stores/token.js

@@ -0,0 +1,23 @@
+import { atom } from 'nanostores'
+
+export const Loading = Symbol("loading")
+export const Anonymous = Symbol("anonymous")
+class Token {
+    constructor({token, expiresAt}) {
+        this.token = token
+        this.expiresAt = new Date(expiresAt)
+    }
+}
+
+export const $token = atom(Loading)
+
+export function setAnon() {
+    $token.set(Anonymous)
+}
+
+export function setToken(data) {
+    let token = new Token(data)
+    if(token.expiresAt >= new Date()) {
+        $token.set(token)
+    } else { setAnon() }
+}

src/components/stores/user.js

@@ -1,11 +0,0 @@
-import { atom } from 'nanostores'
-
-export const $user = atom({})
-
-export function setAnonUser() {
-    $user.set({initialized: true})
-}
-
-export function setLoggedInUser(token, expiresAt) {
-    $user.set({initialized: true, loggedIn: true, token: token, expiresAt: expiresAt})
-}

src/components/top_nav/UserAction.vue

@@ -1,14 +1,14 @@
 <script setup>
 import {useStore} from '@nanostores/vue'
-import {$user} from "../stores/user.js";
+import {$token, Loading, Anonymous} from "../stores/token.js";
 
-const user = useStore($user)
+const token = useStore($token)
 </script>
 
 <template>
-  <div v-if="!user.initialized" class="placeholder"></div> <!-- TODO: replace with an actual placeholder -->
-  <a href="/login" v-else-if="!user.loggedIn">Login</a>
-  <span v-else>{{ user.username || "Username" }}</span>
+  <div v-if="token === Loading" class="placeholder"></div> <!-- TODO: replace with an actual placeholder -->
+  <a href="/login" v-else-if="token === Anonymous">Login</a>
+  <span v-else>{{ token.username || "Username" }}</span>
 </template>
 
 <style scoped>

src/layouts/Layout.astro

@@ -25,9 +25,9 @@ const {title} = Astro.props
         {import.meta.env.DEV &&
             <script>
                 import {logger} from '@nanostores/logger'
-                import {$user} from "../components/stores/user";
+                import {$token} from "../components/stores/token";
 
-                let _destroy = logger({user: $user})
+                let _destroy = logger({user: $token})
                 </script>
         }
     </body>