tracker

7.7 KB

1. // components/main.hl — THE SHELL (tracker.worldapi.org#32, mission 031): the WorldAPI theme's header and content-first shell
2. // (theme/shell/*, vendored from layouts.worldapi.org — never edited here) around the slot every page renders into. All CSS is
3. // in styles.hl (the theme's own rules come with theme/theme.hl and the shell files).
4. // THE HEADER (creator, tracker#32): desktop — brand left, the search field in the middle, the main menu
5. // Series | Shows | Movies | Genres | People, the user icon far right; its dropdown holds the personal lists and ends with
6. // Settings, Logout. Signed out the ident selector stands in the user icon's place. Phone — ☰ (the sidebar overlay with the main
7. // menu), brand, the loupe (opens the search field under the bar), the user icon far right; signed out that is the ident icon (a
8. // small i and a big D lying on the floor, components/main.hl identIcon) whose dropdown holds the selector. The header's contents
9. // are flush with the content column (the theme's --layout-column).
10. // THE MARKED MENU ENTRY: a shell is not told the page's path (hl:web gives it only the route params), so MainMenu gets no
11. // `current`; styles.hl marks the entry of the type the page's heading names ("Series | …" → Series) with :has().
12. // THE SEARCH FIELD sends GET /find?q=… (project.hl findRoute → 302 /search/<text>, components/search.hl).
13. // THE SELECTOR: `<ident-selector key=IDENT_API_KEY>` from <ident>/selector.js, as in calendar/gitoria. Choosing an
14. // identity fires `ident-login` (one-time code); /login.js hands it to the hidden input #identcode, whose `change`
15. // goes to the face trackerLogin (server-side exchange, no reload). The element's class is `in` / `out`; /login.js
16. // mirrors it into the selector's `loggedIn`.
17. // LOGIN: the selector, or (phone, in the ident dropdown) a plain link to <ident>/login?key=&return=<public url>/login/callback
18. // (users.hl loginCallbackOf). After a login or logout in this tab the page is fetched again (navigate('/')).
19. import { navigate } from 'hl:web'
20. import { appTitle } from '../project.hl'
21. import { identKey, selectorScript, loginHref, userIdOfSession, userOfCode } from '../lib/users.hl'
22. import { randomBytes } from 'hl:crypto'
23. import AppHeader from '../theme/shell/app-header.hl'
24. import MainMenu from '../theme/shell/main-menu.hl'
25. import UserMenu from '../theme/shell/user-menu.hl'
26. import Sidebar from '../theme/shell/app-sidebar.hl'
27. import ContentFirst from '../theme/shell/content-first.hl'
29. static menu = [
30. { label = 'Series' href = '/series' }
31. { label = 'Shows' href = '/shows' }
32. { label = 'Movies' href = '/movies' }
33. { label = 'Genres' href = '/genres' }
34. { label = 'People' href = '/people' }
35. ]
37. slot = null
38. session = null
40. loggedIn = userIdOfSession(session) != null
41. loggedOut = userIdOfSession(session) == null
42. buttonHref = loginHref
43. selectorClass = loggedIn ? 'in' : 'out'
44. selectorKey = identKey
45. identScript = selectorScript
46. loginError = ''
47. hasLoginError = false
48. // OFFLINE (tracker.worldapi.org#10): the service worker opens `/` from its cache without a network; the shell then
49. // says so. hl:web gives a page no connection state and no "mounted" hook, so a tick asks the browser: `netProbe` runs
50. // an endless 1 s CSS animation (styles.hl), and each `animationiteration` reads navigator.onLine — a write only when
51. // it changed. (An `img` error or a socket event would race the hydration and be missed.)
52. offline = false
54. View {
55. body {
56. AppHeader { brand = appTitle search = "/find" searchPlaceholder = "Shows, movies, people"
57. MainMenu { items = menu }
58. if (loggedIn) {
59. UserMenu {
60. a { href = "/my/unwatched" "Unwatched" }
61. a { href = "/my/schedule" "Schedule" }
62. a { href = "/my/series" "My series" }
63. a { href = "/my/shows" "My shows" }
64. a { href = "/my/movies" "My movies" }
65. a { id = "settingslink" href = "/settings" "Settings" }
66. button { id = "logout" type = "button" "Logout" on click(e) { emit doLogout(e) } }
67. }
68. }
69. if (loggedOut) {
70. // the ident icon (phone) and its dropdown; from 60rem the dropdown stands open in the header: the selector alone
71. identMenu {
72. button { type = "button" class = "ident-toggle" popovertarget = "ident-panel" title = "Log in with ident" "aria-label" = "Log in with ident"
73. // identIcon: a small i standing beside a big D that lies on the floor (tilted into the screen); the D's lower
74. // face is its thickness (the 3-D effect), the counter is cut out (evenodd)
75. svg { class = "ident-icon" viewBox = "1 10 20 13.2" "aria-hidden" = "true"
76. path { class = "ident-d-side" d = "M5 22.6 L7.8 14.2 C15.1 14.2 19 16.6 19.6 18.4 C20.2 20.2 16.2 22.6 5 22.6 Z" }
77. path { class = "ident-d" "fill-rule" = "evenodd" d = "M5 21 L7.8 12.6 C15.1 12.6 19 15 19.6 16.8 C20.2 18.6 16.2 21 5 21 Z M10.7 14.4 C13.6 14.4 15.4 15.3 15.6 16.8 C15.8 18.3 13.7 19.2 10 19.2 Z" }
78. rect { class = "ident-i" x = "1.6" y = "14.2" width = "1.9" height = "6.8" rx = ".5" }
79. circle { class = "ident-i" cx = "2.55" cy = "11.6" r = "1.15" }
80. }
81. }
82. identPanel { id = "ident-panel" popover = "auto"
83. identSelector { id = "selector" key = selectorKey class = selectorClass }
84. a { id = "loginbutton" href = buttonHref title = "Log in with ident" "or log in at ident" }
85. }
86. }
87. }
88. }
89. input { id = "identcode" type = "hidden" on change(e) { emit gotCode(e) } }
90. if (hasLoginError) { p { id = "loginerror" class = "message banner" loginError } }
91. if (offline) { offlineNote { id = "offline" "You are offline. Your shows and lists need the network." } }
92. netProbe { "aria-hidden" = "true" on animationiteration(e) { emit netTick(e) } }
93. // the phone's overlay with the main menu (desktop = "false": the header shows the menu from 60rem), then the shell with the
94. // page. NOT the theme's `ContentFirst { Sidebar { … } main { slot } }`: hl:web renders a component's slot children on one
95. // line, and a page slot that does not start its own line is rendered once per line of the page (WebFramework.hl
96. // document(): the text before the marker is taken as the indent) — so `main` stands around the shell and the page is the
97. // shell's slot itself
98. Sidebar { desktop = "false" MainMenu { items = menu } }
99. main {
100. ContentFirst { slot }
101. }
102. script { src = identScript }
103. script { src = "/login.js" }
104. }
105. }
107. showIn = () => {
108. loggedIn = true
109. loggedOut = false
110. selectorClass = 'in'
111. loginError = ''
112. hasLoginError = false
113. }
114. showOut = () => {
115. loggedIn = false
116. loggedOut = true
117. selectorClass = 'out'
118. }
120. // the selector's code (via /login.js and the hidden input) → the server exchanges it
121. on gotCode(e) {
122. code = e.target.value
123. e.target.value = ''
124. if (code == null || code == '') { return null }
125. r = emit server trackerLogin(code)
126. if (r == null || r.error != null) {
127. loginError = r != null ? r.error : 'the login failed'
128. hasLoginError = true
129. return null
130. }
131. showIn()
132. navigate('/')
133. }
135. on client trackerSignedIn(tag) {
136. showIn()
137. navigate('/')
138. }
139. on client trackerSignedOut(tag) {
140. showOut()
141. navigate('/')
142. }
144. on netTick(e) {
145. down = window.navigator.onLine == false
146. if (down != offline) { offline = down }
147. }
149. on doLogout(e) {
150. emit server trackerLogOut()
151. showOut()
152. navigate('/')
153. }
155. // ---- the faces (the trailing `session` is always the server's: hybriel #16) ----
156. on server trackerLogin(code, session) {
157. if (session == null) { return { error = 'no session — reload the page' } }
158. x = userOfCode(code)
159. if (x.error != null) { return { error = x.error } }
160. tag = randomBytes(16)
161. session.user = { id = x.user.id }
162. session.data.tag = tag
163. emit client trackerSignedIn(tag)
164. return { ok = true }
165. }
167. on server trackerLogOut(session) {
168. if (session == null) { return { error = 'no session' } }
169. emit client trackerSignedOut(session.data.tag)
170. session.user = null
171. return { ok = true }
172. }