admin-vben5/packages/effects/common-ui/src/ui/authentication/register.vue

169 lines
4.1 KiB
Vue
Raw Normal View History

2024-05-19 21:20:42 +08:00
<script setup lang="ts">
import type { RegisterEmits } from './types';
2024-06-08 19:49:06 +08:00
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,
2024-07-14 13:48:47 +08:00
confirmPassword: '',
2024-05-19 21:20:42 +08:00
password: '',
submitted: false,
username: '',
});
const usernameStatus = computed(() => {
return formState.submitted && !formState.username ? 'error' : 'default';
});
const passwordStatus = computed(() => {
return formState.submitted && !formState.password ? 'error' : 'default';
});
2024-07-14 13:48:47 +08:00
const confirmPasswordStatus = computed(() => {
return formState.submitted && formState.password !== formState.confirmPassword
2024-05-19 21:20:42 +08:00
? 'error'
: 'default';
});
function handleSubmit() {
formState.submitted = true;
if (
usernameStatus.value !== 'default' ||
passwordStatus.value !== 'default'
) {
return;
}
emit('submit', {
password: formState.password,
username: formState.username,
});
}
function goToLogin() {
router.push(props.loginPath);
2024-05-19 21:20:42 +08:00
}
</script>
<template>
<div>
<Title>
{{ $t('authentication.createAnAccount') }} 🚀
<template #desc> {{ $t('authentication.signUpSubtitle') }} </template>
2024-05-19 21:20:42 +08:00
</Title>
<VbenInput
v-model="formState.username"
:error-tip="$t('authentication.usernameTip')"
2024-05-19 21:20:42 +08:00
: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.passwordTip')"
2024-05-19 21:20:42 +08:00
: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.passwordStrength') }}
2024-05-19 21:20:42 +08:00
</template>
</VbenInputPassword>
<VbenInputPassword
2024-07-14 13:48:47 +08:00
v-model="formState.confirmPassword"
:error-tip="$t('authentication.confirmPasswordTip')"
:label="$t('authentication.confirmPassword')"
:placeholder="$t('authentication.confirmPassword')"
2024-07-14 13:48:47 +08:00
:status="confirmPasswordStatus"
name="confirmPassword"
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.agree') }}
2024-06-23 19:17:31 +08:00
<span class="text-primary hover:text-primary-hover">{{
2024-07-14 14:02:55 +08:00
$t('authentication.privacyPolicy')
2024-05-19 21:20:42 +08:00
}}</span>
&
2024-06-23 19:17:31 +08:00
<span class="text-primary hover:text-primary-hover">
{{ $t('authentication.terms') }}
2024-05-19 21:20:42 +08:00
</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.agreeTip') }}
2024-05-19 21:20:42 +08:00
</p>
</Transition>
</div>
<div>
<VbenButton :loading="loading" class="w-full" @click="handleSubmit">
{{ $t('authentication.signUp') }}
2024-05-19 21:20:42 +08:00
</VbenButton>
</div>
<div class="mt-4 text-center text-sm">
{{ $t('authentication.alreadyHaveAccount') }}
2024-05-19 21:20:42 +08:00
<span
2024-06-23 19:17:31 +08:00
class="text-primary hover:text-primary-hover cursor-pointer text-sm font-normal"
@click="goToLogin()"
2024-05-19 21:20:42 +08:00
>
{{ $t('authentication.goToLogin') }}
2024-05-19 21:20:42 +08:00
</span>
</div>
</div>
</template>