various fixes and disable pdf btn

components/AltchaValidation.client.vue

@@ -14,6 +14,8 @@ import { useRuntimeConfig } from 'nuxt/app'
 
 const runtimeConfig = useRuntimeConfig()
 
+const appStore = useAppStore()
+
 const widget: Ref<HTMLElement | null> = ref(null)
 
 const emit = defineEmits(['verified'])
@@ -22,6 +24,7 @@ const onStateChange = (e: CustomEvent | Event) => {
   if ('detail' in e) {
     const { payload, state } = e.detail
     if (state === 'verified' && payload) {
+      appStore.setIsNoBot(true)
       emit('verified')
     }
   }

components/BackToTheTop.vue

@@ -38,13 +38,8 @@ const onTopIntersect = (intersect: boolean) => {
   background: rgb(var(--v-theme-primary));
   color: rgb(var(--v-theme-on-primary));
 
-  @media (max-width: 1350px) {
-    right: 5%;
-  }
-
   @media (max-width: 600px) {
     bottom: 30px;
-    right: 15%;
   }
 }
 </style>

components/Contact.vue

@@ -43,7 +43,7 @@
 
         <v-row>
           <v-col cols="12" class="captcha-container">
-            <AltchaValidation @verified="captchaVerified = true" />
+            <AltchaValidation/>
             <v-checkbox
               v-model="honeyPotChecked"
               :rules="[validateCaptcha]"
@@ -84,6 +84,7 @@
 import type { Ref } from '@vue/reactivity'
 
 const router = useRouter()
+const appStore = useAppStore()
 
 const form: Ref<HTMLElement | null> = ref(null)
 
@@ -96,7 +97,6 @@ const i18n = useI18n()
 const email: Ref<string | null> = ref(null)
 const name: Ref<string | null> = ref(null)
 const message: Ref<string | null> = ref(null)
-const captchaVerified: Ref<boolean> = ref(false)
 
 // Honeypot checkbox (if checked: it's probably a bot)
 const honeyPotChecked: Ref<boolean> = ref(false)
@@ -108,7 +108,7 @@ const validateNonEmptyMessage = (message: string | null) =>
   (!!message && message.length > 10) || i18n.t("message_must_be_valid")
 
 const validateCaptcha = () =>
-  captchaVerified.value && !honeyPotChecked.value || i18n.t("captcha_must_be_validated")
+  appStore.isNoBot && !honeyPotChecked.value || i18n.t("captcha_must_be_validated")
 
 /**
  * Submits the contact form.
@@ -171,6 +171,12 @@ const submit = async (): Promise<void> => {
 
   :deep(altcha-widget) {
     min-width: 280px;
+
+    @media (max-width: 600px) {
+      .altcha {
+        margin: 0 auto;
+      }
+    }
   }
 }
 

pages/index.vue

@@ -48,7 +48,7 @@
     </v-btn>
 
     <div class="banner-buttons">
-      <v-btn variant="outlined" @click="showDownloadPdf = true">
+      <v-btn :disabled="true || !appStore.isNoBot" variant="outlined" @click="showDownloadPdf = true">
         {{$t('download_pdf')}}
       </v-btn>
       <v-btn variant="outlined" to="#contact" :active="false">
@@ -56,8 +56,6 @@
       </v-btn>
     </div>
 
-    <AntiBotDialog v-if="showDownloadPdf"></AntiBotDialog>
-
     <h5 class="find-me-on">
       {{ $t('find_me_on')}}
     </h5>
@@ -131,6 +129,8 @@ const showLongIntro: Ref<boolean> = ref(false)
 
 const showDownloadPdf: Ref<boolean> = ref(false)
 
+const appStore = useAppStore()
+
 </script>
 
 <style scoped lang="scss">
@@ -191,6 +191,15 @@ const showDownloadPdf: Ref<boolean> = ref(false)
       border-radius: 18px;
       font-weight: 500;
     }
+
+    @media (max-width: 600px) {
+      flex-direction: column;
+      align-items: center;
+
+      .v-btn {
+        margin: 12px auto;
+      }
+    }
   }
 
   .find-me-on {

stores/appStore.ts

@@ -0,0 +1,16 @@
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', () => {
+  const isNoBot: Ref<boolean> = ref(false)
+
+  const setIsNoBot = (value: boolean) => {
+    isNoBot.value = value
+  }
+
+  return {
+    isNoBot,
+    setIsNoBot
+  }
+})