save

Author: JulienChampagnol

components/Launcher.vue

@@ -8,8 +8,7 @@
         align-self="center"
         style="z-index: 1000"
       >
-        <h4 class="pb-3">Please complete the recaptcha to launch the app</h4>
-        <Recaptcha :site_key="site_key" />
+        <Recaptcha :color="'secondary'" />
       </v-col>
       <v-col v-else-if="infra_store.status == Status.CREATING">
         <Loading />

components/Recaptcha.vue

@@ -1,23 +1,68 @@
-<template>
-  <ClientOnly>
-    <vue-recaptcha
-      ref="recaptcha"
-      :sitekey="props.site_key"
-      :load-recaptcha-script="true"
-      align-self="center"
-      @expired="infra_store.is_captcha_validated = false"
-      @verify="submit_recaptcha"
-    />
-  </ClientOnly>
+<template align="center" justify="center">
+  <VRow>
+    <VCol>
+      <VForm v-model="valid">
+        <VContainer>
+          <VRow>
+            <VCol cols="12" md="4">
+              <VTextField v-model="name" label="Name" required />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VTextField
+                v-model="email"
+                :rules="emailRules"
+                label="E-mail"
+                required
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VCheckbox label="Launch the app" v-model="launch" />
+            </VCol>
+          </VRow>
+        </VContainer>
+      </VForm>
+    </VCol>
+  </VRow>
+  <VRow>
+    <VCol>
+      <VBtn
+        :text="props.button_label"
+        :color="props.button_color"
+        @click="submit_recaptcha"
+      />
+    </VCol>
+  </VRow>
 </template>
 
 <script setup>
-  import { VueRecaptcha } from "vue-recaptcha"
-  const infra_store = useInfraStore()
-
   const props = defineProps({
-    site_key: { type: String, required: true },
+    button_label: {
+      type: String,
+      required: false,
+      default: "Click to launch the app",
+    },
+    button_color: {
+      type: String,
+      required: false,
+      default: "primary",
+    },
   })
+  const infra_store = useInfraStore()
+  const name = ref("")
+  const email = ref("")
+  const launch = ref(false)
+  const emailRules = [
+    (value) => {
+      if (value) return true
+
+      return "E-mail is required."
+    },
+    (value) => {
+      if (/.+@.+\..+/.test(value)) return true
+
+      return "E-mail must be valid."
+    },
+  ]
 
   onMounted(() => {
     if (import.meta.client) {
@@ -29,15 +74,22 @@
       }
     }
   })
-  async function submit_recaptcha(token) {
-    try {
-      const response = await $fetch.raw(
-        `/.netlify/functions/recaptcha?token=${token}`,
-      )
-      infra_store.$patch({ is_captcha_validated: response.status == 200 })
-      recaptcha.reset()
-    } catch (error) {
-      console.error(error)
-    }
+  async function submit_recaptcha() {
+    $fetch(
+      `/.netlify/functions/recaptcha?name=${name.value}&email=${email.value}&launch=${launch.value}`,
+      {
+        onRequestError({ error }) {
+          console.log("onRequestError", error)
+        },
+        onResponse({ response }) {
+          if (response.ok) {
+            infra_store.$patch({
+              is_captcha_validated: response.status == 200,
+            })
+          }
+        },
+        onResponseError({ response }) {},
+      },
+    )
   }
 </script>

utils/recaptcha.js

@@ -0,0 +1,6 @@
+function check_recaptcha_params(name, email, launch) {
+  if (name !== "") return { statusCode: 500 }
+  if (email !== "") return { statusCode: 500 }
+  if (launch !== false) return { statusCode: 500 }
+  return { statusCode: 200 }
+}