From 869debe87e813b032acc2ee2aa64f611fbd48a35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 25 Dec 2022 13:55:57 +0100
Subject: [PATCH] =?UTF-8?q?Switch=20to=20API=20route=20for=20newsletter=20?=
 =?UTF-8?q?form=20submission=20=F0=9F=AB=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

not using the latest SvelteKit use:enhance thingy but… hey!
---
 src/components/molecules/EmailForm.svelte     | 39 +++++++++-----
 .../[country]/[location]/+page.server.ts      | 12 +----
 src/routes/(site)/locations/+page.server.ts   |  8 ---
 src/routes/(site)/photos/+page.server.ts      | 12 +----
 src/routes/(site)/subscribe/+page.server.ts   | 12 +----
 src/routes/+page.server.ts                    | 12 +----
 src/routes/api/newsletter/+server.ts          | 37 +++++++++++++
 src/utils/forms/subscribe.ts                  | 52 -------------------
 svelte.config.js                              |  3 --
 9 files changed, 66 insertions(+), 121 deletions(-)
 delete mode 100644 src/routes/(site)/locations/+page.server.ts
 create mode 100644 src/routes/api/newsletter/+server.ts
 delete mode 100644 src/utils/forms/subscribe.ts

diff --git a/src/components/molecules/EmailForm.svelte b/src/components/molecules/EmailForm.svelte
index df3d5b3..8dcfbee 100644
--- a/src/components/molecules/EmailForm.svelte
+++ b/src/components/molecules/EmailForm.svelte
@@ -3,8 +3,6 @@
 </style>
 
 <script lang="ts">
-    import { enhance } from '$app/forms'
-    import { dev } from '$app/environment'
     import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import { sendEvent } from '$utils/analytics'
@@ -15,27 +13,41 @@
     export let past: boolean = false
 
     let inputInFocus = false
-    let formStatus: { error: string, success: boolean, message: string } = null
+    let formStatus: FormStatus = null
     let formMessageTimeout: ReturnType<typeof setTimeout> | number
 
+    interface FormStatus {
+        error?: string
+        success?: boolean
+        message: string
+    }
+    const formMessages = {
+        PENDING: `Almost there! Please confirm your email address through the email you'll receive soon.`,
+        MEMBER_EXISTS_WITH_EMAIL_ADDRESS: `This email address is already subscribed to the newsletter.`,
+        INVALID_EMAIL: `Woops. This email doesn't seem to be valid.`,
+    }
+
     $: isSuccess = formStatus && formStatus.success
 
     // Toggle input focus
     const toggleFocus = () => inputInFocus = !inputInFocus
 
     // Handle form submission
