Sidebar überarbeitet

Layout nach den Vorgabenvon Umbe angepasst

src/components/SidebarRight.astro

@@ -1,4 +1,15 @@
+---
+import { validateAccessTokenServer } from "#server/lib/validateAccessToken";
+import SidebarWidgetLogin from "./SidebarWidgetLogin.svelte";
+import SidebarWidgetProfile from "./SidebarWidgetProfile.svelte"
+
+const loggedin = await validateAccessTokenServer(Astro)
+---
+
 <div class="flex flex-col gap-4">
+	{ !loggedin ? 
+		<SidebarWidgetLogin client:load></SidebarWidgetLogin> : <SidebarWidgetProfile></SidebarWidgetProfile>}
+
 	<div class="infoCard">
 		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
 			Rufen Sie uns an<br /> Wir sind gerne für Sie da

src/components/SidebarWidgetLogin.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { loginClient } from "#lib/login";
+	import CrossCircled from "radix-svelte-icons/src/lib/icons/CrossCircled.svelte";
+	import { fade } from "svelte/transition";
+
+	let email: string;
+	let passwort: string;
+
+	async function login(e: SubmitEvent) {
+		console.log(e);
+		
+		e.preventDefault();
+		const response = await loginClient(email, passwort);
+
+		if (response === null) {
+			errorHidden = false;
+		} else {
+			window.location.href = "/dashboard";
+		}
+	}
+
+	let errorHidden = true;
+</script>
+
+<div
+	id="card-login"
+	class="box card hidden bg-white px-6 py-4 mb-5
+			lg:block"
+>
+	<div class="grid">
+		<div class="grid grid-cols-[2rem,1fr,1fr]">
+			<img
+				class="w-6 align-middle"
+				src="/images/right-sidebar/UMBE_user-icon.svg"
+				alt="user-icon"
+			/>
+			<h2 class="text-secondary">Kunden Login</h2>
+			<div class="justify-self-end text-secondary">
+				<a
+					class="text-lg font-bold text-box-heading leading-6 no-underline hover:text-primary"
+					href="">Kontakt</a
+				>
+				/
+				<a
+					class="text-lg font-bold text-box-heading leading-6 no-underline hover:text-primary"
+					href="">AGB</a
+				>
+			</div>
+		</div>
+		<hr class="mb-4" />
+		<form on:submit={login}>
+			<input
+				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
+				type="text"
+				placeholder="nutzer@email.com"
+				name="email"
+				bind:value={email}
+				on:focus={() => (errorHidden = true)}
+				required
+			/>
+			<input
+				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
+				type="password"
+				minlength="8"
+				placeholder="********"
+				name="passwort"
+				bind:value={passwort}
+				on:focus={() => (errorHidden = true)}
+				required
+			/>
+			{#if !errorHidden}
+			<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
+				<CrossCircled size={24} />
+				<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
+			</div>
+			{/if}
+			<button class="my-1 rounded-md px-2 py-1 ring-1 w-full bg-secondary text-white font-bold hover:bg-primary" type="submit">Einloggen</button>
+		</form>
+
+		<div class="grid grid-cols-[1fr,1fr]">
+			<a
+				class="justify-self-start text-sm font-bold no-underline hover:text-primary"
+				href="/auth/signup">Registrieren</a
+			>
+			<a
+				class="justify-self-end text-sm font-bold no-underline hover:text-primary"
+				href="/auth/passwort-vergessen">Passwort vergessen</a
+			>
+		</div>
+
+		<div></div>
+	</div>
+</div>
+
+<style lang="scss">
+</style>

src/components/SidebarWidgetProfile.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+</script>
+
+<div
+	id="card-login"
+	class="box card hidden bg-white px-6 py-4
+			lg:block"
+>
+<a href="/dashboard">Profil</a>
+</div>

src/components/UMBE_SidebarRight.astro

@@ -1,5 +1,5 @@
 ---
-import Login from "#components/UMBE_card-login.svelte";
+import Login from "#components/SidebarWidgetLogin.svelte";
 import Contact from "#components/UMBE_card-contact.svelte";
 import Review from "#components/UMBE_card-review.svelte";
 import VApromo from "#components/UMBE_card-VA-promo.svelte";

src/components/UMBE_card-login.svelte

@@ -1,44 +0,0 @@
-<script>
-	
-</script>
-	
-<div id ="card-login" 
-	class="	box card hidden bg-white px-6 py-4 mb-5
-			lg:block">
-
-	<div class="grid">
-	
-	<div class="grid grid-cols-[2rem,1fr,1fr]">
-	<img class="w-6 align-middle" src="/images/right-sidebar/UMBE_user-icon.svg" alt="user-icon"/>
-	<h2 class="text-secondary">Kunden Login</h2>
-	<div class="justify-self-end text-secondary">
-		<a class="text-lg font-bold text-box-heading leading-6 no-underline hover:text-primary" href="">Kontakt</a> /
-		<a class="text-lg font-bold text-box-heading leading-6 no-underline hover:text-primary" href="">AGB</a>
-	</div>
-	</div>
-	<hr class="mb-4">
-	<form action="" method="">
-	<input class="my-1 rounded-md px-2 py-1 ring-1 w-full" id="user" name="user" type="email"  placeholder="e-mail" />
-	<input class="my-1 rounded-md px-2 py-1 ring-1 w-full" id="password" name="password" type="password"  placeholder="password" />
-	<button class="my-1 rounded-md px-2 py-1 ring-1 w-full bg-secondary text-white font-bold hover:bg-primary">einloggen</button>
-	</form>
-
-	<div class="grid grid-cols-[1fr,1fr]">
-		<a class="justify-self-start text-sm font-bold no-underline hover:text-primary" href="">Registrieren</a> 
-		<a class="justify-self-end text-sm font-bold no-underline hover:text-primary" href="">Passwort vergessen</a> 
-	</div>
-
-	<div>
-	
-</div>
-
-	</div>
-
-	
-</div>
-
-
-<style lang="scss">
-
-
-</style>

src/layouts/Layout.astro

@@ -1,6 +1,7 @@
 ---
 import i18next from "i18next";
 
+import "../style/UMBE_global.css";
 import "../style/global.scss";
 import "../../svelte-dialogs.config"
 import Footer from "../components/Footer.astro";

src/pages/dashboard/index.astro

@@ -12,7 +12,7 @@ if (!accessTokenValid) {
 
 const caller = createCaller(Astro);
 
-const user = await caller.v1.benutzer.self();
+const user = await caller.v1.benutzer.self(undefined);
 const gebaeudeArray = await caller.v1.gebaeude.getMany({ limit: 5 });
 ---