change password possible

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

@@ -10,36 +10,26 @@ export const load: PageServerLoad = async ({ locals }) => {
 
 export const actions: Actions = {
 	change_password: async (event) => {
-		const data = await event.fetch.request.formData()
-
-	},
-	login: async (event) => {
+    console.log("Changin password")
 		const data = await event.request.formData()
- 		const res = await event.fetch('/api/user/login',
+ 		const res = await event.fetch('/api/user/change_pw',
 	    		{method: 'POST',
 			body: JSON.stringify({
-				username: data.get('username'),
-				password: data.get('password'),
+        username:     data.get('username'),
+				new_password: data.get('new_password'),
+				new_password_rep: data.get('new_password_rep'),
+				old_password: data.get('old_password'),
+			}),
+      headers: {
+        credentials: 'include',
+      }
 			})
-			}
-			)
-	    	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")
-	},
+    if(res.ok){
+      console.log("OK response")
+    }
+    else{
+      const item = await res.json()
+      throw error(401, item.message) 
+    }
+  }
 }

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

@@ -1,33 +1,56 @@
 <script>
+  import {enhance} from '$app/forms';
 	export let data
+  let password;
 	const admin = data.user?.access.includes('admin') ?? false
+  import "$lib/css/form.css"
 </script>
 <style>
+input:invalid + div{
+  display: none;
+}
+input:valid + div{
+  position: absolute;
+  color: green;
+  bottom: 0.25rem;
+  right: -0.25rem;
+  font-size: 1.5rem;
+  width: 1em;
+  height: 1em;
+}
 form label,
 form label input
 {
+  position: relative;
 	display: block;
 }
+input.hide{
+  display:none;
+}
 </style>
 <section>
 	<h2>Change Profile pictures</h2>
 </section>
 
 <section>
-	<h2>Change password</h2>
-	<form>
+  <form action="?/change_password" method=POST use:enhance>
+	<h2>Passwort ändern</h2>
+    <input type="text" bind:value={data.user.username} class=hide name="username" required> 
 		<label>
 		Altes Passwort:
-			<input type="password" >
+			<input type="password" name="old_password" required>
 		</label>
 		<label>
 		Neues Passwort:
-			<input type="password" >
+			<input type="password" name="new_password" required bind:value={password} minlength=10>
+      <div>✔️</div>
 		</label>
 		<label>
 		Neues Passwort wiederholen:
-			<input type="password" >
+			<input type="password" name="new_password_rep" required pattern={password}>
+      <div>✔️</div>
 		</label>
+    <button type="submit">Ändern</button>
 	</form>
 </section>