Update ContactForm and add GuestBookForm

src/components/ContactForm.vue

@@ -52,10 +52,10 @@
         <label for="content" class="form-label">{{ $t('contact.form.content') }}</label>
       </div>
     </form>
-    <div v-if="error" class="mt-4 px-3 py-1 rounded-full bg-red-300 font-bold text-black">
+    <div v-if="error" class="mt-2 py-1 text-red-400 text-sm">
       {{ $t('contact.form.error') }}
     </div>
-    <div v-if="success" class="mt-4 px-3 py-1 rounded-full bg-green-300 font-bold text-black">
+    <div v-if="success" class="mt-2 py-1 text-green-400 text-sm">
       {{ $t('contact.form.success') }}
     </div>
     <div class="my-12 flex justify-center">

src/components/GuestBookLogin.vue

@@ -2,7 +2,7 @@
   <section class="p-6 border border-indigo-300 dark:border-indigo-700 rounded-lg text-justify">
     <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 class="hidden 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">
         <GoogleIcon />
       </div>
@@ -13,54 +13,102 @@
         <TwitterIcon />
       </div>
     </div>
+    <div class="my-3">
+      <form v-if="!success" class="relative">
+        <input
+          required
+          :placeholder="$t('guestbook.placeholder')"
+          v-model="form.message"
+          class="pl-4 pr-32 py-2 mt-1 focus:border-indigo-600 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.message && form.message.length > 0"
+            class="flex items-center justify-center absolute right-1 top-1 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 hover:dark:bg-gray-700 duration-300"
+          >
+            {{ $t('guestbook.sign') }}
+          </button>
+      </form>
+      <div class="flex">
+        <div v-if="error" class="py-1 text-red-400 text-sm">
+          {{ $t('guestbook.error') }}
+        </div>
+      </div>
+      <div class="flex">
+        <div v-if="success" class="py-1 text-green-400 text-sm">
+          {{ $t('guestbook.success') }}
+        </div>
+      </div>
+    </div>
     <p class="text-sm text-gray-700 dark:text-gray-300">{{ $t('guestbook.infos') }}</p>
   </section>
 </template>
 
 <script lang="ts">
