admin-vben5/packages/business/universal-ui/src/authentication/register.vue

169 lines
4.2 KiB
Vue
Raw Normal View History

2024-05-19 21:20:42 +08:00
<script setup lang="ts">
2024-06-08 19:49:06 +08:00
import type { RegisterEmits } from './typings';
import { computed, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { $t } from '@vben/locales';
2024-05-19 21:20:42 +08:00
import {
VbenButton,
VbenCheckbox,
VbenInput,
VbenInputPassword,
} from '@vben-core/shadcn-ui';
import Title from './auth-title.vue';
interface Props {
/**
* @zh_CN 是否处于加载处理状态
*/
loading?: boolean;
/**
* @zh_CN 登陆路径
*/
loginPath?: string;
2024-05-19 21:20:42 +08:00
}
defineOptions({
name: 'RegisterForm',
});
const props = withDefaults(defineProps<Props>(), {
2024-05-19 21:20:42 +08:00
loading: false,
loginPath: '/auth/login',
2024-05-19 21:20:42 +08:00
});
const emit = defineEmits<{
submit: RegisterEmits['submit'];
}>();
const router = useRouter();
const formState = reactive({
agreePolicy: false,
comfirmPassword: '',
password: '',
submitted: false,
username: '',
});
const usernameStatus = computed(() => {
return formState.submitted && !formState.username ? 'error' : 'default';
});
const passwordStatus = computed(() => {
return formState.submitted && !formState.password ? 'error' : 'default';
});
const comfirmPasswordStatus = computed(() => {
return formState.submitted && formState.password !== formState.comfirmPassword
? 'error'
: 'default';
});
function handleSubmit() {
formState.submitted = true;
if (
usernameStatus.value !== 'default' ||
passwordStatus.value !== 'default'
) {
return;
}
emit('submit', {
password: formState.password,
username: formState.username,
});
}
function goLogin() {
router.push(props.loginPath);
2024-05-19 21:20:42 +08:00
}
</script>
<template>
<div>
<Title>
{{ $t('authentication.create-an-account') }} 🚀
<template #desc> {{ $t('authentication.sign-up-subtitle') }} </template>
</Title>
<VbenInput
v-model="formState.username"
:error-tip="$t('authentication.username-tip')"
:label="$t('authentication.username')"
:placeholder="$t('authentication.username')"
2024-06-09 13:31:43 +08:00
:status="usernameStatus"
name="username"
2024-05-19 21:20:42 +08:00
type="text"
/>
<!-- Use 8 or more characters with a mix of letters, numbers & symbols. -->
<VbenInputPassword
v-model="formState.password"
:error-tip="$t('authentication.password-tip')"
:label="$t('authentication.password')"
2024-06-09 13:31:43 +08:00
:password-strength="true"
2024-05-19 21:20:42 +08:00
:placeholder="$t('authentication.password')"
2024-06-09 13:31:43 +08:00
:status="passwordStatus"
name="password"
2024-05-19 21:20:42 +08:00
required
type="password"
>
<template #strengthText>
{{ $t('authentication.password-strength') }}
</template>
</VbenInputPassword>
<VbenInputPassword
v-model="formState.comfirmPassword"
:error-tip="$t('authentication.comfirm-password-tip')"
:label="$t('authentication.comfirm-password')"
:placeholder="$t('authentication.comfirm-password')"
2024-06-09 13:31:43 +08:00
:status="comfirmPasswordStatus"
name="comfirmPassword"
2024-05-19 21:20:42 +08:00
required
type="password"
/>
<div class="relative mt-4 flex pb-6">
<div class="flex-center">
<VbenCheckbox
v-model:checked="formState.agreePolicy"
name="agreePolicy"
>
{{ $t('authentication.sign-up-agree') }}
2024-06-23 19:17:31 +08:00
<span class="text-primary hover:text-primary-hover">{{
2024-05-19 21:20:42 +08:00
$t('authentication.sign-up-privacy-policy')
}}</span>
&
2024-06-23 19:17:31 +08:00
<span class="text-primary hover:text-primary-hover">
2024-05-19 21:20:42 +08:00
{{ $t('authentication.sign-up-terms') }}
</span>
</VbenCheckbox>
</div>
<Transition name="slide-up">
<p
v-show="formState.submitted && !formState.agreePolicy"
class="text-destructive absolute bottom-1 left-0 text-xs"
>
{{ $t('authentication.sign-up-agree-tip') }}
</p>
</Transition>
</div>
<div>
<VbenButton :loading="loading" class="w-full" @click="handleSubmit">
{{ $t('authentication.sign-up') }}
</VbenButton>
</div>
<div class="mt-4 text-center text-sm">
{{ $t('authentication.already-account') }}
<span
2024-06-23 19:17:31 +08:00
class="text-primary hover:text-primary-hover cursor-pointer text-sm font-normal"
@click="goLogin()"
2024-05-19 21:20:42 +08:00
>
{{ $t('authentication.go-login') }}
</span>
</div>
</div>
</template>