use:enhance を使い、リロードせずに form 送信処理を行う #9

Author: sinproject-iwasaki

src/routes/login/+page.server.ts

@@ -13,15 +13,15 @@ export const actions: Actions = {
 		const username = data.get('username') as string
 		const password = data.get('password') as string
 
-		if (!username || !password) return invalid(404, { missing: true, username })
+		if (!username || !password) return invalid(404, { missing: true })
 
 		const user = await db.user.findUnique({ where: { username } })
 
-		if (!user) return invalid(400, { credentials: true, username })
+		if (!user) return invalid(400, { credentials: true })
 
 		const password_valid = await bcrypt.compare(password, user.password)
 
-		if (!password_valid) return invalid(400, { credentials: true, username })
+		if (!password_valid) return invalid(400, { credentials: true })
 
 		await db.authToken.deleteMany({ where: { user_id: user.id } })
 
@@ -41,6 +41,6 @@ export const actions: Actions = {
 			httpOnly: true,
 		})
 
-		throw redirect(302, '/')
+		throw redirect(303, '/')
 	},
 }

src/routes/login/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { enhance } from '$app/forms'
 	import { onMount } from 'svelte'
 	import type { ActionData } from './$types'
 
@@ -17,13 +18,12 @@
 
 <h1>Log in</h1>
 
-<form method="POST">
+<form method="POST" use:enhance>
 	<input
 		type="text"
 		name="username"
 		placeholder="Username"
 		required
-		value={form?.username ?? ''}
 		bind:this={username_element}
 	/>
 	<input type="password" name="password" placeholder="Password" required />

src/routes/register/+page.server.ts

@@ -19,7 +19,7 @@ export const actions: Actions = {
 		const email = data.get('email') as string
 		const password = data.get('password') as string
 
-		if (!username || !email || !password) return invalid(404, { missing: true, username, email })
+		if (!username || !email || !password) return invalid(404, { missing: true })
 
 		try {
 			await db.user.create({
@@ -32,7 +32,7 @@ export const actions: Actions = {
 			})
 		} catch (error) {
 			console.error(error)
-			return invalid(400, { user_exists: true, username, email })
+			return invalid(400, { user_exists: true })
 		}
 
 		console.log('aaa')

src/routes/register/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { enhance } from '$app/forms'
 	import { onMount } from 'svelte'
 	import type { ActionData } from './$types'
 
@@ -17,16 +18,15 @@
 
 <h1>Register</h1>
 
-<form method="POST">
+<form method="POST" use:enhance>
 	<input
 		type="text"
 		name="username"
 		placeholder="Username"
 		required
-		value={form?.username ?? ''}
 		bind:this={username_element}
 	/>
-	<input type="email" name="email" placeholder="email" required value={form?.email ?? ''} />
+	<input type="email" name="email" placeholder="email" required />
 	<input type="password" name="password" placeholder="Password" required />
 
 	{#if form?.missing}<p class="error">Username, email and password is required.</p>{/if}