<script lang="ts" setup>
|
import type { VbenFormSchema } from '@vben/common-ui';
|
import type { Recordable } from '@vben/types';
|
|
import { computed, h, ref } from 'vue';
|
|
import { AuthenticationRegister, z } from '@vben/common-ui';
|
import { $t } from '@vben/locales';
|
|
defineOptions({ name: 'Register' });
|
|
const loading = ref(false);
|
|
const formSchema = computed((): VbenFormSchema[] => {
|
return [
|
{
|
component: 'VbenInput',
|
componentProps: {
|
placeholder: $t('authentication.usernameTip'),
|
},
|
fieldName: 'username',
|
label: $t('authentication.username'),
|
rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
|
},
|
{
|
component: 'VbenInputPassword',
|
componentProps: {
|
passwordStrength: true,
|
placeholder: $t('authentication.password'),
|
},
|
fieldName: 'password',
|
label: $t('authentication.password'),
|
renderComponentContent() {
|
return {
|
strengthText: () => $t('authentication.passwordStrength'),
|
};
|
},
|
rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
|
},
|
{
|
component: 'VbenInputPassword',
|
componentProps: {
|
placeholder: $t('authentication.confirmPassword'),
|
},
|
dependencies: {
|
rules(values) {
|
const { password } = values;
|
return z
|
.string({ required_error: $t('authentication.passwordTip') })
|
.min(1, { message: $t('authentication.passwordTip') })
|
.refine((value) => value === password, {
|
message: $t('authentication.confirmPasswordTip'),
|
});
|
},
|
triggerFields: ['password'],
|
},
|
fieldName: 'confirmPassword',
|
label: $t('authentication.confirmPassword'),
|
},
|
{
|
component: 'VbenCheckbox',
|
fieldName: 'agreePolicy',
|
renderComponentContent: () => ({
|
default: () =>
|
h('span', [
|
$t('authentication.agree'),
|
h(
|
'a',
|
{
|
class: 'vben-link ml-1 ',
|
href: '',
|
},
|
`${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
|
),
|
]),
|
}),
|
rules: z.boolean().refine((value) => !!value, {
|
message: $t('authentication.agreeTip'),
|
}),
|
},
|
];
|
});
|
|
function handleSubmit(value: Recordable<any>) {
|
// eslint-disable-next-line no-console
|
console.log('register submit:', value);
|
}
|
</script>
|
|
<template>
|
<AuthenticationRegister
|
:form-schema="formSchema"
|
:loading="loading"
|
@submit="handleSubmit"
|
/>
|
</template>
|
