Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 

72 Zeilen
1.7 KiB

  1. import React from 'react';
  2. import { createRoot } from 'react-dom/client';
  3. import LoginForm from './LoginForm';
  4. import cssText from './styles.css?inline';
  5. function mount(container, props) {
  6. const host = document.createElement('div');
  7. host.setAttribute('data-new-api-widget', 'login');
  8. container.appendChild(host);
  9. const shadow = host.attachShadow({ mode: 'open' });
  10. const style = document.createElement('style');
  11. style.textContent = cssText;
  12. shadow.appendChild(style);
  13. if (props.theme === 'dark') {
  14. host.setAttribute('theme', 'dark');
  15. }
  16. const mountPoint = document.createElement('div');
  17. shadow.appendChild(mountPoint);
  18. const root = createRoot(mountPoint);
  19. root.render(
  20. React.createElement(
  21. 'div',
  22. { className: 'naw-container' },
  23. React.createElement('h1', { className: 'naw-title' }, '登 录'),
  24. React.createElement(LoginForm, {
  25. apiUrl: props.apiUrl,
  26. onSuccess: props.onSuccess,
  27. onError: props.onError,
  28. })
  29. )
  30. );
  31. return { host, root };
  32. }
  33. function init(options) {
  34. const container =
  35. typeof options.container === 'string'
  36. ? document.querySelector(options.container)
  37. : options.container;
  38. if (!container) {
  39. throw new Error('NewApiLoginWidget: container not found');
  40. }
  41. if (!options.apiUrl) {
  42. throw new Error('NewApiLoginWidget: apiUrl is required');
  43. }
  44. const { host, root } = mount(container, {
  45. apiUrl: options.apiUrl.replace(/\/+$/, ''),
  46. onSuccess: options.onSuccess,
  47. onError: options.onError,
  48. theme: options.theme || 'light',
  49. });
  50. return {
  51. destroy() {
  52. root.unmount();
  53. host.remove();
  54. },
  55. };
  56. }
  57. window.NewApiLoginWidget = { init: init };
  58. export { init };