ident

8.0 KB

1. // selector.js — ident's IDENTITY SELECTOR for an app's page (piece 3 of 6, ticket #26;
2. // CONCEPT.md "Flow 2: identity selector"). Served by ident at /selector.js. An app's page:
3. //
4. // <script src="https://<ident>/selector.js"></script>
5. // <ident-selector key="pk_…"></ident-selector> (the app's PUBLIC API key)
6. //
7. // The element (shadow DOM, ident's design) first says "choose ident". Opening it fetches
8. // the identities of the ident user signed in in this browser from ident (credentials,
9. // CORS: only from one of the app's registered origins with its key). Choosing one IS the
10. // login: ident hands a one-time code, the element fires `ident-login` with
11. // `event.detail.code`; the HOST'S SERVER trades the code with POST /api/exchange (key +
12. // secret) for the app-specific identity id.
13. // The host tells the element it is logged in: attribute `logged-in` (or `el.loggedIn =
14. // true`). Logout on the website = the host resets it (remove the attribute, or
15. // `el.loggedIn = false` / `el.reset()`). The element sets no cookie of its own.
16. // Restyling: CSS custom properties --ident-* on the element, and ::part(button | panel |
17. // identity | status | message | link) — see ident's README "How apps use ident".
18. (() => {
19. if (!window.customElements || customElements.get('ident-selector')) return;
20. const script = document.currentScript;
21. const IDENT = new URL(script ? script.src : location.href).origin;
23. const CSS = `
24. :host {
25. --_accent: var(--ident-accent, #ce9178);
26. --_accent-text: var(--ident-accent-text, rgb(15, 20, 25));
27. --_bg: var(--ident-background, rgb(35, 40, 45));
28. --_text: var(--ident-text, rgb(195, 200, 205));
29. --_strong: var(--ident-text-strong, rgb(245, 250, 255));
30. --_muted: var(--ident-text-muted, rgb(145, 150, 155));
31. --_border: var(--ident-border, rgb(70, 75, 80));
32. --_radius: var(--ident-radius, .4rem);
33. display: inline-block;
34. max-width: 100%;
35. font: var(--ident-font, 600 16px/1.5 system-ui, sans-serif);
36. color: var(--_text);
37. }
38. :host([hidden]) { display: none; }
39. * { box-sizing: border-box; }
40. button { font: inherit; cursor: pointer; }
41. [part~="button"] {
42. display: inline-flex; align-items: center; gap: .5rem; max-width: 100%;
43. padding: .6rem 1.1rem; color: var(--_accent-text); background: var(--_accent);
44. border: 1px solid var(--_accent); border-radius: var(--_radius);
45. }
46. [part~="button"]:hover { filter: brightness(1.1); }
47. [part~="button"]:focus-visible, [part~="identity"]:focus-visible { outline: 2px solid var(--_strong); outline-offset: 2px; }
48. .mark { font-weight: 800; letter-spacing: .01em; }
49. .caret { font-size: .75em; }
50. [part~="panel"] {
51. margin-top: .4rem; width: 20rem; max-width: 100%; padding: .5rem;
52. background: var(--_bg); border: 1px solid var(--_border); border-radius: calc(var(--_radius) * 1.5);
53. font-weight: 400;
54. }
55. ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
56. [part~="identity"] {
57. display: block; width: 100%; text-align: left; padding: .55rem .8rem; overflow-wrap: anywhere;
58. color: var(--_strong); background: transparent; border: 1px solid var(--_border); border-radius: var(--_radius);
59. }
60. [part~="identity"]:hover { border-color: var(--_accent); color: var(--_accent); }
61. .head { margin: 0 0 .4rem; font-size: .85rem; color: var(--_muted); }
62. [part~="message"] { margin: 0; padding: .3rem .2rem; font-size: .95rem; }
63. [part~="link"] { color: var(--_accent); }
64. [part~="status"] {
65. display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; overflow-wrap: anywhere;
66. padding: .6rem 1.1rem; color: var(--_strong); background: var(--_bg);
67. border: 1px solid var(--_border); border-radius: var(--_radius);
68. }
69. [part~="status"] .check { color: var(--_accent); }
70. `;
72. const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
74. class IdentSelector extends HTMLElement {
75. static get observedAttributes() { return ['logged-in', 'key']; }
77. constructor() {
78. super();
79. this.attachShadow({ mode: 'open' });
80. this._open = false;
81. this._view = 'idle'; // idle | loading | list | signedout | error
82. this._items = [];
83. this._error = '';
84. this._chosen = '';
85. this._render();
86. }
88. get key() { return this.getAttribute('key') || ''; }
89. get loggedIn() { return this.hasAttribute('logged-in'); }
90. set loggedIn(v) { this.toggleAttribute('logged-in', !!v); }
91. reset() { this.loggedIn = false; }
93. attributeChangedCallback(name) {
94. if (name === 'logged-in' && !this.loggedIn) this._chosen = '';
95. this._open = false;
96. this._render();
97. }
99. async _toggle() {
100. if (this._open) { this._open = false; this._render(); return; }
101. this._open = true;
102. this._view = 'loading';
103. this._render();
104. try {
105. const r = await fetch(IDENT + '/api/selector/identities?key=' + encodeURIComponent(this.key), { credentials: 'include', cache: 'no-store' });
106. if (!r.ok) throw new Error('HTTP ' + r.status);
107. const j = await r.json();
108. this._items = j.identities || [];
109. this._view = j.signedIn ? 'list' : 'signedout';
110. } catch (e) {
111. // a refused origin/key has no CORS headers: the browser gives us nothing but this
112. this._view = 'error';
113. this._error = 'ident does not answer this site. Is it registered in ident with this API key?';
114. }
115. if (this._open) this._render();
116. }
118. async _choose(id, name) {
119. this._view = 'loading';
120. this._render();
121. try {
122. const r = await fetch(IDENT + '/api/selector/choose?key=' + encodeURIComponent(this.key), {
123. method: 'POST', credentials: 'include', cache: 'no-store',
124. headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ identity: id }),
125. });
126. const j = await r.json().catch(() => ({}));
127. if (!r.ok || !j.code) throw new Error(j.error || ('HTTP ' + r.status));
128. this._chosen = name;
129. this._open = false;
130. this._render();
131. // THE LOGIN: the host's server trades this code (POST /api/exchange, key + secret)
132. this.dispatchEvent(new CustomEvent('ident-login', { detail: { code: j.code }, bubbles: true, composed: true }));
133. } catch (e) {
134. this._view = 'error';
135. this._error = 'ident refused: ' + e.message;
136. this._render();
137. }
138. }
140. _render() {
141. const root = this.shadowRoot;
142. if (this.loggedIn) {
143. root.innerHTML = `<style>${CSS}</style><span part="status" id="status"><span class="check" aria-hidden="true">✓</span>` +
144. `<span>logged in with <span class="mark">ident</span>${this._chosen ? ' · ' + esc(this._chosen) : ''}</span></span>`;
145. return;
146. }
147. let panel = '';
148. if (this._open) {
149. let body = '';
150. if (this._view === 'loading') body = `<p part="message" id="message">…</p>`;
151. else if (this._view === 'list') {
152. body = `<p class="head">Choose the identity to log in with</p><ul id="list">` +
153. this._items.map((it) => `<li><button type="button" part="identity" data-id="${esc(it.id)}">${esc(it.name)}</button></li>`).join('') + `</ul>`;
154. } else if (this._view === 'signedout') {
155. body = `<p part="message" id="message">You are not signed in to ident. <a part="link" id="signin" href="${esc(IDENT)}/" target="_blank" rel="noopener">Sign in to ident</a>, then choose again.</p>`;
156. } else if (this._view === 'error') body = `<p part="message" id="message">${esc(this._error)}</p>`;
157. panel = `<div part="panel" id="panel">${body}</div>`;
158. }
159. root.innerHTML = `<style>${CSS}</style><button type="button" part="button" id="choose" aria-expanded="${this._open}">` +
160. `<span>choose <span class="mark">ident</span></span><span class="caret" aria-hidden="true">${this._open ? '▲' : '▼'}</span></button>${panel}`;
161. root.getElementById('choose').addEventListener('click', () => this._toggle());
162. for (const b of root.querySelectorAll('[part~="identity"]')) {
163. b.addEventListener('click', () => this._choose(b.dataset.id, b.textContent));
164. }
165. }
166. }
168. customElements.define('ident-selector', IdentSelector);
169. })();