perf: improve the logic related to login expiration

packages/business/universal-ui/src/authentication/index.ts

@@ -1,6 +1,7 @@
 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 AuthenticationLoginExpiredModal } from './login-expired-modal.vue';
 export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
 export { default as AuthenticationRegister } from './register.vue';
 export type {

packages/business/universal-ui/src/authentication/login-expired-modal.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  VisuallyHidden,
+  useForwardPropsEmits,
+} from '@vben-core/shadcn-ui';
+
+import AuthenticationLogin from './login.vue';
+import { AuthenticationProps, LoginAndRegisterParams } from './typings';
+
+interface Props extends AuthenticationProps {}
+
+defineOptions({
+  name: 'LoginExpiredModal',
+});
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const emit = defineEmits<{
+  submit: [LoginAndRegisterParams];
+}>();
+
+const open = defineModel<boolean>('open');
+
+const forwarded = useForwardPropsEmits(props, emit);
+</script>
+
+<template>
+  <div>
+    <Dialog v-model:open="open">
+      <DialogContent
+        :show-close="false"
+        class="top-1/2 h-full w-full translate-y-[-50%] border-none p-4 py-12 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset] md:px-14 md:pt-12"
+        @escape-key-down="(e) => e.preventDefault()"
+        @interact-outside="(e) => e.preventDefault()"
+      >
+        <VisuallyHidden>
+          <DialogTitle />
+          <DialogDescription />
+        </VisuallyHidden>
+        <AuthenticationLogin
+          v-bind="forwarded"
+          :show-forget-password="false"
+          :show-register="false"
+          :show-remember-me="false"
+          :sub-title="$t('authentication.loginAgainSubTitle')"
+          :title="$t('authentication.loginAgainTitle')"
+        />
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>

packages/business/universal-ui/src/authentication/login.vue

@@ -31,7 +31,10 @@ withDefaults(defineProps<Props>(), {
   showForgetPassword: true,
   showQrcodeLogin: true,
   showRegister: true,
+  showRememberMe: true,
   showThirdPartyLogin: true,
+  subTitle: '',
+  title: '',
   usernamePlaceholder: '',
 });
 
@@ -89,10 +92,10 @@ function handleGo(path: string) {
 <template>
   <div @keypress.enter.prevent="handleSubmit">
     <Title>
-      {{ $t('authentication.welcomeBack') }} 👋🏻
+      {{ title || `${$t('authentication.welcomeBack')} 👋🏻` }}
       <template #desc>
         <span class="text-muted-foreground">
-          {{ $t('authentication.loginSubtitle') }}
+          {{ subTitle || $t('authentication.loginSubtitle') }}
         </span>
       </template>
     </Title>
@@ -120,7 +123,7 @@ function handleGo(path: string) {
     />
 
     <div class="mb-6 mt-4 flex justify-between">
-      <div class="flex-center flex">
+      <div v-if="showRememberMe" class="flex-center">
         <VbenCheckbox v-model:checked="formState.rememberMe" name="rememberMe">
           {{ $t('authentication.rememberMe') }}
         </VbenCheckbox>
@@ -133,10 +136,6 @@ function handleGo(path: string) {
       >
         {{ $t('authentication.forgetPassword') }}
       </span>
-
-      <!-- <VbenButton variant="ghost" @click="handleGo('/auth/forget-password')">
-        忘记密码?
-      </VbenButton> -->
     </div>
     <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
       {{ $t('common.login') }}
@@ -159,14 +158,6 @@ function handleGo(path: string) {
       >
         {{ $t('authentication.qrcodeLogin') }}
       </VbenButton>
-      <!-- <VbenButton
-        :loading="loading"
-        variant="outline"
-        class="w-1/3"
-        @click="handleGo('/auth/register')"
-      >
-        创建账号
-      </VbenButton> -->
     </div>
 
     <!-- 第三方登录 -->

packages/business/universal-ui/src/authentication/typings.ts

@@ -3,7 +3,6 @@ interface AuthenticationProps {
    * @zh_CN 验证码登录路径
    */
   codeLoginPath?: string;
-
   /**
    * @zh_CN 忘记密码路径
    */
@@ -33,7 +32,6 @@ interface AuthenticationProps {
    * @zh_CN 是否显示验证码登录
    */
   showCodeLogin?: boolean;
-
   /**
    * @zh_CN 是否显示忘记密码
    */
@@ -49,11 +47,26 @@ interface AuthenticationProps {
    */
   showRegister?: boolean;
 
+  /**
+   * @zh_CN 是否显示记住账号
+   */
+  showRememberMe?: boolean;
+
   /**
    * @zh_CN 是否显示第三方登录
    */
   showThirdPartyLogin?: boolean;
 
+  /**
+   * @zh_CN 登录框子标题
+   */
+  subTitle?: string;
+
+  /**
+   * @zh_CN 登录框标题
+   */
+  title?: string;
+
   /**
    * @zh_CN 用户名占位符
    */

packages/business/universal-ui/src/fallback/fallback.vue

@@ -52,7 +52,7 @@ const titleText = computed(() => {
       return $t('fallback.offlineError');
     }
     case 'comming-soon': {
-      return $t('fallback.coming-soon');
+      return $t('fallback.comingSoon');
     }
     default: {
       return '';