initial

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

@@ -0,0 +1,186 @@
+<template>
+  <form
+    class="twofa-setup"
+    @submit="onSubmit"
+  >
+    <UiButton
+      icon="chevron-left"
+      color="secondary"
+      type="link"
+      class="mb-8"
+      :href="step === 0 ? '/projects' : ''"
+      @click="step--"
+    >
+      {{ step === 0 ? $t('to_main') : $t('back') }}
+    </UiButton>
+
+    <h1 class="twofa-setup__title">
+      Настройка двухфакторной аутентификации (2FA)
+    </h1>
+
+    <Stepper
+      class="mb-40"
+      :step="step"
+      :items="['Установка', 'Настройка', 'Ввод кода']"
+    />
+
+    <Transition name="fade" mode="out-in">
+      <div v-if="step === 0">
+        <UiAlert class="mb-47">
+          Установите приложение Google Authenticator или другое из списка, чтобы
+          получить коды двухфакторной аутентификации.
+        </UiAlert>
+
+        <div class="twofa-setup__app-block">
+          <p class="mb-8">
+            Google Authenticator app
+          </p>
+          <div class="mb-24">
+            <UiButton
+              color="secondary"
+              type="outlined"
+              class="mr-24"
+            >
+              <img
+                class="d-flex"
+                src="/GetOnAppStore.svg"
+                alt="GetOnAppStore"
+              >
+            </UiButton>
+
+            <UiButton
+              color="secondary"
+              type="outlined"
+            >
+              <img
+                class="d-flex"
+                src="/GetOnGooglePlay.svg"
+                alt="GetOnGooglePlay"
+              >
+            </UiButton>
+          </div>
+          <div>
+            <span>
+              Посмотреть весь список 2FA приложений -
+              <UiButton
+                type="link"
+                href="https://www.pcmag.com/picks/the-best-authenticator-apps"
+                target="_blank"
+              >
+                подробнее
+              </UiButton>
+            </span>
+          </div>
+        </div>
+
+        <UiButton
+          class="twofa-setup__submit mt-47"
+          size="large"
+          @click="step++"
+        >
+          {{ $t('next') }}
+        </UiButton>
+      </div>
+
+      <div v-else-if="step === 1">
+        <UiAlert class="mb-24">
+          В приложении
+          <strong>двухфакторной аутентификации</strong> отсканируйте QR-код или
+          скопируйте и вставьте <strong>ключ настройки</strong> с этого экрана
+          вручную.
+        </UiAlert>
+
+        <div class="twofa-setup__qrzone">
+          <img src="/QRCode.svg" alt="QRCode" class="mr-40">
+
+          <UiInput
+            id="ssa"
+            model-value="GB5AY4JWLUUF2NRT"
+            readonly
+            copyable
+            label="Ключ настройки"
+            class="flex-1"
+          />
+        </div>
+
+        <UiButton
+          class="twofa-setup__submit mt-32"
+          size="large"
+          @click="step++"
+        >
+          {{ $t('next') }}
+        </UiButton>
+      </div>
+
+      <div v-else-if="step === 2">
+        <UiAlert class="mb-50">
+          Далее введите на этом экране <strong>шестизначный код</strong> из
+          приложения двухфакторной аутентификации
+        </UiAlert>
+
+        <UiCodeInput
+          id="pincode"
+          class="mb-21"
+        >
+          <template #title>
+            <span class="twofa-setup__pin-title"> 2FA-код </span>
+          </template>
+        </UiCodeInput>
+
+        <UiButton
+          class="twofa-setup__submit mt-32"
+          size="large"
+          native-type="submit"
+        >
+          {{ $t('next') }}
+        </UiButton>
+      </div>
+    </Transition>
+  </form>
+</template>
+
+<script setup>
+import { useForm } from 'vee-validate'
+
+definePageMeta({
+  middleware: ['auth'],
+  centerContent: true,
+})
+
+const { handleSubmit, isSubmitting } = useForm()
+const step = ref(0)
+
+const onSubmit = handleSubmit(async (values) => {
+  console.log(values)
+  navigateTo('/projects')
+})
+</script>
+
+<style lang="scss">
+.twofa-setup {
+  margin: 0 auto;
+  width: 500px;
+
+  &__qrzone {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__app-block {
+  }
+
+  &__title {
+    margin-bottom: 56px;
+  }
+
+  &__pin-title {
+    @include txt-m-b;
+  }
+
+  &__submit {
+    //margin-top: 47px;
+    width: 100%;
+  }
+}
+</style>