tickets

3.4 KB

1. // login.js — the small bridge between ident's <ident-selector> and the tickets shell
2. // (components/main.hl; ticket #7). Plain JS because hl:webex cannot listen to a custom DOM
3. // event: `ident-login` (event.detail.code, the one-time code) goes into the hidden input
4. // #identcode, whose `change` the shell handles (→ face identLogin, server-side exchange).
5. // The host tells the selector whether this site is logged in: the shell keeps the
6. // element's class at `in` / `out`, mirrored here into its `loggedIn` property
7. // (= the `logged-in` attribute; false = reset to "choose ident").
8. //
9. // RUNS ONCE PER DOCUMENT (ticket #9, mission 012). hl:webex re-creates the shell's header
10. // and its <script> elements whenever the login state flips (login, logout): the browser
11. // then executes this file AGAIN, and the selector element is a NEW one. The old version
12. // added one more `ident-login` listener per run, so after a logout ONE selection fired
13. // two `change`s → two exchanges of the same one-time code → the second one failed
14. // ("ident refused the login (400: unknown or already used code)") although the first
15. // had logged the user in. Now: one guarded install, listeners on `document` (the event
16. // bubbles and is composed), the CURRENT #selector looked up each time, and a code is
17. // handed to the shell at most once.
18. //
19. // LOGIN BUTTON (ticket #10): just before the browser follows "Log in with ident", its
20. // return URL gets `?next=<this page's path + query>`; /login/callback checks it
21. // (same-origin path only) and sends the user back there.
22. (() => {
23. if (window.__ticketsLogin) { window.__ticketsLogin.sync(); return; }
24. const selector = () => document.getElementById('selector');
25. const sync = () => {
26. const sel = selector();
27. // not upgraded yet: a property set now would shadow the element's own accessor
28. if (!sel || !window.customElements || !customElements.get('ident-selector')) return;
29. const want = sel.classList.contains('in');
30. if (sel.loggedIn !== want) sel.loggedIn = want;
31. };
32. // the class flips, and whole new selector elements arrive (hl:webex re-renders the header)
33. new MutationObserver(sync).observe(document.documentElement, { subtree: true, childList: true, attributes: true, attributeFilter: ['class'] });
34. if (window.customElements) customElements.whenDefined('ident-selector').then(sync);
36. const handed = new Set();
37. document.addEventListener('ident-login', (e) => {
38. const code = e.detail && e.detail.code;
39. const input = document.getElementById('identcode');
40. if (!input || !code || handed.has(code)) return; // a one-time code is exchanged once
41. handed.add(code);
42. input.value = code;
43. input.dispatchEvent(new Event('change', { bubbles: true }));
44. });
46. // "Log in with ident": return to this page (the server accepts only a same-origin path)
47. const withNext = (a) => {
48. try {
49. const u = new URL(a.href);
50. const ret = new URL(u.searchParams.get('return'));
51. const here = location.pathname + location.search;
52. ret.search = '';
53. if (here !== '/' && here.length <= 500) ret.searchParams.set('next', here);
54. u.searchParams.set('return', ret.href);
55. a.href = u.href;
56. } catch (err) { /* keep the server's href: the login still works, it returns to / */ }
57. };
58. const onButton = (e) => {
59. const a = e.target && e.target.closest && e.target.closest('#loginbutton');
60. if (a) withNext(a);
61. };
62. for (const t of ['click', 'auxclick', 'contextmenu']) document.addEventListener(t, onButton, true);
64. window.__ticketsLogin = { sync };
65. })();