forgot-password.vue
3.74 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
<script setup>
import authV2ForgotPasswordIllustrationBorderedDark from '@images/pages/auth-v2-forgot-password-illustration-dark-border.png'
import authV2ForgotPasswordIllustrationDark from '@images/pages/auth-v2-forgot-password-illustration-dark.png'
import authV2ForgotPasswordIllustrationBorderedLight from '@images/pages/auth-v2-forgot-password-illustration-light-border.png'
import authV2ForgotPasswordIllustrationLight from '@images/pages/auth-v2-forgot-password-illustration-light.png'
import tree1 from '@images/misc/tree1.png'
import authV2MaskDark from '@images/pages/mask-v2-dark.png'
import authV2MaskLight from '@images/pages/mask-v2-light.png'
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
import { themeConfig } from '@themeConfig'
const authThemeImg = useGenerateImageVariant(authV2ForgotPasswordIllustrationLight, authV2ForgotPasswordIllustrationDark, authV2ForgotPasswordIllustrationBorderedLight, authV2ForgotPasswordIllustrationBorderedDark, true)
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
const email = ref('')
definePage({
meta: {
layout: 'blank',
unauthenticatedOnly: true,
},
})
</script>
<template>
<RouterLink to="/">
<div class="auth-logo d-flex align-center gap-x-3">
<VNodeRenderer :nodes="themeConfig.app.logo" />
<h1 class="auth-title">
{{ themeConfig.app.title }}
</h1>
</div>
</RouterLink>
<VRow
class="auth-wrapper"
no-gutters
>
<VCol
md="8"
class="d-none d-md-flex position-relative"
>
<div class="d-flex align-center justify-end w-100 h-100 pa-10 pe-0">
<VImg
width="853"
height="684"
:src="authThemeImg"
class="auth-illustration"
/>
</div>
<img
class="auth-footer-mask"
height="360"
:src="authThemeMask"
>
<img
:src="tree1"
alt="tree image"
height="140"
class="auth-footer-tree"
>
</VCol>
<VCol
cols="12"
md="4"
class="auth-card-v2 d-flex align-center justify-center"
style="background-color: rgb(var(--v-theme-surface));"
>
<VCard
flat
:max-width="500"
class="mt-12 mt-sm-0 pa-4"
>
<VCardText>
<h4 class="text-h4 mb-1">
Forgot Password? 🔒
</h4>
<p class="mb-0">
Enter your email and we'll send you instructions to reset your password
</p>
</VCardText>
<VCardText>
<VForm @submit.prevent="() => {}">
<VRow>
<!-- email -->
<VCol cols="12">
<VTextField
v-model="email"
autofocus
label="Email"
placeholder="johndoe@email.com"
type="email"
/>
</VCol>
<!-- Reset link -->
<VCol cols="12">
<VBtn
block
type="submit"
>
Send Reset Link
</VBtn>
</VCol>
<!-- back to login -->
<VCol cols="12">
<RouterLink
class="d-flex align-center justify-center"
:to="{ name: 'pages-authentication-login-v2' }"
>
<VIcon
icon="ri-arrow-left-s-line"
class="flip-in-rtl"
/>
<span>Back to login</span>
</RouterLink>
</VCol>
</VRow>
</VForm>
</VCardText>
</VCard>
</VCol>
</VRow>
</template>
<style lang="scss">
@use "@core/scss/template/pages/page-auth.scss";
</style>