Correctly display user with pfp if available

This commit is contained in:
Alexander Bocken 2024-02-15 04:28:31 +01:00
parent 022d727394
commit e7944b9aa0
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
4 changed files with 23 additions and 16 deletions

View File

@ -1,11 +1,12 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
export let username; export let user;
function toggle_options(){ function toggle_options(){
const el = document.querySelector("#options") const el = document.querySelector("#options")
el.hidden = !el.hidden el.hidden = !el.hidden
} }
let src="https://bocken.org/static/user/thumb/" + username + ".webp"
onMount( () => { onMount( () => {
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
const el = document.querySelector("#button") const el = document.querySelector("#button")
@ -101,6 +102,12 @@
/* (B2) BOTTOM "CALLOUT TAIL" */ /* (B2) BOTTOM "CALLOUT TAIL" */
h2{ h2{
margin-block: 0; margin-block: 0;
font-size: 1.2rem;
}
h2 + p{
padding-top: 0;
margin-top: 0;
font-size: 1.2rem;
} }
@media screen and (max-width: 800px){ @media screen and (max-width: 800px){
#options{ #options{
@ -125,10 +132,11 @@ h2{
} }
</style> </style>
{#if username} {#if user}
<button on:click={toggle_options} style="background-image: url({src})" id=button> <button on:click={toggle_options} style="background-image: url(https://bocken.org/static/user/thumb/{user.nickname}.webp)" id=button>
<div id=options class="speech top" hidden> <div id=options class="speech top" hidden>
<h2>{username}</h2> <h2>{user.name}</h2>
<p>({user.nickname})</p>
<ul> <ul>
<li><a href="https://sso.bocken.org/if/user/#/settings" >Einstellungen</a></li> <li><a href="https://sso.bocken.org/if/user/#/settings" >Einstellungen</a></li>
<li><a href="/auth/signout" >Log Out</a></li> <li><a href="/auth/signout" >Log Out</a></li>

View File

@ -2,11 +2,10 @@
import Header from '$lib/components/Header.svelte' import Header from '$lib/components/Header.svelte'
import UserHeader from '$lib/components/UserHeader.svelte'; import UserHeader from '$lib/components/UserHeader.svelte';
export let data export let data
let username = "" let user;
if(data.session){ if(data.session){
username = data.session.user.name user = data.session.user
} }
console.log(data)
</script> </script>
<Header> <Header>
@ -19,6 +18,6 @@ console.log(data)
<li><a href="https://cloud.bocken.org">Cloud</a></li> <li><a href="https://cloud.bocken.org">Cloud</a></li>
<li><a href="/searx">Searx</a></li> <li><a href="/searx">Searx</a></li>
</ul> </ul>
<UserHeader {username} slot=right_side></UserHeader> <UserHeader {user} slot=right_side></UserHeader>
<slot></slot> <slot></slot>
</Header> </Header>

View File

@ -1,8 +1,8 @@
import type { Actions, PageServerLoad } from "./$types" import type { PageServerLoad } from "./$types"
import { error } from "@sveltejs/kit" import { error } from "@sveltejs/kit"
export const load = (async ({cookies, locals}) => { export const load : PageServerLoad = async ({locals}) => {
return { return {
session: await locals.getSession() session: await locals.auth()
} }
}); };

View File

@ -2,9 +2,9 @@
import Header from '$lib/components/Header.svelte' import Header from '$lib/components/Header.svelte'
import UserHeader from '$lib/components/UserHeader.svelte'; import UserHeader from '$lib/components/UserHeader.svelte';
export let data export let data
let username = "" let user;
if(data.session){ if(data.session){
username = data.session.user.name user = data.session.user
} }
</script> </script>
@ -16,6 +16,6 @@ if(data.session){
<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 slot=right_side {username}></UserHeader> <UserHeader slot=right_side {user}></UserHeader>
<slot></slot> <slot></slot>
</Header> </Header>