101 lines
2.7 KiB
Vue
101 lines
2.7 KiB
Vue
<template>
|
|
<a-form
|
|
ref="formRef"
|
|
:model="formData"
|
|
class="form"
|
|
:label-col-props="{ span: 8 }"
|
|
:wrapper-col-props="{ span: 16 }"
|
|
>
|
|
<a-form-item
|
|
field="newPassword"
|
|
:label="$t('userSetting.passwordReset.form.label.newPassword')"
|
|
:rules="[{ required: true, message: $t('login.form.password.errMsg') }]"
|
|
:validate-trigger="['change', 'blur']"
|
|
>
|
|
<a-input-password
|
|
v-model="formData.newPassword"
|
|
placeholder="请输入新密码"
|
|
allow-clear
|
|
>
|
|
</a-input-password>
|
|
</a-form-item>
|
|
<a-form-item
|
|
field="confirmPassword"
|
|
:label="$t('userSetting.passwordReset.form.label.confirmPassword')"
|
|
:rules="[{ required: true, validator: checkEquals }]"
|
|
:validate-trigger="['change', 'blur']"
|
|
>
|
|
<a-input-password
|
|
v-model="formData.confirmPassword"
|
|
placeholder="请确认新密码"
|
|
allow-clear
|
|
>
|
|
</a-input-password>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-space>
|
|
<a-button type="primary" @click="validate">
|
|
{{ $t('userSetting.save') }}
|
|
</a-button>
|
|
<a-button type="secondary" @click="reset">
|
|
{{ $t('userSetting.reset') }}
|
|
</a-button>
|
|
</a-space>
|
|
</a-form-item>
|
|
</a-form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { FormInstance } from '@arco-design/web-vue/es/form';
|
|
import { PasswordReSetModel, resetPassword } from '@/api/user';
|
|
import { Message } from '@arco-design/web-vue';
|
|
import useUser from "@/hooks/user";
|
|
|
|
const { t } = useI18n();
|
|
|
|
const formRef = ref<FormInstance>();
|
|
const formData = ref<PasswordReSetModel>({
|
|
newPassword: '',
|
|
confirmPassword: '',
|
|
});
|
|
const checkEquals = (
|
|
value: string | undefined,
|
|
callback: (error?: string) => void
|
|
) => {
|
|
if (!value) {
|
|
callback(t('userSetting.passwordReset.form.validate.blank'));
|
|
} else if (formData.value.newPassword !== formData.value.confirmPassword) {
|
|
callback(t('userSetting.passwordReset.form.validate.noEquals'));
|
|
}
|
|
};
|
|
|
|
const user = useUser();
|
|
const validate = async () => {
|
|
const vali = await formRef.value?.validate();
|
|
if (!vali) {
|
|
// do some thing
|
|
// you also can use html-type to submit
|
|
const res = await resetPassword(formData.value);
|
|
if (res.status === 200) {
|
|
Message.success({
|
|
content: res.data,
|
|
duration: 5 * 1000,
|
|
});
|
|
await user.logout();
|
|
}
|
|
}
|
|
};
|
|
const reset = async () => {
|
|
await formRef.value?.resetFields();
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.form {
|
|
width: 540px;
|
|
margin: 20px auto;
|
|
}
|
|
</style>
|