🛂 Support authentication

package.json

@@ -16,6 +16,7 @@
 		"@iconify-json/il": "^1.1.2",
 		"@sveltejs/adapter-node": "next",
 		"@sveltejs/kit": "next",
+		"@types/bcryptjs": "^2.4.2",
 		"@types/lodash": "^4.14.188",
 		"@types/marked": "^4.0.7",
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
@@ -40,6 +41,7 @@
 	"type": "module",
 	"dependencies": {
 		"bcryptjs": "^2.4.3",
+		"date-fns": "^2.29.3",
 		"form-data": "^4.0.0",
 		"lodash": "^4.17.21",
 		"mailgun.js": "^8.0.2",

pnpm-lock.yaml

@@ -5,6 +5,7 @@ specifiers:
   '@iconify-json/il': ^1.1.2
   '@sveltejs/adapter-node': next
   '@sveltejs/kit': next
+  '@types/bcryptjs': ^2.4.2
   '@types/lodash': ^4.14.188
   '@types/marked': ^4.0.7
   '@typescript-eslint/eslint-plugin': ^5.27.0
@@ -13,6 +14,7 @@ specifiers:
   '@unocss/preset-uno': ^0.46.3
   '@unocss/reset': ^0.46.3
   bcryptjs: ^2.4.3
+  date-fns: ^2.29.3
   eslint: ^8.16.0
   eslint-config-prettier: ^8.3.0
   eslint-plugin-svelte3: ^4.0.0
@@ -34,6 +36,7 @@ specifiers:
 
 dependencies:
   bcryptjs: 2.4.3
+  date-fns: 2.29.3
   form-data: 4.0.0
   lodash: 4.17.21
   mailgun.js: 8.0.2
@@ -45,6 +48,7 @@ devDependencies:
   '@iconify-json/il': 1.1.2
   '@sveltejs/adapter-node': 1.0.0-next.100
   '@sveltejs/kit': 1.0.0-next.542_svelte@3.52.0+vite@3.2.2
+  '@types/bcryptjs': 2.4.2
   '@types/lodash': 4.14.188
   '@types/marked': 4.0.7
   '@typescript-eslint/eslint-plugin': 5.42.0_6xw5wg2354iw4zujk2f3vyfrzu
@@ -1128,6 +1132,10 @@ packages:
       - supports-color
     dev: true
 
+  /@types/bcryptjs/2.4.2:
+    resolution: {integrity: sha512-LiMQ6EOPob/4yUL66SZzu6Yh77cbzJFYll+ZfaPiPPFswtIlA/Fs1MzdKYA7JApHU49zQTbJGX3PDmCpIdDBRQ==}
+    dev: true
+
   /@types/cookie/0.5.1:
     resolution: {integrity: sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==}
     dev: true
@@ -1698,6 +1706,11 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /date-fns/2.29.3:
+    resolution: {integrity: sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==}
+    engines: {node: '>=0.11'}
+    dev: false
+
   /debug/4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}

src/app.d.ts

@@ -1,9 +1,16 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 // and what to do when importing types
-declare namespace App {
-	// interface Locals {}
-	// interface PageData {}
-	// interface Error {}
-	// interface Platform {}
+
+import type { User } from '$lib/types/User';
+
+declare global {
+	declare namespace App {
+		interface Locals {
+			user: null | User;
+		}
+		// interface PageData {}
+		// interface Error {}
+		// interface Platform {}
+	}
 }

src/hooks.server.ts

@@ -0,0 +1,14 @@
+import { users } from '$lib/server/db';
+import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const token = event.cookies.get('bergereToken');
+
+	if (token) {
+		event.locals.user = await users.findOne({ token });
+	}
+
+	const response = await resolve(event);
+
+	return response;
+};

src/routes/+layout.server.ts

@@ -16,12 +16,14 @@ export const load: LayoutServerLoad = async (input) => {
 
 		return {
 			pageData,
-			pictures: pics
+			pictures: pics,
+			user: !!input.locals.user
 		};
 	}
 
 	return {
 		pageData: null,
-		pictures: [] as Picture[]
+		pictures: [] as Picture[],
+		user: !!input.locals.user
 	};
 };

src/routes/+layout.svelte

@@ -3,10 +3,15 @@
 	import { slide } from 'svelte/transition';
 	import '@unocss/reset/normalize.css';
 	import 'uno.css';
