Working

2026-01-24 00:40:32 +01:00 · 2021-07-21 11:37:42 +02:00
parent 384ae25439
commit f770e5d2d1
11 changed files with 49 additions and 149 deletions
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -19,9 +19,9 @@
        <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>
        <nuxt-link class="link font-semibold" to="/contact">
          <span>{{ $t('header.contact') }}</span>,
        </nuxt-link>
--- a/src/components/GuestBookForm.vue
+++ b/src/components/GuestBookForm.vue
@@ -2,27 +2,15 @@
  <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('guestbook.signin') }}</h1>
    <h3 class="text-gray-500 dark:text-gray-400">{{ $t('guestbook.share') }}</h3>
-    <div v-if="!success && !error" class="my-3">
-      <form v-if="!success" class="relative">
-        <input
-          required
-          type="email"
-          :placeholder="$t('guestbook.form.placeholder')"
-          v-model="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="login"
-          v-if="email && email.length > 0"
-          class="button flex items-center justify-center px-8 py-1 font-bold bg-gray-100 dark:bg-gray-700 hover:dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded hover:bg-gray-300 duration-300"
-        >
-          {{ $t('guestbook.login') }}
-        </button>
-      </form>
-      <div class="flex">
-        <div v-if="error" class="py-1 text-red-400 text-sm">
-          {{ $t('guestbook.form.error') }}
-        </div>
+    <div v-if="!success && !error" class="flex space-x-4 my-3">
+      <div @click="login('google')" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
+        <GoogleIcon />
+      </div>
+      <div @click="login('github')" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
+        <GithubIcon />
+      </div>
+      <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>
    <div v-else class="my-3">
@@ -34,13 +22,13 @@
          v-model="form.message"
          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.message && form.message.length > 0"
-            class="button flex items-center justify-center px-8 py-1 font-bold bg-gray-100 dark:bg-gray-700 hover:dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded hover:bg-gray-300 duration-300"
-          >
-            {{ $t('guestbook.sign') }}
-          </button>
+        <button
+          @click.prevent="handleForm"
+          v-if="form.message && form.message.length > 0"
+          class="button flex items-center justify-center px-8 py-1 font-bold bg-gray-100 dark:bg-gray-700 hover:dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded hover:bg-gray-300 duration-300"
+        >
+          {{ $t('guestbook.sign') }}
+        </button>
      </form>
      <div class="flex">
        <div v-if="error" class="py-1 text-red-400 text-sm">
@@ -66,10 +54,11 @@ export default defineComponent({
  setup() {
    const { $axios, $sentry, app } = useContext()

-    const email = ref('')
-    const login = async () => {
-      const response = await $axios.post('/guestbook/login', {
-        email: email.value
+    const login = async (driver: 'github' | 'google' | 'twitter') => {
+      const response = await $axios.get(`/api/auth/${driver}`, {
+        headers: {
+          'Access-Control-Allow-Origin': '*'
+        }
      })
      if (response.status === 200) {
        await hasAlreadySignMessage(response.data.user.id)
@@ -84,7 +73,7 @@ export default defineComponent({
    const form = ref<GuestbookForm>({} as GuestbookForm)

    const handleForm = async () => {
-      const response = await $axios.post('/guestbook', {
+      const response = await $axios.post('/api/guestbook', {
        message: form.value.message
      },  {
        headers: {
@@ -131,8 +120,7 @@ export default defineComponent({
      error,
      alreadySent,
      handleForm,
-      hasAlreadySignMessage,
-      email
+      hasAlreadySignMessage
    }
  }
 })
--- a/src/layouts/error.vue
+++ b/src/layouts/error.vue
@@ -25,7 +25,7 @@
            </div>
          </div>
        </div>
-        <div>
+        <div class="mb-4 w-full text-center">
          <div class="home-btn" @click="next">
            <div class="cursor-pointer w-full py-4 px-4 md:py-4 md:px-4 font-bold hover:(bg-indigo-600 text-white) duration-500 rounded">
              <BackSpaceIcon class="arrow-img text-xl"/>
--- a/src/locales/en-EN.ts
+++ b/src/locales/en-EN.ts
@@ -198,11 +198,7 @@ export default {
    placeholder: 'Your message...',
    sign: 'Sign',
    error: 'Error while sending your message ❌',
-    success: 'Thank you for your message 😉',
-    form: {
-      placeholder: 'tim@apple.com',
-      error: 'Error while logging ❌',
-    }
+    success: 'Thank you for your message 😉'
  },

  newsletter: {
--- a/src/locales/fr-FR.ts
+++ b/src/locales/fr-FR.ts
@@ -198,11 +198,7 @@ export default {
    placeholder: 'Votre message...',
    sign: 'Signer',
    error: "Erreur lors de l'envoi de votre message ❌",
-    success: 'Merci pour votre message 😉',
-    form: {
-      placeholder: 'tim@apple.com',
-      error: 'Erreur lors de la connexion ❌',
-    }
+    success: 'Merci pour votre message 😉'
  },

  newsletter: {
--- a/src/pages/blog/_slug.vue
+++ b/src/pages/blog/_slug.vue
@@ -137,7 +137,7 @@ export default defineComponent({
    const likes = ref(0)

    useAsync(() => {
-      $axios.get(`/posts/${slug.value}`, {
+      $axios.get(`/api/posts/${slug.value}`, {
        headers: {
          'Authorization': `Bearer ${process.env.API_TOKEN}`
        }
@@ -151,7 +151,7 @@ export default defineComponent({

    const handleLike = async () => {
      if (liked.value) {
-        const response = await $axios.post(`/posts/${post.value?.slug}/unlike`, {}, {
+        const response = await $axios.post(`/api/posts/${post.value?.slug}/unlike`, {}, {
          headers: {
            'Authorization': `Bearer ${process.env.API_TOKEN}`
          }
@@ -165,7 +165,7 @@ export default defineComponent({
          app.error({statusCode: 500})
        }
      } else {
-        const response = await $axios.post(`/posts/${post.value?.slug}/like`, {}, {
+        const response = await $axios.post(`/api/posts/${post.value?.slug}/like`, {}, {
          headers: {
            'Authorization': `Bearer ${process.env.API_TOKEN}`
          }
--- a/src/pages/guestbook.vue
+++ b/src/pages/guestbook.vue
@@ -34,15 +34,10 @@ export default defineComponent({
    const guestbook_messages = ref([])

    useAsync(async () => {
-      await $axios.get('guestbook', {
+      await $axios.get('/api/guestbook', {
        headers: {
          'Authorization': `Bearer ${process.env.API_TOKEN}`
-        },
-        proxy: {
-          protocol: 'https',
-          host: 'https://api.arthurdanjou.fr',
-          port: 80,
-        },
+        }
      })
        .then(response => {
          guestbook_messages.value = response.data.guestbook_messages