Working

src/components/Footer.vue

@@ -16,15 +16,18 @@
         </a>
       </div>
       <div class="flex space-x-4">
-        <nuxt-link class="link font-semibold" to="env">
+        <nuxt-link class="link font-semibold" to="/env">
           <span>{{ $t('header.env') }}</span>,
         </nuxt-link>
-        <nuxt-link class="link font-semibold" to="guestbook">
+        <nuxt-link class="link font-semibold" to="/guestbook">
           <span>{{ $t('header.guestbook') }}</span>,
         </nuxt-link>
-        <nuxt-link class="link font-semibold" to="contact">
+        <nuxt-link class="link font-semibold" to="/contact">
           <span>{{ $t('header.contact') }}</span>
         </nuxt-link>
+        <nuxt-link class="link font-semibold" to="/newsletter">
+          <span>{{ $t('header.newsletter') }}</span>
+        </nuxt-link>
       </div>
     </div>
     <div class="text-center my-4">

src/components/GuestBookForm.vue

@@ -3,13 +3,13 @@
     <h1 class="text-black font-bold dark:text-white text-2xl">{{ $t('guestbook.signin') }}</h1>
     <h3 class="text-gray-500 dark:text-gray-400">{{ $t('guestbook.share') }}</h3>
     <div class="flex space-x-4 my-3">
-      <div @click="loginWithGoogle" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
+      <div @click="login('github')" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
         <GoogleIcon />
       </div>
-      <div @click="loginWithGithub" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
+      <div @click="login('google')" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
         <GithubIcon />
       </div>
-      <div @click="loginWithTwitter" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
+      <div @click="login('twitter')" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
         <TwitterIcon />
       </div>
     </div>
@@ -45,46 +45,32 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, ref, useContext} from "@nuxtjs/composition-api";
+import {computed, defineComponent, ref, useContext} from "@nuxtjs/composition-api";
 import {GuestbookForm} from "~/types/types";
 
 export default defineComponent({
   name: "GuestBookForm",
   setup() {
-    const { $axios, $sentry } = useContext()
+    const { $axios, $sentry, app } = useContext()
 
-    const loginWithGithub = () => {
-      $axios.get('/auth/github', {
+    const login = async (driver: 'github' | 'google' | 'twitter') => {
+      const response = await $axios.get(`/auth/${driver}`, {
         headers: {
           'Access-Control-Allow-Origin': '*',
           'Content-Type': 'application/json'
         },
         proxy: {
           protocol: 'https',
-          host: '127.0.0.1',
+          host: 'https://api.arthurdanjou.fr',
           port: 80,
         },
-      }).then((response) => {
-        console.log(response.headers, response.data, response.status, response.request)
-      })
-    }
-
-    const loginWithGoogle = () => {
-      return $axios.get('/auth/google', {
-        headers: {
-          'Access-Control-Allow-Origin': '*',
-          'Content-Type': 'application/json'
-        }
-      })
-    }
-
-    const loginWithTwitter = () => {
-      $axios.get('/auth/twitter', {
-        headers: {
-          'Access-Control-Allow-Origin': '*',
-          'Content-Type': 'application/json'
-        }
       })
+      if (response.status === 200) {
+        await hasAlreadySignMessage(response.data.user.id)
+      } else {
+        $sentry.captureEvent(response.data)
+        app.error({statusCode: 500})
+      }
     }
 
     const error = ref(false)
@@ -92,7 +78,7 @@ export default defineComponent({
     const form = ref<GuestbookForm>({} as GuestbookForm)
 
     const handleForm = async () => {
-      const response = await $axios.post('/api/guestbook', {
+      const response = await $axios.post('/guestbook', {
         message: form.value.message
       },  {
         headers: {
@@ -111,14 +97,35 @@ export default defineComponent({
       }
     }
 
+    const alreadySent = ref(false)
+    const hasAlreadySignMessage = async (id: number) => {
+      const response = await $axios.get(`/guestbook/${id}`, {
+        headers: {
+          'Authorization': `Bearer ${process.env.API_TOKEN}`
+        }
+      })
+      if (response.status === 200) {
+        switch (response.data.data) {
+          case 0:
+            alreadySent.value = false
+            break
+          case 1:
+            alreadySent.value = true
+            break
+        }
+      } else {
+        $sentry.captureEvent(response.data)
+      }
+    }
+
     return  {
-      loginWithGithub,
-      loginWithTwitter,
-      loginWithGoogle,
+      login,
       form,
       success,
       error,
-      handleForm
+      alreadySent,
+      handleForm,
+      hasAlreadySignMessage
     }
   }
 })

src/locales/en-EN.ts

@@ -5,7 +5,8 @@ export default {
     contact: 'Contact',
     projects: 'Projects',
     env: 'Tools',
-    guestbook: 'Guestbook'
+    guestbook: 'Guestbook',
+    newsletter: 'Newsletter'
   },
 
   part: {

src/locales/fr-FR.ts

@@ -5,7 +5,8 @@ export default {
     contact: 'Contact',
     projects: 'Projets',
     env: 'Outils',
-    guestbook: "Livre d'or"
+    guestbook: "Livre d'or",
+    newsletter: 'Newsletter'
   },
 
   part: {

src/pages/guestbook.vue

@@ -34,7 +34,7 @@ export default defineComponent({
     const guestbook_messages = ref([])
 
     useAsync(async () => {
-      await $axios.get('/guestbook', {
+      await $axios.get('guestbook', {
         headers: {
           'Authorization': `Bearer ${process.env.API_TOKEN}`
         }

types/index.d.ts

@@ -22,7 +22,7 @@ declare module '@nuxt/types' {
     $axios: NuxtAxiosInstance,
     i18n: VueI18n & IVueI18n
     $colorMode: ColorModeInstance,
-    $app: NuxtApp,
+    app: NuxtApp,
     $storage: NuxtStorage
   }
 }