Working on oauth

src/pages/guestbook.vue

@@ -4,6 +4,37 @@ import { providers } from '~~/types'
 useHead({
   title: 'Sign my guestbook • Arthur Danjou',
 })
+
+const { loggedIn, clear , user} = useUserSession()
+
+const { data: messages, refresh } = useFetch('/api/messages', { method: 'get' })
+
+const toast = useToast()
+const messageContent = ref<string>('')
+async function sign() {
+  if (messageContent.value.length < 7 || messageContent.value.length > 58)
+    return
+
+  await $fetch('/api/message', {
+    method: 'post',
+    body: {
+      message: messageContent.value,
+    },
+  }).then(() => {
+    toast.add({
+      title: `Thank's for leaving a message!`,
+      icon: 'i-material-symbols-check-circle-outline-rounded',
+      timeout: 4000,
+    })
+  }).catch(() => {
+    toast.add({
+      title: 'An error occured when signing the book!',
+      color: 'red',
+    })
+  })
+  messageContent.value = ''
+  await refresh()
+}
 </script>
 
 <template>
@@ -20,10 +51,35 @@ useHead({
       <div class="flex items-center gap-2 mb-4">
         <UIcon name="i-ph-circle-wavy-question-bold" class="text-subtitle text-xl" />
         <h1 class="text-lg font-bold">
-          Login to sign my book
+          Want to sign my book ?
         </h1>
       </div>
-      <div class="flex gap-2">
+      <div v-if="loggedIn" class="flex items-center justify-between gap-4">
+        <div class="w-full relative flex items-center">
+          <input
+            v-model="messageContent"
+            type="text"
+            required
+            min="7"
+            max="58"
+            class="w-full rounded-lg p-2 h-10 focus:outline-none bg-gray-100 dark:bg-stone-800"
+            placeholder="Leave a message"
+          >
+          <UButton
+            class="absolute right-1 top-1 text-gray-900 dark:text-white  rounded-md"
+            label="Send"
+            :disabled="messageContent.trim().length < 7 || messageContent.trim().length > 58"
+            variant="soft"
+            @click.prevent="sign()"
+          />
+        </div>
+        <UButton
+          @click.prevent="clear()"
+        >
+          Logout
+        </UButton>
+      </div>
+      <div v-else class="flex gap-2">
         <UButton
           v-for="provider in providers"
           :key="provider.slug"
@@ -31,9 +87,37 @@ useHead({
           :color="provider.color"
           variant="solid"
           :icon="provider.icon"
+          :to="provider.link"
+          external
         />
       </div>
     </div>
+    {{ user }}
+    <div v-if="messages" class="columns-1 md:columns-2 lg:columns-4 gap-8 space-y-8">
+      <div
+        v-for="message in messages"
+        :key="message.id"
+        class="overflow-hidden sm:p-6 px-4 py-5 border border-zinc-100 p-6 dark:border-zinc-700/40 rounded-lg"
+      >
+        <p class="text-sm text-subtitle">
+          “{{ message.message }}”
+        </p>
+        <div class="flex items-center gap-4 mt-4">
+          <div class="h-8 w-8 rounded-full">
+            <NuxtImg class="w-full h-full rounded-full" :src="message.image" alt="Nature" placeholder />
+          </div>
+          <p class="font-bold">
+            {{ message.username }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div v-else class="my-4 text-subtitle">
+      <div class="flex gap-2 items-center">
+        <UIcon name="i-eos-icons-loading" />
+        <p>The messages are loading...</p>
+      </div>
+    </div>
   </section>
 </template>