calendar

3.3 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 components/styles.hl.
3. // THE SELECTOR: `<ident-selector key=IDENT_API_KEY>` from <ident>/selector.js, as in gitoria. Choosing an identity
4. // fires `ident-login` (one-time code); /login.js hands it to the hidden input #identcode, whose `change` goes to the
5. // face calendarLogin (server-side exchange, lib/users.hl userOfLoginCode; no reload). The element's class is `in` / `out`; /login.js mirrors it into
6. // the selector's `loggedIn`.
7. // LOGIN: a plain link to <ident>/login?key=&return=<public url>/login/callback (lib/api.hl loginCallback).
8. // After a login or logout in this tab the page is fetched again (navigate('/')): the calendar of the session show.
9. import { navigate } from 'hl:web'
10. import { siteName } from '../project.hl'
11. import { identKey, selectorScript, loginHref, userIdOfSession, userOfLoginCode } from '../lib/users.hl'
12. import { randomBytes } from 'hl:crypto'
14. slot = null
15. session = null
17. loggedIn = userIdOfSession(session) != null
18. loggedOut = userIdOfSession(session) == null
19. buttonHref = loginHref
20. selectorClass = loggedIn ? 'in' : 'out'
21. selectorKey = identKey
22. identScript = selectorScript
23. loginError = ''
24. hasLoginError = false
26. View {
27. body {
28. applicationHeader {
29. a { class = "brand" href = "/" siteName }
30. userBox { id = "userbox"
31. identSelector { id = "selector" key = selectorKey class = selectorClass }
32. if (loggedIn) {
33. button { id = "logout" type = "button" class = "quiet" "Log out" on click(e) { emit doLogout(e) } }
34. }
35. if (loggedOut) {
36. a { id = "loginbutton" class = "button" href = buttonHref "Log in with ident" }
37. }
38. input { id = "identcode" type = "hidden" on change(e) { emit gotCode(e) } }
39. }
40. }
41. if (hasLoginError) { p { id = "loginerror" class = "message banner" loginError } }
42. main { slot }
43. script { src = identScript }
44. script { src = "/login.js" }
45. }
46. }
48. showIn = () => {
49. loggedIn = true
50. loggedOut = false
51. selectorClass = 'in'
52. loginError = ''
53. hasLoginError = false
54. }
55. showOut = () => {
56. loggedIn = false
57. loggedOut = true
58. selectorClass = 'out'
59. }
61. // the selector's code (via /login.js and the hidden input) → the server exchanges it
62. on gotCode(e) {
63. code = e.target.value
64. e.target.value = ''
65. if (code == null || code == '') { return null }
66. r = emit server calendarLogin(code)
67. if (r == null || r.error != null) {
68. loginError = r != null ? r.error : 'the login failed'
69. hasLoginError = true
70. return null
71. }
72. showIn()
73. navigate('/')
74. }
76. on client calendarSignedIn(tag) {
77. showIn()
78. navigate('/')
79. }
80. on client calendarSignedOut(tag) {
81. showOut()
82. navigate('/')
83. }
85. on doLogout(e) {
86. emit server calendarLogOut()
87. showOut()
88. navigate('/')
89. }
91. // ---- the faces (the trailing `session` is always the server's: hybriel #16) ----
92. on server calendarLogin(code, session) {
93. if (session == null) { return { error = 'no session — reload the page' } }
94. x = userOfLoginCode(code)
95. if (x.error != null) { return { error = x.error } }
96. tag = randomBytes(16)
97. session.user = { id = x.user.id }
98. session.data.tag = tag
99. emit client calendarSignedIn(tag)
100. return { ok = true }
101. }
103. on server calendarLogOut(session) {
104. if (session == null) { return { error = 'no session' } }
105. emit client calendarSignedOut(session.data.tag)
106. session.user = null
107. return { ok = true }
108. }