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"
|
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")
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
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>
|
<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>
|
||||||
|
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>
|
<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>
|
||||||
|
@ -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}
|
||||||
|
@ -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>
|
</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}
|
|
||||||
|
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