ユーザー登録ページを作成する #5

Author: sinproject-iwasaki

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+	"cSpell.words": [
+		"sveltejs"
+	]
+}

package-lock.json

@@ -16,6 +16,7 @@
 		"@playwright/test": "^1.25.0",
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
+		"@types/bcrypt": "^5.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
 		"eslint": "^8.16.0",
@@ -32,6 +33,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@prisma/client": "^4.5.0"
+		"@prisma/client": "^4.5.0",
+		"bcrypt": "^5.1.0"
 	}
 }

package.json

@@ -14,7 +14,7 @@ model Role {
   id         Int      @id @default(autoincrement())
   created_at DateTime @default(now())
   updated_at DateTime @updatedAt
-  name       String
+  name       String   @unique
   users      User[]
 }
 
@@ -23,7 +23,7 @@ model User {
   created_at DateTime    @default(now())
   updated_at DateTime    @updatedAt
   role_id    Int
-  name       String
+  username   String      @unique
   email      String      @unique
   password   String
   role       Role        @relation(fields: [role_id], references: [id])

prisma/schema.prisma

@@ -0,0 +1,3 @@
+import prisma from '@prisma/client'
+
+export const db = new prisma.PrismaClient()

src/lib/database.ts

@@ -0,0 +1 @@
+<h1>Log in</h1>

src/routes/login/+page.svelte

@@ -0,0 +1,43 @@
+import { db } from '$lib/database'
+import { invalid, redirect, type Actions } from '@sveltejs/kit'
+import bcrypt from 'bcrypt'
+import type { PageServerLoad } from './$types'
+
+enum Roles {
+	admin = 'admin',
+	user = 'user',
+}
+
+export const load: PageServerLoad = async () => {
+	// todo
+}
+
+export const actions: Actions = {
+	default: async ({ request }) => {
+		const data = await request.formData()
+		const username = data.get('username') as string
+		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 })
+
+		try {
+			await db.user.create({
+				data: {
+					username,
+					email,
+					password: await bcrypt.hash(password, 10),
+					role: { connect: { name: Roles.user } },
+				},
+			})
+		} catch (error) {
+			console.error(error)
+			return invalid(400, { user_exists: true, username, email })
+		}
+
+		console.log('aaa')
+
+		throw redirect(303, '/login')
+	},
+}
+

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { ActionData } from './$types';
+
+  export let form: ActionData;
+</script>
+
+<h1>Register</h1>
+
+<form method="POST">
+	<input type="text" name="username" placeholder="Username" required />
+	<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 are required.</p>{/if}
+	{#if form?.user_exists}<p class="error">Username or email is used.</p>{/if}
+
+	<input type="submit" value="Register" />
+</form>