tracker

4.7 KB

1. // components/main.hl — THE SHELL: the application header (brand; top right the login: ident's "Log in with
2. // ident" button or Log out) and the slot every page renders into. All CSS is in styles.hl. Copied from
3. // calendar.worldapi.org's components/main.hl unchanged in shape (tracker.worldapi.org#1, rejected once for
4. // centering the sign-in on the page instead of using the header selector).
5. // THE SELECTOR: `<ident-selector key=IDENT_API_KEY>` from <ident>/selector.js, as in calendar/gitoria. Choosing an
6. // identity fires `ident-login` (one-time code); /login.js hands it to the hidden input #identcode, whose `change`
7. // goes to the face trackerLogin (server-side exchange, no reload). The element's class is `in` / `out`; /login.js
8. // mirrors it into the selector's `loggedIn`.
9. // LOGIN: a plain link to <ident>/login?key=&return=<public url>/login/callback (users.hl loginCallbackOf).
10. // After a login or logout in this tab the page is fetched again (navigate('/')).
11. import { navigate } from 'hl:web'
12. import { appTitle } from '../project.hl'
13. import { identKey, selectorScript, loginHref, userIdOfSession, userOfCode } from '../lib/users.hl'
14. import { randomBytes } from 'hl:crypto'
16. slot = null
17. session = null
19. loggedIn = userIdOfSession(session) != null
20. loggedOut = userIdOfSession(session) == null
21. buttonHref = loginHref
22. selectorClass = loggedIn ? 'in' : 'out'
23. selectorKey = identKey
24. identScript = selectorScript
25. loginError = ''
26. hasLoginError = false
27. // OFFLINE (tracker.worldapi.org#10): the service worker opens `/` from its cache without a network; the shell then
28. // says so. hl:web gives a page no connection state and no "mounted" hook, so a tick asks the browser: `netProbe` runs
29. // an endless 1 s CSS animation (styles.hl), and each `animationiteration` reads navigator.onLine — a write only when
30. // it changed. (An `img` error or a socket event would race the hydration and be missed.)
31. offline = false
33. View {
34. body {
35. applicationHeader {
36. a { class = "brand" href = "/" appTitle }
37. userBox { id = "userbox"
38. // tracker.worldapi.org#14: the search (components/search.hl) — a magnifier, drawn in SVG like the checks
39. a { id = "searchlink" class = "searchlink" href = "/search" title = "Search" "aria-label" = "Search"
40. svg { viewBox = "0 0 24 24" width = "22" height = "22" "aria-hidden" = "true"
41. circle { cx = "10.5" cy = "10.5" r = "6.5" }
42. path { d = "M15.5 15.5 L20.5 20.5" }
43. }
44. }
45. identSelector { id = "selector" key = selectorKey class = selectorClass }
46. if (loggedIn) {
47. button { id = "logout" type = "button" class = "quiet" "Log out" on click(e) { emit doLogout(e) } }
48. }
49. if (loggedOut) {
50. // a phone shows "Log in" (the header stays ONE row signed out, mission 056); " with ident" from 40rem on (styles.hl)
51. a { id = "loginbutton" class = "button" href = buttonHref title = "Log in with ident" "Log in" span { class = "wide" " with ident" } }
52. }
53. input { id = "identcode" type = "hidden" on change(e) { emit gotCode(e) } }
54. }
55. }
56. if (hasLoginError) { p { id = "loginerror" class = "message banner" loginError } }
57. if (offline) { offlineNote { id = "offline" "You are offline. Your shows and lists need the network." } }
58. netProbe { "aria-hidden" = "true" on animationiteration(e) { emit netTick(e) } }
59. main { slot }
60. script { src = identScript }
61. script { src = "/login.js" }
62. }
63. }
65. showIn = () => {
66. loggedIn = true
67. loggedOut = false
68. selectorClass = 'in'
69. loginError = ''
70. hasLoginError = false
71. }
72. showOut = () => {
73. loggedIn = false
74. loggedOut = true
75. selectorClass = 'out'
76. }
78. // the selector's code (via /login.js and the hidden input) → the server exchanges it
79. on gotCode(e) {
80. code = e.target.value
81. e.target.value = ''
82. if (code == null || code == '') { return null }
83. r = emit server trackerLogin(code)
84. if (r == null || r.error != null) {
85. loginError = r != null ? r.error : 'the login failed'
86. hasLoginError = true
87. return null
88. }
89. showIn()
90. navigate('/')
91. }
93. on client trackerSignedIn(tag) {
94. showIn()
95. navigate('/')
96. }
97. on client trackerSignedOut(tag) {
98. showOut()
99. navigate('/')
100. }
102. on netTick(e) {
103. down = window.navigator.onLine == false
104. if (down != offline) { offline = down }
105. }
107. on doLogout(e) {
108. emit server trackerLogOut()
109. showOut()
110. navigate('/')
111. }
113. // ---- the faces (the trailing `session` is always the server's: hybriel #16) ----
114. on server trackerLogin(code, session) {
115. if (session == null) { return { error = 'no session — reload the page' } }
116. x = userOfCode(code)
117. if (x.error != null) { return { error = x.error } }
118. tag = randomBytes(16)
119. session.user = { id = x.user.id }
120. session.data.tag = tag
121. emit client trackerSignedIn(tag)
122. return { ok = true }
123. }
125. on server trackerLogOut(session) {
126. if (session == null) { return { error = 'no session' } }
127. emit client trackerSignedOut(session.data.tag)
128. session.user = null
129. return { ok = true }
130. }