-import {defineComponent, useContext} from "@nuxtjs/composition-api";
+import {defineComponent, ref, useContext} from "@nuxtjs/composition-api";
+import {GuestbookForm} from "~/types/types";
 
 export default defineComponent({
   name: "GuestBookLogin",
   setup() {
-    const { $axios } = useContext()
+    const { $axios, $sentry } = useContext()
 
     const headers = {
-      'Access-Control-Allow-Origin': 'https://dev.arthurdanjou.fr',
+      'Access-Control-Allow-Origin': 'https://arthurdanjou.fr',
-      'Content-Type': 'application/json',
+      'Content-Type': 'application/json'
-      'Authorization': `Bearer ${process.env.API_TOKEN}`
     }
 
     const loginWithGithub = () => {
       $axios.get('/auth/github', {headers})
-        .then((response) => {
-          console.log(response)
-        })
     }
 
     const loginWithGoogle = () => {
       return $axios.get('/auth/google', {headers})
-        .then((response) => {
-        console.log(response)
-      })
     }
 
     const loginWithTwitter = () => {
-      return $axios.get('/auth/twitter', {headers})
+      $axios.get('/auth/twitter', {headers})
-        .then((response) => {
+    }
-        console.log(response)
+
+    const error = ref(false)
+    const success = ref(false)
+    const form = ref<GuestbookForm>({} as GuestbookForm)
+
+    const handleForm = async () => {
+      const response = await $axios.post('/guestbook', {
+        message: form.value.message
+      },  {
+        headers: {
+          'Authorization': `Bearer ${process.env.API_TOKEN}`
+        }
       })
+      if (response.status === 200) {
+        form.value.message = ''
+        success.value = true
+      } else {
+        console.log(response.data)
+        error.value = true
+        setTimeout(() => {
+          error.value = false
+        }, 5000)
+      }
     }
 
     return  {
       loginWithGithub,
       loginWithTwitter,
-      loginWithGoogle
+      loginWithGoogle,
+      form,
+      success,
+      error,
+      handleForm
     }
   }
 })
 </script>
 
 <style scoped>
-
+.disabled {
+  @apply hidden
+}
 </style>

src/components/GuestbookMessage.vue

@@ -45,9 +45,11 @@ export default defineComponent({
 
     const formatDateAndTime = computed(() => {
       const date = new Date(props.date)
-      const month = date.getMonth().toString().startsWith('0') ? date.getMonth() : `0${date.getMonth()}`
+      const realMonth = date.getMonth()+1
-      const minutes = date.getMinutes().toString().startsWith('0') ? date.getMinutes() : `0${date.getMinutes()}`
+      const month = realMonth.toString().length == 2 ? realMonth.toString() : `0${realMonth.toString()}`
-      return `${date.getDate()} ${i18n.t(`month.${month}`)} ${date.getFullYear()} at ${date.getHours()}:${minutes}`
+      const minutes = date.getMinutes().toString().length == 2 ? date.getMinutes() : `0${date.getMinutes()}`
+      const hours = date.getHours().toString().length == 2 ? date.getHours() : `0${date.getHours()}`
+      return `${date.getDate()} ${i18n.t(`month.${month}`)} ${date.getFullYear()} at ${hours}:${minutes}`
     })
 
     return {

src/locales/en-EN.ts

@@ -172,8 +172,8 @@ export default {
       subject: 'Why are you contacting me?',
       content: 'Tell me about your project',
       submit: 'Submit',
-      error: 'Error in the form!',
+      error: 'Error while sending the form ❌',
-      success: 'Form successfully sent!'
+      success: 'Thank you for your message 😉'
     },
     why: {
       title: 'Why contact me ? 📩',
@@ -192,7 +192,11 @@ export default {
     signin: "Sign the guestbook",
     share: 'Share a message to future visitors to this site.',
     login: 'Login',
-    infos: 'Your information is only used to display your name and reply by email.'
+    infos: 'Your information is only used to display your name and reply by email.',
+    placeholder: 'Your message...',
+    sign: 'Sign',
+    error: 'Error while sending your message ❌',
+    success: 'Thank you for your message 😉'
   },
 
   date: {

src/locales/fr-FR.ts

@@ -172,8 +172,8 @@ export default {
       subject: 'Pourquoi me contactez-vous ?',
       content: 'Racontez moi votre projet',
       submit: 'Envoyer',
-      error: 'Erreur dans le formulaire !',
+      error: "Erreur lors de l'envoi du formulaire ❌",
-      success: 'Formulaire envoyé avec succès !'
+      success: 'Merci pour votre message 😉'
     },
     why: {
       title: 'Pourquoi me contacter ? 📩',
@@ -192,7 +192,11 @@ export default {
     signin: "Signer le livre d'or",
     share: 'Partagez un message aux futurs visiteurs de ce site.',
     login: 'Connexion',
-    infos: 'Vos informations ne sont utilisées que pour afficher votre nom et répondre par e-mail.'
+    infos: 'Vos informations ne sont utilisées que pour afficher votre nom et répondre par e-mail.',
+    placeholder: 'Votre message...',
+    sign: 'Signer',
+    error: "Erreur lors de l'envoi de votre message ❌",
+    success: 'Merci pour votre message 😉'
   },
 
   date: {

types/types.ts

@@ -61,4 +61,8 @@ interface Project {
   tags: Array<Tag>,
 }
 
-export { Form, InfoData, Skill, Experience, Formation, Post, Tag, Project }
+interface GuestbookForm {
+  message: string
+}
+
+export { Form, InfoData, Skill, Experience, Formation, Post, Tag, Project, GuestbookForm }