✨ Contact page

package.json

@@ -39,7 +39,9 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"form-data": "^4.0.0",
 		"lodash": "^4.17.21",
+		"mailgun.js": "^8.0.2",
 		"marked": "^4.2.2",
 		"mongodb": "^4.11.0"
 	}

pnpm-lock.yaml

@@ -15,7 +15,9 @@ specifiers:
   eslint: ^8.16.0
   eslint-config-prettier: ^8.3.0
   eslint-plugin-svelte3: ^4.0.0
+  form-data: ^4.0.0
   lodash: ^4.17.21
+  mailgun.js: ^8.0.2
   marked: ^4.2.2
   mongodb: ^4.11.0
   prettier: ^2.6.2
@@ -30,7 +32,9 @@ specifiers:
   vite: ^3.1.0
 
 dependencies:
+  form-data: 4.0.0
   lodash: 4.17.21
+  mailgun.js: 8.0.2
   marked: 4.2.2
   mongodb: 4.11.0
 
@@ -38,7 +42,7 @@ devDependencies:
   '@iconify-json/ant-design': 1.1.3
   '@iconify-json/il': 1.1.2
   '@sveltejs/adapter-node': 1.0.0-next.100
-  '@sveltejs/kit': 1.0.0-next.538_svelte@3.52.0+vite@3.2.2
+  '@sveltejs/kit': 1.0.0-next.542_svelte@3.52.0+vite@3.2.2
   '@types/lodash': 4.14.188
   '@types/marked': 4.0.7
   '@typescript-eslint/eslint-plugin': 5.42.0_6xw5wg2354iw4zujk2f3vyfrzu
@@ -1072,8 +1076,8 @@ packages:
       rollup: 2.79.1
     dev: true
 
-  /@sveltejs/kit/1.0.0-next.538_svelte@3.52.0+vite@3.2.2:
-    resolution: {integrity: sha512-NRu6+j1Lc0daE2OirlbDCbT/yMf5l5nFln2o1asMA3HL7A244SG+uGGFea4DZ1bdetZ3IhO5xa1MWIGY5Ybb3g==}
+  /@sveltejs/kit/1.0.0-next.542_svelte@3.52.0+vite@3.2.2:
+    resolution: {integrity: sha512-0YaNfrNsCwgCYuYEEKUF7G/QAkeGNJRlAFnPa9WTG2kRQPqlfUKOJlAniRHVG08ARdfNJgBSootWFvAUsKSoYA==}
     engines: {node: '>=16.14'}
     hasBin: true
     requiresBuild: true
@@ -1514,10 +1518,27 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /asynckit/0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: false
+
+  /axios/0.27.2:
+    resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==}
+    dependencies:
+      follow-redirects: 1.15.2
+      form-data: 4.0.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
+  /base-64/1.0.0:
+    resolution: {integrity: sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==}
+    dev: false
+
   /base64-js/1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: false
@@ -1630,6 +1651,13 @@ packages:
     resolution: {integrity: sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==}
     dev: true
 
+  /combined-stream/1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: false
+
   /commondir/1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
     dev: true
@@ -1689,6 +1717,11 @@ packages:
     resolution: {integrity: sha512-pOFYRTIhoKujrmbTRhcW5lYQLBXw/dlTwfI8IguF1QCDJOcJzNH1w+YFjxqy6BAuJrClTy6MUE8q+oKJ2FLsIw==}
     dev: true
 
+  /delayed-stream/1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
   /denque/2.1.0:
     resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
     engines: {node: '>=0.10'}
@@ -2175,6 +2208,25 @@ packages:
     resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
     dev: true
 
+  /follow-redirects/1.15.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
+  /form-data/4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: false
+
   /fs.realpath/1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true
@@ -2470,6 +2522,16 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
+  /mailgun.js/8.0.2:
+    resolution: {integrity: sha512-s0esDPrHlo72rLylEj61akLO49HvUltmjKIj/lrbY89kWcL/lcPy23yh4ifFkWTuiBO6oHVqXwzfQI3lhSvK9A==}
+    dependencies:
+      axios: 0.27.2
+      base-64: 1.0.0
+      url-join: 4.0.1
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
   /marked/4.2.2:
     resolution: {integrity: sha512-JjBTFTAvuTgANXx82a5vzK9JLSMoV6V3LBVn4Uhdso6t7vXrGx7g1Cd2r6NYSsxrYbQGFCMqBDhFHyK5q2UvcQ==}
     engines: {node: '>= 12'}
@@ -2502,6 +2564,18 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /mime-db/1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /mime-types/2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: false
+
   /mime/3.0.0:
     resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
     engines: {node: '>=10.0.0'}
@@ -3171,6 +3245,10 @@ packages:
       punycode: 2.1.1
     dev: true
 
+  /url-join/4.0.1:
+    resolution: {integrity: sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==}
+    dev: false
+
   /uuid/8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true

src/lib/server/mail.ts

@@ -0,0 +1,11 @@
+import { MAILGUN_API_KEY } from '$env/static/private';
+import Mailgun from 'mailgun.js';
+import formData from 'form-data';
+
+const mailgun = new Mailgun(formData);
+
+export const mg = mailgun.client({
+	username: 'api',
+	key: MAILGUN_API_KEY,
+	url: 'https://api.eu.mailgun.net'
+});

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

