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