two-steps-v1.vue
3.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<script setup lang="ts">
import miscMaskDark from '@images/misc/misc-mask-dark.png'
import miscMaskLight from '@images/misc/misc-mask-light.png'
import tree1 from '@images/misc/tree1.png'
import tree3 from '@images/misc/tree3.png'
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
import { themeConfig } from '@themeConfig'
const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
definePage({
meta: {
layout: 'blank',
public: true,
},
})
const router = useRouter()
const otp = ref('')
const isOtpInserted = ref(false)
const onFinish = () => {
isOtpInserted.value = true
setTimeout(() => {
isOtpInserted.value = false
router.push('/')
}, 2000)
}
</script>
<template>
<div class="auth-wrapper d-flex align-center justify-center pa-4">
<VCard
class="auth-card pa-sm-4 pa-md-7 pa-0"
max-width="460"
>
<VCardText>
<RouterLink to="/">
<div class="d-flex align-center gap-x-3 justify-center mb-6">
<VNodeRenderer :nodes="themeConfig.app.logo" />
<h1 class="auth-title">
{{ themeConfig.app.title }}
</h1>
</div>
</RouterLink>
<h4 class="text-h4 mb-1">
Two Step Verification 💬
</h4>
<p class="mb-1">
We sent a verification code to your mobile. Enter the code from the mobile in the field below.
</p>
<h6 class="text-h6">
******1234
</h6>
</VCardText>
<VCardText>
<VForm @submit.prevent="() => {}">
<VRow>
<!-- email -->
<VCol cols="12">
<div>Type your 6 digit security code</div>
<VOtpInput
v-model="otp"
:disabled="isOtpInserted"
type="number"
class="pa-0"
@finish="onFinish"
/>
</VCol>
<!-- reset password -->
<VCol cols="12">
<VBtn
block
:loading="isOtpInserted"
:disabled="isOtpInserted"
type="submit"
>
Verify my account
</VBtn>
</VCol>
<!-- back to login -->
<VCol cols="12">
<div class="d-flex justify-center align-center flex-wrap">
<span class="me-1">Didn't get the code?</span>
<a href="#">Resend</a>
</div>
</VCol>
</VRow>
</VForm>
</VCardText>
</VCard>
<div class="d-flex gap-x-2 auth-footer-start-tree">
<img
class="d-none d-md-block"
:src="tree3"
:height="120"
:width="67"
>
<img
class="d-none d-md-block align-self-end"
:src="tree3"
:height="70"
:width="40"
>
</div>
<img
:src="tree1"
class="auth-footer-end-tree d-none d-md-block"
:width="97"
:height="210"
>
<!-- bg img -->
<img
class="auth-footer-mask d-none d-md-block"
:src="authThemeMask"
height="172"
>
</div>
</template>
<style lang="scss">
@use "@core/scss/template/pages/page-auth";
.v-otp-input {
.v-otp-input__content {
padding-inline: 0;
}
}
</style>