tracker

3.5 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 (project.hl loginCallback).
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, exchangeCode, ensureUser } from '../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
28. View {
29. body {
30. applicationHeader {
31. a { class = "brand" href = "/" appTitle }
32. userBox { id = "userbox"
33. identSelector { id = "selector" key = selectorKey class = selectorClass }
34. if (loggedIn) {
35. button { id = "logout" type = "button" class = "quiet" "Log out" on click(e) { emit doLogout(e) } }
36. }
37. if (loggedOut) {
38. a { id = "loginbutton" class = "button" href = buttonHref "Log in with ident" }
39. }
40. input { id = "identcode" type = "hidden" on change(e) { emit gotCode(e) } }
41. }
42. }
43. if (hasLoginError) { p { id = "loginerror" class = "message banner" loginError } }
44. main { slot }
45. script { src = identScript }
46. script { src = "/login.js" }
47. }
48. }
50. showIn = () => {
51. loggedIn = true
52. loggedOut = false
53. selectorClass = 'in'
54. loginError = ''
55. hasLoginError = false
56. }
57. showOut = () => {
58. loggedIn = false
59. loggedOut = true
60. selectorClass = 'out'
61. }
63. // the selector's code (via /login.js and the hidden input) → the server exchanges it
64. on gotCode(e) {
65. let code = e.target.value
66. e.target.value = ''
67. if (code == null || code == '') { return null }
68. let r = emit server trackerLogin(code)
69. if (r == null || r.error != null) {
70. loginError = r != null ? r.error : 'the login failed'
71. hasLoginError = true
72. return null
73. }
74. showIn()
75. navigate('/')
76. }
78. on client trackerSignedIn(tag) {
79. showIn()
80. navigate('/')
81. }
82. on client trackerSignedOut(tag) {
83. showOut()
84. navigate('/')
85. }
87. on doLogout(e) {
88. emit server trackerLogOut()
89. showOut()
90. navigate('/')
91. }
93. // ---- the faces (the trailing `session` is always the server's: hybriel #16) ----
94. on server trackerLogin(code, session) {
95. if (session == null) { return { error = 'no session — reload the page' } }
96. let x = exchangeCode(code)
97. if (x.error != null) { return { error = x.error } }
98. let u = ensureUser(x.identity)
99. if (u == null) { return { error = 'could not store the user' } }
100. let tag = randomBytes(16)
101. session.user = { id = u.id }
102. session.data.tag = tag
103. emit client trackerSignedIn(tag)
104. return { ok = true }
105. }
107. on server trackerLogOut(session) {
108. if (session == null) { return { error = 'no session' } }
109. emit client trackerSignedOut(session.data.tag)
110. session.user = null
111. return { ok = true }
112. }