initial

apps/client/pages/2fa/index.vue

@@ -0,0 +1,94 @@
+<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>