��Root Mod By V1rus

Viewing: register-otp.vue

<template>
  <div class="text-center" v-if="loading">
    <SharedLoading/>
  </div>
  <section class="w-full mx-auto mt-[6.5rem]" v-else>
    <div class=" min-h-screen  flex flex-col justify-between   pt-[4rem] ">
      <div>
        <div class=" mb-4 relative  w-full ">
                    <span class="  text-base    text-center  flex justify-center items-center text-gray-600 mb-14 bold">

                    </span>
          <span :dir="direction"
                class="  text-xs   text-center  flex justify-center items-center text-gray-600 mb-16 md:mb-24  ">
                        {{ t('send_code_1') }} &nbsp;
                      <strong class="text-main-700" v-text="route.query.mobile ? route.query.mobile : ' '"></strong>
                      &nbsp;   {{ t('send_code_2') }}
                    </span>
        </div>
        <div dir="rtl" class="mb-10">
          <nuxtLink :to="localePath('/login')" class="block text-sm bold underline cursor-pointer   text-center ">
            {{ t('edit_phone') }}
          </nuxtLink>

        </div>
        <div class="py-4 text-center md:mb-10  flex justify-center items-center" dir="ltr">
          <ClientOnly>
            <v-otp-input
                ref="otpInput"
                input-classes="otp-input"
                separator=" "
                inputType="letter-numeric"
                v-model:value="state.code"
                :num-inputs="5"
                :should-auto-focus="true"
                :should-focus-order="true"
                @on-complete="handleOnComplete"
                :placeholder="['', '', '', '']"
            />
          </ClientOnly>
        </div>

        <div class=" pt-10   w-full text-center ">
          <UButton
              :loading="loading"
              square
              @click="login()"
              class="xsm:w-10/12 lg:w-8/12  md:w-9/12   mx-auto block text-center border bold h-10   bg-main-700 text-white text-xs   md:text-sm   w-full  rounded  overflow-hidden ">
                        <span v-if="!loading" class=" block  px-2  text-xs truncate  ">
                            {{ t('Confirm') }}
                        </span>
          </UButton>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import {useMainStore} from '~/stores/index';

const MainStore = useMainStore()
import VOtpInput from "vue3-otp-input";

const localePath = useLocalePath()
const route = useRoute()
const config = useRuntimeConfig();
const otpInput = ref("");
const loading = ref(true);
const toast = useToast()
const {t, locale} = useI18n()
const direction = locale.value === 'en' ? 'ltr' : 'rtl';
const state = reactive({
  code: undefined,
})
const handleOnComplete = (value) => {
  state.code = value;
  login();
};

async function login() {
  if (!route.query.mobile) {
    return toast.add({title: t('validate_mobile'), color: "orange"})
  }
  if (!state.code) {
    return toast.add({title: t('validate_code'), color: "orange"})
  }
  loading.value = true;
  await useFetch(config.public.API_URL + '/auth/login', {
    method: 'POST',
    body: {
      mobile: route.query.mobile,
      code: state.code,
      lng: locale.value,
    },
    onRequest({options}) {
      options.headers = options.headers || {}
      options.headers.Accept = 'application/json'
    },
    onResponse({response}) {
      console.log('register otp response', response);

      let responseStatus = response.status;
      let responseData = response._data;

      if (responseStatus !== 200) {
        loading.value = false;
        return toast.add({title: response._data?.message, color: "orange"})
      }

      if (responseStatus === 200) {
        if (responseData?.status === 'error') {
          loading.value = false;
          return toast.add({title: responseData?.message, color: "orange"})
        }

        if (responseData?.token) {
          MainStore.SetToken(responseData.token);
          navigateTo(localePath('/'), {
            external: true
          });
        }
      }
    }
  })
}

definePageMeta({
  layout: 'auth-login',
  title: 'analysis_cabinet'
});
useHead({
  title: t('analysis_cabinet')
});

onMounted(() => {
  loading.value = false;
})
</script>
<style>
.otp-input {
  width: 45px;
  height: 45px;
  padding: 5px;
  margin: 0 10px;
  font-size: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  text-align: center;
}

/* Background colour of an input field with value */
.otp-input.is-complete {
  background-color: #e4e4e4;
}

.otp-input::-webkit-inner-spin-button,
.otp-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input::placeholder {
  font-size: 15px;
  text-align: center;
  font-weight: 600;
}
</style>
User / IP	: 216.73.217.78
Host / Server	: 195.214.235.115 / npln.ir
System	: Linux damavand.pws-dns.net 5.14.0-503.35.1.el9_5.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Apr 4 05:23:43 EDT 2025 x86_64
���Root Mod By V1rus_Alfa

Viewing: register-otp.vue

��Root Mod By V1rus_Alfa
