From 201fa55d9fb23761b5ba986a18015701f4672ff6 Mon Sep 17 00:00:00 2001
From: AlexBocken <alexander@bocken.org>
Date: Fri, 21 Jul 2023 12:25:06 +0200
Subject: [PATCH] login and register designed

---
 src/routes/(main)/login/+page.svelte          | 38 ++++++++-
 .../(main)/login/.jukit/.jukit_info.json      |  1 +
 src/routes/(main)/register/+page.server.ts    |  8 --
 src/routes/(main)/register/+page.svelte       | 65 +++++++++-------
 src/routes/(main)/settings/+page.server.ts    | 45 +++++++++++
 src/routes/(main)/settings/+page.svelte       | 38 +++++++++
 .../(main)/settings/.jukit/.jukit_info.json   |  1 +
 src/routes/(main)/test/+page.svelte           | 78 -------------------
 8 files changed, 157 insertions(+), 117 deletions(-)
 create mode 100644 src/routes/(main)/login/.jukit/.jukit_info.json
 create mode 100644 src/routes/(main)/settings/+page.server.ts
 create mode 100644 src/routes/(main)/settings/+page.svelte
 create mode 100644 src/routes/(main)/settings/.jukit/.jukit_info.json
 delete mode 100644 src/routes/(main)/test/+page.svelte

diff --git a/src/routes/(main)/login/+page.svelte b/src/routes/(main)/login/+page.svelte
index 1e44487..b87ffba 100644
--- a/src/routes/(main)/login/+page.svelte
+++ b/src/routes/(main)/login/+page.svelte
@@ -1,5 +1,41 @@
-<h1>Log In</h1>
+<style>
+	form{
+		background-color: var(--nord5);
+		display: flex;
+		flex-direction: column;
+		max-width: 600px;
+		gap: 0.5em;
+		margin-inline: auto;
+		justify-content: center;
+		align-items: center;
+		padding-block: 2rem;
+		margin-block: 2rem;
+	}
+	label{
+		font-size: 1.2em;
+	}
+	input{
+		display: block;
+		font-size: 1.2rem;
+	}
+	button{
+		 background-color: var(--red);
+		 color: white;
+		 border: none;
+		 padding: 0.5em 1em;
+		 font-size: 1.3em;
+		 border-radius: 1000px;
+		 margin-top: 1em;
+	}
+	@media screen and (max-width: 600px){
+		form{
+			margin-top: 0;
+		}
+	}
+
+</style>
 <form action="?/login" method=POST>
+	<h1>Log In</h1>
 	<label>
 		Username
 		<input type="text" name="username">
diff --git a/src/routes/(main)/login/.jukit/.jukit_info.json b/src/routes/(main)/login/.jukit/.jukit_info.json
new file mode 100644
index 0000000..92c7342
--- /dev/null
+++ b/src/routes/(main)/login/.jukit/.jukit_info.json
@@ -0,0 +1 @@
+{"terminal": "nvimterm"}
\ No newline at end of file
diff --git a/src/routes/(main)/register/+page.server.ts b/src/routes/(main)/register/+page.server.ts
index 7004374..5f92c0c 100644
--- a/src/routes/(main)/register/+page.server.ts
+++ b/src/routes/(main)/register/+page.server.ts
@@ -10,20 +10,12 @@ export const load: PageServerLoad = async ({ locals }) => {
 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,
 			})
 			}
 			)
diff --git a/src/routes/(main)/register/+page.svelte b/src/routes/(main)/register/+page.svelte
index c45c136..1eef7e4 100644
--- a/src/routes/(main)/register/+page.svelte
+++ b/src/routes/(main)/register/+page.svelte
@@ -1,24 +1,42 @@
-<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>
+	form{
+		background-color: var(--nord5);
+		display: flex;
+		flex-direction: column;
+		max-width: 600px;
+		gap: 0.5em;
+		margin-inline: auto;
+		justify-content: center;
+		align-items: center;
+		padding-block: 2rem;
+		margin-block: 2rem;
+	}
+	label{
+		font-size: 1.2em;
+	}
+	input{
+		display: block;
+		font-size: 1.2rem;
+	}
+	button{
+		 background-color: var(--red);
+		 color: white;
+		 border: none;
+		 padding: 0.5em 1em;
+		 font-size: 1.3em;
+		 border-radius: 1000px;
+		 margin-top: 1em;
+	}
+	@media screen and (max-width: 600px){
+		form{
+			margin-top: 0;
+		}
+	}
+
 </style>
 
-<h1>Register</h1>
 <form action="?/register" method=POST>
+	<h1>Register</h1>
 	<label>
 		Username
 		<input type="text" name="username">
@@ -27,18 +45,5 @@
 		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>
diff --git a/src/routes/(main)/settings/+page.server.ts b/src/routes/(main)/settings/+page.server.ts
new file mode 100644
index 0000000..0f60df9
--- /dev/null
+++ b/src/routes/(main)/settings/+page.server.ts
@@ -0,0 +1,45 @@
+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 = {
+	change_password: async (event) => {
+		const data = await event.fetch.request.formData()
+
+	},
+	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")
+	},
+}
diff --git a/src/routes/(main)/settings/+page.svelte b/src/routes/(main)/settings/+page.svelte
new file mode 100644
index 0000000..c1d0c1c
--- /dev/null
+++ b/src/routes/(main)/settings/+page.svelte
@@ -0,0 +1,38 @@
+<script>
+	export let data
+	const admin = data.user?.access.includes('admin') ?? false
+</script>
+<style>
+form label,
+form label input
+{
+	display: block;
+}
+</style>
+<section>
+	<h2>Change Profile pictures</h2>
+</section>
+
+<section>
+	<h2>Change password</h2>
+	<form>
+		<label>
+		Altes Passwort:
+			<input type="password" >
+		</label>
+		<label>
+		Neues Passwort:
+			<input type="password" >
+		</label>
+		<label>
+		Neues Passwort wiederholen:
+			<input type="password" >
+		</label>
+	</form>
+</section>
+
+{#if admin}
+<section>
+	<h2>Change user permissions</h2>
+</section>
+{/if}
diff --git a/src/routes/(main)/settings/.jukit/.jukit_info.json b/src/routes/(main)/settings/.jukit/.jukit_info.json
new file mode 100644
index 0000000..92c7342
--- /dev/null
+++ b/src/routes/(main)/settings/.jukit/.jukit_info.json
@@ -0,0 +1 @@
+{"terminal": "nvimterm"}
\ No newline at end of file
diff --git a/src/routes/(main)/test/+page.svelte b/src/routes/(main)/test/+page.svelte
deleted file mode 100644
index 8ba590c..0000000
--- a/src/routes/(main)/test/+page.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<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>