hossein-por-shop/frontend/pages/signin.vue

<script lang="ts" setup>

// import

import { helpers, required } from "@vuelidate/validators";
import { useVuelidate } from "@vuelidate/core";
import useOtp from "~/composables/api/auth/useOtp";
import useSignIn from "~/composables/api/auth/useSignIn";
import { definePageMeta } from "#imports";
import useGetAccount from "~/composables/api/account/useGetAccount";
import { useAuth } from "~/composables/api/auth/useAuth";
import { useToast } from "~/composables/global/useToast";
import { useTimer } from "~/composables/global/useTimer";

// types

type LoginInfo = {
    phone: string;
};

// meta

definePageMeta({
    layout: "none",
    middleware: ["check-is-not-logged-in"]
});

// state

const { addToast } = useToast();

const { updateToken, updateRefreshToken } = useAuth();

const { refetch: refetchAccount } = useGetAccount();

const showOtp = ref(false);
const otpCode = ref([]);

const formRules = computed(() => {
    return {
        phone: {
            required: helpers.withMessage("Phone is required", required),
            phoneValidator: helpers.withMessage(
                "شماره تلفن وارد شده معتبر نمی باشد",
                helpers.regex(/^[1-9][0-9]{9}$/)
            )
        }
    };
});

const loginInfo = ref<LoginInfo>({
    phone: ""
});

const formValidator$ = useVuelidate(formRules, loginInfo);

const {
    timer: otpBlockerTimePassed,
    start: startOtpBlocker,
    reset: resetOtpBlocker,
    isPending: isResendOtpBlocked
} = useTimer({
    duration: 5000
});

const { mutateAsync: sendOtp, isPending: sendOtpIsPending } = useOtp();
const {
    mutateAsync: signIn,
    isPending: signInIsPending,
    status: signInStatus
} = useSignIn();

// computed

const sendOtpHandler = async () => {
    if (!sendOtpIsPending.value) {
        try {
            await sendOtp({
                phone: `0${loginInfo.value.phone}`
            });

            addToast({
                message: "کد برای شما ارسال شد",
                options: {
                    status: "success"
                }
            });

            showOtp.value = true;
        } catch (e) {
            addToast({
                message: "مشکلی پیش آمده",
                options: {
                    status: "error"
                }
            });
        }
    }
};

const handleLogin = async () => {
    if (!showOtp.value) {
        await formValidator$.value.$validate();

        if (!formValidator$.value.$errors.length) {
            await sendOtpHandler();
        }
    } else {
        try {
            const response = await signIn({
                otp: otpCode.value.join(""),
                phone: `0${loginInfo.value.phone}`
            });

            updateToken(response.access);
            updateRefreshToken(response.refresh);
            await new Promise((resolve) => setTimeout(resolve, 1000));
            await refetchAccount();

            addToast({
                message: "با موفقیت وارد شدید",
                options: {
                    status: "success"
                }
            });

            navigateTo("/");
        } catch (e) {
            otpCode.value = [];
            addToast({ message: "مشکلی پیش آمده" });
        }
    }
};

const resendOtp = async () => {
    try {
        await sendOtpHandler();
        resetOtpBlocker();
        startOtpBlocker();
    } catch (e) {
        resetOtpBlocker();
    }
};

const resetForm = () => {
    loginInfo.value.phone = "";
    formValidator$.value.$reset();
    otpCode.value = [];
    showOtp.value = false;
};

</script>

<template>
    <div class="flex h-svh items-center relative">
        <div
            class="bg-[url(/img/pattern-1.png)] -z-10 size-full absolute opacity-70"
            :style="{
                backgroundSize: 150,
                mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0.3) 80%)'
            }"
        />
        <div class="flex items-center justify-center flex-col size-full">

            <img
                class="aspect-square w-[300px] translate-y-[100px] animate-fade-in"
                src="/img/heymlz-seat.gif"
                alt=""
            />

            <div
                class="max-w-[600px] w-full p-6 h-[400px] flex flex-col items-center bg-white  border shadow-black/10 justify-center border-slate-300 rounded-xl"
            >
                <h1 class="typo-h-5 mt-8">شماره خود را وارد کنید</h1>

                <form @submit.prevent class="max-w-[500px] w-full mt-12">
                    <Input
                        v-if="!showOtp"
                        class="w-full tracking-[2px]"
                        v-model="loginInfo.phone"
                        placeholder="9380123456"
                        dir="ltr"
                        :error="formValidator$.phone.$error"
                    >
                        <template #startItem>
                            <div class="flex items-center gap-3">
                                <Icon
                                    class="translate-y-[-1px] static-icon"
                                    name="twemoji:flag-iran"
                                    size="24"
                                />
                                <span class="text-slate-500 typo-label-sm"> +98 </span>
                            </div>
                        </template>
                    </Input>

                    <OtpInput
                        v-else
                        v-model="otpCode"
                        :status="
                                signInStatus === 'success'
                                    ? 'success'
                                    : signInStatus === 'error'
                                    ? 'error'
                                    : 'idle'
                                "
                        :disabled="signInIsPending || sendOtpIsPending"
                        :autofocus="true"
                        @complete="handleLogin"
                    />

                    <Button
                        data-testid="send-otp-code-button"
                        v-if="!showOtp"
                        class="rounded-full w-full mt-4"
                        type="submit"
                        @click="handleLogin"
                        :loading="sendOtpIsPending"
                        :disabled="sendOtpIsPending"
                    >
                        ارسال کد
                    </Button>

                    <div v-else class="flex items-center w-full gap-4 mt-4">
                        <Button
                            class="rounded-full w-full mt-4"
                            type="button"
                            variant="secondary"
                            @click="resetForm"
                            :disabled="signInIsPending || sendOtpIsPending"
                        >
                            تغییر شماره
                        </Button>
                        <Button
                            class="rounded-full w-full mt-4"
                            type="submit"
                            @click="resendOtp"
                            :loading="signInIsPending || sendOtpIsPending"
                            :disabled="
                        signInIsPending ||
                        isResendOtpBlocked ||
                        sendOtpIsPending
                    "
                        >
                            ارسال مجدد کد
                            {{ isResendOtpBlocked ? otpBlockerTimePassed : "" }}
                        </Button>
                    </div>

                    <NuxtLink to="/" class="flex items-center gap-2 justify-center mt-6">
                        <span> بازگشت به فروشگاه </span>
                        <Icon name="ci:left-rotation" size="24" />
                    </NuxtLink>
                </form>
            </div>
        </div>
    </div>
</template>