dlearn-front/components/login-page/Check-otp.vue

<template>
  <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"
        type="text"
        class="loginInput"
        placeholder="کد ورود را وارد کنید"
      />
      <svg
      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"
      >
        <path
          d="M11.1464 9.96418C11.0547 9.95501 10.9447 9.95501 10.8439 9.96418C8.66219 9.89084 6.92969 8.10334 6.92969 5.90334C6.92969 3.65751 8.74469 1.83334 10.9997 1.83334C13.2455 1.83334 15.0697 3.65751 15.0697 5.90334C15.0605 8.10334 13.328 9.89084 11.1464 9.96418Z"
          stroke="#878787"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M6.56414 13.3467C4.34581 14.8317 4.34581 17.2517 6.56414 18.7275C9.08497 20.4142 13.2191 20.4142 15.74 18.7275C17.9583 17.2425 17.9583 14.8225 15.74 13.3467C13.2283 11.6692 9.09414 11.6692 6.56414 13.3467Z"
          stroke="#878787"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>

    <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-[3vw] md:text-[0.7vw] px-[2vw] md:px-[1vw] text-primaryGreen">
   00:{{ timer < 10 ? '0' + timer : timer }}
    </p>
    <p
      v-else
      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-[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-[2vw] md:gap-[0.3vw] cursor-pointer"
        @click="resendSMS"
      >
        <svg
          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"
        >
          <path
            d="M14.167 17.5833H5.83366C3.33366 17.5833 1.66699 16.3333 1.66699 13.4167V7.58333C1.66699 4.66667 3.33366 3.41667 5.83366 3.41667H14.167C16.667 3.41667 18.3337 4.66667 18.3337 7.58333V13.4167C18.3337 16.3333 16.667 17.5833 14.167 17.5833Z"
            stroke="#878787"
            stroke-width="1.5"
            stroke-miterlimit="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M14.1663 8L11.558 10.0833C10.6997 10.7667 9.29134 10.7667 8.433 10.0833L5.83301 8"
            stroke="#878787"
            stroke-width="1.5"
            stroke-miterlimit="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
        ارسال از طریق پیامک
      </p>
      <p
        class="flex items-center  gap-[2vw] md:gap-[0.3vw] cursor-pointer"
        @click="resendCall"
      >
        <svg
          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"
        >
          <path
            d="M18.3077 15.7745C18.3077 16.0745 18.241 16.3829 18.0994 16.6829C17.9577 16.9829 17.7744 17.2662 17.5327 17.5329C17.1244 17.9829 16.6744 18.3079 16.166 18.5162C15.666 18.7245 15.1244 18.8329 14.541 18.8329C13.691 18.8329 12.7827 18.6329 11.8243 18.2245C10.866 17.8162 9.90768 17.2662 8.95768 16.5745C7.99935 15.8745 7.09102 15.0995 6.22435 14.2412C5.36602 13.3745 4.59102 12.4662 3.89935 11.5162C3.21602 10.5662 2.66602 9.6162 2.26602 8.67453C1.86602 7.72453 1.66602 6.8162 1.66602 5.94953C1.66602 5.38286 1.76602 4.8412 1.96602 4.3412C2.16602 3.83287 2.48268 3.3662 2.92435 2.94953C3.45768 2.42453 4.04102 2.1662 4.65768 2.1662C4.89102 2.1662 5.12435 2.2162 5.33268 2.3162C5.54935 2.4162 5.74102 2.5662 5.89102 2.78287L7.82435 5.50787C7.97435 5.7162 8.08268 5.90786 8.15768 6.0912C8.23268 6.2662 8.27435 6.4412 8.27435 6.59953C8.27435 6.79953 8.21602 6.99953 8.09935 7.1912C7.99102 7.38286 7.83268 7.58286 7.63268 7.78286L6.99935 8.4412C6.90768 8.53286 6.86602 8.6412 6.86602 8.77453C6.86602 8.8412 6.87435 8.89953 6.89102 8.9662C6.91602 9.03286 6.94102 9.08286 6.95768 9.13286C7.10768 9.40786 7.36602 9.7662 7.73268 10.1995C8.10768 10.6329 8.50768 11.0745 8.94102 11.5162C9.39102 11.9579 9.82435 12.3662 10.266 12.7412C10.6993 13.1079 11.0577 13.3579 11.341 13.5079C11.3827 13.5245 11.4327 13.5495 11.491 13.5745C11.5577 13.5995 11.6244 13.6079 11.6994 13.6079C11.841 13.6079 11.9494 13.5579 12.041 13.4662L12.6744 12.8412C12.8827 12.6329 13.0827 12.4745 13.2744 12.3745C13.466 12.2579 13.6577 12.1995 13.866 12.1995C14.0243 12.1995 14.191 12.2329 14.3744 12.3079C14.5577 12.3829 14.7494 12.4912 14.9577 12.6329L17.716 14.5912C17.9327 14.7412 18.0827 14.9162 18.1744 15.1245C18.2577 15.3329 18.3077 15.5412 18.3077 15.7745Z"
            stroke="#878787"
            stroke-width="1.5"
            stroke-miterlimit="10"
          />
        </svg>
        ارسال از طریق تماس تلفنی
      </p>
    </div>
    <div
      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"
    >
      <span>* {{ error }}</span>
    </div>

  </div>
</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(59);

  async function checkOtp() {
    if (code.value == null) {
      errors.value = [];
      // return errors.value.push("وارد کردن کد ورود الزامی است");
      return toast.error("وارد کردن کد ورود الزامی است")
    }

    try {
      loading.value = true;
      errors.value = [];
      const data = await $fetch("/api/auth/login-step-two", {
        method: "POST",
        body: {
          phone: phoneNumber.value,
          code: code.value,
        },
      });
      if (data.status === "Active") {
        toast.success("ورود با موفقیت انجام شد")
        authUser.value = data;
         location.reload()
        navigateTo("/");
      }
      loading.value = false;
    } catch (error) {
      loading.value = false;
      return toast.error(error.data.data.error)
      // errors.value.push(error.data.data.error);
    }
  };

async function resendSMS() {
  try {
    errors.value = [];
    const data = await $fetch("/api/auth/login", {
      method: "POST",
      body: {
        phone: phoneNumber.value,
        type: "1",
      },
    });
    loading.value = false;
    toast.success("کد مجدد برای شما ارسال شد")
    timer.value = 59;
    options.value = false;
  } catch (error) {
    loading.value = false;
    return toast.error(error.data.data.error)
    // return errors.value.push(error.data.data.error);
  }
}


async function resendCall() {
  try {
    errors.value = [];
    const data = await $fetch("/api/auth/login", {
      method: "POST",
      body: {
        phone: phoneNumber.value,
        type: "2",
      },
    });
    toast.success("درحال تماس با شما هستیم...")
    timer.value = 59;
    options.value = false;
    loading.value = false;
  } catch (error) {
    loading.value = false;
    // return errors.value.push(error.data.data.error);
    return toast.error(error?.data?.data?.error)
  }
}
onMounted(() => {
  const interval = setInterval(() => {
    if (timer.value > 0) {
      timer.value--;
    }
  }, 1000);

  return () => clearInterval(interval);
})
</script>


<style scoped>
.loader {
 
  border: 0.2vw solid #fff;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>