Damillora/Shioriko
1
0
Fork 0
mirror of https://github.com/Damillora/Shioriko.git synced 2025-02-23 17:33:39 +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

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

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

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

@ -1,8 +1,20 @@
const isTokenExpired = (token) => { const isTokenExpired = (token) => {
if (token === "") return true; if (token === "") return true;
const tokenData = (JSON.parse(atob(token.split('.')[1])));
const expiry = (JSON.parse(atob(token.split('.')[1]))).exp; const expiry = tokenData.exp;
return (Math.floor((new Date).getTime() / 1000)) >= expiry; 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 }