Skip to content

Commit 1334b0b

Browse files
cwandevcwandev
committed
wip: Add forgot-password (#123)
1 parent b4061d9 commit 1334b0b

File tree

6 files changed

+178
-21
lines changed

6 files changed

+178
-21
lines changed

‎src/api/user.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import request from '@/utils/request'
22

33
export interface LoginData {
4-
username: string
4+
email: string
55
password: string
66
}
77

@@ -13,7 +13,6 @@ export interface UserState {
1313
uid?: number
1414
name?: string
1515
avatar?: string
16-
prose?: string
1716
}
1817

1918
export function login(data: LoginData): Promise<any> {

‎src/locales/en-US.json‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"login": "🔒 Login",
1414
"settings": "Settings",
1515
"basicSettings": "Basic Settings",
16-
"exampleComponents": "Example components"
16+
"exampleComponents": "Example components",
17+
"forgot-password": "Forgot Password"
1718
},
1819
"mock": {
1920
"fromAsyncData": "Data from asynchronous requests",
@@ -43,13 +44,27 @@
4344
"login": {
4445
"login": "Sign In",
4546
"logout": "Sign Out",
46-
"username": "Username",
47+
"email": "Email",
4748
"password": "Password",
48-
"pleaseEnterUsername": "Please enter username",
49+
"pleaseEnterEmail;": "Please enter email",
4950
"pleaseEnterPassword": "Please enter password",
5051
"sign-up": "Click to sign up",
5152
"forgot-password": "Forgot Password?"
5253
},
54+
"forgot-password": {
55+
"email": "Email",
56+
"code": "Code",
57+
"password": "Password",
58+
"comfirmPassword": "Password again",
59+
"pleaseEnterEmail": "Please enter email",
60+
"pleaseEnterCode": "Please enter Code",
61+
"pleaseEnterPassword": "Please enter password",
62+
"pleaseEnterConfirmPassword": "Please enter password again",
63+
"confirm": "Confirm",
64+
"backToLogin": "Back to login",
65+
"getCode": "Get code"
66+
67+
},
5368
"settings": {
5469
"logout": "Sign Out",
5570
"currentVersion": "Current version",

‎src/locales/zh-CN.json‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"login": "🔒 用户登录",
1414
"settings": "设置",
1515
"basicSettings": "基本设置",
16-
"exampleComponents": "示例组件"
16+
"exampleComponents": "示例组件",
17+
"forgot-password": "忘记密码"
1718
},
1819
"mock": {
1920
"fromAsyncData": "来自异步请求的数据",
@@ -43,13 +44,26 @@
4344
"login": {
4445
"login": "登录",
4546
"logout": "退出",
46-
"username": "请输入用户名",
47-
"password": "请输入密码",
48-
"pleaseEnterUsername": "请输入用户名",
47+
"email": "邮箱",
48+
"password": "密码",
49+
"pleaseEnterEmail": "请输入邮箱",
4950
"pleaseEnterPassword": "请输入密码",
5051
"sign-up": "还没有账号？点击注册",
5152
"forgot-password": "忘记密码？"
5253
},
54+
"forgot-password": {
55+
"email": "邮箱",
56+
"code": "验证码",
57+
"password": "密码",
58+
"comfirmPassword": "再次输入密码",
59+
"pleaseEnterEmail": "请输入邮箱",
60+
"pleaseEnterCode": "请输入验证码",
61+
"pleaseEnterPassword": "请输入密码",
62+
"pleaseEnterConfirmPassword": "请再次输入密码",
63+
"confirm": "确认",
64+
"backToLogin": "返回登录",
65+
"getCode": "获取验证码"
66+
},
5367
"settings": {
5468
"logout": "退出登录",
5569
"currentVersion": "当前版本",

‎src/pages/forgot-password/index.vue‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<script setup lang="ts">
2+
import { type RouteMap, useRouter } from 'vue-router'
3+
import { useUserStore } from '@/stores'
4+
5+
const { t } = useI18n()
6+
const router = useRouter()
7+
const userStore = useUserStore()
8+
const loading = ref(false)
9+
10+
const postData = reactive({
11+
email: '',
12+
code: '',
13+
password: '',
14+
confirmPassword: '',
15+
})
16+
17+
const rules = reactive({
18+
eamil: [
19+
{ required: true, message: t('forgot-password.pleaseEnterEmail') },
20+
],
21+
code: [
22+
{ required: true, message: t('forgot-password.pleaseEnterCode') },
23+
],
24+
password: [
25+
{ required: true, message: t('forgot-password.pleaseEnterPassword') },
26+
],
27+
confirmPassword: [
28+
{ required: true, message: t('forgot-password.pleaseEnterConfirmPassword') },
29+
],
30+
})
31+
32+
async function reset(values: any) {
33+
try {
34+
loading.value = true
35+
await userStore.login({ ...postData, ...values })
36+
const { redirect, ...othersQuery } = router.currentRoute.value.query
37+
router.push({
38+
name: (redirect as keyof RouteMap) || 'home',
39+
query: {
40+
...othersQuery,
41+
},
42+
})
43+
}
44+
finally {
45+
loading.value = false
46+
}
47+
}
48+
49+
function handleBackLogin() {
50+
router.replace({ name: 'login' })
51+
}
52+
</script>
53+
54+
<template>
55+
<div class="m-x-a w-7xl text-center">
56+
<van-form :model="postData" :rules="rules" @submit="reset">
57+
<div class="overflow-hidden rounded-3xl">
58+
<van-field
59+
v-model="postData.email"
60+
:rules="rules.eamil"
61+
name="email"
62+
:placeholder="t('forgot-password.email')"
63+
/>
64+
</div>
65+
66+
<div class="mt-16 overflow-hidden rounded-3xl">
67+
<van-field
68+
v-model="postData.code"
69+
:rules="rules.code"
70+
name="code"
71+
:placeholder="t('forgot-password.code')"
72+
>
73+
<template #button>
74+
<van-button size="small" type="primary" plain>
75+
{{ $t('forgot-password.getCode') }}
76+
</van-button>
77+
</template>
78+
</van-field>
79+
</div>
80+
81+
<div class="mt-16 overflow-hidden rounded-3xl">
82+
<van-field
83+
v-model="postData.password"
84+
type="password"
85+
:rules="rules.password"
86+
name="password"
87+
:placeholder="t('forgot-password.password')"
88+
/>
89+
</div>
90+
91+
<div class="mt-16 overflow-hidden rounded-3xl">
92+
<van-field
93+
v-model="postData.confirmPassword"
94+
type="password"
95+
:rules="rules.confirmPassword"
96+
name="confirmPassword"
97+
:placeholder="t('forgot-password.comfirmPassword')"
98+
/>
99+
</div>
100+
101+
<div class="mt-16">
102+
<van-button
103+
:loading="loading"
104+
type="primary"
105+
native-type="submit"
106+
round block
107+
>
108+
{{ $t('forgot-password.confirm') }}
109+
</van-button>
110+
</div>
111+
</van-form>
112+
113+
<div class="mt-16 text-12 text-[var(--van-primary-color)]" @click="handleBackLogin">
114+
{{ $t('forgot-password.backToLogin') }}
115+
</div>
116+
</div>
117+
</template>
118+
119+
<route lang="json">
120+
{
121+
"name": "forgot-password",
122+
"meta": {
123+
"i18n": "menus.forgot-password"
124+
}
125+
}
126+
</route>

‎src/pages/login/index.vue‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ watch(
2020
)
2121
2222
const postData = reactive({
23-
username: '',
23+
email: '',
2424
password: '',
2525
})
2626
2727
const rules = reactive({
28-
username: [
29-
{ required: true, message: t('login.pleaseEnterUsername') },
28+
email: [
29+
{ required: true, message: t('login.pleaseEnterEmail') },
3030
],
3131
password: [
3232
{ required: true, message: t('login.pleaseEnterPassword') },
@@ -49,6 +49,10 @@ async function login(values: any) {
4949
loading.value = false
5050
}
5151
}
52+
53+
function handleReset() {
54+
router.push({ name: 'forgot-password' })
55+
}
5256
</script>
5357

5458
<template>
@@ -58,24 +62,22 @@ async function login(values: any) {
5862
</div>
5963

6064
<van-form :model="postData" :rules="rules" @submit="login">
61-
<div class="overflow-hidden rounded">
65+
<div class="overflow-hidden rounded-3xl">
6266
<van-field
63-
v-model="postData.username"
64-
:rules="rules.username"
65-
name="username"
66-
:placeholder="t('login.username')"
67-
left-icon="contact"
67+
v-model="postData.email"
68+
:rules="rules.email"
69+
name="email"
70+
:placeholder="t('login.email')"
6871
/>
6972
</div>
7073

71-
<div class="mt-16 overflow-hidden rounded">
74+
<div class="mt-16 overflow-hidden rounded-3xl">
7275
<van-field
7376
v-model="postData.password"
7477
type="password"
7578
:rules="rules.password"
7679
name="password"
7780
:placeholder="t('login.password')"
78-
left-icon="lock"
7981
/>
8082
</div>
8183

@@ -95,7 +97,7 @@ async function login(values: any) {
9597
{{ $t('login.sign-up') }}
9698
</div>
9799

98-
<div class="mt-16 text-12 text-[var(--van-primary-color)]">
100+
<div class="mt-16 text-12 text-[var(--van-primary-color)]" @click="handleReset">
99101
{{ $t('login.forgot-password') }}
100102
</div>
101103
</div>

‎src/types/typed-router.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ declare module 'vue-router/auto-routes' {
2222
'404': RouteRecordInfo<'404', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
2323
'charts': RouteRecordInfo<'charts', '/charts', Record<never, never>, Record<never, never>>,
2424
'counter': RouteRecordInfo<'counter', '/counter', Record<never, never>, Record<never, never>>,
25+
'forgot-password': RouteRecordInfo<'forgot-password', '/forgot-password', Record<never, never>, Record<never, never>>,
2526
'KeepAlive': RouteRecordInfo<'KeepAlive', '/keepalive', Record<never, never>, Record<never, never>>,
2627
'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
2728
'mock': RouteRecordInfo<'mock', '/mock', Record<never, never>, Record<never, never>>,

0 commit comments

Comments
 (0)