First fully working user management, move to layout groups

src/routes/(main)/+layout.svelte

@@ -0,0 +1,14 @@
+<script>
+import Header from '$lib/components/Header.svelte'
+
+</script>
+
+<Header>
+	<ul class=site_header slot=links>
+	<li><a href="/rezepte">Rezepte</a></li>
+	<li><a href="/bilder">Bilder</a></li>
+	<li><a href="/git">Git</a></li>
+	<li><a href="/transmission">Transmission</a></li>
+	</ul>
+	<slot></slot>
+</Header>

src/routes/(main)/+page.svelte

@@ -0,0 +1,18 @@
+<style>
+</style>
+
+<section>
+<h2><a href="/rezepte">Rezepte</a></h2>
+</section>
+
+<section>
+<h2><a href="/bilder">Bilder</a></h2>
+</section>
+
+<section>
+<h2><a href="/git">Git</a></h2>
+</section>
+
+<section>
+<h2><a href="/transmission">Transmission Web Viewer</a></h2>
+</section>

src/routes/(main)/abrechnung/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+import Header from "$lib/components/Header.svelte";
+</script>
+
+<Header>
+<ul class=site_header slot=links>
+	<li><a href="/">Home</a></li>
+</ul>
+
+</Header>

src/routes/(main)/flims/+page.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+import Header from "$lib/components/Header.svelte";
+import Calendar from "$lib/components/Calendar.svelte";
+</script>
+
+<Header>
+<ul class=site_header slot=links>
+	<li><a href="/">Home</a></li>
+</ul>
+
+<Calendar>
+
+</Calendar>
+
+
+</Header>

src/routes/(main)/login/+page.server.ts

@@ -0,0 +1,41 @@
+import { redirect } from "@sveltejs/kit"
+import type { Actions, PageServerLoad } from "./$types"
+import { error } from "@sveltejs/kit"
+
+export const load: PageServerLoad = async ({ locals }) => {
+	return {
+		user: locals.user,
+	}
+}
+
+export const actions: Actions = {
+	login: async (event) => {
+		const data = await event.request.formData()
+ 		const res = await event.fetch('/api/login',
+	    		{method: 'POST',
+			body: JSON.stringify({
+				username: data.get('username'),
+				password: data.get('password'),
+			})
+			}
+			)
+	    	const jwt = await res.json()
+		if(res.ok){
+		event.cookies.set("UserSession", jwt, {
+			path: "/",
+			httpOnly: true,
+			sameSite: "strict",
+			secure: process.env.NODE_ENV === "production",
+			maxAge: 60 * 60 * 24 * 7, // 1 week
+		})
+
+		throw redirect(303, "/")
+		}
+		else{
+			throw error(401, jwt.message)
+		}
+	},
+	logout: async () => {
+		throw redirect(303, "/logout")
+	},
+}

src/routes/(main)/login/+page.svelte

@@ -0,0 +1,13 @@
+<h1>Log In</h1>
+<form action="?/login" method=POST>
+	<label>
+		Username
+		<input type="text" name="username">
+	</label>
+	<label>
+		Passwort
+		<input  name="password" type="password">
+	</label>
+
+	<button type="submit">Log In</button>
+</form>

src/routes/(main)/logout/+page.server.ts

@@ -0,0 +1,7 @@
+import { redirect } from "@sveltejs/kit"
+import type { Actions, PageServerLoad } from "./$types"
+
+export const load: PageServerLoad = async ({ cookies }) => {
+	cookies.delete("UserSession")
+	redirect(303, "/")
+}

src/routes/(main)/logout/+page.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { redirect } from "@sveltejs/kit";
+	import { afterNavigate } from '$app/navigation';
+	import { onMount } from "svelte";
+	afterNavigate(() => {
+		redirect(303, "/")
+	})
+	onMount(() => {
+		redirect(303, "/")
+	})
+</script>
+<h1>Log Out</h1>

src/routes/(main)/register/+page.server.ts

