tickets

7.8 KB

1. // components/main.hl — THE SHELL: the application header (brand, All tickets, Inbox with
2. // its live count, and TOP RIGHT the login: ident's identity selector + "Log in with ident",
3. // or who you are + Log out), the display-name prompt of a first login, and the slot every
4. // page renders into. All CSS is in styles.hl.
5. //
6. // LOGIN (ticket #7, CONCEPT.md "Login via ident"; ident README "How apps use ident"):
7. // * THE SELECTOR: `<ident-selector key=IDENT_API_KEY>` from <ident>/selector.js. Choosing an
8. // identity fires `ident-login` with a one-time code. hl:webex cannot listen to a custom DOM
9. // event, so /login.js (plain JS) hands the code to the hidden input #identcode and fires its
10. // `change` — the handler below sends it to the face `identLogin`, which exchanges it SERVER
11. // SIDE and logs this session in. No reload: the face answers who you are and pushes
12. // `signedIn` to this session's tabs (the pages show their forms).
13. // * THE HOST TELLS THE SELECTOR: the element's class is `in` / `out` (a member); /login.js
14. // mirrors it into the selector's `loggedIn` (the `logged-in` attribute). Log out → `out`
15. // → the selector is reset.
16. // * THE LOGIN BUTTON: a plain link to <ident>/login?key=&return=<TICKETS_PUBLIC_URL>/login/callback
17. // (project.hl loginCallback). /login.js adds `?next=<this page>` to the return URL at the
18. // click, so the user comes back to the page the login started from (ticket #10).
19. // * /login.js RUNS AGAIN whenever this View flips between logged in / out (hl:webex
20. // re-creates the header and the <script> elements; ticket #9): it installs itself once
21. // per document and hands each one-time code to #identcode only once.
22. // * FIRST LOGIN: no display name yet → the name prompt below; writing waits for it.
23. import { inboxCountOf } from '../lib/tickets.hl'
24. import { siteName } from '../project.hl'
25. import { identKey, selectorScript, loginHref, infoOfSession, exchangeCode, ensureUser, userInfo, setUserName, userOfSession } from '../lib/users.hl'
26. import { randomBytes } from 'hl:crypto'
28. slot = null
29. session = null
30. // the inbox is PERSONAL (ticket #20): the tickets assigned to this session's user in pending and review
31. inbox = inboxCountOf(userOfSession(session))
32. hasInbox = inbox > 0
34. // who this session is: { name, named, creator } — never the identity id
35. me = infoOfSession(session)
36. loggedIn = me != null
37. loggedOut = me == null
38. needsName = me != null && !me.named
39. myName = me != null && me.named ? me.name : 'you'
40. selectorClass = me != null ? 'in' : 'out'
41. selectorKey = identKey
42. identScript = selectorScript
43. buttonHref = loginHref
44. loginError = ''
45. hasLoginError = false
46. nameDraft = ''
47. nameError = ''
48. // OFFLINE (mission 046, as tracker.worldapi.org#10): the service worker opens `/` from its cache without a network;
49. // the shell then says so. hl:web gives a page no connection state and no "mounted" hook, so a tick asks the browser:
50. // `netProbe` runs an endless 1 s CSS animation (styles.hl), and each `animationiteration` reads navigator.onLine — a
51. // write only when it changed. (An `img` error or a socket event would race the hydration and be missed.)
52. offline = false
54. View {
55. body {
56. applicationHeader {
57. a { class = "brand" href = "/" siteName }
58. nav {
59. a { id = "navall" href = "/" "All tickets" }
60. a { id = "navinbox" href = "/inbox" "Inbox"
61. if (hasInbox) { inboxBadge { id = "inboxcount" inbox } }
62. }
63. }
64. userBox { id = "userbox"
65. identSelector { id = "selector" key = selectorKey class = selectorClass }
66. if (loggedIn) {
67. a { id = "whoami" href = "/you" myName }
68. button { id = "logout" type = "button" class = "quiet" "Log out" on click(e) { emit doLogout(e) } }
69. }
70. if (loggedOut) {
71. a { id = "loginbutton" class = "button" href = buttonHref "Log in with ident" }
72. }
73. input { id = "identcode" type = "hidden" on change(e) { emit gotCode(e) } }
74. }
75. }
76. if (hasLoginError) { p { id = "loginerror" class = "message banner" loginError } }
77. if (offline) { offlineNote { id = "offline" "You are offline. The list is the one last loaded here; tickets and changes need the network." } }
78. netProbe { "aria-hidden" = "true" on animationiteration(e) { emit netTick(e) } }
79. if (needsName) {
80. namePrompt {
81. form { id = "nameform"
82. on submit(e) {
83. e.preventDefault()
84. emit saveName(e)
85. }
86. label { "Welcome! Choose the display name others see as the author of what you write"
87. input { id = "displayname" name = "displayname" required = "required" maxlength = "60" value = nameDraft on input(e) { emit setNameDraft(e.target.value) } }
88. }
89. button { id = "namesave" type = "submit" "Save" }
90. p { id = "nameerror" class = "message" nameError }
91. }
92. }
93. }
94. main { slot }
95. script { src = identScript }
96. script { src = "/login.js" }
97. // ticket #12: <md-editor> around every Markdown textarea (a page without JS keeps the plain
98. // textarea; the script defines the element once, a re-run by webex is a no-op)
99. script { src = "/md-editor.js" }
100. }
101. }
103. // ---- the session as the page sees it ------------------------------------------------------
104. showMe = (info) => {
105. loggedIn = true
106. loggedOut = false
107. needsName = !info.named
108. myName = info.named ? info.name : 'you'
109. selectorClass = 'in'
110. loginError = ''
111. hasLoginError = false
112. }
113. showOut = () => {
114. loggedIn = false
115. loggedOut = true
116. needsName = false
117. myName = 'you'
118. selectorClass = 'out'
119. inbox = 0
120. hasInbox = false
121. }
123. // the selector's code (via /login.js and the hidden input) → the server exchanges it
124. on gotCode(e) {
125. code = e.target.value
126. e.target.value = ''
127. if (code == null || code == '') { return null }
128. r = emit server identLogin(code)
129. if (r == null || r.error != null) {
130. loginError = r != null ? r.error : 'the login failed'
131. hasLoginError = true
132. return null
133. }
134. showMe(r)
135. emit refreshInbox()
136. }
138. on setNameDraft(v) { nameDraft = v }
140. on netTick(e) {
141. down = window.navigator.onLine == false
142. if (down != offline) { offline = down }
143. }
145. on saveName(e) {
146. r = emit server saveDisplayName(nameDraft)
147. if (r == null || r.error != null) {
148. nameError = r != null ? r.error : 'could not save the name'
149. return null
150. }
151. nameError = ''
152. showMe(r)
153. }
155. on doLogout(e) {
156. emit server logOut()
157. showOut()
158. }
160. // the inbox is personal: a ticket event asks the server how many tickets are assigned to this session now
161. on refreshInbox() {
162. r = emit server myInboxCount()
163. if (r != null && r.count != null) {
164. inbox = r.count
165. hasInbox = r.count > 0
166. }
167. }
168. on client ticketCreated(row) { emit refreshInbox() }
169. on client ticketEvent(ticketId, ev, row) { emit refreshInbox() }
171. // this session's other tabs follow a login / name / logout
172. on client signedIn(tag, info) {
173. showMe(info)
174. emit refreshInbox()
175. }
176. on client signedOut(tag) { showOut() }
178. // ---- the faces (#31: hl:web fills `session` itself and refuses a trailing argument, hybriel#16) --
179. on server identLogin(code, session) {
180. if (session == null) { return { error = 'no session — reload the page' } }
181. x = exchangeCode(code)
182. if (x.error != null) { return { error = x.error } }
183. u = ensureUser(x.identity)
184. if (u == null) { return { error = 'could not store the user' } }
185. tag = randomBytes(16)
186. session.user = { id = u.id }
187. session.data.tag = tag
188. info = userInfo(u)
189. emit client signedIn(tag, info)
190. return info
191. }
193. on server saveDisplayName(name, session) {
194. u = userOfSession(session)
195. if (u == null) { return { error = 'log in with ident first' } }
196. r = setUserName(u.id, name)
197. if (r.error != null) { return { error = r.error } }
198. info = userInfo(r.user)
199. emit client signedIn(session.data.tag, info)
200. return info
201. }
203. on server myInboxCount(session) {
204. return { count = inboxCountOf(userOfSession(session)) }
205. }
207. on server logOut(session) {
208. if (session == null) { return { error = 'no session' } }
209. // the tag stays (the push may fan out after this face returns); the next login replaces it
210. emit client signedOut(session.data.tag)
211. session.user = null
212. return { ok = true }
213. }