Merge branch 'next' of https://github.com/Geode-solutions/OpenGeodeWeb-Front into feat/save_and_load

Author: MaxNumerique

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,74 @@
 <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>
+  <VRow align="center" justify="center" style="display: none">
+    <VCol cols="4">
+      <VForm v-model="valid">
+        <VContainer>
+          <VRow>
+            <VCol>
+              <VTextField v-model="name" label="Name" required />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol>
+              <VTextField
+                v-model="email"
+                :rules="emailRules"
+                label="E-mail"
+                required
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol>
+              <VCheckbox label="Launch the app" v-model="launch" />
+            </VCol>
+          </VRow>
+        </VContainer>
+      </VForm>
+    </VCol>
+  </VRow>
+  <VRow align="center" justify="center">
+    <VCol cols="4" class="d-flex justify-center align-center">
+      <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: "Launch the app",
+    },
+    button_color: {
+      type: String,
+      required: false,
+      default: "white",
+    },
   })
+  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 +80,18 @@
       }
     }
   })
-  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)
-    }
+  function submit_recaptcha() {
+    $fetch(
+      `/.netlify/functions/recaptcha?name=${name.value}&email=${email.value}&launch=${launch.value}`,
+      {
+        onResponse({ response }) {
+          if (response.ok) {
+            infra_store.$patch({
+              is_captcha_validated: response.status === 200,
+            })
+          }
+        },
+      },
+    )
   }
 </script>

package.json

@@ -60,7 +60,6 @@
     "sass": "1.87.0",
     "semver": "7.7.1",
     "uuid": "11.1.0",
-    "vue-recaptcha": "2.0.3",
     "vue3-carousel": "0.3.4",
     "vuetify": "3.8.12",
     "ws": "8.18.3",

tests/integration/microservices/viewer/requirements.txt

@@ -5,3 +5,4 @@
 #    pip-compile --output-file=tests/integration/microservices/viewer/requirements.txt tests/integration/microservices/viewer/requirements.in
 #
 
+opengeodeweb-viewer==1.*,>=1.11.9rc1

tests/unit/utils/recaptcha.nuxt.test.js

@@ -0,0 +1,40 @@
+// Third party imports
+import { describe, expect, test } from "vitest"
+
+// Local imports
+import { check_recaptcha_params } from "~/utils/recaptcha.js"
+
+describe("recaptcha.js", () => {
+  const name = ""
+  const email = ""
+  const launch = false
+  const internal_error = 500
+  const success = 200
+
+  describe("wrong params", () => {
+    test("name", () => {
+      const name = "test"
+      const result = check_recaptcha_params(name, email, launch)
+      expect(result.status).toBe(internal_error)
+    })
+
+    test("email", () => {
+      const email = "test"
+      const result = check_recaptcha_params(name, email, launch)
+      expect(result.status).toBe(internal_error)
+    })
+
+    test("launch", () => {
+      const launch = true
+      const result = check_recaptcha_params(name, email, launch)
+      expect(result.status).toBe(internal_error)
+    })
+  })
+
+  describe("right params", () => {
+    test("name", () => {
+      const result = check_recaptcha_params(name, email, launch)
+      expect(result.status).toBe(success)
+    })
+  })
+})

utils/recaptcha.js

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