@@ -0,0 +1,37 @@
+import { mg } from '$lib/server/mail';
+import type { Actions } from './$types';
+
+export const actions: Actions = {
+	default: async (event) => {
+		const body = await event.request.formData();
+		if (
+			!body.get('email') ||
+			!body.get('message') ||
+			!body.get('firstName') ||
+			!body.get('lastName')
+		) {
+			return {
+				status: 400,
+				body: {
+					error: 'Veuillez remplir tous les champs'
+				}
+			};
+		}
+
+		const firstName = body.get('firstName').toString().trim();
+		const lastName = body.get('lastName').toString().trim();
+		const message = body.get('message').toString().trim();
+		const email = body.get('email').toString().trim();
+
+		await mg.messages.create('mails.bergereenchantee.fr', {
+			from: 'Formulaire de contact <contact@mails.bergereenchantee.fr>',
+			to: ['contact@bergereenchantee.fr'],
+			subject: `Message de ${firstName} ${lastName}`,
+			'h:Reply-To': email,
+			text: message,
+			'o:tag': 'contact'
+		});
+
+		return { success: true };
+	}
+};

src/routes/contact/+page.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import type { ContactPage } from '$lib/types/Page';
+	import Container from '$lib/components/Container.svelte';
+	import { marked } from 'marked';
+	import Picture from '$lib/components/Picture.svelte';
+	import type { ActionData, PageData } from './$types';
+	import { enhance } from '$app/forms';
+
+	export let data: PageData;
+
+	const pageData: ContactPage = data.pageData as ContactPage;
+	const pictures = data.pictures;
+
+	export let form: ActionData;
+</script>
+
+<Container class="mb-6">
+	<section class="relative lg:h-xl mt-12 flex">
+		<img
+			src="/triangles.svg"
+			alt="Triangles"
+			class="pointer-events-none select-none absolute hidden lg:block h-5/6"
+			style="left: 50%; top: 50%; transform: translate(-50%, -50%) scaleX(-1); z-index: -1"
+		/>
+		<Picture
+			picture={pictures.find((p) => p._id === pageData.pictures['photo-garde'])}
+			sizes="(max-width: 1200px) 50vw, 600px"
+			grow
+			basis-0
+			hidden
+			class="rounded-3xl h-full object-cover w-3/6 lg:block"
+		/>
+		<div class="lg:w-3/6 h-full flex flex-col justify-evenly lg:pl-12">
+			<h2 class="text-oxford text-7xl mb-7 lg:mb-0" style="mix-blend-mode: color-burn;">Contact</h2>
+			<ul class="text-oxford">
+				<li class="flex items-center">
+					<div class="i-ant-design-phone-outlined inline-block mr-2" />
+					<a rel="external" href="tel:+33774521115">07 74 52 11 15</a>
+				</li>
+				<li class="flex items-center mt-2">
+					<div class="i-ant-design-mail-outlined inline-block mr-2" />
+					<a rel="external" href="mailto:contact@bergereenchantee.fr">contact@bergereenchantee.fr</a
+					>
+				</li>
+				<li class="flex mt-2">
+					<div class="i-ant-design-clock-circle-outlined inline-block mr-2 lg:mt-1" />
+					le lundi mardi jeudi vendredi de 9h à 17h30 et le mercredi de 9h à 12h
+				</li>
+			</ul>
+		</div>
+	</section>
+	<div class="pt-3">
+		{@html marked(pageData.text.description)}
+	</div>
+
+	{#if form?.success}
+		<div class="border border-blue-500 bg-blue-300 rounded-lg pa-2">
+			Votre message a bien été envoyé. <br /><br /> Daphné vous répondra rapidement.
+		</div>
+	{:else}
+		<form method="post" class="text-oxford font-semibold text-lg" use:enhance>
+			<div class="mt-4">
+				<label for="lastName" class="block">Nom</label>
+				<input
+					type="text"
+					name="lastName"
+					id="lastName"
+					placeholder="Nom"
+					class="input box-border"
+					style="max-width: 100% !important"
+					required
+				/>
+			</div>
+
+			<div class="mt-4">
+				<label for="firstName" class="block">Prénom</label>
+				<input
+					type="text"
+					name="firstName"
+					id="firstName"
+					placeholder="Prénom"
+					class="input box-border"
+					style="max-width: 100% !important"
+					required
+				/>
+			</div>
+
+			<div class="mt-4">
+				<label for="email" class="block">Mail</label>
+				<input
+					type="email"
+					name="email"
+					id="email"
+					placeholder="Adresse mail"
+					class="input box-border"
+					style="max-width: 100% !important"
+					required
+				/>
+			</div>
+
+			<div class="mt-4">
+				<label for="message" class="block">Message</label>
+				<textarea
+					name="message"
+					id="message"
+					cols="30"
+					rows="5"
+					class="input box-border"
+					style="max-width: 100% !important"
+					placeholder="Votre message"
+					required
+				/>
+			</div>
+
+			<div class="w-full flex mt-4">
+				<button type="submit" class="btn ml-auto cursor-pointer"> Envoyer </button>
+			</div>
+		</form>
+	{/if}
+</Container>