✨ Login page + error handling

package.json

@@ -39,6 +39,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"bcryptjs": "^2.4.3",
 		"form-data": "^4.0.0",
 		"lodash": "^4.17.21",
 		"mailgun.js": "^8.0.2",

pnpm-lock.yaml

@@ -12,6 +12,7 @@ specifiers:
   '@unocss/preset-icons': ^0.46.3
   '@unocss/preset-uno': ^0.46.3
   '@unocss/reset': ^0.46.3
+  bcryptjs: ^2.4.3
   eslint: ^8.16.0
   eslint-config-prettier: ^8.3.0
   eslint-plugin-svelte3: ^4.0.0
@@ -32,6 +33,7 @@ specifiers:
   vite: ^3.1.0
 
 dependencies:
+  bcryptjs: 2.4.3
   form-data: 4.0.0
   lodash: 4.17.21
   mailgun.js: 8.0.2
@@ -1543,6 +1545,10 @@ packages:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: false
 
+  /bcryptjs/2.4.3:
+    resolution: {integrity: sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==}
+    dev: false
+
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}

src/routes/+error.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import Container from '$lib/components/Container.svelte';
+</script>
+
+<Container class="flex items-center h-full">
+	<div class="mx-auto text-center">
+		<p class="text-3xl">Erreur <b class="text-sunray">{$page.status}</b></p>
+		<p class="text-2xl">{$page.error?.message}</p>
+		<p>
+			En cas de problème, contactez-moi à <a
+				href="mailto:contact@bergereenchantee.fr"
+				rel="external"
+				class="link">contact@bergereenchantee.fr</a
+			>
+			ou sur la page <a href="/contact" class="link">contact</a>.
+		</p>
+	</div>
+</Container>
+
+<slot />

src/routes/connexion/+error.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+</script>
+
+<div class="border border-red-500 bg-red-300 rounded-lg pa-2">
+	{$page.error?.message}
+</div>

src/routes/connexion/+layout.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import Container from '$lib/components/Container.svelte';
+</script>
+
+<Container>
+	<slot />
+
+	<form method="post" use:enhance>
+		<div class="my-4">
+			<label for="email" class="text-sunray text-xl block">Email</label>
+			<input
+				type="email"
+				class="input block"
+				required
+				name="email"
+				id="email"
+				placeholder="E-mail"
+			/>
+		</div>
+
+		<div class="my-4">
+			<label for="password" class="text-sunray text-xl block">Mot de passe</label>
+			<input
+				type="password"
+				class="input required"
+				name="password"
+				id="password"
+				placeholder="Mot de passe"
+			/>
+		</div>
+
+		<button type="submit" class="btn cursor-pointer">Connexion</button>
+	</form>
+
+	<p>Pour créer un compte, vous devez effectuer une commande au préalable.</p>
+
+	<p>
+		En cas de problème, contactez-moi à <a
+			href="mailto:contact@bergereenchantee.fr"
+			rel="external"
+			class="link">contact@bergereenchantee.fr</a
+		>
+		ou sur la page <a href="/contact" class="link">contact</a>.
+	</p>
+</Container>

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

@@ -0,0 +1,44 @@
+import { error, redirect } from '@sveltejs/kit';
+import { users } from '$lib/server/db';
+import bcrypt from 'bcryptjs';
+import type { Actions } from './$types';
+
+export const actions: Actions = {
+	default: async (event) => {
+		const data = await event.request.formData();
+		const email = data.get('email').trim();
+
+		const user = await users.findOne({ email }, { collation: { locale: 'en', strength: 1 } });
+
+		if (!user) {
+			throw error(404, "Utilisateur non trouvé pour l'email: " + email);
+		}
+
+		const password = data.get('password').trim();
+
+		if (!(await bcrypt.compare(password as string, user.hash))) {
+			throw error(401, 'Mauvais mot de passe');
+		}
+
+		let token = user.token;
+
+		if (!token) {
+			token = crypto.randomUUID();
+			await users.updateOne({ _id: user._id }, { $set: { token } });
+		}
+
+		event.cookies.set('bergereToken', token, {
+			path: '/',
+			sameSite: 'lax',
+			secure: true,
+			httpOnly: true,
+			maxAge: 24 * 3600 * 365 * 3
+		});
+
+		if (event.url.searchParams.get('suivant')) {
+			throw redirect(303, event.url.searchParams.get('suivant'));
+		}
+
+		return { success: true };
+	}
+};

src/routes/connexion/+page.svelte

@@ -0,0 +1 @@
+<!-- See layout.svelte. Moved code there to be able to render error in-page -->