+	import type { LayoutData } from './$types';
 
-	$: path = $page.route.id ?? '';
+	$: path = $page.route?.id ?? '';
+
+	export let data: LayoutData;
+
+	$: shownPicture =
+		data.pictures.find((p) => p.storage[0].width >= p.storage[0].height) ?? data.pictures[0];
 
-	let user: null = null;
 	let menuOpen = false;
 	let date = new Date();
 </script>
@@ -24,15 +29,19 @@
 		<meta property="twitter:description" content={$page.data.description} />
 	{/if}
 	<meta property="og:type" content={$page.data.type || 'website'} />
-	<!-- {#if pictures.length > 0}
+	{#if shownPicture}
 		<meta
 			property="og:image"
-			content="{origin}/photos/raw/{shownPicture.storage.slice(-2)[0]._id}"
+			content="{$page.url.protocol}//{$page.url.host}/photos/raw/{shownPicture.storage.slice(-2)[0]
+				._id}"
+		/>
+		<meta
+			name="twitter:image"
+			content="{$page.url.protocol}//{$page.url.host}/photos/raw/{shownPicture.storage[0]._id}"
 		/>
-		<meta name="twitter:image" content="{origin}/photos/raw/{shownPicture.storage[0]._id}" />
 		<meta name="twitter:card" content="summary_large_image" />
-	{/if} -->
-	<!-- <meta property="og:url" content="{origin}{path}" /> -->
+	{/if}
+	<meta property="og:url" content="{$page.url.protocol}//{$page.url.host}{path}" />
 	{#if $page.data.price}
 		<meta property="product:price:amount" content={$page.data.price} />
 		<meta property="product:price:currency" content="€" />
@@ -76,7 +85,7 @@
 			class:text-sunray={path === '/contact'}
 			class="hidden sm:inline py-4 grow hover:text-sunray">Contact</a
 		>
-		{#if user}
+		{#if data.user}
 			<a href="/compte" title="Espace client" class="hidden sm:inline grow text-sunray text-3xl">
 				<div class="inline-block i-ant-design-user-outlined" />
 			</a>
@@ -127,7 +136,7 @@
 			<a href="/contact" class:text-sunray={path === '/contact'} class="my-2 hover:text-sunray"
 				>Contact</a
 			>
-			{#if user}
+			{#if data.user}
 				<a
 					href="/compte"
 					title="Espace client"

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

@@ -0,0 +1,10 @@
+import { redirect } from '@sveltejs/kit';
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = (event) => {
+	if (event.locals.user) {
+		throw redirect(302, '/');
+	}
+
+	return {};
+};

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

@@ -2,11 +2,17 @@ import { error, redirect } from '@sveltejs/kit';
 import { users } from '$lib/server/db';
 import bcrypt from 'bcryptjs';
 import type { Actions } from './$types';
+import { addYears } from 'date-fns';
 
 export const actions: Actions = {
 	default: async (event) => {
 		const data = await event.request.formData();
-		const email = data.get('email').trim();
+
+		if (!data || !data.get('email') || !data.get('password')) {
+			throw error(400, 'Pas de login renseigné');
+		}
+
+		const email = data.get('email')!.toString().trim();
 
 		const user = await users.findOne({ email }, { collation: { locale: 'en', strength: 1 } });
 
@@ -14,7 +20,7 @@ export const actions: Actions = {
 			throw error(404, "Utilisateur non trouvé pour l'email: " + email);
 		}
 
-		const password = data.get('password').trim();
+		const password = data.get('password')!.toString().trim();
 
 		if (!(await bcrypt.compare(password as string, user.hash))) {
 			throw error(401, 'Mauvais mot de passe');
@@ -32,11 +38,11 @@ export const actions: Actions = {
 			sameSite: 'lax',
 			secure: true,
 			httpOnly: true,
-			maxAge: 24 * 3600 * 365 * 3
+			expires: addYears(new Date(), 3)
 		});
 
 		if (event.url.searchParams.get('suivant')) {
-			throw redirect(303, event.url.searchParams.get('suivant'));
+			throw redirect(303, event.url.searchParams.get('suivant')!);
 		}
 
 		return { success: true };

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

@@ -0,0 +1,8 @@
+import { redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+
+export const actions: Actions = {
+	default: async (event) => {
+		throw redirect(303, event.request.headers.get('referer') ?? '/');
+	}
+};