import React from 'react'; import { createRoot } from 'react-dom/client'; import LoginForm from './LoginForm'; import cssText from './styles.css?inline'; function mount(container, props) { const host = document.createElement('div'); host.setAttribute('data-new-api-widget', 'login'); container.appendChild(host); const shadow = host.attachShadow({ mode: 'open' }); const style = document.createElement('style'); style.textContent = cssText; shadow.appendChild(style); if (props.theme === 'dark') { host.setAttribute('theme', 'dark'); } const mountPoint = document.createElement('div'); shadow.appendChild(mountPoint); const root = createRoot(mountPoint); root.render( React.createElement( 'div', { className: 'naw-container' }, React.createElement('h1', { className: 'naw-title' }, '登 录'), React.createElement(LoginForm, { apiUrl: props.apiUrl, onSuccess: props.onSuccess, onError: props.onError, }) ) ); return { host, root }; } function init(options) { const container = typeof options.container === 'string' ? document.querySelector(options.container) : options.container; if (!container) { throw new Error('NewApiLoginWidget: container not found'); } if (!options.apiUrl) { throw new Error('NewApiLoginWidget: apiUrl is required'); } const { host, root } = mount(container, { apiUrl: options.apiUrl.replace(/\/+$/, ''), onSuccess: options.onSuccess, onError: options.onError, theme: options.theme || 'light', }); return { destroy() { root.unmount(); host.remove(); }, }; } window.NewApiLoginWidget = { init: init }; export { init };