user displayed in navbar with option to logout

This commit is contained in:
Alexander Bocken 2023-07-19 14:52:50 +02:00
parent 8f045d7111
commit 2b0c954aa5
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
11 changed files with 189 additions and 28 deletions

View File

@ -4,8 +4,8 @@ import { redirect } from "@sveltejs/kit"
import { error } from "@sveltejs/kit" import { error } from "@sveltejs/kit"
export const handle : Handle = async({event, resolve}) => { export const handle : Handle = async({event, resolve}) => {
event.locals.user = await authenticateUser(event.cookies)
if(event.url.pathname.startsWith('/rezepte/edit') || event.url.pathname.startsWith('/rezepte/add')){ if(event.url.pathname.startsWith('/rezepte/edit') || event.url.pathname.startsWith('/rezepte/add')){
event.locals.user = await authenticateUser(event.cookies)
if(!event.locals.user){ if(!event.locals.user){
throw redirect(303, "/login") throw redirect(303, "/login")
} }
@ -14,7 +14,7 @@ export const handle : Handle = async({event, resolve}) => {
} }
} }
else if(event.url.pathname.startsWith('/abrechnung')){ else if(event.url.pathname.startsWith('/abrechnung')){
console.log(event.locals.user) event.locals.user = await authenticateUser(event.cookies)
if(!event.locals.user){ if(!event.locals.user){
throw redirect(303, "/login") throw redirect(303, "/login")
} }

View File

@ -45,7 +45,7 @@ nav[hidden]{
} }
:global(.site_header li), :global(.site_header li),
a.entry :global(a.entry)
{ {
list-style-type:none; list-style-type:none;
transition: 100ms; transition: 100ms;
@ -53,7 +53,7 @@ a.entry
user-select: none; user-select: none;
} }
:global(.site_header li>a), :global(.site_header li>a),
.entry :global(.entry)
{ {
text-decoration: none; text-decoration: none;
font-family: sans-serif; font-family: sans-serif;
@ -65,8 +65,8 @@ a.entry
:global(.site_header li:hover), :global(.site_header li:hover),
:global(.site_header li:focus-within), :global(.site_header li:focus-within),
.entry:hover, :global(.entry:hover),
.entry:focus-visible :global(.entry:focus-visible)
{ {
cursor: pointer; cursor: pointer;
color: var(--red); color: var(--red);
@ -153,7 +153,7 @@ a.entry
nav[hidden]{ nav[hidden]{
transform: translateX(100%); transform: translateX(100%);
} }
nav a:last-child{ :global(nav a:last-child){
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -192,7 +192,7 @@ margin-top: auto;
<nav hidden> <nav hidden>
<a class=entry href="/"><Symbol></Symbol></a> <a class=entry href="/"><Symbol></Symbol></a>
<slot name=links></slot> <slot name=links></slot>
<a class=entry href="/login">Log In</a> <slot name=right_side></slot>
</nav> </nav>
<slot></slot> <slot></slot>

View File

@ -0,0 +1,139 @@
<script lang="ts">
export let username;
console.log("username UESRHEADER", username)
function show_options(){
const el = document.querySelector("#options")
el.hidden = !el.hidden
}
</script>
<style>
/* (A) SPEECH BOX */
.speech {
/* (A1) FONT */
font-size: 1.1em;
/* (A2) COLORS */
color: #fff;
background: var(--bg_color);
/* (A3) DIMENSIONS + POSITION */
position: relative;
border-radius: 10px;
}
/* (B) ADD SPEECH "CALLOUT TAIL" */
/* (B1) USE ::AFTER TO CREATE THE "TAIL" */
.speech::after {
/* (B1-1) ATTACH TRANSPARENT BORDERS */
content: "";
border: 20px solid transparent;
/* (B1-2) NECESSARY TO POSITION THE "TAIL" */
position: absolute;
}
/* (B2) BOTTOM "CALLOUT TAIL" */
.bottom.speech::after {
/* (B2-1) DOWN TRIANGLE */
border-top-color: #a53d38;
border-bottom: 0;
/* (B2-2) POSITION AT BOTTOM */
bottom: -20px; left: 50%;
margin-left: -20px;
}
/* (C) DIFFERENT TAIL POSITIONS */
/* (C1) TOP */
.top.speech::after {
/* (C1-1) UP TRIANGLE */
border-bottom-color: var(--bg_color);
border-top: 0;
/* (C1-2) POSITION AT TOP */
top: -20px; left:87%;
margin-left: -20px;
}
/* (C2) LEFT */
.left.speech::after {
/* (C2-1) LEFT TRIANGLE */
border-right-color: black;
border-left: 0;
/* (C2-2) POSITION AT LEFT */
left: -20px; top: 50%;
margin-top: -20px;
}
/* (C3) RIGHT */
.right.speech::after {
/* (C3-1) RIGHT TRIANGLE */
border-left-color: black;
border-right: 0;
/* (C3-2) POSITION AT RIGHT */
right: -20px; top: 50%;
margin-top: -20px;
}
button{
--margin-right: 1rem;
position: relative;
background-color: transparent;
border: none;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
margin-right: var(--margin-right);
}
img{
height: 2.5rem;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
#options{
--bg_color: var(--nord3);
box-sizing: border-box;
border-radius: 5px;
position: absolute;
right: calc( -1*var(--margin-right) + 0.25rem);
top: calc(100% + 20px);
background-color: var(--bg_color);
width: 30ch;
padding: 1rem;
}
#options ul{
color: white;
font-size: 1.2rem;
width: 100%;
list-style-type: none;
padding: 0;
}
#options li{
margin-block: 0.5rem;
text-align: left;
}
#options li a{
text-decoration: none;
color: white;
text-align: left;
transition: 100ms;
}
#options li:hover a{
color: var(--red);
}
</style>
{#if username}
<button on:click={show_options}><img src="https://new.bocken.org/static/user/thumb/{username}.webp">
<div id=options class="speech top" hidden>
<ul>
<li><a href="/logout">Log Out</a></li>
</ul>
</div>
</button>
{:else}
<a class=entry href=/login>Log In</a>
{/if}

View File

@ -0,0 +1,9 @@
import type {LayoutServerLoad} from './$types';
import { authenticateUser } from '$lib/js/authenticate';;
export const load = (async ({cookies}) => {
const user = await authenticateUser(cookies)
return {
user
}
}) satisfies LayoutServerLoad;

View File

@ -1,6 +1,11 @@
<script> <script>
import Header from '$lib/components/Header.svelte' import Header from '$lib/components/Header.svelte'
import UserHeader from '$lib/components/UserHeader.svelte';
export let data
let username = ""
if(data.user){
username = data.user.username
}
</script> </script>
<Header> <Header>
@ -10,5 +15,6 @@ import Header from '$lib/components/Header.svelte'
<li><a href="/git">Git</a></li> <li><a href="/git">Git</a></li>
<li><a href="/transmission">Transmission</a></li> <li><a href="/transmission">Transmission</a></li>
</ul> </ul>
<UserHeader {username} slot=right_side></UserHeader>
<slot></slot> <slot></slot>
</Header> </Header>

View File

@ -0,0 +1,11 @@
import type {LayoutServerLoad} from './$types';
import { authenticateUser } from '$lib/js/authenticate';;
export const load = (async ({cookies}) => {
const user = await authenticateUser(cookies)
console.log("LOAD LAYOUT")
console.log(user)
return {
user
}
}) satisfies LayoutServerLoad;

View File

@ -1,6 +1,9 @@
<script> <script>
import Header from '$lib/components/Header.svelte' import Header from '$lib/components/Header.svelte'
import UserHeader from '$lib/components/UserHeader.svelte';
export let data
let username = ""
if(data.user) username = data.user.username
</script> </script>
<Header> <Header>
@ -11,5 +14,6 @@ import Header from '$lib/components/Header.svelte'
<li><a href="/rezepte/icon">Icon</a></li> <li><a href="/rezepte/icon">Icon</a></li>
<li><a href="/rezepte/tag">Stichwörter</a></li> <li><a href="/rezepte/tag">Stichwörter</a></li>
</ul> </ul>
<UserHeader {username} slot=right_side></UserHeader>
<slot></slot> <slot></slot>
</Header> </Header>

View File

@ -34,7 +34,6 @@ h1{
{/each} {/each}
</MediaScroller> </MediaScroller>
{/each} {/each}
<p>{data.all_brief.length}</p>
{#if data.user && data.user.access.includes("rezepte")} {#if data.user && data.user.access.includes("rezepte")}
<AddButton></AddButton> <AddButton></AddButton>
{/if} {/if}

View File

@ -1,15 +0,0 @@
// import { error } from '@sveltejs/kit';
import type { PageLoad } from "./$types";
//import { Recipe } from '../../../models/Recipe';
//import { dbConnect, dbDisconnect } from '../../../utils/db';
import { error } from "@sveltejs/kit";
export async function load({ fetch, params, locals }) {
const res = await fetch(`/api/items/${params.name}`);
let item = await res.json();
item.user = locals.user
if(res.status != 200){
throw error(res.status, item.message)
}
return item;
};

View File

@ -242,6 +242,4 @@ h4{
</div> </div>
</TitleImgParallax> </TitleImgParallax>
{#if data.user && data.user.access.includes("rezepte")}
<EditButton href="/rezepte/edit/{data.short_name}"></EditButton> <EditButton href="/rezepte/edit/{data.short_name}"></EditButton>
{/if}

View File

@ -0,0 +1,10 @@
import { error } from "@sveltejs/kit";
export async function load({ fetch, params}) {
const res = await fetch(`/api/items/${params.name}`);
let item = await res.json();
if(!res.ok){
throw error(res.status, item.message)
}
return item;
}