-    const handleForm = () => {
-        return async ({ result, update }) => {
-            formStatus = result.data
+    async function handleForm (event: SubmitEvent) {
+        const data = new FormData(this)
+        const email = data.get('email')
 
-            console.log(result)
-            // if (dev) {
-            // }
+        if (email) {
+            const req = await fetch(this.action, {
+                method: 'POST',
+                body: JSON.stringify({ email })
+            })
+            const result: FormStatus = await req.json()
+            formStatus = result
 
             // If successful
-            if (result.data.success) {
+            if (formStatus.success) {
                 sendEvent('newsletterSubscribe')
-                update()
             } else {
                 // Hide message for errors
                 clearTimeout(formMessageTimeout)
@@ -47,8 +59,7 @@
 
 <div class="newsletter-form">
     {#if !isSuccess}
-        <form method="POST" action="?/subscribe"
-            use:enhance={handleForm}
+        <form method="POST" action="/api/newsletter" on:submit|preventDefault={handleForm}
             out:fly|local={{ y: -8, easing: quartOut, duration: 600 }}
         >
             <div class="newsletter-form__email" class:is-focused={inputInFocus}>
@@ -87,7 +98,7 @@
             in:fly|local={{ y: 8, easing: quartOut, duration: 600, delay: isSuccess ? 600 : 0 }}
             out:fly|local={{ y: 8, easing: quartOut, duration: 600 }}
         >
-            <p class="text-xsmall">{formStatus.message}</p>
+            <p class="text-xsmall">{formMessages[formStatus.message]}</p>
         </div>
     {/if}
 </div>
\ No newline at end of file
diff --git a/src/routes/(site)/[country]/[location]/+page.server.ts b/src/routes/(site)/[country]/[location]/+page.server.ts
index ea607be..da2b397 100644
--- a/src/routes/(site)/[country]/[location]/+page.server.ts
+++ b/src/routes/(site)/[country]/[location]/+page.server.ts
@@ -1,8 +1,7 @@
 import { error } from '@sveltejs/kit'
-import type { Actions, PageServerLoad } from './$types'
+import type { PageServerLoad } from './$types'
 import { PUBLIC_LIST_AMOUNT } from '$env/static/public'
 import { fetchAPI, photoFields } from '$utils/api'
-import subscribe from '$utils/forms/subscribe'
 
 
 /**
@@ -92,13 +91,4 @@ export const load: PageServerLoad = async ({ params, setHeaders }) => {
     } catch (err) {
         throw error(500, err.message)
     }
-}
-
-
-/**
- * Form Data
- */
-export const actions: Actions = {
-    // Form newsletter subscription
-    subscribe: subscribe,
 }
\ No newline at end of file
diff --git a/src/routes/(site)/locations/+page.server.ts b/src/routes/(site)/locations/+page.server.ts
deleted file mode 100644
index 946a413..0000000
--- a/src/routes/(site)/locations/+page.server.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { Actions } from './$types'
-import subscribe from '$utils/forms/subscribe'
-
-
-export const actions: Actions = {
-    // Form newsletter subscription
-    subscribe: subscribe,
-}
\ No newline at end of file
diff --git a/src/routes/(site)/photos/+page.server.ts b/src/routes/(site)/photos/+page.server.ts
index 389f5a8..d3322be 100644
--- a/src/routes/(site)/photos/+page.server.ts
+++ b/src/routes/(site)/photos/+page.server.ts
@@ -1,8 +1,7 @@
 import { error } from '@sveltejs/kit'
-import type { Actions, PageServerLoad } from './$types'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_AMOUNT } from '$env/static/public'
-import subscribe from '$utils/forms/subscribe'
 
 
 /**
@@ -89,13 +88,4 @@ export const load: PageServerLoad = async ({ url, setHeaders }) => {
     } catch (err) {
         throw error(500, err.message)
     }
-}
-
-
-/**
- * Form Data
- */
-export const actions: Actions = {
-    // Form newsletter subscription
-    subscribe: subscribe,
 }
\ No newline at end of file
diff --git a/src/routes/(site)/subscribe/+page.server.ts b/src/routes/(site)/subscribe/+page.server.ts
index 47a0bf2..94e1c51 100644
--- a/src/routes/(site)/subscribe/+page.server.ts
+++ b/src/routes/(site)/subscribe/+page.server.ts
@@ -1,7 +1,6 @@
 import { error } from '@sveltejs/kit'
-import type { Actions, PageServerLoad } from './$types'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
-import subscribe from '$utils/forms/subscribe'
 
 
 /**
@@ -40,13 +39,4 @@ export const load: PageServerLoad = async ({ setHeaders }) => {
     } catch (err) {
         throw error(500, err.message)
     }
-}
-
-
-/**
- * Form Data
- */
-export const actions: Actions = {
-    // Form newsletter subscription
-    subscribe: subscribe,
 }
\ No newline at end of file
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 77ca49a..0422f02 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,8 +1,7 @@
 import { error } from '@sveltejs/kit'
-import type { Actions, PageServerLoad } from './$types'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { getRandomItems } from '$utils/functions'
-import subscribe from '$utils/forms/subscribe'
 
 
 /**
@@ -57,13 +56,4 @@ export const load: PageServerLoad = async ({ setHeaders }) => {
     } catch (err) {
         throw error(500, err.message)
     }
-}
-
-
-/**
- * Form Data
- */
-export const actions: Actions = {
-    // Form newsletter subscription
-    subscribe: subscribe,
 }
\ No newline at end of file
diff --git a/src/routes/api/newsletter/+server.ts b/src/routes/api/newsletter/+server.ts
new file mode 100644
index 0000000..432f6a1
--- /dev/null
+++ b/src/routes/api/newsletter/+server.ts
@@ -0,0 +1,37 @@
+import { NEWSLETTER_API_TOKEN, NEWSLETTER_LIST_ID } from '$env/static/private'
+import type { RequestHandler } from './$types'
+import { error } from '@sveltejs/kit'
+
+export const POST = (async ({ request }) => {
+    const { email } = await request.json()
+
+    // No email
+    if (!email) {
+        throw error(400, { message: 'NO_EMAIL' })
+    }
+    // Invalid email
+    else if (!email || !email.match(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
+        throw error(400, { message: 'INVALID_EMAIL' })
+    }
+
+    // Newsletter API request
+    const req = await fetch(`https://emailoctopus.com/api/1.6/lists/${NEWSLETTER_LIST_ID}/contacts`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            api_key: NEWSLETTER_API_TOKEN,
+            email_address: email,
+        })
+    })
+    const res = await req.json()
+
+    // Other error
+    if (res && res.status !== 'PENDING') {
+        throw error(400, { message: res.error.code })
+    }
+
+    return new Response(JSON.stringify({
+        success: true,
+        message: res.status,
+    }))
+}) satisfies RequestHandler
\ No newline at end of file
diff --git a/src/utils/forms/subscribe.ts b/src/utils/forms/subscribe.ts
deleted file mode 100644
index d981df4..0000000
--- a/src/utils/forms/subscribe.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { NEWSLETTER_API_TOKEN, NEWSLETTER_LIST_ID } from '$env/static/private'
-import { fail } from '@sveltejs/kit'
-
-const formMessages = {
-    PENDING: `Almost there! Please confirm your email address through the email you'll receive soon.`,
-    MEMBER_EXISTS_WITH_EMAIL_ADDRESS: `This email address is already subscribed to the newsletter.`,
-    INVALID_EMAIL: `Woops. This email doesn't seem to be valid.`,
-}
-
-
-export default async ({ request }) => {
-    const formData = await request.formData()
-    const email = formData.get('email')
-
-    console.log(email)
-
-    // Newsletter API request
-    const req = await fetch(`https://emailoctopus.com/api/1.6/lists/${NEWSLETTER_LIST_ID}/contacts`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-            api_key: NEWSLETTER_API_TOKEN,
-            email_address: email,
-        })
-    })
-
-    const res = await req.json()
-    console.log(res)
-
-    if (res) {
-        if (res && res.status !== 'PENDING') {
-            // Invalid email
-            if (!email.match(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
-                return fail(400, {
-                    error: 'INVALID_EMAIL',
-                    message () { return formMessages[this.error] }
-                })
-            }
-
-            // Other error
-            return fail(400, {
-                error: res.error.code,
-                message: formMessages[res.error.code],
-            })
-        }
-
-        return {
-            success: true,
-            message: formMessages[res.status],
-        }
-    }
-}
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index 03e6d17..0c9a3f4 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -17,9 +17,6 @@ const config = {
     }),
 
     kit: {
-        csrf: {
-            checkOrigin: false
-        },
         adapter: adapter({
             edge: true
         }),