added captcha in paymentsmodal withdraw

luckydiamond/package-lock.json

@@ -13,7 +13,8 @@
         "core-js": "^3.8.3",
         "vue": "^3.2.13",
         "vue-recaptcha": "^3.0.0-alpha.6",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "vue3-recaptcha2": "^1.8.0"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -11664,6 +11665,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vue3-recaptcha2": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/vue3-recaptcha2/-/vue3-recaptcha2-1.8.0.tgz",
+      "integrity": "sha512-lICGpLGv9wsdVjgWZ0usbZ+Ki52YX5kOzjt8l/ADun9GxdjJ5/AkGpxE7dZ+mG3VcE4ASZG2B/nYWB4wWFadvQ=="
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

luckydiamond/package.json

@@ -14,7 +14,8 @@
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
     "vue-recaptcha": "^3.0.0-alpha.6",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue3-recaptcha2": "^1.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

luckydiamond/public/index.html

@@ -25,7 +25,7 @@
     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
         Please enable it to continue.</strong>
   </noscript>
-  <div class="g-recaptcha" id="rcaptcha" data-callback="get_action" data-sitekey="6LcuUDQpAAAAAPz8007pFD2FigaSh6InnUq_MEd8"></div>
+<!--  <div class="g-recaptcha" id="rcaptcha" data-callback="get_action" data-sitekey="6LcuUDQpAAAAAPz8007pFD2FigaSh6InnUq_MEd8"></div>-->
   <div id="app"></div>
 
   <!-- built files will be auto injected -->

luckydiamond/src/components/CaptchaComponent.vue

@@ -0,0 +1,45 @@
+<template>
+  <vue-recaptcha v-show="showcaptcha" sitekey="6LcuUDQpAAAAAPz8007pFD2FigaSh6InnUq_MEd8"
+                 size="normal"
+                 theme="dark"
+                 hl="tr"
+                 :loading-timeout="loadingTimeout"
+                 @verify="recaptchaVerified"
+                 @expire="eventCloseModal"
+                 @fail="eventCloseModal"
+                 @error="eventCloseModal"
+                 ref="vueRecaptcha">
+  </vue-recaptcha>
+</template>
+
+<script>
+import vueRecaptcha from 'vue3-recaptcha2';
+
+export default {
+  name: 'app',
+  components: {
+    vueRecaptcha
+  },
+  props: {
+    showcaptcha: Boolean,
+  },
+  data() {
+    return {
+      loadingTimeout: 30000,
+      captchaToken: ''
+    }
+  },
+  methods: {
+    recaptchaVerified(vueRecaptcha) {
+      this.captchaToken = vueRecaptcha
+
+      return this.$emit('captchatokendata', this.captchaToken)
+    },
+    eventCloseModal() {
+      setTimeout(() => {
+        return this.$emit("captchadata");
+      }, 1000)
+    }
+  }
+};
+</script>

luckydiamond/src/components/PaymentsModal.vue

@@ -61,28 +61,24 @@
       <div class="count-withdraw deposit-icon-diamond">
         <h3>Сумма вывода</h3>
         <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png" />
-        <input class="with-input" v-model="amount" type="number" />
+        <input class="with-input" v-model="amountWithdraw" type="number" />
       </div>
       <div class="number-card deposit-promocode__padding--input">
         <h3>Введите номер карты</h3>
         <input class="with-input" v-model="card" type="number" />
       </div>
       <div class="withdraw-checkbox checkbox-styles">
-        <input type="checkbox" />
+        <input @click="agreeUser = !agreeUser; showRecaptcha = true" type="checkbox"/>
         <h3>Я согласен с пользовательским соглашением.</h3>
       </div>
-      <!-- <VueRecaptcha :sitekey="this.sitekey" :loadRecaptchaScript="true" @verify="validate"/> -->
+      <captcha-component @captchatokendata="claimCaptchaToken" :showcaptcha="showRecaptcha" @captchadata="closeModal"></captcha-component>
-      <!-- <vue-recaptcha ref="recaptcha"
-      @verify="onVerify" sitekey="6LcuUDQpAAAAAPz8007pFD2FigaSh6InnUq_MEd8">
-    </vue-recaptcha> -->
-    <span id="captcha" style="color:red" ></span>
       <div
         class="btn-withdraw btn-text-style btn-display-deposit btn-style-payments"
       >
         <p>
           Вы подтверждаете правильность введенных данных при создании вывода.
         </p>
-        <button type="submit" @click="RedirectedMethodTransferMoneyToSp">
+        <button type="submit" :disabled="checkOffBtn" @click="RedirectedMethodTransferMoneyToSp">
           Вывод
         </button>
         <p>
@@ -98,17 +94,22 @@
 import "@/assets/css/ComponentsStyles/payments-modal.css";
 import PaymentsModalNumbers from "@/mocks/PaymentsModalNumbers";
 import { GettingMoneyOperation } from "@/assets/js/moneyoperation/Claimmoney";
+import CaptchaComponent from "@/components/CaptchaComponent.vue";
 
 export default {
+  components: { CaptchaComponent },
   props: ["payments"],
   data() {
     return {
       amount: 0,
+      amountWithdraw: 0,
       card: 0,
+      captchaToken: '',
       clickedBtn: "",
       url: "",
       offBtn: true,
       agreeUser: false,
+      showRecaptcha: false,
       PaymentsModalNumbers,
     };
   },
@@ -129,6 +130,9 @@ export default {
         }, 2000);
       }
     },
+    amountWithdraw(newAmount) {
+      console.log(newAmount)
+    }
   },
 
   computed: {
@@ -140,6 +144,9 @@ export default {
     closeModal() {
       return this.$emit("closemodal");
     },
+    claimCaptchaToken(Token) {
+      this.captchaToken = Token
+    },
     RedirectedMethodDep() {
       console.log(`From /profile to - ${this.url} url`)
       window.location.href = this.url