From 70b2b9b1fccdb4febc9061833f850ba72cffe676 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Sun, 29 Nov 2020 16:00:54 +0100
Subject: [PATCH] contact page

---
 src/components/Service.vue         |  49 ---------
 src/components/Skill.vue           |   4 +-
 src/components/WorkSkill.vue       |   2 +-
 src/templates/pages/about.vue      |   2 +-
 src/templates/pages/blog/index.vue |  10 +-
 src/templates/pages/contact.vue    | 165 ++++++++++++++++-------------
 src/templates/pages/work/index.vue |   5 +-
 7 files changed, 103 insertions(+), 134 deletions(-)
 delete mode 100644 src/components/Service.vue

diff --git a/src/components/Service.vue b/src/components/Service.vue
deleted file mode 100644
index 7550589..0000000
--- a/src/components/Service.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <div class="w-72 h-80 border-2 border-black border-solid rounded-xl">
-    <div class="flex flex-col items-center my-3 border-b-2 border-black border-solid">
-      <img width="85" :src="'http://localhost:5555/files/' + cover" alt="Service Img"/>
-      <h1 class="items-center flex h-16 text-xl font-bold mx-4">
-        {{ title }}
-      </h1>
-    </div>
-    <div class="h-auto">
-      {{description }}
-    </div>
-    <div class="h-auto">
-      {{ price }}
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Service",
-  props: {
-    title: {
-      default: 'Title',
-      type: String
-    },
-    description: {
-      default: 'Description',
-      type: String
-    },
-    cover: {
-      default: 'default.png',
-      type: String
-    },
-    price: {
-      default: 0,
-      type: String
-    }
-  },
-  computed: {
-    hasPrice() {
-      return this.price !== '0'
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/Skill.vue b/src/components/Skill.vue
index 0e07f09..cf3ca6c 100644
--- a/src/components/Skill.vue
+++ b/src/components/Skill.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
+  <div class="mb-3 mr-3 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
-        <img alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
+        <img class="rounded-full" alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
       </div>
       <h1 class="md:text-xl text-lg font-bold text-center">{{ $t(skill) }}</h1>
     </div>
diff --git a/src/components/WorkSkill.vue b/src/components/WorkSkill.vue
index 066cc1e..b85f6b2 100644
--- a/src/components/WorkSkill.vue
+++ b/src/components/WorkSkill.vue
@@ -2,7 +2,7 @@
   <div class="m-4 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
-        <img alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
+        <img class="rounded-full" alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
       </div>
       <h1 class="md:text-2xl text-lg font-bold">{{ $t(skill) }}</h1>
     </div>
diff --git a/src/templates/pages/about.vue b/src/templates/pages/about.vue
index f1840ea..018d0ce 100644
--- a/src/templates/pages/about.vue
+++ b/src/templates/pages/about.vue
@@ -37,7 +37,7 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
         </svg>
       </h3>
-      <div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden space-x-4">
+      <div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden md:flex-wrap space-x-4 md:space-x-0 md:justify-start">
         <div v-for="skill in skills">
           <Skill
             :skill="skill.title.code"
diff --git a/src/templates/pages/blog/index.vue b/src/templates/pages/blog/index.vue
index 5d9b954..cddc2c8 100644
--- a/src/templates/pages/blog/index.vue
+++ b/src/templates/pages/blog/index.vue
@@ -8,14 +8,17 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
       </svg>
     </PageTitle>
-    <div>
+    <h1 v-if="posts.length === 0" class="text-xl font-bold text-center my-8 w-full">
+      Malheureusement il n'y a pas encore d'articles disponibles. Reviens plus tard 😉
+    </h1>
+    <div v-else>
       <!-- TODO
       Insert research by tags
       Insert see more
       -->
     </div>
     <div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2">
-      <div v-if="posts.size !== 0" class="w-full" v-for="post in posts">
+      <div class="w-full" v-for="post in posts">
         <nuxt-link :to="'/blog/' + post.id">
           <Post
             :title="post.title.code"
@@ -29,9 +32,6 @@
           />
         </nuxt-link>
       </div>
-      <div v-else class="w-full">
-        Pas de blogs !
-      </div>
     </div>
   </main>
 </template>
diff --git a/src/templates/pages/contact.vue b/src/templates/pages/contact.vue
index 69abe34..ee7ee7b 100644
--- a/src/templates/pages/contact.vue
+++ b/src/templates/pages/contact.vue
@@ -9,105 +9,120 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
       </svg>
     </PageTitle>
-    <div class="flex flex-col items-center text-center py-10 w-full">
-      <h1 class="text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900 mb-8">
-        Vous voulez collaborer avec moi ? Voici mes différentes offres !
+    <div class="w-full lg:w-3/4 mb-10 mt-4">
+      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
+        Software & Tech Newsletter
       </h1>
-      <div class="flex flex-row w-full overflow-x-auto space-x-4 mb-6">
-        <!-- Todo Insert Services -->
-        <Service
-          title="Développement d'application"
-          cover="Logo.jpg"
-          price="0"
-        />
-        <Service
-          title="Maintenance Linux"
-          cover="Logo.jpg"
-          price="120"
-        />
-        <Service
-          title="Conseil en développement"
-          cover="Logo.jpg"
-          price="0"
-        />
-      </div>
-      <div class="flex flex-col items-center w-full md:w-2/3">
-        <h1 class="text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
-          Software & Tech Newsletter
-        </h1>
-        <h3 class="text-lg md:text-xl">
-          Abonnez vous pour ne pas louper mes prochaines offres, mes prochains articles et mes nouveaux projets.
-          <span class="font-bold self-start">Pas de spam. Désabonnement quand vous voulez</span>
-        </h3>
-        <form class="flex flex-col lg:flex-row my-4 w-full">
-          <div class="mb-3 mr-4 w-full md:w-auto">
-            <input class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg" type="text" placeholder="Prénom" required id="name"/>
+      <h3 class="text-md md:text-lg">
+        Abonnez vous pour ne pas louper mes prochaines offres, mes prochains articles et mes nouveaux projets. <br>
+        <span class="font-bold self-start">Pas de spam. Désabonnement quand vous voulez</span>
+      </h3>
+      <form class="flex flex-col lg:flex-row mt-4 w-full">
+        <div class="flex flex-col lg:flex-row">
+          <div class="mb-3 lg:mr-4 w-full md:w-auto">
+            <input v-model="form.name" class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg" type="text" placeholder="Prénom" required id="name"/>
           </div>
-          <div class="mb-3 mr-4 w-full md:w-auto">
-            <input class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg" type="email" placeholder="Adresse Mail" required id="email"/>
-          </div>
-          <div class="mb-3 self-center">
-            <button class="dark:text-black font-bold px-3 py-2 bg-purple-400 hover:bg-purple-500 cursor-pointer duration-300 rounded-lg btn">
-              S'abonner
-              <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-              </svg>
-            </button>
-          </div>
-        </form>
-      </div>
-      <div class="flex flex-col items-start w-full md:w-2/3">
-        <h1 class="self-center text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
-          Comment me contacter ?
-        </h1>
-        <h3 class="text-lg md:text-xl">
-          N'hésitez pas à nous contacter si vous avez des questions, pensez que nous pourrions travailler ensemble ou si vous souhaitez simplement vous connecter ✌️
-        </h3>
-        <div>
-          <div class="my-4 email text-lg duration-300 text-purple-500 hover:text-purple-700 cursor-pointer flex">
-            <a class="mr-2" href="mailto:contact@arthurdanjou.fr?subject=Please enter here your project name">
-              contact@arthurdanjou.fr
-            </a>
-            <div class="arrow duration-300">
-              <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
-              </svg>
-            </div>
-          </div>
-          <div>
-            Statut Freelance : <span class="py-1 px-2 font-bold rounded-full" :class="'bg-' +hiringColor+ '-300 text-' +hiringColor+ '-500'">{{$t(hiringStatus.code)}}</span>
+          <div class="mb-3 lg:mr-4 w-full md:w-auto">
+            <input v-model="form.email" class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg" type="email" placeholder="Adresse Mail" required id="email"/>
           </div>
         </div>
-        <!-- Insert Form -->
+        <div class="mb-3 self-center">
+          <button @click.prevent="handleForm" class="dark:text-black font-bold px-3 py-2 bg-purple-400 hover:bg-purple-500 cursor-pointer duration-300 rounded-lg btn">
+            S'abonner
+            <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+            </svg>
+          </button>
+        </div>
+      </form>
+      <div v-if="error" class="flex">
+        <div class="rounded-xl px-3 py-2 bg-red-300 font-bold ">
+          Erreur dans le formulaire !
+        </div>
+      </div>
+      <div v-if="success" class="flex">
+        <div class="rounded-xl px-3 py-2 bg-green-300 font-bold ">
+          Inscription confirmée pour {{ form.email }} !
+        </div>
+      </div>
+    </div>
+    <div class="w-full lg:w-3/4 mb-10 mt-4">
+      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
+        Comment me contacter ?
+      </h1>
+      <h3 class="text-md md:text-lg">
+        N'hésitez pas à me contacter si vous avez des questions, pensez que nous pourrions travailler ensemble ou si vous souhaitez simplement vous discuter ✌️
+      </h3>
+      <div class="mt-4 email text-lg duration-300 text-purple-500 hover:text-purple-700 cursor-pointer flex">
+        <a class="mr-2" href="mailto:contact@arthurdanjou.fr?subject=Please enter here your project name">
+          contact@arthurdanjou.fr
+        </a>
+        <div class="arrow duration-300">
+          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div class="w-full lg:w-3/4 mb-10 mt-4">
+      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
+        Suis-je disponible ?
+      </h1>
+      <h3 class="text-lg md:text-lg">
+        Ce status sera mis à jour en temps réel pour vous indiquer si je suis disponible pour du travail.
+      </h3>
+      <div class="my-4 text-purple-500">
+        Je suis actuellement <span class="py-1 px-2 font-bold rounded-xl" :class="'bg-' +hiringColor+ '-300 text-' +hiringColor+ '-500'">{{$t(hiringStatus.code)}}</span> pour du travail.
       </div>
     </div>
-    <!--
-    TODO Newsletter + Services + Formulaire de contact
-    -->
   </main>
 </template>
 
 <script>
 import PageTitle from "~/components/PageTitle";
-import Service from "~/components/Service";
 export default {
   name: "contact",
-  components: {Service, PageTitle},
+  components: {PageTitle},
   data () {
     return {
-      services: [],
       hiringStatus: '',
-      hiringColor: ''
+      hiringColor: '',
+      form: {
+        name: '',
+        email: ''
+      },
+      success: false,
+      error: false
     }
   },
   async asyncData({ $axios }) {
-    const {data: services} = await $axios.get('/services')
     const {data: me} = await $axios.get('/me')
     return {
-      services,
       hiringStatus: me.hiringStatus,
       hiringColor: me.hiring_color
     }
+  },
+  methods: {
+    async handleForm () {
+      await this.$axios.post('/subscribers',
+        {
+          email: this.form.email,
+          name: this.form.name
+        })
+        .then(() => {
+          this.success = true
+          setTimeout(() => {
+            this.success = false
+            this.form.email = ''
+            this.form.name = ''
+          }, 5000)
+        }).catch(() => {
+          this.error = true
+          setTimeout(() => {
+            this.error = false
+          }, 5000)
+        })
+    }
   }
 }
 </script>
diff --git a/src/templates/pages/work/index.vue b/src/templates/pages/work/index.vue
index 8d62191..dcfe15b 100644
--- a/src/templates/pages/work/index.vue
+++ b/src/templates/pages/work/index.vue
@@ -8,7 +8,10 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
       </svg>
     </PageTitle>
-    <div class="flex flex-col justify-around items-center py-10 w-full">
+    <h1 v-if="works.length === 0" class="text-xl font-bold text-center my-8 w-full">
+      Malheureusement il n'y a pas encore de projets disponibles. Reviens plus tard 😉
+    </h1>
+    <div v-else class="flex flex-col justify-around items-center py-10 w-full">
       <h1 class="text-xl font-bold text-center mb-8">
         Voici les différents projets auxquels j'ai pu participer dans mon passé !
       </h1>