ident

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