187 lines
4.5 KiB
Vue
187 lines
4.5 KiB
Vue
<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>
|