tickets

7.0 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 '../store.hl'
24. import { siteName } from '../project.hl'
25. import { identKey, selectorScript, loginHref, infoOfSession, exchangeCode, ensureUser, userInfo, setUserName, userOfSession } from '../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 = ''
49. View {
50. body {
51. applicationHeader {
52. a { class = "brand" href = "/" siteName }
53. nav {
54. a { id = "navall" href = "/" "All tickets" }
55. a { id = "navinbox" href = "/inbox" "Inbox"
56. if (hasInbox) { inboxBadge { id = "inboxcount" inbox } }
57. }
58. }
59. userBox { id = "userbox"
60. identSelector { id = "selector" key = selectorKey class = selectorClass }
61. if (loggedIn) {
62. a { id = "whoami" href = "/you" myName }
63. button { id = "logout" type = "button" class = "quiet" "Log out" on click(e) { emit doLogout(e) } }
64. }
65. if (loggedOut) {
66. a { id = "loginbutton" class = "button" href = buttonHref "Log in with ident" }
67. }
68. input { id = "identcode" type = "hidden" on change(e) { emit gotCode(e) } }
69. }
70. }
71. if (hasLoginError) { p { id = "loginerror" class = "message banner" loginError } }
72. if (needsName) {
73. namePrompt {
74. form { id = "nameform"
75. on submit(e) {
76. e.preventDefault()
77. emit saveName(e)
78. }
79. label { "Welcome! Choose the display name others see as the author of what you write"
80. input { id = "displayname" name = "displayname" required = "required" maxlength = "60" value = nameDraft on input(e) { emit setNameDraft(e.target.value) } }
81. }
82. button { id = "namesave" type = "submit" "Save" }
83. p { id = "nameerror" class = "message" nameError }
84. }
85. }
86. }
87. main { slot }
88. script { src = identScript }
89. script { src = "/login.js" }
90. // ticket #12: <md-editor> around every Markdown textarea (a page without JS keeps the plain
91. // textarea; the script defines the element once, a re-run by webex is a no-op)
92. script { src = "/md-editor.js" }
93. }
94. }
96. // ---- the session as the page sees it ------------------------------------------------------
97. showMe = (info) => {
98. loggedIn = true
99. loggedOut = false
100. needsName = !info.named
101. myName = info.named ? info.name : 'you'
102. selectorClass = 'in'
103. loginError = ''
104. hasLoginError = false
105. }
106. showOut = () => {
107. loggedIn = false
108. loggedOut = true
109. needsName = false
110. myName = 'you'
111. selectorClass = 'out'
112. inbox = 0
113. hasInbox = false
114. }
116. // the selector's code (via /login.js and the hidden input) → the server exchanges it
117. on gotCode(e) {
118. let code = e.target.value
119. e.target.value = ''
120. if (code == null || code == '') { return null }
121. let r = emit server identLogin(code)
122. if (r == null || r.error != null) {
123. loginError = r != null ? r.error : 'the login failed'
124. hasLoginError = true
125. return null
126. }
127. showMe(r)
128. emit refreshInbox()
129. }
131. on setNameDraft(v) { nameDraft = v }
133. on saveName(e) {
134. let r = emit server saveDisplayName(nameDraft)
135. if (r == null || r.error != null) {
136. nameError = r != null ? r.error : 'could not save the name'
137. return null
138. }
139. nameError = ''
140. showMe(r)
141. }
143. on doLogout(e) {
144. emit server logOut()
145. showOut()
146. }
148. // the inbox is personal: a ticket event asks the server how many tickets are assigned to this session now
149. on refreshInbox() {
150. let r = emit server myInboxCount()
151. if (r != null && r.count != null) {
152. inbox = r.count
153. hasInbox = r.count > 0
154. }
155. }
156. on client ticketCreated(row) { emit refreshInbox() }
157. on client ticketEvent(ticketId, ev, row) { emit refreshInbox() }
159. // this session's other tabs follow a login / name / logout
160. on client signedIn(tag, info) {
161. showMe(info)
162. emit refreshInbox()
163. }
164. on client signedOut(tag) { showOut() }
166. // ---- the faces (#31: hl:web fills `session` itself and refuses a trailing argument, hybriel#16) --
167. on server identLogin(code, session) {
168. if (session == null) { return { error = 'no session — reload the page' } }
169. let x = exchangeCode(code)
170. if (x.error != null) { return { error = x.error } }
171. let u = ensureUser(x.identity)
172. if (u == null) { return { error = 'could not store the user' } }
173. let tag = randomBytes(16)
174. session.user = { id = u.id }
175. session.data.tag = tag
176. let info = userInfo(u)
177. emit client signedIn(tag, info)
178. return info
179. }
181. on server saveDisplayName(name, session) {
182. let u = userOfSession(session)
183. if (u == null) { return { error = 'log in with ident first' } }
184. let r = setUserName(u.id, name)
185. if (r.error != null) { return { error = r.error } }
186. let info = userInfo(r.user)
187. emit client signedIn(session.data.tag, info)
188. return info
189. }
191. on server myInboxCount(session) {
192. return { count = inboxCountOf(userOfSession(session)) }
193. }
195. on server logOut(session) {
196. if (session == null) { return { error = 'no session' } }
197. // the tag stays (the push may fan out after this face returns); the next login replaces it
198. emit client signedOut(session.data.tag)
199. session.user = null
200. return { ok = true }
201. }