fixed validation for deposit-payments

luckydiamond/src/assets/css/PagesStyles/profile.css

@@ -180,6 +180,19 @@
     color: #EA3D38;
 }
 
+.error-deposit {
+    position: absolute;
+    left: 190px;
+    top: 52px;
+}
+
+.error-deposit h2 {
+    color: #BA3636;
+    font-family: "Montserrat Alternates";
+    font-weight: 700;
+    font-size: 11px;
+}
+
 /* Media */
 
 @media screen and (min-device-width: 1400px) and (max-device-width: 1600px) {

luckydiamond/src/components/PaymentsModal.vue

@@ -8,12 +8,15 @@
       />
     </div>
     <div v-if="payments" class="payments-modal__deposit">
+      <div class="error-deposit" v-if="errorDeposit">
+        <h2>Ошибка с суммой депозита</h2>
+      </div>
       <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" />
-        <input class="deposit-amount__input" v-model="amount" type="number" />
+        <input :class="{ 'animate-start-btn' : errorDeposit }" 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">
@@ -36,9 +39,12 @@
         <div class="deposit-promocode deposit-promocode__padding--input">
           <h3>Промокод</h3>
           <input @focusout="checkValidationPromocode" v-model="promocode" class="promo-input" type="text" />
+        </div>
+          <div class="error-checkbox" v-if="errorAgree">
+          <h2>Подтвердите согласие!</h2>
         </div>
         <div class="deposit-checkbox checkbox-styles">
-          <input @click="agreeUser = !agreeUser" type="checkbox" />
+          <input @click="agreeUser = !agreeUser" type="checkbox" :class="{ 'animate-start-btn' : errorAgree }" />
           <h3>Я согласен с пользовательским соглашением.</h3>
         </div>
         <div
@@ -49,7 +55,6 @@
           </p>
           <button
             type="submit"
-            :disabled="checkOffBtn"
             @click="RedirectedMethodDep"
           >
             Пополнить
@@ -65,7 +70,7 @@
       <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="amountWithdraw" type="number" />
+        <input class="with-input" v-model="amount" type="number" />
       </div>
       <div class="number-card deposit-promocode__padding--input">
         <h3>Введите номер карты</h3>
@@ -103,6 +108,11 @@ import PaymentsModalNumbers from "@/mocks/PaymentsModalNumbers";
 import { GettingMoneyOperation, WithdrawMoneyOperation } from "@/assets/js/moneyoperation/Claimmoney";
 import CaptchaComponent from "@/components/CaptchaComponent.vue";
 
+import { useVuelidate } from '@vuelidate/core'
+import { maxValue, minValue, required, numeric, integer } from "@vuelidate/validators";
+import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
+import {GetCookie} from "@/assets/js/storage/CookieStorage";
+
 export default {
   components: { CaptchaComponent },
   props: ["payments"],
@@ -110,6 +120,7 @@ export default {
     return {
       amount: 0,
       amountWithdraw: 1,
+      balance: 0,
       amountSave: 1,
       card: '',
       promocode: '',
@@ -117,6 +128,7 @@ export default {
       errorPromocode: false,
       showPromocodeStatus: false,
       errorAgree: false,
+      errorDeposit: false,
       captchaToken: null,
       clickedBtn: "",
       url: "",
@@ -132,45 +144,61 @@ export default {
       PaymentsModalNumbers,
     };
   },
+  created() {
+    GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
+        .then(response => {
+          this.balance = response.currentMoney
+        })
+  },
+  setup() {
+    return { v$: useVuelidate() }
+  },
+  validations() {
+    return {
+      amount: { required, numeric, minValue: minValue(1), integer },
+      amountWithdraw: { required, numeric, minValue: minValue(1), maxValue: maxValue(this.balance), integer },
+      card: { required, numeric, minValue: (6), maxValue: (6), integer }
+    }
+  },
   watch: {
-    amount(newAmount) {
-      this.offBtn = true;
-      if (this.amount > 0 && this.amount !== "") {
-        setTimeout(() => {
-          try {
-            GettingMoneyOperation(newAmount).then((response) => {
-              console.log("Payments Modal Working!: ", response);
-              this.url = response;
-              this.offBtn = false;
-            });
-          } catch (e) {
-            console.error("Error in PaymentModal!", e);
-          }
-        }, 2000);
-      }
-    },
-    amountWithdraw(newAmount) {
-      this.completeValidtaion.amountsaving = false
-      if (newAmount > 0) {
-        this.amountSave = newAmount
-        this.completeValidtaion.amountsaving = true
-        console.log(this.completeValidtaion)
-      }
-    },
-    card(newAmount) {
-      this.completeValidtaion.cardsaving = false
-      const cardPattern = /^\d{5}$/;
-      if(cardPattern.test(newAmount)) {
-        this.offAgree = false
-        this.completeValidtaion.cardsaving = true
-      }
-    },
-    agreeUser(newAgree) {
-      this.completeValidtaion.agreesaving = false
-      if (newAgree !== false) {
-        this.completeValidtaion.agreesaving = true
-      }
-    },
+    // amount(newAmount) {
+    //   this.offBtn = true;
+    //   if (this.amount > 0 && this.amount !== "") {
+    //     setTimeout(() => {
+    //       try {
+    //         GettingMoneyOperation(newAmount).then((response) => {
+    //           console.log("Payments Modal Working!: ", response);
+    //           this.url = response;
+    //           this.offBtn = false;
+    //         });
+    //       } catch (e) {
+    //         console.error("Error in PaymentModal!", e);
+    //       }
+    //     }, 2000);
+    //   }
+    // },
+    // amountWithdraw(newAmount) {
+    //   this.completeValidtaion.amountsaving = false
+    //   if (newAmount > 0) {
+    //     this.amountSave = newAmount
+    //     this.completeValidtaion.amountsaving = true
+    //     console.log(this.completeValidtaion)
+    //   }
+    // },
+    // card(newAmount) {
+    //   this.completeValidtaion.cardsaving = false
+    //   const cardPattern = /^\d{5}$/;
+    //   if(cardPattern.test(newAmount)) {
+    //     this.offAgree = false
+    //     this.completeValidtaion.cardsaving = true
+    //   }
+    // },
+    // agreeUser(newAgree) {
+    //   this.completeValidtaion.agreesaving = false
+    //   if (newAgree !== false) {
+    //     this.completeValidtaion.agreesaving = true
+    //   }
+    // },
     completeValidtaion: {
       handler() {
         this.completeValidationCheck()
@@ -207,9 +235,35 @@ export default {
       this.captchaToken = Token
       this.completeValidtaion.captchatokensaving = true
     },
-    RedirectedMethodDep() {
-      console.log(`From /profile to - ${this.url} url`)
+    async RedirectedMethodDep() {
+      this.v$.$touch()
+
+      if (this.v$.amount.$error) {
+        this.errorDeposit = true
+
+        setTimeout(() => {
+          this.errorDeposit = false
+        }, 1500)
+      }
+      if (this.agreeUser !== true) {
+        this.errorAgree = true
+        setTimeout(() => {
+          this.errorAgree = false
+        }, 1500)
+      }
+      if (!this.v$.amount.$error && this.agreeUser === true) {
+        try {
+          GettingMoneyOperation(this.amount).then((response) => {
+            console.log("Payments Modal Working!: ", response);
+            this.url = response;
+            this.offBtn = false;
+
             window.location.href = this.url
+          });
+        } catch (e) {
+          console.error("Error in PaymentModal!", e);
+        }
+      }
     },
     async RedirectedMethodTransferMoneyToSp() {
       setTimeout(async () => {

luckydiamond/src/pages/games-pages/SapergamePage.vue

@@ -388,10 +388,10 @@ export default {
       if (this.v$.amountDeposit.$error) {
         this.errorPlayButton()
       }
-      else if (this.v$.amountCrystals.$error) {
+      if (this.v$.amountCrystals.$error) {
         this.errorPlayButton()
       }
-      else {
+      if (!this.v$.amountCrystals.$error && !this.v$.amountDeposit.$error) {
         this.flippedCards = []
         this.unCorrectClick = []
         this.CorrectsClick = []