gitoria

5.8 KB

1. // components/main.hl — THE SHELL: the application header (brand; top right the login: ident's
2. // "Log in with ident" button, or who you are + Log out), the display-name prompt of a first login,
3. // and the slot every page renders into. All CSS is in styles.hl.
4. // THE SELECTOR (gitoria#14): `<ident-selector key=IDENT_API_KEY>` from <ident>/selector.js, as in tickets.
5. // Choosing an identity fires `ident-login` (one-time code); /login.js hands it to the hidden input
6. // #identcode, whose `change` goes to the face gitoriaLogin (server-side exchange, no reload). The element's
7. // class is `in` / `out`; /login.js mirrors it into the selector's `loggedIn`. ident only answers a REGISTERED
8. // origin (the main address), so on a repo address (the request's host, `host = null`, hybriel#74) the selector
9. // carries the class `onrepo` and styles.hl hides it — the button stays there.
10. // LOGIN: a plain link to <ident>/login?key=&return=<public url>/login/callback (project.hl
11. // loginCallback); /login.js adds `?next=<this page>` at the click so the login returns here.
12. // FIRST LOGIN: no display name yet → the name prompt; creating a repo waits for it.
13. import { siteName } from '../project.hl'
14. import { identKey, selectorScript, loginHref, infoOfSession, exchangeCode, ensureUser, userInfo, setUserName, userOfSession, slugOfHost } from '../users.hl'
15. import { randomBytes } from 'hl:crypto'
17. slot = null
18. session = null
19. host = null
21. me = infoOfSession(session)
22. loggedIn = me != null
23. loggedOut = me == null
24. needsName = me != null && !me.named
25. myName = me != null && me.named ? me.name : 'you'
26. buttonHref = loginHref
27. onRepoHost = slugOfHost(host) != ''
28. selectorClass = (me != null ? 'in' : 'out') + (onRepoHost ? ' onrepo' : '')
29. selectorKey = identKey
30. identScript = selectorScript
31. loginError = ''
32. hasLoginError = false
33. nameDraft = ''
34. nameError = ''
35. // OFFLINE (mission 046, as tracker.worldapi.org#10): the service worker opens `/` from its cache without a network; the
36. // shell then says so. hl:web gives a page no connection state and no "mounted" hook, so a tick asks the browser:
37. // `netProbe` runs an endless 1 s CSS animation (styles.hl), and each `animationiteration` reads navigator.onLine — a
38. // write only when it changed.
39. offline = false
41. View {
42. body {
43. applicationHeader {
44. a { class = "brand" href = "/" siteName }
45. userBox { id = "userbox"
46. identSelector { id = "selector" key = selectorKey class = selectorClass }
47. if (loggedIn) {
48. span { id = "whoami" myName }
49. button { id = "logout" type = "button" class = "quiet" "Log out" on click(e) { emit doLogout(e) } }
50. }
51. if (loggedOut) {
52. a { id = "loginbutton" class = "button" href = buttonHref "Log in with ident" }
53. }
54. input { id = "identcode" type = "hidden" on change(e) { emit gotCode(e) } }
55. }
56. }
57. if (hasLoginError) { p { id = "loginerror" class = "message banner" loginError } }
58. if (offline) { offlineNote { id = "offline" "You are offline. Repositories and code need the network." } }
59. netProbe { "aria-hidden" = "true" on animationiteration(e) { emit netTick(e) } }
60. if (needsName) {
61. namePrompt {
62. form { id = "nameform"
63. on submit(e) {
64. e.preventDefault()
65. emit saveName(e)
66. }
67. label { "Welcome! Choose the display name others see as the owner of your repositories"
68. input { id = "displayname" name = "displayname" required = "required" maxlength = "60" value = nameDraft on input(e) { emit setNameDraft(e.target.value) } }
69. }
70. button { id = "namesave" type = "submit" "Save" }
71. p { id = "nameerror" class = "message" nameError }
72. }
73. }
74. }
75. main { slot }
76. script { src = identScript }
77. script { src = "/login.js" }
78. }
79. }
81. showMe = (info) => {
82. loggedIn = true
83. loggedOut = false
84. needsName = !info.named
85. myName = info.named ? info.name : 'you'
86. selectorClass = onRepoHost ? 'in onrepo' : 'in'
87. loginError = ''
88. hasLoginError = false
89. }
90. showOut = () => {
91. loggedIn = false
92. loggedOut = true
93. needsName = false
94. myName = 'you'
95. selectorClass = onRepoHost ? 'out onrepo' : 'out'
96. }
98. // the selector's code (via /login.js and the hidden input) → the server exchanges it
99. on gotCode(e) {
100. let code = e.target.value
101. e.target.value = ''
102. if (code == null || code == '') { return null }
103. let r = emit server gitoriaLogin(code)
104. if (r == null || r.error != null) {
105. loginError = r != null ? r.error : 'the login failed'
106. hasLoginError = true
107. return null
108. }
109. showMe(r)
110. }
112. on client gitoriaSignedIn(tag, info) { showMe(info) }
113. on client gitoriaSignedOut(tag) { showOut() }
115. on setNameDraft(v) { nameDraft = v }
117. on netTick(e) {
118. let down = window.navigator.onLine == false
119. if (down != offline) { offline = down }
120. }
122. on saveName(e) {
123. let r = emit server gitoriaSaveName(nameDraft)
124. if (r == null || r.error != null) {
125. nameError = r != null ? r.error : 'could not save the name'
126. return null
127. }
128. nameError = ''
129. showMe(r)
130. }
132. on doLogout(e) {
133. emit server gitoriaLogOut()
134. showOut()
135. }
137. // ---- the faces (the trailing `session` is always the server's: hybriel #16) ----
138. on server gitoriaLogin(code, session) {
139. if (session == null) { return { error = 'no session — reload the page' } }
140. let x = exchangeCode(code)
141. if (x.error != null) { return { error = x.error } }
142. let u = ensureUser(x.identity)
143. if (u == null) { return { error = 'could not store the user' } }
144. let tag = randomBytes(16)
145. session.user = { id = u.id }
146. session.data.tag = tag
147. let info = userInfo(u)
148. emit client gitoriaSignedIn(tag, info)
149. return info
150. }
152. on server gitoriaSaveName(name, session) {
153. let u = userOfSession(session)
154. if (u == null) { return { error = 'log in with ident first' } }
155. let r = setUserName(u.id, name)
156. if (r.error != null) { return { error = r.error } }
157. let info = userInfo(r.user)
158. emit client gitoriaSignedIn(session.data.tag, info)
159. return info
160. }
162. on server gitoriaLogOut(session) {
163. if (session == null) { return { error = 'no session' } }
164. emit client gitoriaSignedOut(session.data.tag)
165. session.user = null
166. return { ok = true }
167. }