@@ -0,0 +1,33 @@
+import { redirect } from "@sveltejs/kit"
+import type { Actions, PageServerLoad } from "./$types"
+
+export const load: PageServerLoad = async ({ locals }) => {
+	return {
+		user: locals.user,
+	}
+}
+
+export const actions: Actions = {
+	register: async (event) => {
+		const data = await event.request.formData();
+		const acccess_options = ["rezepte", "abrechnung", "flims"]
+		let enabled_access = []
+		acccess_options.forEach((option) => {
+			if(data.get(option) == 'on'){
+					enabled_access.push(option)
+			}
+		})
+ 		const res = await event.fetch('/api/register',
+	    		{method: 'POST',
+			body: JSON.stringify({
+
+				username: data.get('username'),
+				password: data.get('password'),
+				access: enabled_access,
+			})
+			}
+			)
+
+		throw redirect(303, "/login")
+	},
+}

src/routes/(main)/register/+page.svelte

@@ -0,0 +1,44 @@
+<script>
+  	import { setCookie } from 'svelte-cookie';
+
+	export async function createJWT() {
+	    const res = await fetch('/api/login',
+	    		{method: 'POST',
+			body: JSON.stringify({
+				username: "testuser2",
+				password: "password",
+			})
+			}
+			)
+	    const jwt = await res.json()
+	    setCookie('UserSession', jwt, {expires: 7})
+	}
+</script>
+<style>
+</style>
+
+<h1>Register</h1>
+<form action="?/register" method=POST>
+	<label>
+		Username
+		<input type="text" name="username">
+	</label>
+	<label>
+		Passwort
+		<input  name="password" type="password">
+	</label>
+	<label>
+		Rezepte
+		<input type="checkbox" name="rezepte">
+	</label>
+	<label>
+		Abrechnungen
+		<input type="checkbox" name="abrechnung">
+	</label>
+	<label>
+		Flims
+		<input type="checkbox" name="flims">
+	</label>
+
+	<button type="submit">Register</button>
+</form>

src/routes/(main)/test/+page.svelte

@@ -0,0 +1,78 @@
+<script>
+	import Header from '$lib/components/Header.svelte'
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { get } from 'svelte/store';
+  	import { setCookie } from 'svelte-cookie';
+
+	export async function createJWT() {
+	    const res = await fetch('/api/login',
+	    		{method: 'POST',
+			body: JSON.stringify({
+				username: "testuser2",
+				password: "password",
+			})
+			}
+			)
+	    const jwt = await res.json()
+	    setCookie('UserSession', jwt, {expires: 7})
+	}
+
+  	export async function registerUserTest(){
+  	   const res = await fetch('/api/register',
+  	  		{method: 'POST',
+  	      	body: JSON.stringify({
+  	      		username: "testuser2",
+  	      		password: "password",
+  	      		access: ["rezepte", "abrechnung", "flims" ]
+  	      	})
+  	      	}
+  	      	)
+  	    console.log("res:", res);
+  	    const j = await res.json()
+  	    console.log("response:", j)
+  	}
+
+	export async function readJWTSS(){
+	     const res = await fetch('/api/verify',
+	    		{method: 'GET',
+			credentials: 'include',
+			}
+			)
+		const item = await res.json()
+		console.log(res)
+		console.log(item)
+	}
+
+</script>
+<style>
+</style>
+
+<Header>
+<ul class=site_header slot=links>
+	<li><a href="/rezepte">Rezepte</a></li>
+	<li><a href="/bilder">Bilder</a></li>
+	<li><a href="/git">Git</a></li>
+	<li><a href="/transmission">Transmission</a></li>
+</ul>
+
+<section>
+<h2><a href="/rezepte">Rezepte</a></h2>
+</section>
+
+<section>
+<h2><a href="/bilder">Bilder</a></h2>
+</section>
+
+<section>
+<h2><a href="/git">Git</a></h2>
+</section>
+
+<section>
+<h2><a href="/transmission">Transmission Web Viewer</a></h2>
+</section>
+
+  <button on:click={registerUserTest}>Test User Registration</button>
+  <button on:click={createJWT}>Log In</button>
+  <button on:click={readJWTSS}>Test reading cookie</button>
+</Header>