Reworked user state and login

2026-01-18 01:24:26 +02:00
parent 53aed96a05
commit dfbcaafb77
8 changed files with 106 additions and 30 deletions
@@ -1,6 +1,6 @@
 <script setup>
 import {ref} from "vue";
-import {$user} from "./stores/user.js";
+import {setLoggedInUser} from "./stores/user.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)
-    $user.set(responseData)
+    setLoggedInUser(responseData.token, responseData.expiresAt)
  }
 }
 </script>
@@ -0,0 +1,36 @@
+---
+import Link from './top_nav/Link.astro'
+import UserAction from './top_nav/UserAction.vue'
+---
+
+<nav>
+    <a class="brand" href="/">NV</a>
+    <ul class="center">
+        <li><Link href="/auctions">Auctions</Link></li>
+    </ul>
+    <ul class="right">
+        <li><UserAction client:load /></li>
+    </ul>
+</nav>
+
+<style>
+    nav {
+        display: flex;
+        flex-flow: row nowrap;
+        width: 100%;
+
+        > ul {
+            list-style: none;
+            display: flex;
+            flex-flow: row nowrap;
+        }
+
+        > .center {
+            margin-inline: auto;
+        }
+
+        > .right {
+            margin-left: auto;
+        }
+    }
+</style>
@@ -1,17 +1,18 @@
-import {$user} from "../stores/user.js";
+import {$user, setAnonUser, setLoggedInUser} from "../stores/user.js";

 const LOCAL_STORAGE_KEY="user"

 $user.subscribe(value => {
-    if(value == null) return;
+    if(value == null || !value.initialized) return;
    localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(value)
 })

 window.addEventListener('load', () => {
    let data = localStorage[LOCAL_STORAGE_KEY]
-    if (data == null) { return }
+    if (data == null) { return setAnonUser() }
    data = JSON.parse(data)
-    if (data == null || data.token == null) { return }
-    if(Date.parse(data.expiresAt) < Date()) { return } // TODO: this should probably have more logic
-    $user.set(data)
+    if (data == null || data.token == null) { return setAnonUser() }
+    if(Date.parse(data.expiresAt) < Date()) { return setAnonUser() }
+
+    setLoggedInUser(data.token, data.expiresAt)
 })
@@ -1,3 +1,11 @@
 import { atom } from 'nanostores'

-export const $user = atom(null)
+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})
+}
@@ -0,0 +1,8 @@
+---
+const {href} = Astro.props
+const isActive = Astro.url.pathname.startsWith(href)
+---
+
+<a class:list={[{active: isActive}]} href={href}>
+    <slot></slot>
+</a>
@@ -0,0 +1,21 @@
+<script setup>
+import {useStore} from '@nanostores/vue'
+import {$user} from "../stores/user.js";
+
+const user = useStore($user)
+</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>
+</template>
+
+<style scoped>
+  .placeholder {
+    display: inline-block;
+    width: 2em;
+    height: 1em;
+    background: gray;
+  }
+</style>
@@ -1,5 +1,6 @@
 ---
 import '../styles/app.css'
+import TopNav from '../components/TopNav.astro'

 const {title} = Astro.props
 ---
@@ -7,20 +8,23 @@ const {title} = Astro.props
 <!doctype html>
 <html lang="en">
    <head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
+        <meta charset="UTF-8"/>
+        <meta name="viewport" content="width=device-width"/>
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
+        <meta name="generator" content={Astro.generator}/>
        <title>Neon Vertigo</title>
        <script src="../components/scripts/user_store.js"></script>
    </head>
    <body>
+        <header>
+            <TopNav />
+        </header>
        <h1>{title}</h1>
-		<slot />
+        <slot/>

        {import.meta.env.DEV &&
            <script>
-				import { logger } from '@nanostores/logger'
+                import {logger} from '@nanostores/logger'
                import {$user} from "../components/stores/user";

                let _destroy = logger({user: $user})
@@ -3,6 +3,4 @@ import Layout from '../layouts/Layout.astro';
 ---

 <Layout title="Welcome">
-    <!-- TODO: depend on user state for rendering login -->
-    <a href="/login">Login</a>
 </Layout>