115 lines
2.3 KiB
Vue
115 lines
2.3 KiB
Vue
<script setup lang="ts">
|
||
import type { VbenFormSchema } from '@vben-core/form-ui';
|
||
|
||
import { $t } from '@vben/locales';
|
||
import { useVbenForm } from '@vben-core/form-ui';
|
||
import { VbenButton } from '@vben-core/shadcn-ui';
|
||
import { computed, reactive } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
|
||
import Title from './auth-title.vue';
|
||
|
||
interface Props {
|
||
formSchema: VbenFormSchema[];
|
||
/**
|
||
* @zh_CN 是否处于加载处理状态
|
||
*/
|
||
loading?: boolean;
|
||
/**
|
||
* @zh_CN 登录路径
|
||
*/
|
||
loginPath?: string;
|
||
/**
|
||
* @zh_CN 标题
|
||
*/
|
||
title?: string;
|
||
/**
|
||
* @zh_CN 描述
|
||
*/
|
||
subTitle?: string;
|
||
/**
|
||
* @zh_CN 按钮文本
|
||
*/
|
||
submitButtonText?: string;
|
||
}
|
||
|
||
defineOptions({
|
||
name: 'ForgetPassword',
|
||
});
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
loading: false,
|
||
loginPath: '/auth/login',
|
||
submitButtonText: '',
|
||
subTitle: '',
|
||
title: '',
|
||
});
|
||
|
||
const emit = defineEmits<{
|
||
submit: [Record<string, any>];
|
||
}>();
|
||
|
||
const [Form, formApi] = useVbenForm(
|
||
reactive({
|
||
commonConfig: {
|
||
hideLabel: true,
|
||
hideRequiredMark: true,
|
||
},
|
||
schema: computed(() => props.formSchema),
|
||
showDefaultActions: false,
|
||
}),
|
||
);
|
||
|
||
const router = useRouter();
|
||
|
||
async function handleSubmit() {
|
||
const { valid } = await formApi.validate();
|
||
const values = await formApi.getValues();
|
||
if (valid) {
|
||
emit('submit', values);
|
||
}
|
||
}
|
||
|
||
function goToLogin() {
|
||
router.push(props.loginPath);
|
||
}
|
||
|
||
defineExpose({
|
||
getFormApi: () => formApi,
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<Title>
|
||
<slot name="title">
|
||
{{ title || $t('authentication.forgetPassword') }} 🤦🏻♂️
|
||
</slot>
|
||
<template #desc>
|
||
<slot name="subTitle">
|
||
{{ subTitle || $t('authentication.forgetPasswordSubtitle') }}
|
||
</slot>
|
||
</template>
|
||
</Title>
|
||
<Form />
|
||
|
||
<div>
|
||
<VbenButton
|
||
:class="{
|
||
'cursor-wait': loading,
|
||
}"
|
||
aria-label="submit"
|
||
class="mt-2 w-full"
|
||
@click="handleSubmit"
|
||
>
|
||
<slot name="submitButtonText">
|
||
{{ submitButtonText || $t('authentication.sendResetLink') }}
|
||
</slot>
|
||
</VbenButton>
|
||
<VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
|
||
{{ $t('common.back') }}
|
||
</VbenButton>
|
||
</div>
|
||
</div>
|
||
</template>
|