81 lines
1.9 KiB
Vue
81 lines
1.9 KiB
Vue
<script setup lang="ts">
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'submit'): void
|
||
}>()
|
||
const verifyName = verify.test(
|
||
// @ts-ignore
|
||
new RegExp(/^[a-z]{1}(?=.*[a-z])[a-z\d\-]{4,18}[a-z\d]{1}$/)
|
||
)
|
||
|
||
const schema = z.object({
|
||
UserName: z.string({
|
||
required_error: '账号不能为空'
|
||
})
|
||
.refine(verifyName, '名称应该以6-20位的小写字母组成，允许其中包含数字、连接符（-）')
|
||
.refine(str => str !== 'root' && str !== 'jwanfs', '不允许起名关键字root、jwanfs'),
|
||
Email: z.string({
|
||
required_error: '请填写邮箱'
|
||
}).email('邮箱格式有误'),
|
||
Code: z.string({
|
||
required_error: '验证码不能为空'
|
||
}),
|
||
})
|
||
|
||
|
||
const { data, refresh } = useAsyncData(authApi.captcha)
|
||
|
||
|
||
const onSubmit: any = async (values: ZodInfer<typeof schema>) => {
|
||
try {
|
||
await authApi.register({ ...event, RandomPass: true, Uuid: data.value?.uuid ?? '' })
|
||
emit('submit')
|
||
} catch (err: any) {
|
||
toast.error("操作失败", {
|
||
description: err.message
|
||
})
|
||
}
|
||
refresh()
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
<template>
|
||
|
||
<AutoForm class="space-y-4" :schema="schema" :field-config="{
|
||
UserName: {
|
||
hideLabel: true,
|
||
inputProps: {
|
||
placeholder: '请填写账号',
|
||
},
|
||
},
|
||
Email: {
|
||
hideLabel: true,
|
||
inputProps: {
|
||
type: 'email',
|
||
placeholder: '请填写邮箱',
|
||
},
|
||
},
|
||
Code: {
|
||
hideLabel: true,
|
||
inputProps: {
|
||
placeholder: '请填写验证码',
|
||
},
|
||
},
|
||
}" @submit="onSubmit">
|
||
<template #Code="slotProps">
|
||
<div class="flex items-start gap-3">
|
||
<AutoFormField v-bind="slotProps" />
|
||
<Button class="w-[150px] bg-no-repeat" type="button"
|
||
:style="{ backgroundSize: '100% 100%', backgroundImage: `url(data:image/png;base64,${data?.imgByte})` }"
|
||
@click="refresh" />
|
||
</div>
|
||
</template>
|
||
|
||
<Button type="submit" class="font-bold w-full">
|
||
登录
|
||
</Button>
|
||
</AutoForm>
|
||
</template>
|