Merge pull request #6 from Geode-solutions/fix_component_names

add vue-recaptcha

components/Header.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-container>
+    <h1 class="text-h2 py-2" align="center">
+      {{ tool_name }}
+    </h1>
+    <v-col>
+      <v-row class="justify-center">
+        <v-col v-for="(card, i) in cards_list" :key="i" cols="11" md="5">
+          <v-card class="card" hover elevation="5" :href="card.href" rounded target="_blank">
+            <v-card-title primary-title class="justify-center text-h6" align="center">
+              {{ card.title }}
+            </v-card-title>
+            <v-row class="justify-center pa-2">
+              <v-col cols="auto">
+                <v-icon :icon="card.icon" color="primary" size="70" class="justify-center" />
+              </v-col>
+            </v-row>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-container>
+</template>
+
+<script setup>
+const props = defineProps({
+  tool_name: { type: String, required: true },
+  cards_list: { type: Object, required: true }
+})
+</script>

components/Launcher.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-container justify="space-around">
+    <v-row align-content="center" align="center">
+      <v-col v-if="!is_captcha_validated" cols="12" align-self="center" align="center">
+        <h4 class="pb-3">
+          Please complete the recaptcha to launch the app
+        </h4>
+        <vue-recaptcha ref="recaptcha" :sitekey="config.public.SITE_KEY" :loadRecaptchaScript="true"
+          @expired="is_captcha_validated = false" @verify="submit_recaptcha" align-self="center" />
+      </v-col>
+      <v-col v-if="!is_cloud_running && is_connexion_launched">
+        <Loading />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+import { VueRecaptcha } from "vue-recaptcha"
+
+const ws_link_store = use_ws_link_store()
+const cloud_store = use_cloud_store()
+const { is_cloud_running, is_captcha_validated, is_connexion_launched } = storeToRefs(cloud_store)
+
+watch(is_captcha_validated, async (value) => {
+  if (value === true) {
+    await cloud_store.create_connexion()
+    await ws_link_store.ws_connect()
+  }
+})
+
+watch(is_cloud_running, (value, oldValue) => {
+  if (value === false && oldValue == true) {
+    cloud_store.$patch({ internal_error: true })
+  }
+})
+
+onMounted(() => {
+  if (process.client) {
+    const config = useRuntimeConfig()
+    if (config.public.NODE_ENV !== 'production') {
+      cloud_store.$patch({ is_captcha_validated: true })
+    }
+  }
+})
+
+async function submit_recaptcha (token) {
+  try {
+    const config = useRuntimeConfig()
+    const response = await $fetch.raw(`${config.public.SITE_URL}/.netlify/functions/recaptcha?token=${token}`)
+    cloud_store.$patch({ is_captcha_validated: response.status == 200 })
+    recaptcha.reset()
+  } catch (error) {
+  }
+}
+</script>

components/Loading.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-row justify="center">
+    <v-col cols="12" class="ma-3">
+      <v-card class="card" loading elevation="5">
+        <v-card-title class="text-center">
+          Cloud instance is starting...
+        </v-card-title>
+        <v-card-subtitle class="text-center">
+          Why do you have to wait?
+        </v-card-subtitle>
+        <v-card-text class="text-center">
+          We start our server only on demand... and this takes a few minutes before
+          you can use our free app.
+          <br>
+          This is aligned with an energy sobriety strategy. So be patient
+          <v-icon color="primary" size="20">
+            mdi-emoticon-excited-outline
+          </v-icon>
+          <br>
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>

components/Stepper.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card class="card">
     <div v-for="(step, index) in steps" :key="index" class="pa-3">
-      <ToolsStep :step_index="index" />
+      <Step :step_index="index" />
     </div>
   </v-card>
 </template>

components/Wrapper.vue

@@ -2,16 +2,16 @@
   <v-container>
     <v-row class="flex-column">
       <v-col>
-        <ToolsHeader :tool_name="tool_name" :cards_list="cards_list" />
+        <Header :tool_name="tool_name" :cards_list="cards_list" />
       </v-col>
       <v-col v-if="!is_cloud_running">
-        <ToolsLauncher />
+        <Launcher />
       </v-col>
       <v-col v-if="is_cloud_running">
-        <ToolsStepper />
+        <Stepper />
       </v-col>
       <v-col v-if="is_cloud_running">
-        <ToolsPackagesVersions :route_prefix="route_prefix" />
+        <PackagesVersions :route_prefix="route_prefix" />
       </v-col>
     </v-row>
   </v-container>

package.json

@@ -15,17 +15,18 @@
   },
   "description": "OpenSource Vue/Vuetify framework for web applications",
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "./nuxt.config.js",
   "dependencies": {
     "@mdi/font": "^7.2.96",
     "@pinia/nuxt": "^0.4.11",
-    "@types/node": "^20.4.9",
+    "@types/node": "^20.5.0",
     "@vueuse/core": "^10.3.0",
     "pinia": "^2.1.6",
     "semver": "^7.5.4",
     "sass": "^1.65.1",
-    "vuetify": "^3.3.12"
+    "vuetify": "^3.3.13",
+    "vue-recaptcha": "^2.0.3"
   },
   "repository": {
     "type": "git",