feat: login dialog (#37)

* chore: login-dialog demo

* Merge branch 'main' into login-dialog

* chore: update dialog

* Merge branch 'main' into login-dialog

* chore: accept login params

* chore: redirect to login or show login dialog

packages/business/layouts/package.json

@@ -48,6 +48,7 @@
     "@vben-core/stores": "workspace:*",
     "@vben-core/tabs-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
+    "@vben/universal-ui": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "vue": "^3.4.31",
     "vue-router": "^4.4.0"

packages/business/layouts/src/basic/layout.vue

@@ -277,5 +277,9 @@ function clearPreferencesAndLogout() {
         />
       </LayoutFooter>
     </template>
+
+    <template #extra>
+      <slot name="dialog"></slot>
+    </template>
   </VbenAdminLayout>
 </template>

packages/business/layouts/src/widgets/index.ts

@@ -4,6 +4,7 @@ export { default as CozeAssistant } from './coze-assistant.vue';
 export * from './global-search';
 export { default as LanguageToggle } from './language-toggle.vue';
 export { default as AuthenticationLayoutToggle } from './layout-toggle.vue';
+export * from './login-dialog';
 export * from './notification';
 export * from './preferences';
 export * from './theme-toggle';

packages/business/layouts/src/widgets/login-dialog/index.ts

@@ -0,0 +1 @@
+export { default as LoginDialog } from './login-dialog.vue';

packages/business/layouts/src/widgets/login-dialog/login-dialog.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import {
+  AuthenticationLogin,
+  AuthenticationProps,
+  LoginAndRegisterParams,
+} from '@vben/universal-ui';
+import { Dialog, DialogContent } from '@vben-core/shadcn-ui';
+
+interface Props extends AuthenticationProps {
+  open: boolean;
+}
+
+defineOptions({
+  name: 'LoginDialog',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+});
+
+const emit = defineEmits<{
+  login: [LoginAndRegisterParams];
+}>();
+
+const loginProps = computed(() => {
+  const { open: _, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <div>
+    <Dialog :open="open" class="flex items-center justify-center">
+      <DialogContent
+        class="top-[50%] w-full translate-y-[-50%] border-none p-0 shadow-xl sm:w-[600px] sm:rounded-2xl"
+      >
+        <div class="p-4">
+          <AuthenticationLogin
+            v-bind="loginProps"
+            @submit="(e) => emit('login', e)"
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>