ident

21.1 KB

1. // components/home.hl — `/` and `/signin/:rid`: ALL OF IDENT (pieces 1+2, tickets #24 #25;
2. // CONCEPT.md).
3. // Signed out: email → a six-digit code by mail → signed in. There is no registration:
4. // the first right code for an address creates the account with a DEFAULT IDENTITY, then
5. // this page shows that identity's name fields and says they are optional (Skip).
6. // Signed in: the account's identities (list, new, edit, delete — never the last one)
7. // and its time zone (the browser's at the first login; changeable here).
8. //
9. // Under `/signin/<rid>` the page belongs to an APP'S LOGIN BUTTON (lib/apps.hl requestOf):
10. // it names the app, signs in to ident if needed, then asks WHICH IDENTITY the app gets
11. // (with a single identity it still shows which one, one click) and sends the browser back
12. // to the app with a one-time code. Managing identities stays on `/`.
13. //
14. // Every step takes the server's answer from the CALL (the value form of emit): it rides
15. // the ack, over the socket or the POST fallback.
16. parent './main.hl'
17. import { accountOfSession, setTimeZone, signOutEverywhere } from '../lib/accounts.hl'
18. import { recordPending, dropPending, signInWithCode } from '../lib/login.hl'
19. import { identityRows, createIdentity, updateIdentity, deleteIdentity } from '../lib/identities.hl'
20. import { requestOf, grantRequest } from '../lib/apps.hl'
21. import { siteName } from '../project.hl'
23. session = null
24. rid = null
25. // 'code' on THE CODE PAGE `/code` and `/signin/<rid>/code` (ident#20; lib/api.hl codePage
26. // renders this component there, only while the session has a pending code), else null
27. step = null
28. onCodePage = step == 'code'
29. // the pending address, read by codePage from the session and handed in as a param (mission
30. // 048): read here from the session, hl:web (64527baa) would re-derive it after EVERY face
31. // that takes the session — after the 5th wrong code it turned null and the code form
32. // vanished with nothing to click (gate "after 5 wrong tries even the RIGHT code is refused")
33. pending = null
34. // where this login lives: the email form, and the code page after "Send me a code"
35. homeUrl = rid != null ? '/signin/' + rid : '/'
36. codeUrl = rid != null ? '/signin/' + rid + '/code' : '/code'
37. me = accountOfSession(session)
38. signedIn = me != null
39. // THE APP'S LOGIN REQUEST (null on `/`, or when unknown / expired)
40. request = rid != null ? requestOf(rid) : null
41. forApp = request != null
42. badRequest = rid != null && request == null
43. appName = request != null ? request.app.name : ''
44. appOrigin = request != null ? request.origin : ''
45. forInvite = request != null && request.invite != ''
46. requestLead = forInvite ? 'You are invited to ' : 'Sign in to '
47. choosing = forApp && me != null // the identity choice for the app
48. manage = rid == null && me != null // identities + time zone (only on `/`)
49. meEmail = me != null ? me.email : ''
50. timeZone = me != null ? me.timeZone : ''
51. tzInput = timeZone
52. identities = me != null ? identityRows(me.id) : []
53. __title = siteName + (forApp ? ' | sign in to ' + appName : (me != null ? ' | your identities' : ' | sign in'))
55. // the login steps (a View's `if` takes a member, so each step is one).
56. // THE CODE STEP IS ITS OWN PAGE (ident#20, creator: "just make a /code where it checks a
57. // pending code"): "Send me a code" records the address in this browser's session (face
58. // rememberPending) and goes to `/code`; that page shows the code form for the session's
59. // pending address (lib/login.hl pendingOf) — so a reload, a second tab or a re-seed keeps it.
60. pendingEmail = onCodePage && me == null && !badRequest ? pending : null
61. askEmail = me == null && !badRequest && !onCodePage
62. askCode = pendingEmail != null
63. email = ''
64. sentTo = pendingEmail != null ? pendingEmail : ''
65. code = ''
66. message = ''
67. notice = ''
69. // THE IDENTITY FORM — new, edit, and right after the first login the default identity
70. // ("welcome": the names are optional, Skip closes it)
71. editing = false
72. welcome = false
73. notWelcome = true // `if (!welcome)` in a View renders nothing: an `if` takes a member
74. editId = '' // '' = a new identity, else the identity's id (a UUID)
75. editHeading = ''
76. fIdentityName = ''
77. fNickname = ''
78. fFirstname = ''
79. fLastname = ''
80. fAvatar = ''
81. hasAvatarPreview = false
82. avatarPreviewClass = hasAvatarPreview ? 'avatar' : 'avatar hidden'
83. avatarRemoveClass = hasAvatarPreview ? 'quiet small' : 'quiet small hidden'
85. View {
86. identCard {
87. if (forApp) {
88. appRequest { id = "apprequest" requestLead strong { id = "appname" appName } " " requestOrigin { id = "apporigin" appOrigin } }
89. }
90. if (badRequest) {
91. h1 { "Login request expired" }
92. p { id = "badrequest" class = "message" "This login request is unknown or expired. Go back to the app and start the login again." }
93. }
94. if (askEmail) {
95. h1 { "Sign in" }
96. p { class = "lead" "We mail you a one-time code. There are no passwords, and no sign-up: the first login with an address creates its account." }
97. form { id = "emailform"
98. on submit(e) {
99. e.preventDefault()
100. emit ask(e)
101. }
102. label { "Email"
103. input { id = "email" name = "email" type = "email" autocomplete = "email" required = "required" value = email on input(e) { emit setEmail(e.target.value) } }
104. }
105. button { id = "sendcode" type = "submit" "Send me a code" }
106. }
107. }
108. if (askCode) {
109. h1 { "Enter your code" }
110. p { id = "sentto" class = "lead" "We sent a six-digit code to " strong { sentTo } ". It is valid for 10 minutes." }
111. form { id = "codeform"
112. on submit(e) {
113. e.preventDefault()
114. emit verify(e)
115. }
116. label { "One-time code"
117. input { id = "code" name = "code" autocomplete = "one-time-code" inputmode = "numeric" pattern = "[0-9]{6}" maxlength = "6" required = "required" value = code on input(e) { emit setCode(e.target.value) } }
118. }
119. formButtons {
120. button { id = "verify" type = "submit" "Sign in" }
121. button { id = "back" type = "button" class = "quiet" "Other address" on click(e) { emit back(e) } }
122. }
123. }
124. }
125. if (signedIn) {
126. accountBar {
127. userEmail { id = "meemail" meEmail }
128. button { id = "signout" type = "button" class = "quiet small" "Sign out" on click(e) { emit doSignOut(e) } }
129. button { id = "signoutall" type = "button" class = "quiet small" "Sign out everywhere" on click(e) { emit doSignOutAll(e) } }
130. }
131. if (editing) {
132. form { id = "identityform"
133. on submit(e) {
134. e.preventDefault()
135. emit saveForm(e)
136. }
137. h1 { id = "formheading" editHeading }
138. if (welcome) {
139. p { id = "welcome" class = "lead" "Your account is ready and has a default identity. All of these fields are " strong { "optional" } " — fill in what you like, or skip it and do it later." }
140. }
141. label { "Identity name " fieldHint { "(shown when you pick an identity in an app; optional)" }
142. input { id = "fidentityname" name = "identityName" maxlength = "60" autocomplete = "off" value = fIdentityName on input(e) { emit setF('identityName', e.target.value) } }
143. }
144. label { "Nickname " fieldHint { "(optional)" }
145. input { id = "fnickname" name = "nickname" maxlength = "60" autocomplete = "nickname" value = fNickname on input(e) { emit setF('nickname', e.target.value) } }
146. }
147. label { "First name " fieldHint { "(optional)" }
148. input { id = "ffirstname" name = "firstname" maxlength = "60" autocomplete = "given-name" value = fFirstname on input(e) { emit setF('firstname', e.target.value) } }
149. }
150. label { "Last name " fieldHint { "(optional)" }
151. input { id = "flastname" name = "lastname" maxlength = "60" autocomplete = "family-name" value = fLastname on input(e) { emit setF('lastname', e.target.value) } }
152. }
153. avatarField {
154. img { id = "avatarpreview" class = avatarPreviewClass src = fAvatar alt = "" width = "48" height = "48" }
155. label { "Avatar " fieldHint { "(optional; a picture apps can show, e.g. next to your comments)" }
156. input { id = "favatarfile" type = "file" accept = "image/png,image/jpeg,image/webp,image/gif" }
157. }
158. input { id = "favatar" name = "avatar" type = "hidden" value = fAvatar on input(e) { emit setF('avatar', e.target.value) } }
159. button { id = "avatarremove" type = "button" class = avatarRemoveClass "Remove picture" on click(e) { emit setF('avatar', '') } }
160. span { id = "avatarnote" class = "avatar-note" }
161. }
162. formButtons {
163. button { id = "saveidentity" type = "submit" "Save" }
164. if (welcome) { button { id = "skip" type = "button" class = "quiet" "Skip" on click(e) { emit closeForm(e) } } }
165. if (notWelcome) { button { id = "cancel" type = "button" class = "quiet" "Cancel" on click(e) { emit closeForm(e) } } }
166. }
167. }
168. }
169. if (choosing) {
170. section { id = "choosesection"
171. h1 { "Choose an identity" }
172. p { class = "lead" "Which identity signs in to " strong { appName } "? The app gets only the identity's short id — no email, no names." }
173. ul { id = "chooselist"
174. for (row of identities) {
175. li { class = "choice"
176. if (row.hasAvatar) { img { class = "avatar" src = row.avatar alt = "" width = "32" height = "32" } }
177. identityMain {
178. identityLabel { row.label }
179. identityShortId { class = "shortid" row.shortId }
180. if (row.isDefault) { defaultBadge { "default" } }
181. identityDetails { row.details }
182. }
183. button { type = "button" class = "choose" value = row.id "Continue" on click(e) { emit choose(e.target.value) } }
184. }
185. }
186. }
187. }
188. }
189. if (manage) {
190. section { id = "identitiessection"
191. sectionHead {
192. h1 { "Your identities" }
193. button { id = "newidentity" type = "button" class = "small" "New identity" on click(e) { emit openNew(e) } }
194. }
195. ul { id = "identities"
196. for (row of identities) {
197. li { class = "identity"
198. if (row.hasAvatar) { img { class = "avatar" src = row.avatar alt = "" width = "32" height = "32" } }
199. identityMain {
200. identityLabel { row.label }
201. identityShortId { class = "shortid" row.shortId }
202. if (row.isDefault) { defaultBadge { "default" } }
203. identityDetails { row.details }
204. }
205. identityActions {
206. button { type = "button" class = "quiet small edit" value = row.id "Edit" on click(e) { emit openEdit(e.target.value) } }
207. if (row.canDelete) { button { type = "button" class = "quiet small danger delete" value = row.id "Delete" on click(e) { emit remove(e.target.value) } } }
208. }
209. }
210. }
211. }
212. }
213. section { id = "timezonesection"
214. h2 { "Time zone" }
215. p { class = "lead" "Taken from your browser at your first login. Currently " strong { id = "timezone" timeZone } "." }
216. form { id = "tzform"
217. on submit(e) {
218. e.preventDefault()
219. emit saveZone(e)
220. }
221. label { "Time zone (IANA name, e.g. Europe/Vienna)"
222. input { id = "tzinput" name = "timeZone" autocomplete = "off" maxlength = "64" required = "required" value = tzInput on input(e) { emit setTz(e.target.value) } }
223. }
224. formButtons {
225. button { id = "savetz" type = "submit" "Save time zone" }
226. button { id = "browsertz" type = "button" class = "quiet" "Use this browser's" on click(e) { emit useBrowserZone(e) } }
227. }
228. }
229. }
230. }
231. }
232. p { id = "notice" class = "notice" notice }
233. p { id = "message" class = "message" message }
234. }
235. }
237. on setEmail(v) { email = v }
238. on setCode(v) { code = v }
239. on setTz(v) { tzInput = v }
240. on setF(name, v) {
241. if (name == 'identityName') { fIdentityName = v }
242. if (name == 'nickname') { fNickname = v }
243. if (name == 'firstname') { fFirstname = v }
244. if (name == 'lastname') { fLastname = v }
245. if (name == 'avatar') { fAvatar = v hasAvatarPreview = v.trim() != '' }
246. }
248. // the browser's own time zone (IANA name) and whether a name is one it knows (`Intl` is a
249. // browser global of client code, hybriel#18)
250. browserZone = () => { return Intl.DateTimeFormat().resolvedOptions().timeZone }
251. knownZone = (v) => { return v == 'UTC' || Intl.supportedValuesOf('timeZone').includes(v) }
253. // THE CODE REQUEST is a plain POST to /api/code (lib/api.hl), not a face: only an HTTP
254. // request carries the client IP (X-Client-IP) the per-IP limit counts (mission 010).
255. // A refusal (400, 429) answers { error } and is shown like every other message.
256. on ask(e) {
257. message = ''
258. res = fetch('/api/code', { method = 'POST' headers = { 'Content-Type' = 'application/json' } body = JSON.stringify({ email = email }) })
259. r = res != null ? res.json() : null
260. if (r == null) {
261. message = 'the server did not answer — try again'
262. return null
263. }
264. if (r.error != null) {
265. message = r.error
266. return null
267. }
268. // THE SESSION REMEMBERS THE STEP, then the browser goes to the code page. A function
269. // route gets no session (hybriel#11), so the face records it; it refuses unless a
270. // code for the address is really waiting.
271. k = emit server rememberPending(r.email)
272. if (k == null) {
273. message = 'the server did not answer — try again'
274. return null
275. }
276. if (k.error != null) {
277. message = k.error
278. return null
279. }
280. window.location.assign(codeUrl)
281. }
283. on verify(e) {
284. message = ''
285. r = emit server verifyCode(sentTo, code, browserZone())
286. if (r == null) {
287. message = 'the server did not answer — try again'
288. return null
289. }
290. if (r.error != null) {
291. message = r.error
292. return null
293. }
294. askCode = false
295. // signed in: the address bar leaves the code page (a reload of /code would go back
296. // to it anyway — lib/api.hl codePage sends a signed-in browser there)
297. window.history.replaceState(null, '', homeUrl)
298. meEmail = r.account.email
299. timeZone = r.account.timeZone
300. tzInput = r.account.timeZone
301. identities = r.identities
302. signedIn = true
303. notice = ''
304. manage = !forApp
305. choosing = forApp
306. // THE FIRST LOGIN: the default identity's names, optional (for an app too: the
307. // choice follows once the form is saved or skipped)
308. if (r.created) {
309. fillForm(r.identities[0])
310. editHeading = 'Welcome — name your default identity'
311. welcome = true
312. notWelcome = false
313. editing = true
314. choosing = false
315. }
316. }
318. // THE CHOICE: the server makes (or finds) this identity's id for the app and answers
319. // the app's return URL with a one-time code — the browser goes there
320. on choose(id) {
321. message = ''
322. notice = ''
323. r = emit server chooseIdentity(rid, '' + id)
324. if (r == null) {
325. message = 'the server did not answer — try again'
326. return null
327. }
328. if (r.error != null) {
329. message = r.error
330. return null
331. }
332. notice = 'Back to ' + appName + ' …'
333. window.location.assign(r.url)
334. }
336. fillForm = (row) => {
337. editId = row.id
338. fIdentityName = row.identityName
339. fNickname = row.nickname
340. fFirstname = row.firstname
341. fLastname = row.lastname
342. fAvatar = row.avatar
343. hasAvatarPreview = row.hasAvatar
344. return null
345. }
347. rowOf = (id) => {
348. for (row of identities) { if ('' + row.id == '' + id) { return row } }
349. return null
350. }
352. on openNew(e) {
353. message = ''
354. notice = ''
355. editId = ''
356. fIdentityName = ''
357. fNickname = ''
358. fFirstname = ''
359. fLastname = ''
360. fAvatar = ''
361. hasAvatarPreview = false
362. editHeading = 'New identity'
363. welcome = false
364. notWelcome = true
365. editing = true
366. }
368. on openEdit(id) {
369. message = ''
370. notice = ''
371. row = rowOf(id)
372. if (row == null) { return null }
373. fillForm(row)
374. editHeading = 'Edit ' + row.label
375. welcome = false
376. notWelcome = true
377. editing = true
378. }
380. on closeForm(e) {
381. editing = false
382. welcome = false
383. notWelcome = true
384. message = ''
385. choosing = forApp
386. }
388. on saveForm(e) {
389. message = ''
390. fields = { identityName = fIdentityName nickname = fNickname firstname = fFirstname lastname = fLastname avatar = fAvatar }
391. let r = null
392. if (editId == '') {
393. r = emit server addIdentity(fields)
394. } else {
395. r = emit server editIdentity('' + editId, fields)
396. }
397. if (r == null) {
398. message = 'the server did not answer — try again'
399. return null
400. }
401. if (r.error != null) {
402. message = r.error
403. return null
404. }
405. identities = r.identities
406. notice = editId == '' ? 'Identity created.' : 'Identity saved.'
407. editing = false
408. welcome = false
409. notWelcome = true
410. choosing = forApp
411. }
413. on remove(id) {
414. message = ''
415. notice = ''
416. row = rowOf(id)
417. if (row == null) { return null }
418. if (!confirm('Delete the identity “' + row.label + '”?')) { return null }
419. r = emit server dropIdentity('' + id)
420. if (r == null) {
421. message = 'the server did not answer — try again'
422. return null
423. }
424. if (r.error != null) {
425. message = r.error
426. return null
427. }
428. identities = r.identities
429. if ('' + editId == '' + id) { editing = false }
430. notice = 'Identity deleted.'
431. }
433. on useBrowserZone(e) { tzInput = browserZone() }
435. on saveZone(e) {
436. message = ''
437. notice = ''
438. v = tzInput.trim()
439. if (!knownZone(v)) {
440. message = 'this browser does not know the time zone “' + v + '”'
441. return null
442. }
443. r = emit server changeTimeZone(v)
444. if (r == null) {
445. message = 'the server did not answer — try again'
446. return null
447. }
448. if (r.error != null) {
449. message = r.error
450. return null
451. }
452. timeZone = r.timeZone
453. tzInput = r.timeZone
454. notice = 'Time zone saved.'
455. }
457. // "Other address": the session forgets the pending sign-in, back to the email form
458. on back(e) {
459. message = ''
460. r = emit server forgetPending()
461. window.location.assign(homeUrl)
462. }
464. on doSignOut(e) {
465. emit server signOut()
466. signedIn = false
467. choosing = false
468. manage = false
469. editing = false
470. welcome = false
471. notWelcome = true
472. meEmail = ''
473. identities = []
474. askEmail = true
475. message = ''
476. notice = ''
477. }
479. // SIGNS OUT ON EVERY DEVICE at once (bumps the account's session epoch, lib/accounts.hl
480. // signOutEverywhere) — this browser included, so it resets to the sign-in form too.
481. on doSignOutAll(e) {
482. message = ''
483. notice = ''
484. if (!confirm('Sign out of ident on every device?')) { return null }
485. r = emit server signOutAll()
486. if (r == null) {
487. message = 'the server did not answer — try again'
488. return null
489. }
490. if (r.error != null) {
491. message = r.error
492. return null
493. }
494. signedIn = false
495. choosing = false
496. manage = false
497. editing = false
498. welcome = false
499. notWelcome = true
500. meEmail = ''
501. identities = []
502. askEmail = true
503. notice = 'Signed out on every device.'
504. }
506. // ---- the faces ------------------------------------------------------------------------
507. // A face's LAST parameter is the session (the framework appends it). Every face that
508. // needs the account asks accountOfSession, which only accepts the framework's Session.
509. // A face runs on a BLANK instance: it has its arguments and its imports, not this
510. // component's members or functions.
512. // (the code request is NOT a face since mission 010: POST /api/code in lib/api.hl — a face
513. // sees no request headers, so it could not apply the per-IP limit; a face here would be a
514. // way around it)
516. // the right code signs the session in; the first one for an address creates the
517. // account, its default identity and stores the browser's time zone
518. on server verifyCode(email, code, timeZone, session) {
519. if (session == null) { return { error = 'no session — reload the page' } }
520. if (email == null || hlTypeName(email) != 'String' || code == null || hlTypeName(code) != 'String') { return { error = 'email and code must be strings' } }
521. return signInWithCode(session, email, code, timeZone)
522. }
524. on server addIdentity(fields, session) {
525. let me = accountOfSession(session)
526. if (me == null) { return { error = 'you are not signed in' } }
527. r = createIdentity(me.id, fields)
528. if (r.error != null) { return r }
529. return { identity = r.identity identities = identityRows(me.id) }
530. }
532. on server editIdentity(id, fields, session) {
533. let me = accountOfSession(session)
534. if (me == null) { return { error = 'you are not signed in' } }
535. r = updateIdentity(me.id, id, fields)
536. if (r.error != null) { return r }
537. return { identity = r.identity identities = identityRows(me.id) }
538. }
540. on server dropIdentity(id, session) {
541. let me = accountOfSession(session)
542. if (me == null) { return { error = 'you are not signed in' } }
543. r = deleteIdentity(me.id, id)
544. if (r.error != null) { return r }
545. return { deleted = r.deleted identities = identityRows(me.id) }
546. }
548. on server changeTimeZone(tz, session) {
549. let me = accountOfSession(session)
550. if (me == null) { return { error = 'you are not signed in' } }
551. r = setTimeZone(me.id, tz)
552. if (r.error != null) { return r }
553. return { timeZone = r.account.timeZone }
554. }
556. // the identity for the app's login request (lib/apps.hl grantRequest: a plain login, or an invite's): { url } or { error }
557. on server chooseIdentity(rid, identity, session) {
558. let me = accountOfSession(session)
559. if (me == null) { return { error = 'you are not signed in' } }
560. if (rid == null || hlTypeName(rid) != 'String') { return { error = 'field rid must be a string' } }
561. if (identity == null || hlTypeName(identity) != 'String') { return { error = 'field identity must be a string' } }
562. return grantRequest(me.id, rid, identity)
563. }
565. // THE PENDING SIGN-IN (ident#20): recorded after POST /api/code answered, only while a
566. // code for that address is really waiting (lib/login.hl recordPending); "Other address"
567. // forgets it. Named apart from the store functions (faces dispatch by name, hybriel#36).
568. on server rememberPending(email, session) {
569. return recordPending(session, email)
570. }
572. on server forgetPending(session) {
573. return dropPending(session)
574. }
576. on server signOut(session) {
577. if (session != null) { session.user = null }
578. return true
579. }
581. on server signOutAll(session) {
582. let me = accountOfSession(session)
583. if (me == null) { return { error = 'you are not signed in' } }
584. // pushed BEFORE the sessions go: the audience reads each connection's session user
585. emit client signedOutAll(me.id)
586. return signOutEverywhere(me.id)
587. }