315 lines
7.4 KiB
Vue
315 lines
7.4 KiB
Vue
<script setup lang="ts">
|
|
import type { AuthenticationProps, LoginEmits } from './types';
|
|
|
|
import { computed, reactive, watch } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
import { $t } from '@vben/locales';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
VbenButton,
|
|
VbenCheckbox,
|
|
VbenInput,
|
|
VbenInputPassword,
|
|
} from '@vben-core/shadcn-ui';
|
|
|
|
import Title from './auth-title.vue';
|
|
import ThirdPartyLogin from './third-party-login.vue';
|
|
|
|
interface Props extends AuthenticationProps {
|
|
/**
|
|
* @zh_CN 验证码图片base64
|
|
*/
|
|
captchaBase64?: string;
|
|
/**
|
|
* 租户信息options
|
|
*/
|
|
tenantOptions?: { companyName: string; domain?: string; tenantId: string }[];
|
|
/**
|
|
* @zh_CN 是否启用验证码
|
|
*/
|
|
useCaptcha?: boolean;
|
|
/**
|
|
* @zh_CN 是否启用租户
|
|
*/
|
|
useTenant?: boolean;
|
|
}
|
|
|
|
defineOptions({
|
|
name: 'AuthenticationLogin',
|
|
});
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
captchaBase64: '',
|
|
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,
|
|
showRememberMe: true,
|
|
showThirdPartyLogin: true,
|
|
subTitle: '',
|
|
tenantOptions: () => [],
|
|
title: '',
|
|
usernamePlaceholder: '',
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
/**
|
|
* 验证码点击
|
|
*/
|
|
captchaClick: [];
|
|
/**
|
|
* 第三方登录 platfrom 对应平台的string
|
|
*/
|
|
oauthLogin: [plateform: string];
|
|
submit: LoginEmits['submit'];
|
|
}>();
|
|
|
|
const router = useRouter();
|
|
|
|
const REMEMBER_ME_KEY = `REMEMBER_ME_USERNAME_${location.hostname}`;
|
|
|
|
const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || 'admin';
|
|
|
|
const formState = reactive({
|
|
code: '',
|
|
password: 'admin123',
|
|
rememberMe: !!localUsername,
|
|
submitted: false,
|
|
// 默认租户
|
|
tenantId: '000000',
|
|
username: localUsername,
|
|
});
|
|
|
|
/**
|
|
* 默认选中第一项租户
|
|
*/
|
|
const stop = watch(props.tenantOptions, (options) => {
|
|
if (options.length > 0) {
|
|
formState.tenantId = options[0]!.tenantId;
|
|
stop();
|
|
}
|
|
});
|
|
|
|
const usernameStatus = computed(() => {
|
|
return formState.submitted && !formState.username ? 'error' : 'default';
|
|
});
|
|
|
|
const passwordStatus = computed(() => {
|
|
return formState.submitted && !formState.password ? 'error' : 'default';
|
|
});
|
|
|
|
const captchaStatus = computed(() => {
|
|
return formState.submitted && !formState.code ? 'error' : 'default';
|
|
});
|
|
|
|
function handleSubmit() {
|
|
formState.submitted = true;
|
|
|
|
if (
|
|
usernameStatus.value !== 'default' ||
|
|
passwordStatus.value !== 'default'
|
|
) {
|
|
return;
|
|
}
|
|
|
|
// 验证码
|
|
if (props.useCaptcha && captchaStatus.value !== 'default') {
|
|
return;
|
|
}
|
|
|
|
localStorage.setItem(
|
|
REMEMBER_ME_KEY,
|
|
formState.rememberMe ? formState.username : '',
|
|
);
|
|
|
|
emit('submit', {
|
|
code: formState.code,
|
|
grantType: 'password',
|
|
password: formState.password,
|
|
tenantId: formState.tenantId,
|
|
username: formState.username,
|
|
});
|
|
}
|
|
|
|
function handleGo(path: string) {
|
|
router.push(path);
|
|
}
|
|
|
|
/**
|
|
* 重置验证码
|
|
*/
|
|
function resetCaptcha() {
|
|
emit('captchaClick');
|
|
formState.code = '';
|
|
// todo 获取焦点
|
|
// VbenInput并没有提供focus方法
|
|
}
|
|
|
|
defineExpose({ resetCaptcha });
|
|
</script>
|
|
|
|
<template>
|
|
<div @keydown.enter.prevent="handleSubmit">
|
|
<Title>
|
|
{{ title || `${$t('authentication.welcomeBack')} 👋🏻` }}
|
|
<template #desc>
|
|
<span class="text-muted-foreground">
|
|
{{ subTitle || $t('authentication.loginSubtitle') }}
|
|
</span>
|
|
</template>
|
|
</Title>
|
|
|
|
<!-- 租户 -->
|
|
<div v-if="useTenant" class="tenant-picker mb-6">
|
|
<Select v-model="formState.tenantId">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="选择公司" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem
|
|
v-for="item in tenantOptions"
|
|
:key="item.tenantId"
|
|
:value="item.tenantId"
|
|
>
|
|
{{ item.companyName }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<VbenInput
|
|
v-model="formState.username"
|
|
:autofocus="false"
|
|
:error-tip="$t('authentication.usernameTip')"
|
|
: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.passwordTip')"
|
|
:label="$t('authentication.password')"
|
|
:placeholder="passwordPlaceholder || $t('authentication.password')"
|
|
:status="passwordStatus"
|
|
name="password"
|
|
required
|
|
type="password"
|
|
/>
|
|
|
|
<!-- 图片验证码 -->
|
|
<div v-if="useCaptcha" class="flex">
|
|
<div class="flex-1">
|
|
<VbenInput
|
|
v-model="formState.code"
|
|
:error-tip="$t('authentication.captchaTip')"
|
|
:label="$t('authentication.captcha')"
|
|
:placeholder="$t('authentication.captcha')"
|
|
:status="captchaStatus"
|
|
name="code"
|
|
required
|
|
type="text"
|
|
/>
|
|
</div>
|
|
<img
|
|
:src="captchaBase64"
|
|
class="h-[40px] w-[115px] rounded-r-md"
|
|
@click="emit('captchaClick')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mb-6 mt-4 flex justify-between">
|
|
<div v-if="showRememberMe" class="flex-center">
|
|
<VbenCheckbox v-model:checked="formState.rememberMe" name="rememberMe">
|
|
{{ $t('authentication.rememberMe') }}
|
|
</VbenCheckbox>
|
|
</div>
|
|
|
|
<span
|
|
v-if="showForgetPassword"
|
|
class="text-primary hover:text-primary-hover active:text-primary-active cursor-pointer text-sm font-normal"
|
|
@click="handleGo(forgetPasswordPath)"
|
|
>
|
|
{{ $t('authentication.forgetPassword') }}
|
|
</span>
|
|
</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.mobileLogin') }}
|
|
</VbenButton>
|
|
<VbenButton
|
|
v-if="showQrcodeLogin"
|
|
class="ml-4 w-1/2"
|
|
variant="outline"
|
|
@click="handleGo(qrCodeLoginPath)"
|
|
>
|
|
{{ $t('authentication.qrcodeLogin') }}
|
|
</VbenButton>
|
|
</div>
|
|
|
|
<!-- 第三方登录 -->
|
|
<ThirdPartyLogin
|
|
v-if="showThirdPartyLogin"
|
|
@oauth-login="(e) => emit('oauthLogin', e)"
|
|
/>
|
|
|
|
<div v-if="showRegister" class="text-center text-sm">
|
|
{{ $t('authentication.accountTip') }}
|
|
<span
|
|
class="text-primary hover:text-primary-hover active:text-primary-active cursor-pointer text-sm font-normal"
|
|
@click="handleGo(registerPath)"
|
|
>
|
|
{{ $t('authentication.createAccount') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
/**
|
|
tenant-picker 跟下面的输入框样式保持一致
|
|
*/
|
|
.tenant-picker > button[role='combobox'] {
|
|
height: 40px;
|
|
background-color: hsl(var(--input-background));
|
|
|
|
&:focus {
|
|
@apply border-primary;
|
|
}
|
|
}
|
|
|
|
/**
|
|
验证码输入框样式
|
|
去除右边的圆角
|
|
*/
|
|
input[id='code'] {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
</style>
|