add toatification package

components/login-page/Check-otp.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-[25.573vw] text-secondaryTextColor space-y-6 relative">
-    <p class="text-[1.502vw] border-b px-[0.5vw]">کد ورود</p>
+  <div class="w-[75vw] md:w-[25.573vw] text-secondaryTextColor space-y-6 relative">
+    <p class="text-[6vw] md:text-[1.502vw] border-b px-[0.5vw]">کد ورود</p>
     <div class="relative flex flexBox w-full pt-[1vw]">
       <input
         v-model="code"
@@ -9,7 +9,7 @@
         placeholder="کد ورود را وارد کنید"
       />
       <svg
-        class="h-[1.146vw] w-[1.146vw] absolute left-[1.2vw]"
+      class="h-[5vw] w-[5vw] md:h-[1.146vw] md:w-[1.146vw] absolute left-[1.2vw]"
         viewBox="0 0 22 22"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -31,31 +31,39 @@
       </svg>
     </div>
 
-    <button class="greenButton w-full !mt-[1.5vw] relative" @click="checkOtp">
-      <span class="loader absolute" v-if="loading"></span>
+    <button class="greenButton  h-[13.59vw] md:h-[2.917vw] text-[3.59vw] md:text-[0.833vw] rounded-[2.051vw] md:rounded-auto w-full !mt-[4vw] md:!mt-[1.5vw] relative" @click="checkOtp">
+      <span 
+      class="loader 
+      h-[7vw] w-[7vw] left-[35vw] top-[3vw]
+      md:h-[1.5vw] md:w-[1.5vw] md:left-[12vw] md:top-[0.65vw]
+      absolute"
+      v-if="loading"></span>
       <span v-else>ورود</span>
     </button>
 
-    <p v-if="timer > 0" class="text-[0.7vw] px-[1vw] text-primaryGreen">
+    <p v-if="timer > 0" class="text-[3vw] md:text-[0.7vw] px-[2vw] md:px-[1vw] text-primaryGreen">
       0{{ timer }} : 00
     </p>
     <p
       v-else
-      class="text-[0.7vw] px-[1vw] text-primaryGreen cursor-pointer"
+      class="text-[3vw] md:text-[0.7vw] px-[2vw] md:px-[1vw] text-primaryGreen cursor-pointer"
       @click="options = true"
     >
       ارسال مجدد کد
     </p>
     <div
       v-show="options"
-      class="absolute -bottom-[3.5vw] space-y-[0.5vw] text-[0.7vw] px-[1vw]"
+      class="absolute -bottom-[14vw] md:-bottom-[3.5vw] space-y-[2vw] md:space-y-[0.5vw] text-[3vw] md:text-[0.7vw] px-[2vw] md:px-[1vw]"
     >
       <p
-        class="flex items-center gap-[0.3vw] cursor-pointer"
+        class="flex items-center gap-[2vw] md:gap-[0.3vw] cursor-pointer"
         @click="resendSMS"
       >
         <svg
-          class="h-[1.042vw] w-[1.042vw]"
+          class="
+          md:h-[1.042vw] md:w-[1.042vw]
+          h-[4.5vw] w-[4.5vw]
+          "
           viewBox="0 0 20 21"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -80,11 +88,13 @@
         ارسال از طریق پیامک
       </p>
       <p
-        class="flex items-center gap-[0.3vw] cursor-pointer"
+        class="flex items-center  gap-[2vw] md:gap-[0.3vw] cursor-pointer"
         @click="resendCall"
       >
         <svg
-          class="h-[1.042vw] w-[1.042vw]"
+          class="
+          h-[4.5vw] w-[4.5vw]
+          md:h-[1.042vw] md:w-[1.042vw]"
           viewBox="0 0 20 21"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -100,7 +110,7 @@
       </p>
     </div>
     <div
-      class="z-[100] backdrop-blur-sm bg-white/30 p-[1vw] rounded-[0.5vw] text-red-400 text-[0.7vw] absolute w-full -top-[10vw]"
+      class="backdrop-blur-sm bg-white/30 md:p-[1vw] rounded-[2.051vw]  md:rounded-[0.5vw] text-red-400 text-[3vw] md:text-[0.7vw] absolute w-full p-[3vw] -top-[20vw] md:-top-[10vw]"
       v-for="(error, index) in errors"
       :key="index"
     >
@@ -111,13 +121,15 @@
 </template>
 
 <script setup>
+import { useToast } from 'vue-toastification'
+const toast = useToast()
 const { authUser } = useAuth();
 const options = ref(false);
 const code = ref(null);
 const errors = ref([]);
 const loading = ref(false);
 const phoneNumber = useState("phoneNumber");
-const timer = ref(3);
+const timer = ref(5);
 
   async function checkOtp() {
     console.log(code);
@@ -137,6 +149,7 @@ const timer = ref(3);
         },
       });
       if (data.status === "Active") {
+        toast.success("ورود با موفقیت انجام شد")
         authUser.value = data;
         navigateTo("/");
       }
@@ -158,11 +171,11 @@ async function resendSMS() {
         type: "1",
       },
     });
-
     loading.value = false;
+    toast.success("کد مجدد برای شما ارسال شد")
+    timer.value = 5;
+    options.value = false;
   } catch (error) {
-    //   console.log('errrrr :',error.data.data.message)
-    //  console.log('errrrr :', error.data.data.error)
     loading.value = false;
     return errors.value.push(error.data.data.error);
   }
@@ -179,13 +192,15 @@ async function resendCall() {
         type: "2",
       },
     });
-
+    toast.success("درحال تماس با شما هستیم...")
+    timer.value = 5;
+    options.value = false;
     loading.value = false;
   } catch (error) {
        console.log('errrrr :',error.data.data.message)
       console.log('errrrr :', error.data.data.error)
     loading.value = false;
-   // return errors.value.push(error.data.data.error);
+    return errors.value.push(error.data.data.error);
   }
 }
 onMounted(() => {
@@ -202,10 +217,7 @@ onMounted(() => {
 
 <style scoped>
 .loader {
-  top: 0.65vw;
-  left: 12vw;
-  width: 1.5vw;
-  height: 1.5vw;
+ 
   border: 0.2vw solid #fff;
   border-bottom-color: transparent;
   border-radius: 50%;