add test captcha

luckydiamond/package.json

@@ -13,6 +13,7 @@
     "bootstrap": "^5.3.2",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
+    "vue-recaptcha": "^3.0.0-alpha.6",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {

luckydiamond/public/index.html

@@ -25,8 +25,30 @@
     <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 id="app"></div>
+
   <!-- built files will be auto injected -->
 </body>
+<script src='https://www.google.com/recaptcha/api.js'></script>
+<script>
+
+  function get_action(form) {
+    var v = grecaptcha.getResponse();
+    console.log(v);
+    if (v.length == 0) {
+      document.getElementById('captcha').innerHTML = "You can't leave Captcha Code empty";
+
+
+      return false;
+    }
+    else {
+
+      document.getElementById('captcha').innerHTML = "Captcha completed";
+      return true;
+    }
+  }
+
+</script>
 
 </html>

luckydiamond/src/components/PaymentsModal.vue

@@ -1,123 +1,166 @@
 <template>
   <div class="payment-modal">
     <div class="payments-modal__content close-modal__icon text-styles__margin">
-      <h1>{{ payments ? 'Пополнить' : 'Вывод' }}</h1>
+      <h1>{{ payments ? "Пополнить" : "Вывод" }}</h1>
-      <img @click="closeModal" src="@/assets/icons-other/icon-payments-modal-close.svg">
+      <img
+        @click="closeModal"
+        src="@/assets/icons-other/icon-payments-modal-close.svg"
+      />
     </div>
     <div v-if="payments" class="payments-modal__deposit">
-      <div class="deposit-input deposit-text deposit-icon-diamond deposit-icon__input">
+      <div
+        class="deposit-input deposit-text deposit-icon-diamond deposit-icon__input"
+      >
         <h3>Сумма пополнения</h3>
-        <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
+        <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png" />
-        <input class="deposit-amount__input" v-model="amount" type="number">
+        <input class="deposit-amount__input" v-model="amount" type="number" />
         <div class="deposit-btns">
           <ul class="display-btns btns-style-diamonds">
             <li v-for="number in PaymentsModalNumbers" :key="number">
-              <button @click="clickedBtnChoice(number, number.diamonds)" :class="{ 'btn-click': clickedBtn === number, [number]: clickedBtn === number }">{{ number.diamonds }}</button>
+              <button
+                @click="clickedBtnChoice(number, number.diamonds)"
+                :class="{
+                  'btn-click': clickedBtn === number,
+                  [number]: clickedBtn === number,
+                }"
+              >
+                {{ number.diamonds }}
+              </button>
             </li>
           </ul>
         </div>
         <div class="deposit-promocode deposit-promocode__padding--input">
           <h3>Промокод</h3>
-          <input class="promo-input" type="text">
+          <input class="promo-input" type="text" />
         </div>
         <div class="deposit-checkbox checkbox-styles">
-          <input @click="agreeUser = !agreeUser" type="checkbox">
+          <input @click="agreeUser = !agreeUser" type="checkbox" />
           <h3>Я согласен с пользовательским соглашением.</h3>
         </div>
-        <div class="btn-deposit btn-text-style btn-display-deposit btn-style-payments">
+        <div
-          <p>Вы подтверждаете правильность введенных данных при создании вывода.</p>
+          class="btn-deposit btn-text-style btn-display-deposit btn-style-payments"
-          <button type="submit" :disabled="checkOffBtn" @click="RedirectedMethodDep">Пополнить</button>
+        >
-          <p>Перед пополнение прочитайте политику конфиденциальности и пользовательское соглашение.</p>
+          <p>
+            Вы подтверждаете правильность введенных данных при создании вывода.
+          </p>
+          <button
+            type="submit"
+            :disabled="checkOffBtn"
+            @click="RedirectedMethodDep"
+          >
+            Пополнить
+          </button>
+          <p>
+            Перед пополнение прочитайте политику конфиденциальности и
+            пользовательское соглашение.
+          </p>
         </div>
       </div>
     </div>
     <div v-else class="payments-modal__withdraw deposit-text withdraw-input">
       <div class="count-withdraw deposit-icon-diamond">
         <h3>Сумма вывода</h3>
