添加修改密码对话框组件,优化用户密码重置流程,增强错误处理和用户反馈

This commit is contained in:
keqingmoe 2024-12-28 22:53:36 +08:00
parent 683973bd4f
commit f9d5fed127

View File

@ -0,0 +1,112 @@
<template>
<v-dialog v-model="dialogRepasswdShow" max-width="448">
<v-card class="mx-auto pa-12 pb-8" elevation="8" width="100%" rounded="lg">
<v-form fast-fail @submit.prevent="submit">
<v-text-field v-model="userId" prepend-inner-icon="mdi-account-circle" :rules="userIdRules"
label="账号"></v-text-field>
<v-divider :thickness="10" class="border-opacity-0"></v-divider>
<v-text-field v-model="password" :rules="passwordRules" label="新密码"
:append-inner-icon="visible ? 'mdi-eye' : 'mdi-eye-off'" :type="visible ? 'text' : 'password'"
@click:append-inner="visible = !visible" prepend-inner-icon="mdi-lock-outline"></v-text-field>
<v-divider :thickness="10" class="border-opacity-0"></v-divider>
<v-btn :loading="loading" class="mb-8" color="blue" size="large" type="submit" variant="tonal" block>
修改密码1
</v-btn>
</v-form>
</v-card>
</v-dialog>
<v-dialog v-model="dialogShow" width="auto">
<v-card max-width="400" prepend-icon="mdi-update" :text="dialogText" :title="dialogTitle">
<template v-slot:actions>
<v-btn class="ms-auto" text="Ok" @click="dialogShow = false, dialogClose()"></v-btn>
</template>
</v-card>
</v-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useAuthStore } from '@/store/auth';
import axios, { AxiosError } from 'axios';
const dialogShow = ref(false);
const dialogTitle = ref('');
const dialogText = ref('');
const dialogClose = ref(() => { });
const dialog = (title: string, text: string) => {
dialogTitle.value = title;
dialogText.value = text;
dialogShow.value = true;
return new Promise(res => {
dialogClose.value = res as () => void;
});
};
const dialogRepasswdShow = defineModel({ default: true });
const loading = ref(false);
const userId = ref('');
const password = ref('');
const authStore = useAuthStore();
const storedToken = ref(authStore.token);
const visible = ref(false);
type RepasswdResponse = { success?: string, error?: string };
const requestRepasswd = async () => {
try {
const formData = new FormData;
formData.append("token", storedToken.value);
formData.append("user_id", userId.value);
formData.append("new_passwd", password.value);
let res = await axios.post('/api/auth/repasswd', formData);
console.log(res.data);
return res.data as RepasswdResponse;
} catch (e) {
let ex = e as AxiosError;
if (ex.response?.data) {
console.log(ex.response?.data);
return ex.response?.data as RepasswdResponse;
} {
return { error: ex.message };
}
}
}
const repasswd = async () => {
loading.value = true;
let res = await requestRepasswd();
loading.value = false;
if (res?.error) {
await dialog('错误', `修改密码失败:${res.error}`);
} else {
await dialog('信息', `修改密码成功。`);
}
}
const submit = async (event: SubmitEvent) => {
const results: any = await event;
if (results.valid) {
await repasswd();
}
};
const userIdRules: any = [(value: string) => {
if (value?.length > 0) return true;
return '账号不能为空';
}];
const passwordRules: any = [(value: string) => {
if (value?.length > 0) return true;
return '密码不能为空';
}];
</script>