nuxt-start/pages/login.vue

<script setup>
const auth = useAuthStore()
const account = ref('ervinstyle@gmail.com')
const loginCode = ref()
const loginCodePrefix = ref('QW')
const isLoading = ref(false)
const state = ref()
const codeExpire = ref()
const errorMessage = ref()
const successMessage = ref()

async function sendAccount() {
    errorMessage.value = false
    successMessage.value = false
    isLoading.value = true
    const { data } = await useFetch('https://olcsoberauto.hu/rest/authRequest', {
        method: "post",
        body: {
            account: account.value
        }
    })

    if(data.value?.error){
        errorMessage.value = data.value.message
    }

    if (data.value?.success) {
        state.value = 'codeRequest'
        loginCodePrefix.value = data.value.codePrefix
        codeExpire.value = new Date(data.value.codeExpire)
        account.value = data.value.account
        if(data.value?.message){
            successMessage.value = data.value.message
        }
    }

    isLoading.value = false
}
function codeExpired() {
    state.value = null
    loginCodePrefix.value = null
}
function changeCode(){
    if(loginCode.value.length === 4){
        sendCode()
    }
}
async function sendCode() {
    isLoading.value = true
    errorMessage.value = false
    successMessage.value = false
    const { data } = await useFetch('https://olcsoberauto.hu/rest/tokenRequest', {
        method: "post",
        body: {
            account: account.value,
            code: loginCode.value,
            code_prefix: loginCodePrefix.value
        }
    })

    if (data.value?.error) {
        errorMessage.value = data.value?.message
    }

    if (data.value?.success) {
        state.value = 'logged'
        if (data.value?.message) {
            successMessage.value = data.value?.message
        }
        if (data.value?.token) {
            window.localStorage.setItem('userToken', data.value.token)
            return navigateTo('/')
        }
    }

    isLoading.value = false
}
</script>
<style>
.card-loading {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    z-index: 1;
}

.p-inputotp-input.p-inputtext-sm {
    width: 2rem;
}

.p-message {
    outline: none;
    border-left: 4px;
    border-style: solid;
}
</style>
<template>
    <div class="min-h-dvh px-5 pb-5">
        <div class="flex flex-col gap-3 items-center justify-center text-center">
            <div
                class="w-48 bg-neutral-600 h-48 p-5 flex items-end rounded-ee-xl rounded-es-xl shadow-lg bg-gradient-to-b from-neutral-300 dark:from-black to-transparent">
                <img src="/euro_cars_rent_a_car_logo.png" class="w-full" />
            </div>
            <Message class="w-full" severity="error" v-if="errorMessage">{{ errorMessage }}</Message>
            <Message class="w-full" severity="success" v-if="successMessage">{{ successMessage }}</Message>
            <div v-if="state === 'codeRequest'">
                <div class="p-2">
                    Add meg a kódot amit a(z) <b>{{ account }}</b> e-mail címre küldött ki rendszerünk.
                </div>
                <Card>
                    <template #content>
                        <div class="flex flex-wrap justify-center gap-1 items-center p-2 relative">
                            <CardLoading v-if="isLoading" />
                            <InputOtp v-model="loginCodePrefix" :length="2" style="gap: 1" disabled size="small">
                            </InputOtp>
                            <div><i class="pi pi-minus"></i></div>
                            <InputOtp v-model="loginCode" :length="4" style="gap: 1" size="small" @change="changeCode($event)"></InputOtp>
                        </div>
                    </template>
                </Card>
                <div class="p-2">
                    A kód még <b>
                        <Countdown :expired="codeExpire" @end="codeExpired()" />
                    </b> percig érvényes. Lejárat után új kódot kell igényelned.
                </div>
                <Alert>
                    {{ errorMessage }}
                </Alert>
                <Button @click="sendCode()" class="w-full" icon="pi pi-check-circles">Kód küldése</Button>

                <Button @click="sendAccount()" variant="link" class="w-full mt-3" icon="pi pi-check-circles">Új kód kérése</Button>
            </div>
            <div v-if="!state">
                <h1 class="text-2xl py-3">Kérjük, add meg az e-mail címedet</h1>
                <div>Ha már korábban volt foglalásod vagy regisztrációd akkor azt az e-mail címet add meg.</div>
                <Card class="w-full max-w-sm m-auto mt-3">
                    <template #content>
                        <div class="flex flex-col gap-5 items-center p-2 relative w-full">
                            <CardLoading v-if="isLoading" />
                            <FloatLabel variant="on" class="w-full">
                                <InputText id="email_label" v-model="account" autocomplete="off" class="w-full" />
                                <label for="email_label">E-mail cím</label>
                            </FloatLabel>
                            <Button @click="sendAccount()" class="w-full" icon="pi pi-check-circles">Megadom az e-mail
                                címem</Button>
                        </div>
                    </template>
                </Card>
            </div>
        </div>
    </div>
</template>