Damillora/Shioriko
1
0
Fork 0
mirror of https://github.com/Damillora/Shioriko.git synced 2025-02-23 09:23:38 +00:00
Code Issues Projects Releases Wiki Activity

feat: update navbar

Browse Source
This commit is contained in:
Damillora 2025-02-22 16:09:02 +00:00
parent 44075dbab9
commit 4f39b8ab56
2 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
web/app/src/lib/components/ui/Navbar.svelte
View File

@ -1,12 +1,14 @@
<script>
import { token } from "$lib/stores";
import { isTokenExpired } from "$lib/login-check";
import { isTokenExpired, getUsernameFromToken } from "$lib/login-check";
let menu_shown = $state(false);
let loggedIn = $state(false);
let username = $state("");
token.subscribe((value) => {
loggedIn = !isTokenExpired(value);
username = getUsernameFromToken(value);
});
const toggleMenu = () => {
@ -14,9 +16,11 @@
};
</script>
<nav class="navbar" role="navigation" aria-label="main navigation">
<nav class="navbar is-primary" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">Shioriko</a>
<a class="navbar-item" href="/">
<strong>shioriko</strong>
</a>
<a
href={"#"}
@ -42,29 +46,28 @@
</div>
<div class="navbar-end">
{#if loggedIn}
<div class="navbar-item">
<div class="buttons">
<a href="/user/profile" class="button is-primary">
<div class="navbar-item has-dropdown is-hoverable">
{#if loggedIn}
<div class="navbar-link">{username}</div>
<div class="navbar-dropdown">
<a href="/user/profile" class="navbar-item">
Profile
</a>
<a href="/auth/logout" class="button is-light">
Log out
</a>
<a href="/auth/logout" class="navbar-item">Log out</a>
</div>
</div>
{:else}
<div class="navbar-item">
<div class="buttons">
<a href="/auth/register" class="button is-primary">
{:else}
<div class="navbar-link">logged out</div>
<div class="navbar-dropdown">
<a href="/auth/register" class="navbar-item">
Register
</a>
<a href="/auth/login" class="button is-light">
Log in
</a>
<a href="/auth/login" class="navbar-item">Log in</a>
</div>
</div>
{/if}
{/if}
</div>
</div>
</div>
</nav>

18
web/app/src/lib/login-check.js
View File

@ -1,8 +1,20 @@
const isTokenExpired = (token) => {
if (token === "") return true;
const expiry = (JSON.parse(atob(token.split('.')[1]))).exp;
const tokenData = (JSON.parse(atob(token.split('.')[1])));
const expiry = tokenData.exp;
return (Math.floor((new Date).getTime() / 1000)) >= expiry;
}
const getUsernameFromToken = (token) => {
if (token === "") return "logged out";
export { isTokenExpired }
const isExpired = isTokenExpired(token);
if (!isExpired) {
const tokenData = (JSON.parse(atob(token.split('.')[1])));
return tokenData.name;
}
return "logged out";
}
export { isTokenExpired, getUsernameFromToken }