Working

src/pages/blog/_slug.vue

@@ -145,6 +145,7 @@ export default defineComponent({
         likes.value = response.data.likes
       }).catch((error) => {
         $sentry.captureEvent(error)
+        app.error({statusCode: 500})
       })
     })
 
@@ -161,6 +162,7 @@ export default defineComponent({
           $storage.removeCookie(`${slug.value}`)
         } else {
           $sentry.captureEvent(response.data)
+          app.error({statusCode: 500})
         }
       } else {
         const response = await $axios.post(`/posts/${post.value?.slug}/like`, {}, {
@@ -176,6 +178,7 @@ export default defineComponent({
           })
         } else {
           $sentry.captureEvent(response.data)
+          app.error({statusCode: 500})
         }
       }
     }

src/pages/guestbook.vue

@@ -30,7 +30,7 @@ export default defineComponent({
     }
   },
   setup() {
-    const { $axios, $sentry } = useContext()
+    const { $axios, $sentry, app } = useContext()
     const guestbook_messages = ref([])
 
     useAsync(async () => {
@@ -43,6 +43,7 @@ export default defineComponent({
           guestbook_messages.value = response.data.guestbook_messages
         })
         .catch(error => {
+          app.error({statusCode: 500})
           $sentry.captureEvent(error)
         })
     })

src/pages/newsletter.vue

@@ -0,0 +1,132 @@
+<template>
+  <main class="flex flex-col mb-12 px-4 xl:px-64">
+    <PageTitle class="self-center" title="part.newsletter"/>
+    <section class="flex flex-col 2xl:flex-row items-center py-8">
+      <div class="ml-2 text-lg leading-6 text-justify dark:text-gray-400 text-gray-700">
+        <p>{{ $t('newsletter.description') }}</p>
+      </div>
+    </section>
+    <section class="p-6 border border-indigo-600 dark:border-indigo-700 rounded-lg text-justify">
+      <h1 class="text-black font-bold dark:text-white text-2xl">{{ $t('newsletter.title') }}</h1>
+      <h3 class="text-gray-500 dark:text-gray-400">{{ $t('newsletter.subtitle') }}</h3>
+      <div class="my-3">
+        <form v-if="!success && !exist" class="relative">
+          <input
+            required
+            type="email"
+            :placeholder="$t('newsletter.placeholder')"
+            v-model="form.email"
+            class="pl-4 pr-32 py-2 mt-1 block w-full border-gray-300 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+          >
+          <button
+            @click.prevent="handleForm"
+            v-if="form.email && form.email.length > 0"
+            class="button flex items-center justify-center px-8 py-1 font-bold bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded hover:bg-gray-300 duration-300"
+          >
+            {{ $t('newsletter.subscribe') }}
+          </button>
+        </form>
+        <div class="flex">
+          <div v-if="error" class="py-1 text-red-400 text-sm">
+            {{ $t('newsletter.error') }}
+          </div>
+        </div>
+        <div class="flex">
+          <div v-if="success" class="py-1 text-green-400 text-sm">
+            {{ $t('newsletter.success') }}
+          </div>
+        </div>
+        <div class="flex">
+          <div v-if="exist" class="py-1 text-green-400 text-sm">
+            {{ $t('newsletter.exist') }}
+          </div>
+        </div>
+      </div>
+      <p class="text-sm text-gray-700 dark:text-gray-300">{{ $t('newsletter.count', { count: subscribersCount }) }}</p>
+      <p class="text-sm text-gray-700 dark:text-gray-300">{{ $t('newsletter.infos') }} <strong>{{ $t('newsletter.no_spam') }}</strong></p>
+    </section>
+  </main>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref, useAsync, useContext} from "@nuxtjs/composition-api";
+import {NewsletterForm} from "~/types/types";
+
+export default defineComponent({
+  name: "newsletter",
+  head() {
+    return {
+      title: `${this.$i18n.t('header.newsletter')} - Arthur Danjou`
+    }
+  },
+  setup() {
+    const { $axios, $sentry, app } = useContext()
+    const subscribersCount = ref(0)
+
+    useAsync(() => {
+      $axios.get('/subscribers', {
+        headers: {
+          'Authorization': `Bearer ${process.env.API_TOKEN}`,
+          'Access-Control-Allow-Origin': '*',
+          'Content-Type': 'application/json'
+        }
+      }).then((response) => {
+        if (response.status === 200) {
+          subscribersCount.value = response.data.count
+        }
+      }).catch((error) => {
+        $sentry.captureEvent(error)
+        app.error({statusCode: 500})
+      })
+    })
+
+    const error = ref(false)
+    const success = ref(false)
+    const exist = ref(false)
+    const form = ref<NewsletterForm>({} as NewsletterForm)
+
+    const handleForm = () => {
+      $axios.post('/subscribers', {
+        email: form.value.email
+      },  {
+        headers: {
+          'Authorization': `Bearer ${process.env.API_TOKEN}`
+        }
+      }).then((response) => {
+        if (response.status === 200) {
+          form.value.email = ''
+          success.value = true
+        } else if (response.status === 201) {
+          form.value.email = ""
+          exist.value = true
+        } else {
+          $sentry.captureEvent(response.data)
+          error.value = true
+          setTimeout(() => {
+            error.value = false
+          }, 5000)
+        }
+      }).catch(error => {
+        $sentry.captureEvent(error)
+      })
+    }
+
+    return {
+      subscribersCount,
+      error,
+      success,
+      form,
+      handleForm,
+      exist
+    }
+  }
+})
+</script>
+
+<style scoped>
+.button {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+}
+</style>