chore: update common-ui to universal-ui
This commit is contained in:
vben
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="mb-7 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<h2
|
||||
class="text-foreground mb-3 text-3xl font-bold leading-9 tracking-tight lg:text-4xl"
|
||||
>
|
||||
<slot></slot>
|
||||
</h2>
|
||||
|
||||
<p class="text-muted-foreground lg:text-md text-sm">
|
||||
<slot name="desc"></slot>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
157
packages/business/universal-ui/src/authentication/code-login.vue
Normal file
157
packages/business/universal-ui/src/authentication/code-login.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<script setup lang="ts">
|
||||
import type { LoginCodeEmits } from './typings';
|
||||
|
||||
import { computed, onBeforeUnmount, reactive, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
import { VbenButton, VbenInput, VbenPinInput } from '@vben-core/shadcn-ui';
|
||||
|
||||
import Title from './auth-title.vue';
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* @zh_CN 是否处于加载处理状态
|
||||
*/
|
||||
loading?: boolean;
|
||||
/**
|
||||
* @zh_CN 登陆路径
|
||||
*/
|
||||
loginPath?: string;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
name: 'AuthenticationCodeLogin',
|
||||
});
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false,
|
||||
loginPath: '/auth/login',
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: LoginCodeEmits['submit'];
|
||||
}>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const formState = reactive({
|
||||
code: '',
|
||||
phoneNumber: '',
|
||||
requirePhoneNumber: false,
|
||||
submitted: false,
|
||||
});
|
||||
|
||||
const countdown = ref(0);
|
||||
const timer = ref<ReturnType<typeof setTimeout>>();
|
||||
|
||||
const isValidPhoneNumber = computed(() => {
|
||||
return /^1[3-9]\d{9}$/.test(formState.phoneNumber);
|
||||
});
|
||||
|
||||
const btnText = computed(() => {
|
||||
return countdown.value > 0
|
||||
? $t('authentication.send-text', [countdown.value])
|
||||
: $t('authentication.send-code');
|
||||
});
|
||||
const btnLoading = computed(() => {
|
||||
return countdown.value > 0;
|
||||
});
|
||||
|
||||
const phoneNumberStatus = computed(() => {
|
||||
return (formState.submitted || formState.requirePhoneNumber) &&
|
||||
!isValidPhoneNumber.value
|
||||
? 'error'
|
||||
: 'default';
|
||||
});
|
||||
|
||||
const codeStatus = computed(() => {
|
||||
return formState.submitted && !formState.code ? 'error' : 'default';
|
||||
});
|
||||
|
||||
function handleSubmit() {
|
||||
formState.submitted = true;
|
||||
if (phoneNumberStatus.value !== 'default' || codeStatus.value !== 'default') {
|
||||
return;
|
||||
}
|
||||
|
||||
emit('submit', {
|
||||
code: formState.code,
|
||||
phoneNumber: formState.phoneNumber,
|
||||
});
|
||||
}
|
||||
|
||||
function goLogin() {
|
||||
router.push(props.loginPath);
|
||||
}
|
||||
|
||||
async function handleSendCode() {
|
||||
if (btnLoading.value) {
|
||||
return;
|
||||
}
|
||||
if (!isValidPhoneNumber.value) {
|
||||
formState.requirePhoneNumber = true;
|
||||
return;
|
||||
}
|
||||
countdown.value = 60;
|
||||
// TODO: 调用发送验证码接口
|
||||
startCountdown();
|
||||
}
|
||||
|
||||
function startCountdown() {
|
||||
if (countdown.value > 0) {
|
||||
timer.value = setTimeout(() => {
|
||||
countdown.value--;
|
||||
startCountdown();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
countdown.value = 0;
|
||||
clearTimeout(timer.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Title>
|
||||
{{ $t('authentication.welcome-back') }} 📲
|
||||
<template #desc>
|
||||
<span class="text-muted-foreground">
|
||||
{{ $t('authentication.code-subtitle') }}
|
||||
</span>
|
||||
</template>
|
||||
</Title>
|
||||
<VbenInput
|
||||
v-model="formState.phoneNumber"
|
||||
:autofocus="true"
|
||||
:error-tip="$t('authentication.mobile-tip')"
|
||||
:label="$t('authentication.mobile')"
|
||||
:placeholder="$t('authentication.mobile')"
|
||||
:status="phoneNumberStatus"
|
||||
name="phoneNumber"
|
||||
type="number"
|
||||
@keyup.enter="handleSubmit"
|
||||
/>
|
||||
<VbenPinInput
|
||||
v-model="formState.code"
|
||||
:btn-loading="btnLoading"
|
||||
:btn-text="btnText"
|
||||
:code-length="4"
|
||||
:error-tip="$t('authentication.code-tip')"
|
||||
:handle-send-code="handleSendCode"
|
||||
:label="$t('authentication.code')"
|
||||
:placeholder="$t('authentication.code')"
|
||||
:status="codeStatus"
|
||||
name="password"
|
||||
@keyup.enter="handleSubmit"
|
||||
/>
|
||||
<VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
|
||||
{{ $t('common.login') }}
|
||||
</VbenButton>
|
||||
<VbenButton class="mt-4 w-full" variant="outline" @click="goLogin()">
|
||||
{{ $t('common.back') }}
|
||||
</VbenButton>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
import { VbenButton, VbenInput } from '@vben-core/shadcn-ui';
|
||||
|
||||
import Title from './auth-title.vue';
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* @zh_CN 是否处于加载处理状态
|
||||
*/
|
||||
loading?: boolean;
|
||||
/**
|
||||
* @zh_CN 登陆路径
|
||||
*/
|
||||
loginPath?: string;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
name: 'AuthenticationForgetPassword',
|
||||
});
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false,
|
||||
loginPath: '/auth/login',
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [string];
|
||||
}>();
|
||||
|
||||
const router = useRouter();
|
||||
const formState = reactive({
|
||||
email: '',
|
||||
submitted: false,
|
||||
});
|
||||
|
||||
const emailStatus = computed(() => {
|
||||
return formState.submitted && !formState.email ? 'error' : 'default';
|
||||
});
|
||||
|
||||
function handleSubmut() {
|
||||
formState.submitted = true;
|
||||
if (emailStatus.value !== 'default') {
|
||||
return;
|
||||
}
|
||||
emit('submit', formState.email);
|
||||
}
|
||||
|
||||
function goLogin() {
|
||||
router.push(props.loginPath);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Title>
|
||||
{{ $t('authentication.forget-password') }} 🤦🏻♂️
|
||||
<template #desc>
|
||||
{{ $t('authentication.forget-password-subtitle') }}
|
||||
</template>
|
||||
</Title>
|
||||
<div class="mb-6">
|
||||
<VbenInput
|
||||
v-model="formState.email"
|
||||
:error-tip="$t('authentication.email-tip')"
|
||||
:label="$t('authentication.email')"
|
||||
:status="emailStatus"
|
||||
autofocus
|
||||
name="email"
|
||||
placeholder="example@example.com"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<VbenButton class="mt-2 w-full" @click="handleSubmut">
|
||||
{{ $t('authentication.send-reset-link') }}
|
||||
</VbenButton>
|
||||
<VbenButton class="mt-4 w-full" variant="outline" @click="goLogin()">
|
||||
{{ $t('common.back') }}
|
||||
</VbenButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
export { default as AuthenticationCodeLogin } from './code-login.vue';
|
||||
export { default as AuthenticationForgetPassword } from './forget-password.vue';
|
||||
export { default as AuthenticationLogin } from './login.vue';
|
||||
export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
|
||||
export { default as AuthenticationRegister } from './register.vue';
|
||||
export type { LoginAndRegisterParams, LoginCodeParams } from './typings';
|
||||
export { default as AuthenticationColorToggle } from './widgets/color-toggle.vue';
|
||||
export { default as AuthenticationLayoutToggle } from './widgets/layout-toggle.vue';
|
||||
245
packages/business/universal-ui/src/authentication/login.vue
Normal file
245
packages/business/universal-ui/src/authentication/login.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<script setup lang="ts">
|
||||
import type { LoginEmits } from './typings';
|
||||
|
||||
import { computed, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
import {
|
||||
VbenButton,
|
||||
VbenCheckbox,
|
||||
VbenInput,
|
||||
VbenInputPassword,
|
||||
} from '@vben-core/shadcn-ui';
|
||||
|
||||
import Title from './auth-title.vue';
|
||||
import ThirdPartyLogin from './third-party-login.vue';
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* @zh_CN 验证码登录路径
|
||||
*/
|
||||
codeLoginPath?: string;
|
||||
|
||||
/**
|
||||
* @zh_CN 忘记密码路径
|
||||
*/
|
||||
forgetPasswordPath?: string;
|
||||
|
||||
/**
|
||||
* @zh_CN 是否处于加载处理状态
|
||||
*/
|
||||
loading?: boolean;
|
||||
|
||||
/**
|
||||
* @zh_CN 密码占位符
|
||||
*/
|
||||
passwordPlaceholder?: string;
|
||||
|
||||
/**
|
||||
* @zh_CN 二维码登录路径
|
||||
*/
|
||||
qrCodeLoginPath?: string;
|
||||
|
||||
/**
|
||||
* @zh_CN 注册路径
|
||||
*/
|
||||
registerPath?: string;
|
||||
|
||||
/**
|
||||
* @zh_CN 是否显示验证码登录
|
||||
*/
|
||||
showCodeLogin?: boolean;
|
||||
|
||||
/**
|
||||
* @zh_CN 是否显示忘记密码
|
||||
*/
|
||||
showForgetPassword?: boolean;
|
||||
|
||||
/**
|
||||
* @zh_CN 是否显示二维码登录
|
||||
*/
|
||||
showQrcodeLogin?: boolean;
|
||||
|
||||
/**
|
||||
* @zh_CN 是否显示注册按钮
|
||||
*/
|
||||
showRegister?: boolean;
|
||||
|
||||
/**
|
||||
* @zh_CN 是否显示第三方登录
|
||||
*/
|
||||
showThirdPartyLogin?: boolean;
|
||||
|
||||
/**
|
||||
* @zh_CN 用户名占位符
|
||||
*/
|
||||
usernamePlaceholder?: string;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
name: 'AuthenticationLogin',
|
||||
});
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
codeLoginPath: '/auth/code-login',
|
||||
forgetPasswordPath: '/auth/forget-password',
|
||||
loading: false,
|
||||
passwordPlaceholder: '',
|
||||
qrCodeLoginPath: '/auth/qrcode-login',
|
||||
registerPath: '/auth/register',
|
||||
showCodeLogin: true,
|
||||
showForgetPassword: true,
|
||||
showQrcodeLogin: true,
|
||||
showRegister: true,
|
||||
showThirdPartyLogin: true,
|
||||
usernamePlaceholder: '',
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: LoginEmits['submit'];
|
||||
}>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const REMEMBER_ME_KEY = 'REMEMBER_ME_USERNAME';
|
||||
|
||||
const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || '';
|
||||
|
||||
const formState = reactive({
|
||||
password: '',
|
||||
rememberMe: !!localUsername,
|
||||
submitted: false,
|
||||
username: localUsername,
|
||||
});
|
||||
|
||||
const usernameStatus = computed(() => {
|
||||
return formState.submitted && !formState.username ? 'error' : 'default';
|
||||
});
|
||||
|
||||
const passwordStatus = computed(() => {
|
||||
return formState.submitted && !formState.password ? 'error' : 'default';
|
||||
});
|
||||
|
||||
function handleSubmit() {
|
||||
formState.submitted = true;
|
||||
|
||||
if (
|
||||
usernameStatus.value !== 'default' ||
|
||||
passwordStatus.value !== 'default'
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
localStorage.setItem(
|
||||
REMEMBER_ME_KEY,
|
||||
formState.rememberMe ? formState.username : '',
|
||||
);
|
||||
|
||||
emit('submit', {
|
||||
password: formState.password,
|
||||
username: formState.username,
|
||||
});
|
||||
}
|
||||
|
||||
function handleGo(path: string) {
|
||||
router.push(path);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div @keypress.enter.prevent="handleSubmit">
|
||||
<Title>
|
||||
{{ $t('authentication.welcome-back') }} 👋🏻
|
||||
<template #desc>
|
||||
<span class="text-muted-foreground">
|
||||
{{ $t('authentication.login-subtitle') }}
|
||||
</span>
|
||||
</template>
|
||||
</Title>
|
||||
|
||||
<VbenInput
|
||||
v-model="formState.username"
|
||||
:autofocus="false"
|
||||
:error-tip="$t('authentication.username-tip')"
|
||||
:label="$t('authentication.username')"
|
||||
:placeholder="usernamePlaceholder || $t('authentication.username')"
|
||||
:status="usernameStatus"
|
||||
name="username"
|
||||
required
|
||||
type="text"
|
||||
/>
|
||||
<VbenInputPassword
|
||||
v-model="formState.password"
|
||||
:error-tip="$t('authentication.password-tip')"
|
||||
:label="$t('authentication.password')"
|
||||
:placeholder="passwordPlaceholder || $t('authentication.password')"
|
||||
:status="passwordStatus"
|
||||
name="password"
|
||||
required
|
||||
type="password"
|
||||
/>
|
||||
|
||||
<div class="mb-6 mt-4 flex justify-between">
|
||||
<div class="flex-center flex">
|
||||
<VbenCheckbox v-model:checked="formState.rememberMe" name="rememberMe">
|
||||
{{ $t('authentication.remember-me') }}
|
||||
</VbenCheckbox>
|
||||
</div>
|
||||
|
||||
<span
|
||||
v-if="showForgetPassword"
|
||||
class="text-primary hover:text-primary/80 cursor-pointer text-sm font-normal"
|
||||
@click="handleGo(forgetPasswordPath)"
|
||||
>
|
||||
{{ $t('authentication.forget-password') }}
|
||||
</span>
|
||||
<!-- <VbenButton variant="ghost" @click="handleGo('/auth/forget-password')">
|
||||
忘记密码?
|
||||
</VbenButton> -->
|
||||
</div>
|
||||
<VbenButton :loading="loading" class="w-full" @click="handleSubmit">
|
||||
{{ $t('common.login') }}
|
||||
</VbenButton>
|
||||
|
||||
<div class="mb-2 mt-4 flex items-center justify-between">
|
||||
<VbenButton
|
||||
v-if="showCodeLogin"
|
||||
class="w-1/2"
|
||||
variant="outline"
|
||||
@click="handleGo(codeLoginPath)"
|
||||
>
|
||||
{{ $t('authentication.mobile-login') }}
|
||||
</VbenButton>
|
||||
<VbenButton
|
||||
v-if="showQrcodeLogin"
|
||||
class="ml-4 w-1/2"
|
||||
variant="outline"
|
||||
@click="handleGo(qrCodeLoginPath)"
|
||||
>
|
||||
{{ $t('authentication.qrcode-login') }}
|
||||
</VbenButton>
|
||||
<!-- <VbenButton
|
||||
:loading="loading"
|
||||
variant="outline"
|
||||
class="w-1/3"
|
||||
@click="handleGo('/auth/register')"
|
||||
>
|
||||
创建账号
|
||||
</VbenButton> -->
|
||||
</div>
|
||||
|
||||
<!-- 第三方登录 -->
|
||||
<ThirdPartyLogin v-if="showThirdPartyLogin" />
|
||||
|
||||
<div v-if="showRegister" class="text-center text-sm">
|
||||
{{ $t('authentication.account-tip') }}
|
||||
<span
|
||||
class="text-primary hover:text-primary/80 cursor-pointer text-sm font-normal"
|
||||
@click="handleGo(registerPath)"
|
||||
>
|
||||
{{ $t('authentication.create-account') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
import { VbenButton } from '@vben-core/shadcn-ui';
|
||||
|
||||
import { useQRCode } from '@vueuse/integrations/useQRCode';
|
||||
|
||||
import Title from './auth-title.vue';
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* @zh_CN 是否处于加载处理状态
|
||||
*/
|
||||
loading?: boolean;
|
||||
/**
|
||||
* @zh_CN 登陆路径
|
||||
*/
|
||||
loginPath?: string;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
name: 'AuthenticationQrCodeLogin',
|
||||
});
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false,
|
||||
loginPath: '/auth/login',
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const text = ref('https://vben.vvbin.cn');
|
||||
|
||||
const qrcode = useQRCode(text, {
|
||||
errorCorrectionLevel: 'H',
|
||||
margin: 4,
|
||||
});
|
||||
|
||||
function goLogin() {
|
||||
router.push(props.loginPath);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Title>
|
||||
{{ $t('authentication.welcome-back') }} 📱
|
||||
<template #desc>
|
||||
<span class="text-muted-foreground">
|
||||
{{ $t('authentication.qrcode-subtitle') }}
|
||||
</span>
|
||||
</template>
|
||||
</Title>
|
||||
|
||||
<div class="flex-col-center mt-6">
|
||||
<img :src="qrcode" alt="qrcode" class="w-1/2" />
|
||||
<p class="text-muted-foreground mt-4 text-sm">
|
||||
{{ $t('authentication.qrcode-prompt') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VbenButton class="mt-4 w-full" variant="outline" @click="goLogin()">
|
||||
{{ $t('common.back') }}
|
||||
</VbenButton>
|
||||
</div>
|
||||
</template>
|
||||
168
packages/business/universal-ui/src/authentication/register.vue
Normal file
168
packages/business/universal-ui/src/authentication/register.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<script setup lang="ts">
|
||||
import type { RegisterEmits } from './typings';
|
||||
|
||||
import { computed, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
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;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
name: 'RegisterForm',
|
||||
});
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false,
|
||||
loginPath: '/auth/login',
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
</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')"
|
||||
:status="usernameStatus"
|
||||
name="username"
|
||||
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')"
|
||||
:password-strength="true"
|
||||
:placeholder="$t('authentication.password')"
|
||||
:status="passwordStatus"
|
||||
name="password"
|
||||
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')"
|
||||
:status="comfirmPasswordStatus"
|
||||
name="comfirmPassword"
|
||||
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') }}
|
||||
<span class="text-primary hover:text-primary/80">{{
|
||||
$t('authentication.sign-up-privacy-policy')
|
||||
}}</span>
|
||||
&
|
||||
<span class="text-primary hover:text-primary/80">
|
||||
{{ $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
|
||||
class="text-primary hover:text-primary/80 cursor-pointer text-sm font-normal"
|
||||
@click="goLogin()"
|
||||
>
|
||||
{{ $t('authentication.go-login') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import { $t } from '@vben/locales';
|
||||
import { MdiGithub, MdiGoogle, MdiQqchat, MdiWechat } from '@vben-core/iconify';
|
||||
import { VbenIconButton } from '@vben-core/shadcn-ui';
|
||||
|
||||
defineOptions({
|
||||
name: 'ThirdPartyLogin',
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full sm:mx-auto md:max-w-md">
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<span class="border-input w-[35%] border-b dark:border-gray-600"></span>
|
||||
<span class="text-muted-foreground text-center text-xs uppercase">
|
||||
{{ $t('authentication.third-party-login') }}
|
||||
</span>
|
||||
<span class="border-input w-[35%] border-b dark:border-gray-600"></span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-wrap justify-center">
|
||||
<VbenIconButton class="mb-3">
|
||||
<MdiWechat />
|
||||
</VbenIconButton>
|
||||
<VbenIconButton class="mb-3">
|
||||
<MdiQqchat />
|
||||
</VbenIconButton>
|
||||
<VbenIconButton class="mb-3">
|
||||
<MdiGithub />
|
||||
</VbenIconButton>
|
||||
<VbenIconButton class="mb-3">
|
||||
<MdiGoogle />
|
||||
</VbenIconButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
29
packages/business/universal-ui/src/authentication/typings.ts
Normal file
29
packages/business/universal-ui/src/authentication/typings.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
interface LoginAndRegisterParams {
|
||||
password: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
interface LoginCodeParams {
|
||||
code: string;
|
||||
phoneNumber: string;
|
||||
}
|
||||
|
||||
interface LoginEmits {
|
||||
submit: [LoginAndRegisterParams];
|
||||
}
|
||||
|
||||
interface LoginCodeEmits {
|
||||
submit: [LoginCodeParams];
|
||||
}
|
||||
|
||||
interface RegisterEmits {
|
||||
submit: [LoginAndRegisterParams];
|
||||
}
|
||||
|
||||
export type {
|
||||
LoginAndRegisterParams,
|
||||
LoginCodeEmits,
|
||||
LoginCodeParams,
|
||||
LoginEmits,
|
||||
RegisterEmits,
|
||||
};
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { IcRoundColorLens } from '@vben-core/iconify';
|
||||
import {
|
||||
COLOR_PRIMARY_RESETS,
|
||||
preferences,
|
||||
updatePreferences,
|
||||
} from '@vben-core/preferences';
|
||||
import { VbenIconButton } from '@vben-core/shadcn-ui';
|
||||
|
||||
defineOptions({
|
||||
name: 'AuthenticationColorToggle',
|
||||
});
|
||||
|
||||
function handleUpdate(value: string) {
|
||||
updatePreferences({
|
||||
theme: {
|
||||
colorPrimary: value,
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="group relative flex items-center overflow-hidden">
|
||||
<div
|
||||
class="ease-ou flex w-0 overflow-hidden transition-all duration-500 group-hover:w-48"
|
||||
>
|
||||
<template v-for="color in COLOR_PRIMARY_RESETS" :key="color">
|
||||
<VbenIconButton
|
||||
class="flex-center flex-shrink-0"
|
||||
@click="handleUpdate(color)"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
preferences.theme.colorPrimary === color
|
||||
? `before:opacity-100`
|
||||
: '',
|
||||
]"
|
||||
:style="{ backgroundColor: color }"
|
||||
class="relative h-3.5 w-3.5 rounded-[2px] before:absolute before:left-0.5 before:top-0.5 before:h-2.5 before:w-2.5 before:rounded-[2px] before:border before:border-gray-900 before:opacity-0 before:transition-all before:duration-150 before:content-[''] hover:scale-110"
|
||||
></div>
|
||||
</VbenIconButton>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<VbenIconButton>
|
||||
<IcRoundColorLens class="text-primary size-5" />
|
||||
</VbenIconButton>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import type { AuthPageLayoutType } from '@vben-core/preferences';
|
||||
import type { VbenDropdownMenuItem } from '@vben-core/shadcn-ui';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
import { MdiDockBottom, MdiDockLeft, MdiDockRight } from '@vben-core/iconify';
|
||||
import {
|
||||
preferences,
|
||||
updatePreferences,
|
||||
usePreferences,
|
||||
} from '@vben-core/preferences';
|
||||
import { VbenDropdownRadioMenu, VbenIconButton } from '@vben-core/shadcn-ui';
|
||||
|
||||
defineOptions({
|
||||
name: 'AuthenticationLayoutToggle',
|
||||
});
|
||||
|
||||
const menus = computed((): VbenDropdownMenuItem[] => [
|
||||
{
|
||||
icon: MdiDockLeft,
|
||||
key: 'panel-left',
|
||||
text: $t('layout.align-left'),
|
||||
},
|
||||
{
|
||||
icon: MdiDockBottom,
|
||||
key: 'panel-center',
|
||||
text: $t('layout.center'),
|
||||
},
|
||||
{
|
||||
icon: MdiDockRight,
|
||||
key: 'panel-right',
|
||||
text: $t('layout.align-right'),
|
||||
},
|
||||
]);
|
||||
|
||||
const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
|
||||
|
||||
function handleUpdate(value: string) {
|
||||
updatePreferences({
|
||||
app: {
|
||||
authPageLayout: value as AuthPageLayoutType,
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VbenDropdownRadioMenu
|
||||
:menus="menus"
|
||||
:model-value="preferences.app.authPageLayout"
|
||||
@update:model-value="handleUpdate"
|
||||
>
|
||||
<VbenIconButton>
|
||||
<MdiDockRight v-if="authPanelRight" class="size-5" />
|
||||
<MdiDockLeft v-if="authPanelLeft" class="size-5" />
|
||||
<MdiDockBottom v-if="authPanelCenter" class="size-5" />
|
||||
</VbenIconButton>
|
||||
</VbenDropdownRadioMenu>
|
||||
</template>
|
||||
Reference in New Issue
Block a user