-        <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
+        <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="amount" type="number" />
       </div>
       <div class="number-card deposit-promocode__padding--input">
         <h3>Введите номер карты</h3>
-        <input class="with-input" v-model="card" type="number">
+        <input class="with-input" v-model="card" type="number" />
       </div>
       <div class="withdraw-checkbox checkbox-styles">
-        <input type="checkbox">
+        <input type="checkbox" />
         <h3>Я согласен с пользовательским соглашением.</h3>
       </div>
-      <div class="btn-withdraw btn-text-style btn-display-deposit btn-style-payments">
+      <!-- <VueRecaptcha :sitekey="this.sitekey" :loadRecaptchaScript="true" @verify="validate"/> -->
-        <p>Вы подтверждаете правильность введенных данных при создании вывода.</p>
+      <!-- <vue-recaptcha ref="recaptcha"
-        <button type="submit">Вывод</button>
+      @verify="onVerify" sitekey="6LcuUDQpAAAAAPz8007pFD2FigaSh6InnUq_MEd8">
-        <p>Перед выводом прочитайте политику конфиденциальности и пользовательское соглашение.</p>
+    </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>
+        <p>
+          Перед выводом прочитайте политику конфиденциальности и
+          пользовательское соглашение.
+        </p>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import '@/assets/css/ComponentsStyles/payments-modal.css'
+import "@/assets/css/ComponentsStyles/payments-modal.css";
 import PaymentsModalNumbers from "@/mocks/PaymentsModalNumbers";
 import { GettingMoneyOperation } from "@/assets/js/moneyoperation/Claimmoney";
 
 export default {
-  props: [
+  props: ["payments"],
-      'payments'
-  ],
   data() {
     return {
       amount: 0,
       card: 0,
-      clickedBtn: '',
+      clickedBtn: "",
-      url: '',
+      url: "",
       offBtn: true,
       agreeUser: false,
-      PaymentsModalNumbers
+      PaymentsModalNumbers,
-    }
+    };
   },
   watch: {
     amount(newAmount) {
-      this.offBtn = true
+      this.offBtn = true;
-      if (this.amount > 0 && this.amount !== '' ) {
+      if (this.amount > 0 && this.amount !== "") {
         setTimeout(() => {
           try {
-            GettingMoneyOperation(newAmount)
+            GettingMoneyOperation(newAmount).then((response) => {
-                .then((response) => {
+              console.log("Payments Modal Working!: ", response);
-                  console.log('Payments Modal Working!: ', response)
+              this.url = response.url;
-                  this.url = response.url
+              this.offBtn = false;
-                  this.offBtn = false
+            });
-                })
+          } catch (e) {
+            console.error("Error in PaymentModal!", e);
           }
-          catch (e) {
+        }, 2000);
-            console.error('Error in PaymentModal!', e)
-          }
-        }, 2000)
       }
-    }
+    },
   },
+
   computed: {
     checkOffBtn() {
-      return this.checkBtn()
+      return this.checkBtn();
     },
   },
   methods: {
     closeModal() {
-      return this.$emit('closemodal')
+      return this.$emit("closemodal");
     },
     RedirectedMethodDep() {
-      window.location.href = this.url
+      window.location.href = this.url;
     },
+    RedirectedMethodTransferMoneyToSp() {},
+
+    onVerify: function (response) {
+      console.log(response);
+    },
+
     checkBtn() {
       if (this.offBtn === false) {
         if (this.agreeUser !== false) {
-          return false
+          return false;
         }
       }
-      return true
+      return true;
     },
     clickedBtnChoice(index, content) {
-      this.clickedBtn = index
+      this.clickedBtn = index;
-      this.amount = content
+      this.amount = content;
-    }
+    },
     // detectorMethod(method) {
     //   this.closeModal()
     //   if (method === 'dep') {
@@ -131,6 +174,6 @@ export default {
     //     return
     //   }
     // },
-  }
+  },
-}
+};
 </script>