110 lines
2.1 KiB
Vue
110 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { Form } from '@/components/Form'
|
|
import { reactive } from 'vue'
|
|
import { useI18n } from '@/hooks/web/useI18n'
|
|
import { required } from '@/utils/formRules'
|
|
import { useForm } from '@/hooks/web/useForm'
|
|
import { ElButton } from 'element-plus'
|
|
|
|
const emit = defineEmits(['to-login'])
|
|
|
|
const { register } = useForm()
|
|
|
|
const { t } = useI18n()
|
|
|
|
const schema = reactive<FormSchema[]>([
|
|
{
|
|
field: 'title',
|
|
colProps: {
|
|
span: 24
|
|
}
|
|
},
|
|
{
|
|
field: 'user_name',
|
|
label: t('login.username'),
|
|
value: '',
|
|
component: 'Input',
|
|
colProps: {
|
|
span: 24
|
|
},
|
|
componentProps: {
|
|
placeholder: t('login.usernamePlaceholder')
|
|
}
|
|
},
|
|
{
|
|
field: 'password',
|
|
label: t('login.password'),
|
|
value: 'admin',
|
|
component: 'InputPassword',
|
|
colProps: {
|
|
span: 24
|
|
},
|
|
componentProps: {
|
|
style: {
|
|
width: '100%'
|
|
},
|
|
placeholder: t('login.passwordPlaceholder')
|
|
}
|
|
},
|
|
{
|
|
field: 'check_password',
|
|
label: t('login.checkPassword'),
|
|
value: 'admin',
|
|
component: 'InputPassword',
|
|
colProps: {
|
|
span: 24
|
|
},
|
|
componentProps: {
|
|
style: {
|
|
width: '100%'
|
|
},
|
|
placeholder: t('login.passwordPlaceholder')
|
|
}
|
|
},
|
|
{
|
|
field: 'register',
|
|
colProps: {
|
|
span: 24
|
|
}
|
|
}
|
|
])
|
|
|
|
const rules = {
|
|
username: [required],
|
|
password: [required]
|
|
}
|
|
|
|
const toLogin = () => {
|
|
emit('to-login')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Form
|
|
:schema="schema"
|
|
:rules="rules"
|
|
label-position="top"
|
|
hide-required-asterisk
|
|
size="large"
|
|
class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
|
|
@register="register"
|
|
>
|
|
<template #title>
|
|
<h2 class="text-2xl font-bold text-center w-[100%]">{{ t('login.register') }}</h2>
|
|
</template>
|
|
|
|
<template #register>
|
|
<div class="w-[100%]">
|
|
<ElButton type="primary" class="w-[100%]">
|
|
{{ t('login.register') }}
|
|
</ElButton>
|
|
</div>
|
|
<div class="w-[100%] mt-15px">
|
|
<ElButton class="w-[100%]" @click="toLogin">
|
|
{{ t('login.hasUser') }}
|
|
</ElButton>
|
|
</div>
|
|
</template>
|
|
</Form>
|
|
</template>
|