111 lines
3.2 KiB
Vue
111 lines
3.2 KiB
Vue
|
|
<script lang="ts" setup>
|
|
const auth = useAuthStore()
|
|
|
|
const loginCode = ref()
|
|
const loginCodePrefix = ref()
|
|
const codeExpire = ref()
|
|
const account = ref()
|
|
const isLoading = ref(false)
|
|
const charcode = ref()
|
|
const errorMessage = ref()
|
|
const successMessage = ref()
|
|
const router = useRouter()
|
|
const token = useCookie('_auth')
|
|
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) {
|
|
if (data.value?.message) {
|
|
successMessage.value = data.value?.message
|
|
}
|
|
if (data.value?.token) {
|
|
token.value = data.value.token
|
|
window.localStorage.removeItem('codePrefix')
|
|
window.localStorage.removeItem('codeExpire')
|
|
if (data.value?.user) {
|
|
auth.user = data.value.user
|
|
}
|
|
return navigateTo('/')
|
|
}
|
|
}
|
|
|
|
isLoading.value = false
|
|
}
|
|
|
|
|
|
function codeExpired() {
|
|
console.log('Code expired!')
|
|
loginCodePrefix.value = null
|
|
codeExpire.value = null
|
|
router.push({path:'/login'})
|
|
}
|
|
|
|
function changeCode() {
|
|
if (loginCode.value.length === 4) {
|
|
sendCode()
|
|
}
|
|
}
|
|
|
|
onMounted(()=>{
|
|
loginCodePrefix.value = window.localStorage.getItem('codePrefix')
|
|
codeExpire.value = window.localStorage.getItem('codeExpire')
|
|
account.value = window.localStorage.getItem('account')
|
|
window.document.addEventListener('keydown', function(e){
|
|
console.log(e)
|
|
charcode.value = e.key
|
|
if(e.key === 'Backspace' && loginCode.value.length > 0){
|
|
loginCode.value = loginCode.value.substr(0,loginCode.value.length-1)
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Message class="w-full" severity="error" v-if="errorMessage">{{ errorMessage }}</Message>
|
|
<Message class="w-full" severity="success" v-if="successMessage">{{ successMessage }}</Message>
|
|
<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)" integer-only></InputOtp>
|
|
</div>
|
|
</template>
|
|
</Card>
|
|
<div class="p-2">
|
|
A kód még <b>
|
|
<Countdown v-if="codeExpire" :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="$router.push({path:'/login'})" variant="link" class="w-full mt-3" icon="pi pi-check-circles">Új kód kérése</Button>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<style></style> |