Skip to content

Commit b624de7

Browse files
wxg0103wxg0103
committed
refactor: user reset password ui
1 parent 02e7cac commit b624de7

File tree

4 files changed

+113
-102
lines changed

4 files changed

+113
-102
lines changed

‎ui/src/api/type/user.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ interface ResetCurrentUserPasswordRequest {
8282
/**
8383
* 验证码
8484
*/
85-
code: string
85+
code?: string
8686
/**
8787
*密码
8888
*/

‎ui/src/api/user/user-manage.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,25 @@ const resetPassword: (
7878
return post('/user/re_password', request, undefined, loading)
7979
}
8080

81+
/**
82+
* 重置密码
83+
* @param request 重置密码请求参数
84+
* @param loading 接口加载器
85+
* @returns
86+
*/
87+
const resetCurrentPassword: (
88+
request: ResetPasswordRequest,
89+
loading?: Ref<boolean>
90+
) => Promise<Result<boolean>> = (request, loading) => {
91+
return post('/user/current/reset_password', request, undefined, loading)
92+
}
93+
8194
export default {
8295
getUserManage,
8396
putUserManage,
8497
delUserManage,
8598
postUserManage,
8699
putUserManagePassword,
87-
resetPassword
100+
resetPassword,
101+
resetCurrentPassword
88102
}

‎ui/src/layout/layout-header/avatar/ResetPassword.vue‎

Lines changed: 75 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -27,51 +27,51 @@
2727
type="password"
2828
class="input-item"
2929
v-model="resetPasswordForm.re_password"
30-
:placeholder="$t('views.user.userForm.form.re_password.placeholder')"
30+
:placeholder="$t('views.login.enterPassword')"
3131
show-password
3232
>
3333
</el-input>
3434
</el-form-item>
3535
</el-form>
36-
<el-form
37-
class="reset-password-form mb-24"
38-
ref="resetPasswordFormRef2"
39-
:model="resetPasswordForm"
40-
:rules="rules2"
41-
>
42-
<p class="mb-8 lighter">{{ $t('views.login.useEmail') }}</p>
43-
<el-form-item style="margin-bottom: 8px">
44-
<el-input
45-
class="input-item"
46-
:disabled="true"
47-
v-bind:modelValue="user.userInfo?.email"
48-
:placeholder="t('views.user.userForm.form.email.placeholder')"
49-
>
50-
</el-input>
51-
</el-form-item>
52-
<el-form-item prop="code">
53-
<div class="flex-between w-full">
54-
<el-input
55-
class="code-input"
56-
v-model="resetPasswordForm.code"
57-
:placeholder="$t('views.login.verificationCode.placeholder')"
58-
>
59-
</el-input>
60-
<el-button
61-
:disabled="isDisabled"
62-
class="send-email-button ml-8"
63-
@click="sendEmail"
64-
:loading="loading"
65-
>
66-
{{
67-
isDisabled
68-
? `${$t('views.login.verificationCode.resend')}（${time}s）`
69-
: $t('views.login.verificationCode.getVerificationCode')
70-
}}
71-
</el-button>
72-
</div>
73-
</el-form-item>
74-
</el-form>
36+
<!-- <el-form-->
37+
<!-- class="reset-password-form mb-24"-->
38+
<!-- ref="resetPasswordFormRef2"-->
39+
<!-- :model="resetPasswordForm"-->
40+
<!-- :rules="rules2"-->
41+
<!-- >-->
42+
<!-- <p class="mb-8 lighter">{{ $t('views.login.useEmail') }}</p>-->
43+
<!-- <el-form-item style="margin-bottom: 8px">-->
44+
<!-- <el-input-->
45+
<!-- class="input-item"-->
46+
<!-- :disabled="true"-->
47+
<!-- v-bind:modelValue="user.userInfo?.email"-->
48+
<!-- :placeholder="t('views.user.userForm.form.email.placeholder')"-->
49+
<!-- >-->
50+
<!-- </el-input>-->
51+
<!-- </el-form-item>-->
52+
<!-- <el-form-item prop="code">-->
53+
<!-- <div class="flex-between w-full">-->
54+
<!-- <el-input-->
55+
<!-- class="code-input"-->
56+
<!-- v-model="resetPasswordForm.code"-->
57+
<!-- :placeholder="$t('views.login.verificationCode.placeholder')"-->
58+
<!-- >-->
59+
<!-- </el-input>-->
60+
<!-- <el-button-->
61+
<!-- :disabled="isDisabled"-->
62+
<!-- class="send-email-button ml-8"-->
63+
<!-- @click="sendEmail"-->
64+
<!-- :loading="loading"-->
65+
<!-- >-->
66+
<!-- {{-->
67+
<!-- isDisabled-->
68+
<!-- ? `${$t('views.login.verificationCode.resend')}（${time}s）`-->
69+
<!-- : $t('views.login.verificationCode.getVerificationCode')-->
70+
<!-- }}-->
71+
<!-- </el-button>-->
72+
<!-- </div>-->
73+
<!-- </el-form-item>-->
74+
<!-- </el-form>-->
7575
<template #footer>
7676
<div class="dialog-footer">
7777
<el-button @click="resetPasswordDialog = false">{{ $t('common.cancel') }}</el-button>
@@ -83,16 +83,16 @@
8383
</el-dialog>
8484
</template>
8585
<script setup lang="ts">
86-
import { ref } from 'vue'
87-
import type { ResetCurrentUserPasswordRequest } from '@/api/type/user'
88-
import type { FormInstance, FormRules } from 'element-plus'
89-
import { MsgSuccess } from '@/utils/message'
90-
import UserApi from '@/api/user/user'
86+
import {ref} from 'vue'
87+
import type {ResetCurrentUserPasswordRequest} from '@/api/type/user'
88+
import type {FormInstance, FormRules} from 'element-plus'
89+
import UserApi from '@/api/user/user-manage'
9190
import useStore from '@/stores'
92-
import { useRouter } from 'vue-router'
93-
import { t } from '@/locales'
91+
import {useRouter} from 'vue-router'
92+
import {t} from '@/locales'
93+
9494
const router = useRouter()
95-
const { user } = useStore()
95+
const {user} = useStore()
9696
9797
const resetPasswordDialog = ref<boolean>(false)
9898
@@ -147,28 +147,28 @@ const rules1 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
147147
}
148148
]
149149
})
150-
const rules2 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
151-
// @ts-ignore
152-
code: [
153-
{
154-
required: true,
155-
message: t('views.login.verificationCode.placeholder'),
156-
trigger: 'blur'
157-
}
158-
]
159-
})
160-
/**
161-
* 发送验证码
162-
*/
163-
const sendEmail = () => {
164-
resetPasswordFormRef1.value?.validate().then(() => {
165-
UserApi.sendEmailToCurrent(loading).then(() => {
166-
MsgSuccess(t('views.login.verificationCode.successMessage'))
167-
isDisabled.value = true
168-
handleTimeChange()
169-
})
170-
})
171-
}
150+
// const rules2 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
151+
// // @ts-ignore
152+
// code: [
153+
// {
154+
// required: true,
155+
// message: t('views.login.verificationCode.placeholder'),
156+
// trigger: 'blur'
157+
// }
158+
// ]
159+
// })
160+
// /**
161+
// * 发送验证码
162+
// */
163+
// const sendEmail = () => {
164+
// resetPasswordFormRef1.value?.validate().then(() => {
165+
// UserApi.sendEmailToCurrent(loading).then(() => {
166+
// MsgSuccess(t('views.login.verificationCode.successMessage'))
167+
// isDisabled.value = true
168+
// handleTimeChange()
169+
// })
170+
// })
171+
// }
172172
173173
const handleTimeChange = () => {
174174
if (time.value <= 0) {
@@ -184,7 +184,7 @@ const handleTimeChange = () => {
184184
185185
const open = () => {
186186
resetPasswordForm.value = {
187-
code: '',
187+
//code: '',
188188
password: '',
189189
re_password: ''
190190
}
@@ -194,23 +194,17 @@ const open = () => {
194194
}
195195
const resetPassword = () => {
196196
resetPasswordFormRef1.value?.validate().then(() => {
197-
resetPasswordFormRef2.value
198-
?.validate()
199-
.then(() => {
200-
return UserApi.resetCurrentUserPassword(resetPasswordForm.value)
201-
})
202-
.then(() => {
203-
return user.logout()
204-
})
197+
return UserApi.resetCurrentPassword(resetPasswordForm.value)
205198
.then(() => {
206-
router.push({ name: 'login' })
199+
user.logout()
200+
router.push({name: 'login'})
207201
})
208202
})
209203
}
210204
const close = () => {
211205
resetPasswordDialog.value = false
212206
}
213207
214-
defineExpose({ open, close })
208+
defineExpose({open, close})
215209
</script>
216210
<style lang="scss" scope></style>

‎ui/src/layout/layout-header/avatar/index.vue‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<el-dropdown trigger="click" type="primary">
33
<div class="flex-center cursor">
44
<el-avatar :size="30">
5-
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
5+
<img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
66
</el-avatar>
77
<span class="ml-8 color-text-primary">{{ user.userInfo?.username }}</span>
88
<el-icon class="el-icon--right">
9-
<CaretBottom />
9+
<CaretBottom/>
1010
</el-icon>
1111
</div>
1212

@@ -15,7 +15,7 @@
1515
<div class="userInfo flex align-center">
1616
<div class="mr-12 flex align-center">
1717
<el-avatar :size="30">
18-
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
18+
<img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
1919
</el-avatar>
2020
</div>
2121
<div style="width: 90%">
@@ -25,7 +25,8 @@
2525
>
2626
<el-tag size="small" class="default-tag">{{ user.userInfo?.role[0] }}</el-tag>
2727
<el-tag size="small" class="default-tag ml-4" v-if="user.userInfo?.role?.length > 1"
28-
>+{{ user.userInfo?.role?.length - 1 }}</el-tag
28+
>+{{ user.userInfo?.role?.length - 1 }}
29+
</el-tag
2930
>
3031
</template>
3132
</div>
@@ -42,7 +43,9 @@
4243
<el-dropdown class="w-full" trigger="hover" placement="left-start">
4344
<div class="flex-between w-full" style="line-height: 22px; padding: 12px 11px">
4445
<span> {{ $t('layout.language') }}</span>
45-
<el-icon><ArrowRight /></el-icon>
46+
<el-icon>
47+
<ArrowRight/>
48+
</el-icon>
4649
</div>
4750

4851
<template #dropdown>
@@ -55,14 +58,14 @@
5558
class="flex-between"
5659
>
5760
<span :class="lang.value === user.userInfo?.language ? 'primary' : ''">{{
58-
lang.label
59-
}}</span>
61+
lang.label
62+
}}</span>
6063

6164
<el-icon
6265
:class="lang.value === user.userInfo?.language ? 'primary' : ''"
6366
v-if="lang.value === user.userInfo?.language"
6467
>
65-
<Check />
68+
<Check/>
6669
</el-icon>
6770
</el-dropdown-item>
6871
</el-dropdown-menu>
@@ -86,25 +89,24 @@
8689
</el-dropdown-menu>
8790
</template>
8891
</el-dropdown>
89-
<APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef" />
90-
<!-- <ResetPassword ref="resetPasswordRef"></ResetPassword> -->
92+
<APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef"/>
93+
<ResetPassword ref="resetPasswordRef"></ResetPassword>
9194
<!-- <AboutDialog ref="AboutDialogRef"></AboutDialog>
9295
-->
9396
<!-- <UserPwdDialog ref="UserPwdDialogRef" /> -->
9497
</template>
9598
<script setup lang="ts">
96-
import { ref, onMounted } from 'vue'
99+
import {ref, onMounted} from 'vue'
97100
import useStore from '@/stores'
98-
import { useRouter } from 'vue-router'
99-
// import ResetPassword from './ResetPassword.vue'
101+
import {useRouter} from 'vue-router'
102+
import ResetPassword from './ResetPassword.vue'
100103
// import AboutDialog from './AboutDialog.vue'
101104
// import UserPwdDialog from '@/views/user-manage/component/UserPwdDialog.vue'
102105
import APIKeyDialog from './APIKeyDialog.vue'
103-
import { ComplexPermission } from '@/utils/permission/type'
104-
import { langList } from '@/locales/index'
105-
import { useLocale } from '@/locales/useLocale'
106-
import type ResetPassword from "@/layout/layout-header/avatar/ResetPassword.vue";
107-
const { user } = useStore()
106+
import {ComplexPermission} from '@/utils/permission/type'
107+
import {langList} from '@/locales/index'
108+
109+
const {user} = useStore()
108110
const router = useRouter()
109111
110112
const AboutDialogRef = ref()
@@ -130,7 +132,7 @@ const openResetPassword = () => {
130132
131133
const logout = () => {
132134
user.logout().then(() => {
133-
router.push({ name: 'login' })
135+
router.push({name: 'login'})
134136
})
135137
}
136138
@@ -150,6 +152,7 @@ onMounted(() => {
150152
151153
:deep(.el-dropdown-menu__item) {
152154
padding: 12px 11px;
155+
153156
&:hover {
154157
background: var(--app-text-color-light-1);
155158
}

0 commit comments

Comments
 (0)