Merge pull request #10 from gnolang/fix/captcha-links

fix: captcha links

Author: alexiscolin

.env-example

@@ -5,7 +5,7 @@
     ref="DOMpopup"
     class="popup fixed flex flex-col items-center rounded w-[90vw] max-w-[36rem] bg-grey-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1000] justify-center text-grey-50 before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:rounded before:bg-500 before:z-min after:absolute after:top-px after:left-px after:bottom-px after:right-px after:bg-grey-500 after:rounded after:z-min"
   >
-    <div ref="DOMFaucetRequest" class="py-12 px-20 w-full">
+    <div ref="DOMFaucetRequest" class="py-12 px-20 w-full" v-if="store.isVisible">
       <FaucetContentForm :name="store.selectedFaucet.name ?? 'Faucet'" :options="store.faucetAmount" v-show="store.contentStep === 0" class="js-faucetform opacity-100" :error="error" @requestFaucet="requestFaucet" />
       <div>
         <div ref="gnoRequestLogo" v-show="store.contentStep >= 1" class="opacity-0">

src/components/faucet/FaucetDetail.vue

@@ -4,7 +4,7 @@
     <form class="w-full space-y-12" @submit.prevent="requestFaucet">
       <Input :label="'Enter your wallet address'" :placeholder="'e.g. g1juwee0ynsdvaukvxk3j5s4cl6nn24uxwlydxrl'" v-model="bindAddress" required />
       <Select v-if="store.selectedFaucet.amounts" :label="'Select faucet amount'" :options="options" @update="(option) => SelectAmount(option)" />
-      <Recaptcha @validation="captchaValidation" />
+      <Recaptcha @validation="captchaValidation" :captchakey="store.selectedFaucet.recaptcha" />
       <div>
         <div class="flex gap-4">
           <Button text="Cancel" variant="outline" @click.prevent="() => closePopup()" class="w-full" />

src/components/faucet/content/FaucetContentForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="p-4 rounded border border-light ease-in-out duration-300" :class="[css[variant], disabled && ['!bg-grey-100 !border-grey-100 hover:bg-grey-100 hover:!border-grey-100 hover:cursor-not-allowed']]">{{ text }} {{ disabled }}</button>
+  <button class="p-4 rounded border border-light ease-in-out duration-300" :class="[css[variant], disabled && ['!bg-grey-100 !border-grey-100 hover:bg-grey-100 hover:!border-grey-100 hover:cursor-not-allowed']]">{{ text }}</button>
 </template>
 
 <script setup lang="ts">

src/components/ui/Button.vue

@@ -1,11 +1,14 @@
 <template>
-  <vue-recaptcha theme="dark" :sitekey="siteKey" @verify="handleSuccess" @error="handleError"></vue-recaptcha>
+  <vue-recaptcha theme="dark" :sitekey="captchakey" @verify="handleSuccess" @error="handleError"></vue-recaptcha>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted } from 'vue'
 
-const siteKey = ref(import.meta.env.VITE_reCAPTCHA_SITE_KEY ?? '')
+type Props = {
+  captchakey: string
+}
+defineProps<Props>()
 
 const emit = defineEmits(['validation'])
 

src/components/ui/Recaptcha.vue

@@ -14,6 +14,7 @@ export const useFaucetDetail = defineStore('faucetDetail', {
       title: null as HTMLElement | null,
     },
     isOpen: false,
+    isVisible: false,
     contentStep: 0,
     status: 'null' as RequestStatus,
     selectedFaucet: {} as Faucet,
@@ -50,6 +51,7 @@ export const useFaucetDetail = defineStore('faucetDetail', {
 
     popupToggle() {
       this.isOpen = !this.isOpen
+      if (this.isOpen) this.isVisible = true
 
       this.titleToggle()
 
@@ -75,7 +77,10 @@ export const useFaucetDetail = defineStore('faucetDetail', {
         duration: 0.6,
         delay: this.isOpen ? 0.4 : 0,
         onComplete: () => {
-          if (!this.isOpen) this.contentStep = 0
+          if (!this.isOpen) {
+            this.contentStep = 0
+            this.isVisible = false
+          }
           this.status = 'null'
         },
       })