Reworked user state and login
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref} from "vue";
|
import {ref} from "vue";
|
||||||
import {$user} from "./stores/user.js";
|
import {setLoggedInUser} from "./stores/user.js";
|
||||||
import * as gateway from "./lib/gateway.js";
|
import * as gateway from "./lib/gateway.js";
|
||||||
|
|
||||||
const formData = ref({username: '', password: ''})
|
const formData = ref({username: '', password: ''})
|
||||||
@@ -17,7 +17,7 @@ async function formSubmit() {
|
|||||||
if(response.status === 200) {
|
if(response.status === 200) {
|
||||||
const responseData = await response.json()
|
const responseData = await response.json()
|
||||||
console.log(responseData)
|
console.log(responseData)
|
||||||
$user.set(responseData)
|
setLoggedInUser(responseData.token, responseData.expiresAt)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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"
|
const LOCAL_STORAGE_KEY="user"
|
||||||
|
|
||||||
$user.subscribe(value => {
|
$user.subscribe(value => {
|
||||||
if(value == null) return;
|
if(value == null || !value.initialized) return;
|
||||||
localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(value)
|
localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(value)
|
||||||
})
|
})
|
||||||
|
|
||||||
window.addEventListener('load', () => {
|
window.addEventListener('load', () => {
|
||||||
let data = localStorage[LOCAL_STORAGE_KEY]
|
let data = localStorage[LOCAL_STORAGE_KEY]
|
||||||
if (data == null) { return }
|
if (data == null) { return setAnonUser() }
|
||||||
data = JSON.parse(data)
|
data = JSON.parse(data)
|
||||||
if (data == null || data.token == null) { return }
|
if (data == null || data.token == null) { return setAnonUser() }
|
||||||
if(Date.parse(data.expiresAt) < Date()) { return } // TODO: this should probably have more logic
|
if(Date.parse(data.expiresAt) < Date()) { return setAnonUser() }
|
||||||
$user.set(data)
|
|
||||||
|
setLoggedInUser(data.token, data.expiresAt)
|
||||||
})
|
})
|
||||||
@@ -1,3 +1,11 @@
|
|||||||
import { atom } from 'nanostores'
|
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 '../styles/app.css'
|
||||||
|
import TopNav from '../components/TopNav.astro'
|
||||||
|
|
||||||
const {title} = Astro.props
|
const {title} = Astro.props
|
||||||
---
|
---
|
||||||
@@ -15,6 +16,9 @@ const {title} = Astro.props
|
|||||||
<script src="../components/scripts/user_store.js"></script>
|
<script src="../components/scripts/user_store.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<header>
|
||||||
|
<TopNav />
|
||||||
|
</header>
|
||||||
<h1>{title}</h1>
|
<h1>{title}</h1>
|
||||||
<slot/>
|
<slot/>
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,4 @@ import Layout from '../layouts/Layout.astro';
|
|||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Welcome">
|
<Layout title="Welcome">
|
||||||
<!-- TODO: depend on user state for rendering login -->
|
|
||||||
<a href="/login">Login</a>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
Reference in New Issue
Block a user