xinkeaboard/xinkeaboard-web/composables/useLoginDialog.ts

import { createApp, h } from "vue";
import LoginDialog from "@/components/LoginDialog.vue";

export function openLoginDialog(
  options: {
    onLogin?: (data: { username: string; password: string }) => void;
    onRegister?: () => void;
    onForgot?: () => void;
    onClose?: () => void;
  } = {}
) {
  const container = document.createElement("div");
  document.body.appendChild(container);

  const app = createApp({
    render() {
      return h(LoginDialog, {
        onLogin: (data: any) => {
          options.onLogin?.(data);
          app.unmount();
          document.body.removeChild(container);
        },
        onRegister: () => {
          options.onRegister?.();
          app.unmount();
          document.body.removeChild(container);
        },
        onForgot: () => {
          options.onForgot?.();
          app.unmount();
          document.body.removeChild(container);
        },
        onClose: () => {
          options.onClose?.();
          app.unmount();
          document.body.removeChild(container);
        },
        ref: "loginDialog",
      });
    },
    mounted() {
      this.$refs.loginDialog.open();
    },
  });

  app.mount(container);
}