user displayed in navbar with option to logout
This commit is contained in:
parent
8f045d7111
commit
2b0c954aa5
@ -4,8 +4,8 @@ import { redirect } from "@sveltejs/kit"
|
||||
import { error } from "@sveltejs/kit"
|
||||
|
||||
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')){
|
||||
event.locals.user = await authenticateUser(event.cookies)
|
||||
if(!event.locals.user){
|
||||
throw redirect(303, "/login")
|
||||
}
|
||||
@ -14,7 +14,7 @@ export const handle : Handle = async({event, resolve}) => {
|
||||
}
|
||||
}
|
||||
else if(event.url.pathname.startsWith('/abrechnung')){
|
||||
console.log(event.locals.user)
|
||||
event.locals.user = await authenticateUser(event.cookies)
|
||||
if(!event.locals.user){
|
||||
throw redirect(303, "/login")
|
||||
}
|
||||
|
@ -45,7 +45,7 @@ nav[hidden]{
|
||||
}
|
||||
|
||||
:global(.site_header li),
|
||||
a.entry
|
||||
:global(a.entry)
|
||||
{
|
||||
list-style-type:none;
|
||||
transition: 100ms;
|
||||
@ -53,7 +53,7 @@ a.entry
|
||||
user-select: none;
|
||||
}
|
||||
:global(.site_header li>a),
|
||||
.entry
|
||||
:global(.entry)
|
||||
{
|
||||
text-decoration: none;
|
||||
font-family: sans-serif;
|
||||
@ -65,8 +65,8 @@ a.entry
|
||||
|
||||
:global(.site_header li:hover),
|
||||
:global(.site_header li:focus-within),
|
||||
.entry:hover,
|
||||
.entry:focus-visible
|
||||
:global(.entry:hover),
|
||||
:global(.entry:focus-visible)
|
||||
{
|
||||
cursor: pointer;
|
||||
color: var(--red);
|
||||
@ -153,7 +153,7 @@ a.entry
|
||||
nav[hidden]{
|
||||
transform: translateX(100%);
|
||||
}
|
||||
nav a:last-child{
|
||||
:global(nav a:last-child){
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@ -192,7 +192,7 @@ margin-top: auto;
|
||||
<nav hidden>
|
||||
<a class=entry href="/"><Symbol></Symbol></a>
|
||||
<slot name=links></slot>
|
||||
<a class=entry href="/login">Log In</a>
|
||||
<slot name=right_side></slot>
|
||||
</nav>
|
||||
|
||||
<slot></slot>
|
||||
|
139
src/lib/components/UserHeader.svelte
Normal file
139
src/lib/components/UserHeader.svelte
Normal 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}
|
9
src/routes/(main)/+layout.server.ts
Normal file
9
src/routes/(main)/+layout.server.ts
Normal 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;
|
@ -1,6 +1,11 @@
|
||||
<script>
|
||||
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>
|
||||
|
||||
<Header>
|
||||
@ -10,5 +15,6 @@ import Header from '$lib/components/Header.svelte'
|
||||
<li><a href="/git">Git</a></li>
|
||||
<li><a href="/transmission">Transmission</a></li>
|
||||
</ul>
|
||||
<UserHeader {username} slot=right_side></UserHeader>
|
||||
<slot></slot>
|
||||
</Header>
|
||||
|
11
src/routes/(rezepte)/rezepte/+layout.server.ts
Normal file
11
src/routes/(rezepte)/rezepte/+layout.server.ts
Normal 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;
|
@ -1,6 +1,9 @@
|
||||
<script>
|
||||
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>
|
||||
|
||||
<Header>
|
||||
@ -11,5 +14,6 @@ import Header from '$lib/components/Header.svelte'
|
||||
<li><a href="/rezepte/icon">Icon</a></li>
|
||||
<li><a href="/rezepte/tag">Stichwörter</a></li>
|
||||
</ul>
|
||||
<UserHeader {username} slot=right_side></UserHeader>
|
||||
<slot></slot>
|
||||
</Header>
|
||||
|
@ -34,7 +34,6 @@ h1{
|
||||
{/each}
|
||||
</MediaScroller>
|
||||
{/each}
|
||||
<p>{data.all_brief.length}</p>
|
||||
{#if data.user && data.user.access.includes("rezepte")}
|
||||
<AddButton></AddButton>
|
||||
{/if}
|
||||
|
@ -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;
|
||||
};
|
@ -242,6 +242,4 @@ h4{
|
||||
</div>
|
||||
</TitleImgParallax>
|
||||
|
||||
{#if data.user && data.user.access.includes("rezepte")}
|
||||
<EditButton href="/rezepte/edit/{data.short_name}"></EditButton>
|
||||
{/if}
|
||||
|
10
src/routes/(rezepte)/rezepte/[name]/+page.ts
Normal file
10
src/routes/(rezepte)/rezepte/[name]/+page.ts
Normal 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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user