95 lines
1.9 KiB
Vue
95 lines
1.9 KiB
Vue
<template>
|
|
<form class="twofa" @submit="onSubmit">
|
|
<UiButton
|
|
icon="chevron-left"
|
|
color="secondary"
|
|
type="link"
|
|
class="mb-8"
|
|
href="/projects"
|
|
>
|
|
{{ $t('to_main') }}
|
|
</UiButton>
|
|
|
|
<h1 class="mb-8">
|
|
Проверка безопасности
|
|
</h1>
|
|
|
|
<UiAlert class="mb-16">
|
|
Введите 6-значный код подтверждения, отправленный на jo**@gmail.com
|
|
</UiAlert>
|
|
|
|
<UiCodeInput id="code">
|
|
<template #title>
|
|
<span class="twofa__title"> Код из письма </span>
|
|
</template>
|
|
</UiCodeInput>
|
|
|
|
<div class="text-align-right mt-8">
|
|
<UiButton v-if="!showTimer" type="link" @click="resetTimer">
|
|
Отправить код еще раз
|
|
</UiButton>
|
|
<div v-else class="twofa__timer">
|
|
<span>Отправить код повторно через 0:{{ seconds }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<UiButton class="twofa__submit" size="large" native-type="submit">
|
|
{{ $t('next') }}
|
|
</UiButton>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useForm } from 'vee-validate'
|
|
|
|
definePageMeta({
|
|
middleware: ['auth'],
|
|
centerContent: true,
|
|
})
|
|
|
|
const seconds = ref(30)
|
|
const showTimer = ref(false)
|
|
|
|
const { handleSubmit, isSubmitting } = useForm()
|
|
|
|
const onSubmit = handleSubmit(async (values) => {
|
|
console.log(values)
|
|
navigateTo('/2fa/setup')
|
|
})
|
|
|
|
function resetTimer() {
|
|
showTimer.value = true
|
|
const timer = setInterval(() => {
|
|
if (seconds.value === 0) {
|
|
clearInterval(timer)
|
|
showTimer.value = false
|
|
seconds.value = 30
|
|
}
|
|
else {
|
|
seconds.value--
|
|
}
|
|
}, 1000)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.twofa {
|
|
margin: 0 auto;
|
|
width: 500px;
|
|
|
|
&__title {
|
|
@include txt-m-b;
|
|
}
|
|
|
|
&__submit {
|
|
margin-top: 32px;
|
|
width: 100%;
|
|
}
|
|
|
|
&__timer {
|
|
@include txt-i;
|
|
color: $clr-grey-500;
|
|
}
|
|
}
|
|
</style>
|