From bdb04cdedc2d29d78bb631eea4259371dda3d949 Mon Sep 17 00:00:00 2001 From: nmemmert <67961292+nmemmert@users.noreply.github.com> Date: Tue, 6 Oct 2026 12:52:49 -0400 Subject: [PATCH] Add cross-reference map, admin health page, passkeys and device list, settings tabs - Reader: chapter cross-reference map (M) from IQ Bible's reference graph - Admin: Health tab with disk use, snapshots (back up, download, restore), failure logs - Passkey sign-in (WebAuthn), signed-in device list, sign out others, optional sign-in alerts - Settings split into Account, Preferences, Notifications, Security, Your data tabs - ntfy server field: catch a topic typed into the server box Co-Authored-By: Claude Sonnet 5.5 --- TODO.md | 6 +- package-lock.json | 296 +++++++++++++++++++ package.json | 2 + server/backups.js | 25 +- server/db.js | 62 +++- server/devices.js | 185 ++++++++++++ server/devices.test.js | 171 +++++++++++ server/health.js | 37 +++ server/health.test.js | 50 ++++ server/index.js | 62 +++- server/iqbible.js | 2 +- server/reminders.js | 4 + src/components/AdminHealth.jsx | 137 +++++++++ src/components/AdminHealth.test.jsx | 56 ++++ src/components/CommandPalette.jsx | 4 +- src/components/ShortcutsHelp.jsx | 1 + src/components/reader/CrossRefMap.jsx | 89 ++++++ src/components/reader/CrossRefMap.test.jsx | 69 +++++ src/components/reader/VerseSheet.jsx | 3 +- src/components/settings/DevicesSection.jsx | 77 +++++ src/components/settings/PasskeysSection.jsx | 74 +++++ src/components/settings/SecurityTab.test.jsx | 121 ++++++++ src/pages/AdminPage.jsx | 8 +- src/pages/AuthPage.jsx | 14 + src/pages/ReaderPage.jsx | 9 +- src/pages/SettingsPage.jsx | 53 +++- src/syncService.js | 18 ++ src/test/App.accounts.test.jsx | 17 ++ src/test/App.pages.test.jsx | 1 + src/test/App.sync.test.jsx | 1 + src/utils/ntfyServer.js | 17 ++ src/utils/ntfyServer.test.js | 23 ++ src/utils/passkeys.js | 34 +++ src/utils/xrefMap.js | 89 ++++++ src/utils/xrefMap.test.js | 65 ++++ 35 files changed, 1860 insertions(+), 22 deletions(-) create mode 100644 server/devices.js create mode 100644 server/devices.test.js create mode 100644 server/health.js create mode 100644 server/health.test.js create mode 100644 src/components/AdminHealth.jsx create mode 100644 src/components/AdminHealth.test.jsx create mode 100644 src/components/reader/CrossRefMap.jsx create mode 100644 src/components/reader/CrossRefMap.test.jsx create mode 100644 src/components/settings/DevicesSection.jsx create mode 100644 src/components/settings/PasskeysSection.jsx create mode 100644 src/components/settings/SecurityTab.test.jsx create mode 100644 src/utils/ntfyServer.js create mode 100644 src/utils/ntfyServer.test.js create mode 100644 src/utils/passkeys.js create mode 100644 src/utils/xrefMap.js create mode 100644 src/utils/xrefMap.test.js diff --git a/TODO.md b/TODO.md index 8e0624b..5ef2042 100644 --- a/TODO.md +++ b/TODO.md @@ -5,9 +5,9 @@ Ideas for the app that haven't been built yet, roughly in the order I'd do them. ## Running it and keeping it safe - [ ] **Email (SMTP).** A mail setting for password resets and invite links, so they don't depend on the ntfy topic. Also lets a co-teacher get their invite by email. Needs a `SMTP_URL`-style setting and a fallback to today's behaviour. -- [ ] **Passkeys and a device list.** Sign in with Face ID or a fingerprint (WebAuthn); show where you're signed in with +- [x] **Passkeys and a device list.** Sign in with Face ID or a fingerprint (WebAuthn); show where you're signed in with "sign out other devices"; optionally a login alert through ntfy. -- [ ] **Server health page for the admin.** Last backup, disk use, failed notifications, recent sign-in failures, and a +- [x] **Server health page for the admin.** Last backup, disk use, failed notifications, recent sign-in failures, and a "restore a snapshot" button (snapshots already exist under `DATA_DIR/backups`). - [ ] **Checks on every push.** Run tests and lint on the Gitea server, plus a few real-browser tests (Playwright) for sign-in, creating a study and syncing; so far everything is tested in simulation. @@ -23,7 +23,7 @@ Ideas for the app that haven't been built yet, roughly in the order I'd do them. ## Reading - [ ] **Read-aloud with highlighting.** The device's voice reads the chapter and the verse being read is highlighted; useful for the BSB and NET, which have no audio. -- [ ] **Cross-reference map.** A picture of the links between chapters, from IQ Bible's reference graph (needs the IQ Bible key). +- [x] **Cross-reference map.** A picture of the links between chapters, from IQ Bible's reference graph (needs the IQ Bible key). ## Decided against, for now - Scripture memory (verse practice with spaced review). diff --git a/package-lock.json b/package-lock.json index 0febdb0..c0dbe63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "bible-study-app", "version": "0.0.1", "dependencies": { + "@simplewebauthn/browser": "^13.3.0", + "@simplewebauthn/server": "^13.3.3", "bcryptjs": "^3.0.3", "better-sqlite3": "^12.10.0", "compression": "^1.8.2", @@ -1163,6 +1165,12 @@ } } }, + "node_modules/@hexagon/base64": { + "version": "1.1.28", + "resolved": "https://registry.npmjs.org/@hexagon/base64/-/base64-1.1.28.tgz", + "integrity": "sha512-lhqDEAvWixy3bZ+UOYbPwUbBkwBq5C1LAJ/xPC8Oi+lL54oyakv/npbA0aU2hgCsx/1NUd4IBvV03+aUBWxerw==", + "license": "MIT" + }, "node_modules/@humanfs/core": { "version": "0.19.2", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz", @@ -1303,6 +1311,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@levischuck/tiny-cbor": { + "version": "0.2.11", + "resolved": "https://registry.npmjs.org/@levischuck/tiny-cbor/-/tiny-cbor-0.2.11.tgz", + "integrity": "sha512-llBRm4dT4Z89aRsm6u2oEZ8tfwL/2l6BwpZ7JcyieouniDECM5AqNgr/y08zalEIvW3RSK4upYyybDcmjXqAow==", + "license": "MIT" + }, "node_modules/@napi-rs/wasm-runtime": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.5.tgz", @@ -1420,6 +1434,207 @@ "url": "https://github.com/sponsors/Boshen" } }, + "node_modules/@peculiar/asn1-android": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-android/-/asn1-android-2.10.0.tgz", + "integrity": "sha512-IHKdYL5MRW76DOQCv2HSE/vUMOf2jqH4E7yhtQYe/xx+RxpPiXfkUdhex0N4/s5crsnXCGftRNzy4RJn1s6CZA==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.10.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@peculiar/asn1-cms": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-cms/-/asn1-cms-2.10.0.tgz", + "integrity": "sha512-CkX0H4NCIOMHOU3rh2xXZywinYZ/EnJlaOlJiGI0e5L4XjFqHf4iH30LMbXWChVppdA9ljbanjtzQFOhDNfTWg==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.10.0", + "@peculiar/asn1-x509": "^2.10.0", + "@peculiar/asn1-x509-attr": "^2.10.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@peculiar/asn1-csr": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-csr/-/asn1-csr-2.10.0.tgz", + "integrity": "sha512-jTPTr/9rxKM+niQLMF3jiAMb0lWHUhUHIuSOhdGCIfpB4FAQYf9SoiXOgxP8bS/68IB+bj+1OHvVnDVCQfVUZw==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.10.0", + "@peculiar/asn1-x509": "^2.10.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@peculiar/asn1-ecc": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-ecc/-/asn1-ecc-2.10.0.tgz", + "integrity": "sha512-GFd3iOjFrWX+QWH2R2dO5QSJyyRGv9CIBKtRlGlPNCvb2RvmCbBDexe91MJgV76c69d998Xsa+CvuQ98seoiPg==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.10.0", + "@peculiar/asn1-x509": "^2.10.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@peculiar/asn1-pfx": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-pfx/-/asn1-pfx-2.10.0.tgz", + "integrity": "sha512-1y3QK9ZH1IPleAMmRoJlPS10eGkAWnULETW8zDFNUK1ffqpG7zmDY+kYBMYQgwlcQZ2iitLm2z2EBP0xzRXpaA==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.10.0", + "@peculiar/asn1-pkcs8": "^2.10.0", + "@peculiar/asn1-rsa": "^2.10.0", + "@peculiar/asn1-schema": "^2.10.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@peculiar/asn1-pkcs8": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs8/-/asn1-pkcs8-2.10.0.tgz", + "integrity": "sha512-Ri+BZT9bnwqlHWmhs7lvWjvJRxKev2hA2+4EbZajgeYWCbR8hyv0znF4DhsFouOhMj2nSDV/iGJ6DMQtwITnCw==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.10.0", + "@peculiar/asn1-x509": "^2.10.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@peculiar/asn1-pkcs9": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs9/-/asn1-pkcs9-2.10.0.tgz", + "integrity": "sha512-XIXsbDQFezYk6fudczkuvawkRD4GNpISGCqfYhdkJlvcGF/RFknU+0DDJagOaJqBf+PdPzk4J9oMqDGcvfR9HQ==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.10.0", + "@peculiar/asn1-pfx": "^2.10.0", + "@peculiar/asn1-pkcs8": "^2.10.0", + "@peculiar/asn1-schema": "^2.10.0", + "@peculiar/asn1-x509": "^2.10.0", + "@peculiar/asn1-x509-attr": "^2.10.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@peculiar/asn1-rsa": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-rsa/-/asn1-rsa-2.10.0.tgz", + "integrity": "sha512-4Jvmwlh3gZAhNZ4/u7JSyLuce9hofOFZ4o3PYKAccCImGnyaT5CMym/ATgvAvqpOYFNW531oPZvJlEBhJy9VfA==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.10.0", + "@peculiar/asn1-x509": "^2.10.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@peculiar/asn1-schema": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.10.0.tgz", + "integrity": "sha512-GhokD41lV4gQrrLYm3wCkHfBOnJrnhDMgt4XeMW8gzfE1UdJqIuSwsE+ggf82XBjUXRJylcm+KIGQFa4utIVLw==", + "license": "MIT", + "dependencies": { + "@peculiar/utils": "^2.0.2", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@peculiar/asn1-x509": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509/-/asn1-x509-2.10.0.tgz", + "integrity": "sha512-ucNVg8+ANveTpMN3fy9lA2alryONdXc2A4cEG2hMniWbvQt+YOZoe8BI80YYNO8FBcuDY1qbDQ4uQGQVraHxGA==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.10.0", + "@peculiar/utils": "^2.0.2", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@peculiar/asn1-x509-attr": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509-attr/-/asn1-x509-attr-2.10.0.tgz", + "integrity": "sha512-/85GtKOKmgvuSJNlaFfwGWNdRSZZ+hpF02NyM01XiCdzpaZONiBltDyfluFPvFx966CR+ZHNSG1jniwpy07oGg==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.10.0", + "@peculiar/asn1-x509": "^2.10.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@peculiar/utils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@peculiar/utils/-/utils-2.0.3.tgz", + "integrity": "sha512-+oL3HPFRIZ1St2K50lWCXiioIgSoxzz7R1J3uF6neO2yl1sgmpgY6XXJH4BdpoDkMWznQTeYF6oWNDZLCdQ4eQ==", + "license": "MIT", + "dependencies": { + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/x509": { + "version": "1.14.3", + "resolved": "https://registry.npmjs.org/@peculiar/x509/-/x509-1.14.3.tgz", + "integrity": "sha512-C2Xj8FZ0uHWeCXXqX5B4/gVFQmtSkiuOolzAgutjTfseNOHT3pUjljDZsTSxXFGgio54bCzVFqmEOUrIVk8RDA==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.6.0", + "@peculiar/asn1-csr": "^2.6.0", + "@peculiar/asn1-ecc": "^2.6.0", + "@peculiar/asn1-pkcs9": "^2.6.0", + "@peculiar/asn1-rsa": "^2.6.0", + "@peculiar/asn1-schema": "^2.6.0", + "@peculiar/asn1-x509": "^2.6.0", + "pvtsutils": "^1.3.6", + "reflect-metadata": "^0.2.2", + "tslib": "^2.8.1", + "tsyringe": "^4.10.0" + }, + "engines": { + "node": ">=20.0.0" + } + }, "node_modules/@rolldown/binding-android-arm64": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.2.tgz", @@ -2091,6 +2306,31 @@ "win32" ] }, + "node_modules/@simplewebauthn/browser": { + "version": "13.3.0", + "resolved": "https://registry.npmjs.org/@simplewebauthn/browser/-/browser-13.3.0.tgz", + "integrity": "sha512-BE/UWv6FOToAdVk0EokzkqQQDOWtNydYlY6+OrmiZ5SCNmb41VehttboTetUM3T/fr6EAFYVXjz4My2wg230rQ==", + "license": "MIT" + }, + "node_modules/@simplewebauthn/server": { + "version": "13.3.3", + "resolved": "https://registry.npmjs.org/@simplewebauthn/server/-/server-13.3.3.tgz", + "integrity": "sha512-LelX/lcy5cjc15A86i/aNxHhB5eU7dd20QsbP0VLAf9e38+SLlsnqCCyecx3xqfGofhmX05h1J9fKRYWxw+luA==", + "license": "MIT", + "dependencies": { + "@hexagon/base64": "^1.1.27", + "@levischuck/tiny-cbor": "^0.2.2", + "@peculiar/asn1-android": "^2.6.0", + "@peculiar/asn1-ecc": "^2.6.1", + "@peculiar/asn1-rsa": "^2.6.1", + "@peculiar/asn1-schema": "^2.6.0", + "@peculiar/asn1-x509": "^2.6.1", + "@peculiar/x509": "^1.14.3" + }, + "engines": { + "node": ">=20.0.0" + } + }, "node_modules/@standard-schema/spec": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz", @@ -2583,6 +2823,20 @@ "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==", "license": "MIT" }, + "node_modules/asn1js": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.10.tgz", + "integrity": "sha512-S2s3aOytiKdFRdulw2qPE51MzjzVOisppcVv7jVFR+Kw0kxwvFrDcYA0h7Ndqbmj0HkMIXYWaoj7fli8kgx1eg==", + "license": "BSD-3-Clause", + "dependencies": { + "pvtsutils": "^1.3.6", + "pvutils": "^1.1.5", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/assertion-error": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz", @@ -6200,6 +6454,24 @@ "node": ">=6" } }, + "node_modules/pvtsutils": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.6.tgz", + "integrity": "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==", + "license": "MIT", + "dependencies": { + "tslib": "^2.8.1" + } + }, + "node_modules/pvutils": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.2.0.tgz", + "integrity": "sha512-BbubeCEyTuQjVMakvJQ/Sxbc93F2pwmbsxONT/ZRrwU7Ua38d8unYTwXpTVLAKJ4BDuH9IGztCjQcd/N/39Dvg==", + "license": "MIT", + "engines": { + "node": ">=16.0.0" + } + }, "node_modules/qified": { "version": "0.10.1", "resolved": "https://registry.npmjs.org/qified/-/qified-0.10.1.tgz", @@ -6493,6 +6765,12 @@ "node": ">=8" } }, + "node_modules/reflect-metadata": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz", + "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==", + "license": "Apache-2.0" + }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -7383,6 +7661,24 @@ "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "license": "0BSD" }, + "node_modules/tsyringe": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/tsyringe/-/tsyringe-4.10.0.tgz", + "integrity": "sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw==", + "license": "MIT", + "dependencies": { + "tslib": "^1.9.3" + }, + "engines": { + "node": ">= 6.0.0" + } + }, + "node_modules/tsyringe/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "license": "0BSD" + }, "node_modules/tunnel-agent": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", diff --git a/package.json b/package.json index a172154..e430542 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "lint": "eslint ." }, "dependencies": { + "@simplewebauthn/browser": "^13.3.0", + "@simplewebauthn/server": "^13.3.3", "bcryptjs": "^3.0.3", "better-sqlite3": "^12.10.0", "compression": "^1.8.2", diff --git a/server/backups.js b/server/backups.js index 2b57976..0568bbd 100644 --- a/server/backups.js +++ b/server/backups.js @@ -1,14 +1,15 @@ // Automatic daily snapshots of the whole database (every account), kept next to it in DATA_DIR/backups. // A snapshot is a complete, consistent copy made while the app keeps running, and is restored with // scripts/restore-data.sh. BACKUP_KEEP sets how many to keep (default 7); BACKUP_DISABLED=1 turns it off. -import { existsSync, mkdirSync, readdirSync, statSync, unlinkSync } from 'fs'; +import { copyFileSync, existsSync, mkdirSync, readdirSync, statSync, unlinkSync } from 'fs'; import { join } from 'path'; -import { backupDatabase, dataDir } from './db.js'; +import { logEvent } from './health.js'; +import { backupDatabase, dataDir, replaceDatabase } from './db.js'; const DAY = 24 * 60 * 60 * 1000; export const backupDir = () => join(dataDir(), 'backups'); const stamp = (d) => d.toISOString().replace(/[:T]/g, '-').slice(0, 16); -const isSnapshot = (name) => /^projects-\d{4}-\d{2}-\d{2}-\d{2}-\d{2}\.db$/.test(name); +export const isSnapshot = (name) => /^projects-\d{4}-\d{2}-\d{2}-\d{2}-\d{2}\.db$/.test(name); export function listSnapshots(dir = backupDir()) { if (!existsSync(dir)) return []; @@ -32,13 +33,29 @@ export async function runBackup(now = new Date()) { return file; } +export const snapshotPath = (name) => (isSnapshot(name) && existsSync(join(backupDir(), name)) ? join(backupDir(), name) : null); + +// Puts a snapshot back as the live database. A fresh snapshot of what is there now is taken first (from a +// copy of the chosen file, so the two can't collide), so a restore can itself be undone. +export async function restoreSnapshot(name, now = new Date()) { + const src = snapshotPath(name); + if (!src) throw new Error('No such snapshot.'); + const hold = join(backupDir(), `.restoring-${Date.now()}.tmp`); + copyFileSync(src, hold); + try { + const before = await runBackup(now); + replaceDatabase(hold); + return { restored: name, safetyCopy: before }; + } finally { unlinkSync(hold); } +} + // Takes a snapshot when the newest is more than a day old (checked hourly, and once at start-up). export function startBackupScheduler() { if (process.env.BACKUP_DISABLED === '1') return; const tick = () => { const latest = listSnapshots()[0]; if (latest && Date.now() - latest.at < DAY) return; - runBackup().then((f) => console.log(`Database snapshot saved: ${f}`)).catch((err) => console.error('Database snapshot failed:', err.message)); + runBackup().then((f) => console.log(`Database snapshot saved: ${f}`)).catch((err) => { console.error('Database snapshot failed:', err.message); logEvent('backup', err.message); }); }; setTimeout(tick, 30_000).unref(); setInterval(tick, 60 * 60 * 1000).unref(); diff --git a/server/db.js b/server/db.js index 5dcfd9a..2687dd6 100644 --- a/server/db.js +++ b/server/db.js @@ -1,5 +1,5 @@ import Database from 'better-sqlite3'; -import { mkdirSync } from 'fs'; +import { copyFileSync, mkdirSync, rmSync } from 'fs'; import { MAX_VERSIONS, pack, shouldSnapshot, summarizeProject, unpack } from './versions.js'; import { join, dirname } from 'path'; import { fileURLToPath } from 'url'; @@ -17,6 +17,18 @@ export function backupDatabase(destPath) { return db.backup(destPath); } +/** Swaps the live database for a copy of `srcFile` (a snapshot). The connection is reopened either way. */ +export function replaceDatabase(srcFile) { + db.close(); + try { + copyFileSync(srcFile, DB_PATH); + rmSync(`${DB_PATH}-wal`, { force: true }); + rmSync(`${DB_PATH}-shm`, { force: true }); + } finally { + initDb(); + } +} + // --------------------------------------------------------------------------- // Init — create tables if they don't exist, migrate older schemas // --------------------------------------------------------------------------- @@ -48,6 +60,18 @@ export function initDb() { sess TEXT NOT NULL, expires INTEGER NOT NULL ); + + CREATE TABLE IF NOT EXISTS passkeys ( + id TEXT PRIMARY KEY, + user_id TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE, + public_key TEXT NOT NULL, + counter INTEGER NOT NULL DEFAULT 0, + transports TEXT, + name TEXT NOT NULL, + created_at INTEGER NOT NULL, + last_used_at INTEGER + ); + CREATE INDEX IF NOT EXISTS idx_passkeys_user ON passkeys(user_id); `); // Older databases predate multi-user support — add the ownership column. @@ -82,6 +106,9 @@ export function initDb() { `); } + // Optional "new sign-in" notification, sent to the same ntfy topic. + if (!userCols.some((c) => c.name === 'login_alerts')) db.exec('ALTER TABLE users ADD COLUMN login_alerts INTEGER NOT NULL DEFAULT 0'); + // Optional daily verse of the day, sent to the same ntfy topic. if (!userCols.some((c) => c.name === 'votd_enabled')) { db.exec(` @@ -273,6 +300,7 @@ function parseUserRow(row) { reminderEnabled: !!row.reminderEnabled, votdEnabled: !!row.votdEnabled, prayerEnabled: !!row.prayerEnabled, + loginAlerts: !!row.loginAlerts, backupCodeHashes: row.backupCodesRaw ? JSON.parse(row.backupCodesRaw) : [], }; } @@ -284,7 +312,7 @@ const USER_SELECT = ` ntfy_url AS ntfyUrl, ntfy_topic AS ntfyTopic, reminder_time AS reminderTime, reminder_enabled AS reminderEnabled, last_reminder_date AS lastReminderDate, reminder_tz AS reminderTz, votd_enabled AS votdEnabled, votd_time AS votdTime, last_votd_date AS lastVotdDate, - prayer_enabled AS prayerEnabled, prayer_time AS prayerTime + prayer_enabled AS prayerEnabled, prayer_time AS prayerTime, login_alerts AS loginAlerts FROM users `; @@ -837,6 +865,7 @@ export function adminGetAllUsers() { /** Deletes a user account. Their projects are left in place (orphaned, not cascade-deleted) so data isn't lost by accident. */ export function adminDeleteUser(userId) { + db.prepare('DELETE FROM passkeys WHERE user_id = ?').run(userId); // projects.user_id is a foreign key, so release the projects first (they stay as unowned rows). db.transaction(() => { db.prepare('DELETE FROM collaborators WHERE user_id = ?').run(userId); @@ -931,3 +960,32 @@ export function destroyAllSessionsForUser(userId, exceptSid = null) { const placeholders = staleSids.map(() => '?').join(','); db.prepare(`DELETE FROM sessions WHERE sid IN (${placeholders})`).run(...staleSids); } + + +// --------------------------------------------------------------------------- +// Passkeys, sign-in alerts and the list of signed-in devices +// --------------------------------------------------------------------------- +export function setLoginAlerts(userId, enabled) { + db.prepare('UPDATE users SET login_alerts = ? WHERE id = ?').run(enabled ? 1 : 0, userId); +} + +export function addPasskey({ id, userId, publicKey, counter, transports, name }) { + db.prepare('INSERT INTO passkeys (id, user_id, public_key, counter, transports, name, created_at) VALUES (?, ?, ?, ?, ?, ?, ?)') + .run(id, userId, publicKey, counter, JSON.stringify(transports ?? []), name, Date.now()); +} + +const passkeyRow = (r) => (r ? { ...r, transports: JSON.parse(r.transports || '[]') } : null); +const PASSKEY_COLS = 'id, user_id AS userId, public_key AS publicKey, counter, transports, name, created_at AS createdAt, last_used_at AS lastUsedAt'; + +export const getPasskey = (id) => passkeyRow(db.prepare(`SELECT ${PASSKEY_COLS} FROM passkeys WHERE id = ?`).get(id)); +export const listPasskeys = (userId) => db.prepare(`SELECT ${PASSKEY_COLS} FROM passkeys WHERE user_id = ? ORDER BY created_at`).all(userId).map(passkeyRow); +export const touchPasskey = (id, counter) => db.prepare('UPDATE passkeys SET counter = ?, last_used_at = ? WHERE id = ?').run(counter, Date.now(), id); +export const deletePasskey = (id, userId) => db.prepare('DELETE FROM passkeys WHERE id = ? AND user_id = ?').run(id, userId).changes > 0; +export const renamePasskey = (id, userId, name) => db.prepare('UPDATE passkeys SET name = ? WHERE id = ? AND user_id = ?').run(name, id, userId).changes > 0; + +/** Every live session of one user: [{ sid, sess, expires }]. */ +export function listUserSessions(userId) { + return db.prepare('SELECT sid, sess, expires FROM sessions WHERE expires > ?').all(Date.now()) + .map((r) => { try { return { sid: r.sid, sess: JSON.parse(r.sess), expires: r.expires }; } catch { return null; } }) + .filter((r) => r?.sess?.userId === userId); +} diff --git a/server/devices.js b/server/devices.js new file mode 100644 index 0000000..8064c41 --- /dev/null +++ b/server/devices.js @@ -0,0 +1,185 @@ +// Passkeys (WebAuthn sign-in with Face ID, a fingerprint or a security key) and the list of devices signed in. +// A passkey is a second factor in itself (the device checks it is really you), so signing in with one skips the +// authenticator-code step. Passwords and 2FA keep working as before. +import { createHash } from 'crypto'; +import { + generateAuthenticationOptions, generateRegistrationOptions, verifyAuthenticationResponse, verifyRegistrationResponse, +} from '@simplewebauthn/server'; +import { + addPasskey, deletePasskey, destroyAllSessionsForUser, destroySession, getPasskey, getUserById, listPasskeys, + listUserSessions, renamePasskey, setLoginAlerts, touchPasskey, +} from './db.js'; +import { logEvent } from './health.js'; +import { sendNtfy } from './reminders.js'; + +const MONTH = 30 * 24 * 60 * 60 * 1000; +const APP_NAME = 'Bible Study'; + +// "Chrome on macOS" from a User-Agent string; good enough to recognise your own devices. +export function describeDevice(ua = '') { + const browser = /Edg\//.test(ua) ? 'Edge' : /OPR\//.test(ua) ? 'Opera' : /Firefox\//.test(ua) ? 'Firefox' : /Chrome\/|CriOS\//.test(ua) ? 'Chrome' : /Safari\//.test(ua) ? 'Safari' : null; + const os = /iPhone/.test(ua) ? 'iPhone' : /iPad/.test(ua) ? 'iPad' : /Android/.test(ua) ? 'Android' : /Windows/.test(ua) ? 'Windows' : /Mac OS X|Macintosh/.test(ua) ? 'macOS' : /CrOS/.test(ua) ? 'ChromeOS' : /Linux/.test(ua) ? 'Linux' : null; + if (browser && os) return `${browser} on ${os}`; + return browser ?? os ?? 'Unknown device'; +} + +export const sessionKey = (sid) => createHash('sha256').update(sid).digest('hex').slice(0, 16); + +// Where the browser says it is, for checking passkeys: APP_URL when set, else the address this request came to. +export function relyingParty(req, env = process.env) { + if (env.APP_URL) { + try { const u = new URL(env.APP_URL); return { rpID: u.hostname, origin: u.origin }; } catch { /* fall through */ } + } + return { rpID: req.hostname, origin: `${req.protocol}://${req.get('host')}` }; +} + +/** Called right after a session gets its userId: remembers the device and (if asked) sends a sign-in alert. */ +export function noteSignIn(req, user, method) { + const label = describeDevice(req.get('user-agent') ?? ''); + req.session.device = { label, ip: req.ip, at: Date.now(), method }; + if (user.loginAlerts && user.ntfyTopic) { + const how = { password: 'password', passkey: 'passkey', mfa: 'password and authenticator code', register: 'a new account' }[method] ?? method; + sendNtfy(user, { title: 'New sign-in', body: `${label} signed in to your Bible Study account with ${how}. If that wasn’t you, change your password and sign out other devices.`, tags: 'warning' }) + .catch((err) => { console.error('Sign-in alert failed:', err.message); logEvent('notify', `Sign-in alert: ${err.message}`, { userId: user.id }); }); + } +} + +const publicPasskey = (p) => ({ id: p.id, name: p.name, createdAt: p.createdAt, lastUsedAt: p.lastUsedAt }); + +export function registerDeviceRoutes(app, { requireAuth, userPayload, isLimited, recordFailure, clearFailures, tooMany }) { + const fail = (res, status, error) => res.status(status).json({ error }); + + // ---- Signing in with a passkey (no email needed: the passkey says who you are) ---- + app.post('/api/auth/passkey/options', async (req, res) => { + try { + if (isLimited(`ip:${req.ip}`)) return res.status(429).json(tooMany); + const { rpID } = relyingParty(req); + const options = await generateAuthenticationOptions({ rpID, userVerification: 'required' }); + req.session.passkeyChallenge = options.challenge; + res.json(options); + } catch (err) { + console.error('POST /api/auth/passkey/options error:', err); + fail(res, 500, 'Could not start passkey sign-in.'); + } + }); + + app.post('/api/auth/passkey/verify', async (req, res) => { + const keys = [`ip:${req.ip}`]; + try { + if (isLimited(...keys)) return res.status(429).json(tooMany); + const challenge = req.session?.passkeyChallenge; + const response = req.body; + const passkey = typeof response?.id === 'string' ? getPasskey(response.id) : null; + const failed = () => { recordFailure(...keys); logEvent('signin', `Passkey sign-in failed from ${req.ip}`); return fail(res, 401, 'That passkey didn’t work. Try again, or use your password.'); }; + if (!challenge || !passkey) return failed(); + const { rpID, origin } = relyingParty(req); + let result; + try { + result = await verifyAuthenticationResponse({ + response, expectedChallenge: challenge, expectedOrigin: origin, expectedRPID: rpID, requireUserVerification: true, + credential: { id: passkey.id, publicKey: Buffer.from(passkey.publicKey, 'base64url'), counter: passkey.counter, transports: passkey.transports }, + }); + } catch { return failed(); } + if (!result.verified) return failed(); + const user = getUserById(passkey.userId); + if (!user) return failed(); + touchPasskey(passkey.id, result.authenticationInfo.newCounter); + clearFailures(...keys); + req.session.regenerate((err) => { + if (err) return fail(res, 500, 'Could not create session.'); + req.session.userId = user.id; + noteSignIn(req, user, 'passkey'); + res.json(userPayload(user)); + }); + } catch (err) { + console.error('POST /api/auth/passkey/verify error:', err); + fail(res, 500, 'Could not check that passkey.'); + } + }); + + // ---- Managing passkeys (signed in) ---- + app.get('/api/passkeys', requireAuth, (req, res) => res.json(listPasskeys(req.session.userId).map(publicPasskey))); + + app.post('/api/passkeys/options', requireAuth, async (req, res) => { + try { + const user = getUserById(req.session.userId); + const { rpID } = relyingParty(req); + const options = await generateRegistrationOptions({ + rpName: APP_NAME, rpID, userName: user.email, userID: new TextEncoder().encode(user.id), attestationType: 'none', + excludeCredentials: listPasskeys(user.id).map((p) => ({ id: p.id, transports: p.transports })), + authenticatorSelection: { residentKey: 'required', userVerification: 'required' }, + }); + req.session.passkeyChallenge = options.challenge; + res.json(options); + } catch (err) { + console.error('POST /api/passkeys/options error:', err); + fail(res, 500, 'Could not start adding a passkey.'); + } + }); + + app.post('/api/passkeys', requireAuth, async (req, res) => { + try { + const challenge = req.session.passkeyChallenge; + if (!challenge) return fail(res, 400, 'Start again: that request expired.'); + const { rpID, origin } = relyingParty(req); + let result; + try { + result = await verifyRegistrationResponse({ response: req.body?.response, expectedChallenge: challenge, expectedOrigin: origin, expectedRPID: rpID, requireUserVerification: true }); + } catch (err) { return fail(res, 400, `That passkey couldn’t be added (${err.message}).`); } + if (!result.verified) return fail(res, 400, 'That passkey couldn’t be added.'); + delete req.session.passkeyChallenge; + const { credential } = result.registrationInfo; + if (getPasskey(credential.id)) return fail(res, 409, 'That passkey is already registered.'); + const name = String(req.body?.name ?? '').trim().slice(0, 60) || describeDevice(req.get('user-agent') ?? ''); + addPasskey({ id: credential.id, userId: req.session.userId, publicKey: Buffer.from(credential.publicKey).toString('base64url'), counter: credential.counter, transports: credential.transports, name }); + res.json(listPasskeys(req.session.userId).map(publicPasskey)); + } catch (err) { + console.error('POST /api/passkeys error:', err); + fail(res, 500, 'Could not save that passkey.'); + } + }); + + app.patch('/api/passkeys/:id', requireAuth, (req, res) => { + const name = String(req.body?.name ?? '').trim().slice(0, 60); + if (!name) return fail(res, 400, 'Give it a name.'); + if (!renamePasskey(req.params.id, req.session.userId, name)) return fail(res, 404, 'No such passkey.'); + res.json(listPasskeys(req.session.userId).map(publicPasskey)); + }); + + app.delete('/api/passkeys/:id', requireAuth, (req, res) => { + if (!deletePasskey(req.params.id, req.session.userId)) return fail(res, 404, 'No such passkey.'); + res.json(listPasskeys(req.session.userId).map(publicPasskey)); + }); + + // ---- Where you are signed in ---- + app.get('/api/sessions', requireAuth, (req, res) => { + const rows = listUserSessions(req.session.userId).map(({ sid, sess, expires }) => ({ + id: sessionKey(sid), current: sid === req.sessionID, + label: sess.device?.label ?? 'Signed in before this list existed', ip: sess.device?.ip ?? null, + method: sess.device?.method ?? null, signedInAt: sess.device?.at ?? null, + lastSeen: expires - MONTH, // sessions are renewed on each request, so this is when it was last used + })).sort((a, b) => Number(b.current) - Number(a.current) || b.lastSeen - a.lastSeen); + res.json(rows); + }); + + app.delete('/api/sessions/:id', requireAuth, (req, res) => { + const found = listUserSessions(req.session.userId).find((s) => sessionKey(s.sid) === req.params.id); + if (!found) return fail(res, 404, 'That device is already signed out.'); + if (found.sid === req.sessionID) return fail(res, 400, 'Use Sign out for this device.'); + destroySession(found.sid); + res.json({ ok: true }); + }); + + app.post('/api/sessions/sign-out-others', requireAuth, (req, res) => { + destroyAllSessionsForUser(req.session.userId, req.sessionID); + res.json({ ok: true }); + }); + + app.put('/api/auth/login-alerts', requireAuth, (req, res) => { + const user = getUserById(req.session.userId); + const enabled = !!req.body?.enabled; + if (enabled && !user.ntfyTopic) return fail(res, 400, 'Set up a notification topic first (under Notifications).'); + setLoginAlerts(user.id, enabled); + res.json({ loginAlerts: enabled }); + }); +} diff --git a/server/devices.test.js b/server/devices.test.js new file mode 100644 index 0000000..d7f8d42 --- /dev/null +++ b/server/devices.test.js @@ -0,0 +1,171 @@ +// @vitest-environment node +import { afterEach, beforeEach, expect, test, vi } from 'vitest'; +import { createHash, generateKeyPairSync, randomBytes, sign } from 'crypto'; +import { mkdtempSync, rmSync } from 'fs'; +import { tmpdir } from 'os'; +import { join } from 'path'; +import express from 'express'; +import session from 'express-session'; + +const b64 = (b) => Buffer.from(b).toString('base64url'); +const sha = (b) => createHash('sha256').update(b).digest(); + +// A tiny CBOR writer, just enough for the attestation a passkey device would send. +const head = (major, n) => (n < 24 ? Buffer.from([(major << 5) | n]) : n < 256 ? Buffer.from([(major << 5) | 24, n]) : Buffer.from([(major << 5) | 25, n >> 8, n & 255])); +const cbor = (v) => { + if (Buffer.isBuffer(v)) return Buffer.concat([head(2, v.length), v]); + if (typeof v === 'string') return Buffer.concat([head(3, Buffer.byteLength(v)), Buffer.from(v)]); + if (typeof v === 'number') return v >= 0 ? head(0, v) : head(1, -1 - v); + const entries = v instanceof Map ? [...v] : Object.entries(v); + return Buffer.concat([head(5, entries.length), ...entries.flatMap(([k, x]) => [cbor(k), cbor(x)])]); +}; + +// A software "phone": makes passkeys and answers sign-in challenges, like Face ID would. +function authenticator(rpID, origin) { + const { publicKey, privateKey } = generateKeyPairSync('ec', { namedCurve: 'P-256' }); + const jwk = publicKey.export({ format: 'jwk' }); + const credId = randomBytes(16); + let counter = 0; + const rpHash = sha(rpID); + const client = (type, challenge, o = origin) => Buffer.from(JSON.stringify({ type, challenge, origin: o, crossOrigin: false })); + return { + id: b64(credId), + create(challenge, o) { + const cose = cbor(new Map([[1, 2], [3, -7], [-1, 1], [-2, Buffer.from(jwk.x, 'base64url')], [-3, Buffer.from(jwk.y, 'base64url')]])); + const len = Buffer.alloc(2); len.writeUInt16BE(credId.length); + const cnt = Buffer.alloc(4); + const authData = Buffer.concat([rpHash, Buffer.from([0x45]), cnt, Buffer.alloc(16), len, credId, cose]); + return { id: b64(credId), rawId: b64(credId), type: 'public-key', clientExtensionResults: {}, response: { clientDataJSON: b64(client('webauthn.create', challenge, o)), attestationObject: b64(cbor({ fmt: 'none', attStmt: {}, authData })), transports: ['internal'] } }; + }, + get(challenge, o) { + counter += 1; + const cnt = Buffer.alloc(4); cnt.writeUInt32BE(counter); + const authData = Buffer.concat([rpHash, Buffer.from([0x05]), cnt]); + const clientData = client('webauthn.get', challenge, o); + const signature = sign('sha256', Buffer.concat([authData, sha(clientData)]), privateKey); + return { id: b64(credId), rawId: b64(credId), type: 'public-key', clientExtensionResults: {}, response: { clientDataJSON: b64(clientData), authenticatorData: b64(authData), signature: b64(signature), userHandle: null } }; + }, + }; +} + +let dir; let server; let base; let db; +beforeEach(async () => { + dir = mkdtempSync(join(tmpdir(), 'devices-')); + process.env.DATA_DIR = dir; delete process.env.APP_URL; + vi.resetModules(); + db = await import('./db.js'); db.initDb(); + const { registerDeviceRoutes } = await import('./devices.js'); + const { requireAuth } = await import('./auth.js'); + const app = express(); + app.use(express.json()); + app.use(session({ secret: 'test', resave: false, saveUninitialized: false, store: new (await import('./sessionStore.js')).SqliteSessionStore(), cookie: { maxAge: 30 * 24 * 3600 * 1000 } })); + const { noteSignIn } = await import('./devices.js'); + // stand-in for the password sign-in route + app.post('/test/login', (req, res) => { const u = db.getUserByEmail(req.body.email); req.session.regenerate(() => { req.session.userId = u.id; noteSignIn(req, u, 'password'); res.json({ ok: true }); }); }); + registerDeviceRoutes(app, { requireAuth, userPayload: (u) => ({ id: u.id, email: u.email }), isLimited: () => false, recordFailure() {}, clearFailures() {}, tooMany: { error: 'slow down' } }); + await new Promise((r) => { server = app.listen(0, r); }); + base = `http://localhost:${server.address().port}`; + db.createUser({ id: 'u1', email: 'a@x.test', passwordHash: 'h' }); +}); +afterEach(async () => { await new Promise((r) => server.close(r)); rmSync(dir, { recursive: true, force: true }); delete process.env.DATA_DIR; }); + +// A browser: keeps its own cookie +function browser(ua = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 Version/17 Safari/605.1.15') { + let cookie = ''; + const call = async (method, path, body) => { + const res = await fetch(base + path, { method, headers: { 'Content-Type': 'application/json', 'User-Agent': ua, ...(cookie ? { Cookie: cookie } : {}) }, body: body === undefined ? undefined : JSON.stringify(body) }); + const set = res.headers.get('set-cookie'); + if (set) cookie = set.split(';')[0]; + return { status: res.status, body: await res.json().catch(() => null) }; + }; + return { call, login: () => call('POST', '/test/login', { email: 'a@x.test' }) }; +} +const originOf = () => base; + +test('add a passkey, then sign in with it from another device', async () => { + const phone = authenticator('localhost', originOf()); + const laptop = browser(); await laptop.login(); + const { body: opts } = await laptop.call('POST', '/api/passkeys/options'); + expect(opts.authenticatorSelection.userVerification).toBe('required'); + const added = await laptop.call('POST', '/api/passkeys', { response: phone.create(opts.challenge), name: 'My phone' }); + expect(added.status).toBe(200); + expect(added.body).toMatchObject([{ id: phone.id, name: 'My phone' }]); + + const other = browser('Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 Mobile/15E148 Safari/604.1'); + expect((await other.call('GET', '/api/passkeys')).status).toBe(401); // not signed in yet + const { body: ask } = await other.call('POST', '/api/auth/passkey/options'); + const ok = await other.call('POST', '/api/auth/passkey/verify', phone.get(ask.challenge)); + expect(ok.status).toBe(200); + expect(ok.body.email).toBe('a@x.test'); + expect((await other.call('GET', '/api/passkeys')).body[0].lastUsedAt).toBeGreaterThan(0); + const devices = (await other.call('GET', '/api/sessions')).body; + expect(devices.map((d) => d.label)).toEqual(['Safari on iPhone', 'Safari on macOS']); + expect(devices[0]).toMatchObject({ current: true, method: 'passkey' }); +}); + +test('a passkey from the wrong site, an unknown one, or a replay is refused', async () => { + const phone = authenticator('localhost', originOf()); + const laptop = browser(); await laptop.login(); + const { body: opts } = await laptop.call('POST', '/api/passkeys/options'); + const bad = await laptop.call('POST', '/api/passkeys', { response: phone.create(opts.challenge, 'https://evil.example') }); + expect(bad.status).toBe(400); + await laptop.call('POST', '/api/passkeys', { response: phone.create(opts.challenge), name: 'ok' }); + + const stranger = browser(); + const { body: ask } = await stranger.call('POST', '/api/auth/passkey/options'); + expect((await stranger.call('POST', '/api/auth/passkey/verify', authenticator('localhost', originOf()).get(ask.challenge))).status).toBe(401); // never registered + expect((await stranger.call('POST', '/api/auth/passkey/verify', phone.get('wrong-challenge'))).status).toBe(401); + const good = phone.get(ask.challenge); + expect((await stranger.call('POST', '/api/auth/passkey/verify', good)).status).toBe(200); + const replay = browser(); + await replay.call('POST', '/api/auth/passkey/options'); + expect((await replay.call('POST', '/api/auth/passkey/verify', good)).status).toBe(401); // that answer was for another challenge +}); + +test('passkeys can be renamed and removed, and only by their owner', async () => { + const phone = authenticator('localhost', originOf()); + const me = browser(); await me.login(); + const { body: opts } = await me.call('POST', '/api/passkeys/options'); + await me.call('POST', '/api/passkeys', { response: phone.create(opts.challenge) }); + expect((await me.call('PATCH', `/api/passkeys/${phone.id}`, { name: 'Pixel' })).body[0].name).toBe('Pixel'); + expect((await me.call('PATCH', `/api/passkeys/${phone.id}`, { name: ' ' })).status).toBe(400); + db.createUser({ id: 'u2', email: 'b@x.test', passwordHash: 'h' }); + expect(db.deletePasskey(phone.id, 'u2')).toBe(false); + expect((await me.call('DELETE', `/api/passkeys/${phone.id}`)).body).toEqual([]); + const { body: ask } = await browser().call('POST', '/api/auth/passkey/options'); + expect(ask.challenge).toBeTruthy(); +}); + +test('devices can be signed out one by one or all at once', async () => { + const a = browser(); const b = browser('Mozilla/5.0 (Windows NT 10.0) Chrome/120 Safari/537'); const c = browser('Mozilla/5.0 (Linux; Android 14) Chrome/120 Mobile Safari/537'); + await a.login(); await b.login(); await c.login(); + const list = (await a.call('GET', '/api/sessions')).body; + expect(list).toHaveLength(3); + expect(list[0].current).toBe(true); + expect((await a.call('DELETE', `/api/sessions/${list[0].id}`)).status).toBe(400); // not your own + const bId = list.find((d) => d.label === 'Chrome on Windows').id; + expect((await a.call('DELETE', `/api/sessions/${bId}`)).status).toBe(200); + expect((await b.call('GET', '/api/sessions')).status).toBe(401); + expect((await a.call('DELETE', `/api/sessions/${bId}`)).status).toBe(404); + await a.call('POST', '/api/sessions/sign-out-others'); + expect((await c.call('GET', '/api/sessions')).status).toBe(401); + expect((await a.call('GET', '/api/sessions')).body).toHaveLength(1); +}); + +test('sign-in alerts need a notification topic', async () => { + const a = browser(); await a.login(); + expect((await a.call('PUT', '/api/auth/login-alerts', { enabled: true })).status).toBe(400); + db.setReminderSettings('u1', { ntfyUrl: null, ntfyTopic: 'my-topic', reminderTime: '08:00', reminderEnabled: false, reminderTz: 'UTC' }); + expect((await a.call('PUT', '/api/auth/login-alerts', { enabled: true })).body).toEqual({ loginAlerts: true }); + expect(db.getUserById('u1').loginAlerts).toBe(true); +}); + +test('devices are described in plain words', async () => { + const { describeDevice, relyingParty } = await import('./devices.js'); + expect(describeDevice('Mozilla/5.0 (Windows NT 10.0) Chrome/120 Edg/120')).toBe('Edge on Windows'); + expect(describeDevice('Mozilla/5.0 (X11; Linux) Firefox/120')).toBe('Firefox on Linux'); + expect(describeDevice('')).toBe('Unknown device'); + const req = { hostname: 'study.example', protocol: 'https', get: () => 'study.example:8443' }; + expect(relyingParty(req, {})).toEqual({ rpID: 'study.example', origin: 'https://study.example:8443' }); + expect(relyingParty(req, { APP_URL: 'https://study.example/app' })).toEqual({ rpID: 'study.example', origin: 'https://study.example' }); +}); diff --git a/server/health.js b/server/health.js new file mode 100644 index 0000000..dcd8afd --- /dev/null +++ b/server/health.js @@ -0,0 +1,37 @@ +// What the admin's Health page shows: a short in-memory log of things that went wrong (failed sign-ins, failed +// notifications, backups), plus disk use and the snapshot list. The log resets when the server restarts. +import { existsSync, statSync, statfsSync } from 'fs'; +import { join } from 'path'; +import { dataDir } from './db.js'; +import { backupDir, listSnapshots } from './backups.js'; + +const MAX_EVENTS = 200; +const events = []; +const started = Date.now(); + +// kind: 'signin' | 'notify' | 'backup'. `ok` false marks a failure. +export function logEvent(kind, detail, { ok = false, userId = null } = {}) { + events.unshift({ at: Date.now(), kind, ok, detail: String(detail).slice(0, 300), userId }); + if (events.length > MAX_EVENTS) events.length = MAX_EVENTS; +} + +export const recentEvents = (kind, limit = 50) => events.filter((e) => !kind || e.kind === kind).slice(0, limit); +export function clearEvents() { events.length = 0; } + +const size = (path) => { try { return statSync(path).size; } catch { return 0; } }; + +export function diskUse() { + const dir = dataDir(); + const db = size(join(dir, 'projects.db')) + size(join(dir, 'projects.db-wal')); + const backups = listSnapshots(backupDir()).reduce((n, s) => n + s.bytes, 0); + let free = null; let total = null; + try { const s = statfsSync(existsSync(dir) ? dir : '.'); free = s.bavail * s.bsize; total = s.blocks * s.bsize; } catch { /* not supported here */ } + return { db, backups, free, total }; +} + +export function backupStatus() { + const snapshots = listSnapshots(backupDir()); + return { enabled: process.env.BACKUP_DISABLED !== '1', keep: Number(process.env.BACKUP_KEEP) || 7, snapshots, latest: snapshots[0] ?? null }; +} + +export const uptimeSeconds = () => Math.round((Date.now() - started) / 1000); diff --git a/server/health.test.js b/server/health.test.js new file mode 100644 index 0000000..e2738fd --- /dev/null +++ b/server/health.test.js @@ -0,0 +1,50 @@ +// @vitest-environment node +import { afterEach, beforeEach, expect, test, vi } from 'vitest'; +import { mkdtempSync, rmSync } from 'fs'; +import { tmpdir } from 'os'; +import { join } from 'path'; + +let dir; +beforeEach(() => { dir = mkdtempSync(join(tmpdir(), 'health-')); process.env.DATA_DIR = dir; vi.resetModules(); }); +afterEach(() => { rmSync(dir, { recursive: true, force: true }); delete process.env.DATA_DIR; }); + +const load = async () => { + const db = await import('./db.js'); db.initDb(); + return { db, backups: await import('./backups.js'), health: await import('./health.js') }; +}; + +test('the event log keeps the newest first, filters by kind and is capped', async () => { + const { health } = await load(); + health.logEvent('signin', 'a'); health.logEvent('notify', 'b'); health.logEvent('signin', 'c'); + expect(health.recentEvents('signin').map((e) => e.detail)).toEqual(['c', 'a']); + for (let i = 0; i < 300; i += 1) health.logEvent('signin', String(i)); + expect(health.recentEvents(null, 1000)).toHaveLength(200); +}); + +test('a snapshot can be restored, and what was there is kept as a safety copy', async () => { + const { db, backups } = await load(); + db.createUser({ id: 'u1', email: 'a@x.test', passwordHash: 'h' }); + await backups.runBackup(new Date('2026-10-01T10:00:00Z')); + db.createUser({ id: 'u2', email: 'b@x.test', passwordHash: 'h' }); + expect(db.countUsers()).toBe(2); + const [snap] = backups.listSnapshots(); + const result = await backups.restoreSnapshot(snap.name, new Date('2026-10-02T10:00:00Z')); + expect(db.countUsers()).toBe(1); // back to when the snapshot was taken + expect(backups.listSnapshots().map((s) => s.name)).toContain(result.safetyCopy.split('/').pop()); +}); + +test('only real snapshot names resolve', async () => { + const { backups } = await load(); + expect(backups.snapshotPath('../projects.db')).toBeNull(); + expect(backups.snapshotPath('projects-2026-01-01-00-00.db')).toBeNull(); // valid name, but no such file + await expect(backups.restoreSnapshot('nope')).rejects.toThrow('No such snapshot'); +}); + +test('disk use reports the database and snapshot sizes', async () => { + const { backups, health } = await load(); + await backups.runBackup(); + const use = health.diskUse(); + expect(use.db).toBeGreaterThan(0); + expect(use.backups).toBeGreaterThan(0); + expect(health.backupStatus().latest).not.toBeNull(); +}); diff --git a/server/index.js b/server/index.js index e484093..1451664 100644 --- a/server/index.js +++ b/server/index.js @@ -7,7 +7,7 @@ import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs'; import { fileURLToPath } from 'url'; import { dirname, join } from 'path'; import { - initDb, dataDir, getAllProjects, getProject, getProjectEdited, upsertProject, deleteProject, + initDb, dataDir, listPasskeys, getAllProjects, getProject, getProjectEdited, upsertProject, deleteProject, countUsers, createUser, getUserByEmail, getUserById, claimOrphanProjects, enableTotp, disableTotp, setBackupCodeHashes, setPodcastName, setShareToken, clearShareToken, getShareSettings, setShareSettings, getSharedByToken, getSharePassHash, @@ -35,11 +35,13 @@ import { votdAvailable } from './votd.js'; import { startReminderScheduler, sendTestReminder, isValidTimeZone, assertPublicUrl, sendNtfy } from './reminders.js'; import { registerBibleRoutes } from './bibleApi.js'; import { registerIqBibleRoutes } from './iqbible.js'; +import { registerDeviceRoutes, noteSignIn } from './devices.js'; import { expiryFromDays, hashPasscode, checkShareAccess } from './shareLinks.js'; import { SIGNUP_MODES, isSignupMode, checkSignup, generateInviteCode, normalizeInviteCode } from './signup.js'; import { mergeHistory } from './readerHistory.js'; import { buildAccountExport, accountExportName } from './accountExport.js'; -import { startBackupScheduler } from './backups.js'; +import { startBackupScheduler, runBackup, restoreSnapshot, snapshotPath } from './backups.js'; +import { logEvent, recentEvents, diskUse, backupStatus, uptimeSeconds } from './health.js'; import { cleanMarks } from './readerMarks.js'; import { cleanPrefsPatch, mergePrefs } from './prefs.js'; import { isSaveConflict, parseBase } from './projectSync.js'; @@ -54,6 +56,7 @@ function userPayload(user) { reminderTime: user.reminderTime ?? null, votdEnabled: !!user.votdEnabled, votdTime: user.votdTime ?? null, votdAvailable: votdAvailable(), prayerEnabled: !!user.prayerEnabled, prayerTime: user.prayerTime ?? null, + loginAlerts: !!user.loginAlerts, passkeyCount: listPasskeys(user.id).length, }; } @@ -185,6 +188,7 @@ app.post('/api/auth/register', async (req, res) => { req.session.regenerate((err) => { if (err) return res.status(500).json({ error: 'Could not create session.' }); req.session.userId = user.id; + noteSignIn(req, user, 'register'); res.json({ id: user.id, email: user.email, totpEnabled: false, podcastName: null, isAdmin: isAdminEmail(user.email), reminderEnabled: false, ntfyUrl: null, ntfyTopic: null, reminderTime: null, @@ -207,6 +211,7 @@ app.post('/api/auth/login', async (req, res) => { const valid = await verifyPassword(password, user?.passwordHash ?? DUMMY_HASH) && !!user; if (!valid) { recordFailure(...keys); + logEvent('signin', `Wrong password for ${email.slice(0, 80) || '(blank)'} from ${req.ip}`); return res.status(401).json({ error: 'Incorrect email or password.' }); } clearFailures(`acct:${email}`); @@ -220,6 +225,7 @@ app.post('/api/auth/login', async (req, res) => { return res.json({ mfaRequired: true }); } req.session.userId = user.id; + noteSignIn(req, user, 'password'); res.json(userPayload(user)); }); } catch (err) { @@ -256,6 +262,7 @@ app.post('/api/auth/mfa/verify', async (req, res) => { if (!ok) { recordFailure(...keys); + logEvent('signin', `Wrong two-factor code for ${user.email} from ${req.ip}`, { userId: user.id }); return res.status(401).json({ error: 'Invalid code.' }); } clearFailures(`mfa:${pendingUserId}`); @@ -263,6 +270,7 @@ app.post('/api/auth/mfa/verify', async (req, res) => { req.session.regenerate((err) => { if (err) return res.status(500).json({ error: 'Could not create session.' }); req.session.userId = user.id; + noteSignIn(req, user, 'mfa'); res.json(userPayload(user)); }); } catch (err) { @@ -754,6 +762,7 @@ app.put('/api/reader/marks', requireAuth, (req, res) => { // GET /api/reading-plans — the current user's whole progress list registerBibleRoutes(app, requireAuth); registerIqBibleRoutes(app, requireAuth); +registerDeviceRoutes(app, { requireAuth, userPayload, isLimited, recordFailure, clearFailures, tooMany: TOO_MANY }); app.get('/api/reading-plans', requireAuth, (req, res) => { try { @@ -996,6 +1005,55 @@ app.post('/api/admin/users/:id/reset-password', requireAuth, requireAdmin, async }); // Who may sign up, and the invite codes for it +// Server health: disk use, snapshots, and a short log of failures (in memory; resets on restart). +app.get('/api/admin/health', requireAuth, requireAdmin, (_req, res) => { + try { + const emailOf = (id) => (id ? getUserById(id)?.email ?? null : null); + const withUser = (e) => ({ ...e, email: emailOf(e.userId) }); + res.json({ + uptimeSeconds: uptimeSeconds(), node: process.version, dataDir: dataDir(), + disk: diskUse(), backups: backupStatus(), + iqConfigured: !!process.env.IQBIBLE_API_KEY, + signinFailures: recentEvents('signin', 30).map(withUser), + notifyFailures: recentEvents('notify', 30).map(withUser), + backupFailures: recentEvents('backup', 10), + }); + } catch (err) { + console.error('GET /api/admin/health error:', err); + res.status(500).json({ error: 'Failed to read server health.' }); + } +}); + +app.post('/api/admin/backups', requireAuth, requireAdmin, async (_req, res) => { + try { + await runBackup(); + res.json(backupStatus()); + } catch (err) { + console.error('POST /api/admin/backups error:', err); + logEvent('backup', err.message); + res.status(500).json({ error: 'The snapshot could not be made.' }); + } +}); + +app.get('/api/admin/backups/:name', requireAuth, requireAdmin, (req, res) => { + const file = snapshotPath(req.params.name); + if (!file) return res.status(404).json({ error: 'No such snapshot.' }); + res.download(file, req.params.name); +}); + +// Restoring replaces every account's data, so the snapshot's name has to be typed back as confirmation. +app.post('/api/admin/backups/:name/restore', requireAuth, requireAdmin, async (req, res) => { + if (!snapshotPath(req.params.name)) return res.status(404).json({ error: 'No such snapshot.' }); + if (req.body?.confirm !== req.params.name) return res.status(400).json({ error: 'Type the snapshot’s name to confirm.' }); + try { + const result = await restoreSnapshot(req.params.name); + res.json({ restored: result.restored, safetyCopy: result.safetyCopy.split('/').pop() }); + } catch (err) { + console.error('POST /api/admin/backups/:name/restore error:', err); + res.status(500).json({ error: 'The snapshot could not be restored.' }); + } +}); + app.get('/api/admin/signup', requireAuth, requireAdmin, (_req, res) => { res.json({ mode: getSetting('signup', 'open'), invites: listInvites() }); }); diff --git a/server/iqbible.js b/server/iqbible.js index c7f122c..525ba23 100644 --- a/server/iqbible.js +++ b/server/iqbible.js @@ -31,7 +31,7 @@ export const ROUTES = [ route('/genealogies/@'), route('/bible-characters/@'), route('/bible-people/@'), route('/bible-people/@/@'), route('/harmony'), route('/harmony/@'), route('/textual-variants/@/@'), route('/textual-variants/@/@/@'), route('/chronology/for/@/@'), route('/reference/weights-measures'), - route('/cross-references/@/@'), route('/cross-references/@/@/@'), + route('/cross-references/graph'), route('/cross-references/@/@'), route('/cross-references/@/@/@'), route('/dictionaries'), route('/dictionaries/@'), route('/devotionals/today'), route('/devotionals/@/@'), route('/bibles'), route('/bibles/languages'), route('/bibles/parallel'), route('/bibles/@'), route('/bibles/@/@'), route('/bibles/@/verse-of-the-day'), route('/bibles/@/reading-plan'), diff --git a/server/reminders.js b/server/reminders.js index 9a7eb15..ed24944 100644 --- a/server/reminders.js +++ b/server/reminders.js @@ -6,6 +6,7 @@ import { lookup } from 'dns/promises'; import { isIP } from 'net'; import { getUsersWithRemindersEnabled, setLastReminderDate, getReadingProgress, getUsersWithVotdEnabled, setLastVotdDate, getUsersWithPrayerReminder, setLastPrayerDate, getPrayers } from './db.js'; import { openPrayers } from './prayers.js'; +import { logEvent } from './health.js'; import { fetchVerseOfDay, votdMessage } from './votd.js'; // A reminder still goes out if the server was briefly down (or restarting) at the @@ -119,6 +120,7 @@ export async function checkReminders(now = new Date()) { setLastReminderDate(user.id, zonedNow(now, user.reminderTz).date); } catch (err) { console.error(`Reading reminder failed for user ${user.id}:`, err.message); + logEvent('notify', `Reading reminder: ${err.message}`, { userId: user.id }); } } } @@ -139,6 +141,7 @@ export async function checkVotd(now = new Date()) { setLastVotdDate(user.id, zonedNow(now, user.reminderTz).date); } catch (err) { console.error(`Verse of the day failed for user ${user.id}:`, err.message); + logEvent('notify', `Verse of the day: ${err.message}`, { userId: user.id }); } } } @@ -169,6 +172,7 @@ export async function checkPrayerReminders(now = new Date()) { setLastPrayerDate(user.id, zonedNow(now, user.reminderTz).date); } catch (err) { console.error(`Prayer reminder failed for user ${user.id}:`, err.message); + logEvent('notify', `Prayer reminder: ${err.message}`, { userId: user.id }); } } } diff --git a/src/components/AdminHealth.jsx b/src/components/AdminHealth.jsx new file mode 100644 index 0000000..d14f265 --- /dev/null +++ b/src/components/AdminHealth.jsx @@ -0,0 +1,137 @@ +// Admin → Health: is the server in good shape? Disk use, snapshots (make, download, restore) and recent failures. +import { useCallback, useEffect, useState } from 'react'; +import { adminBackupNow, adminGetHealth, adminRestoreSnapshot, adminSnapshotUrl } from '../syncService.js'; + +const btn = 'rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-xs hover:bg-black/5 disabled:opacity-50'; +const card = 'rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-4'; + +export const formatBytes = (n) => { + if (n == null) return 'unknown'; + if (n < 1024) return `${n} B`; + const units = ['KB', 'MB', 'GB', 'TB']; + let v = n / 1024; let i = 0; + while (v >= 1024 && i < units.length - 1) { v /= 1024; i += 1; } + return `${v < 10 ? v.toFixed(1) : Math.round(v)} ${units[i]}`; +}; +export const formatUptime = (s) => { + if (s < 90) return `${s} seconds`; + if (s < 5400) return `${Math.round(s / 60)} minutes`; + if (s < 129600) return `${Math.round(s / 3600)} hours`; + return `${Math.round(s / 86400)} days`; +}; +const ago = (at) => { + const m = Math.round((Date.now() - at) / 60000); + if (m < 2) return 'just now'; + if (m < 120) return `${m} minutes ago`; + if (m < 2880) return `${Math.round(m / 60)} hours ago`; + return `${Math.round(m / 1440)} days ago`; +}; + +function Log({ title, empty, rows }) { + return ( +
+

{title}

+ {rows.length === 0 ?

{empty}

: ( + + )} +
+ ); +} + +export default function AdminHealth() { + const [state, setState] = useState({ loading: true, error: '', data: null }); + const [busy, setBusy] = useState(false); + const [message, setMessage] = useState(''); + const [restoring, setRestoring] = useState(null); // snapshot name awaiting typed confirmation + const [typed, setTyped] = useState(''); + + const load = useCallback(async () => { + const r = await adminGetHealth(); + setState(r.ok ? { loading: false, error: '', data: r.data } : { loading: false, error: r.error ?? 'Could not read server health.', data: null }); + }, []); + useEffect(() => { load(); }, [load]); + + const backupNow = async () => { + setBusy(true); setMessage(''); + const r = await adminBackupNow(); + setBusy(false); + setMessage(r.ok ? 'Snapshot saved.' : r.error ?? 'The snapshot could not be made.'); + load(); + }; + const restore = async () => { + setBusy(true); setMessage(''); + const r = await adminRestoreSnapshot(restoring); + setBusy(false); + if (r.ok) { setRestoring(null); setTyped(''); setMessage(`Restored ${r.data.restored}. What was there before is saved as ${r.data.safetyCopy}. You may need to sign in again.`); load(); } + else setMessage(r.error ?? 'The snapshot could not be restored.'); + }; + + if (state.loading) return

Loading…

; + if (state.error) return

{state.error}

; + const { data } = state; + const { backups, disk } = data; + const stale = backups.enabled && (!backups.latest || Date.now() - backups.latest.at > 36 * 3600 * 1000); + const usedPct = disk.total ? Math.round(((disk.total - disk.free) / disk.total) * 100) : null; + + return ( +
+
+
+
Running for
{formatUptime(data.uptimeSeconds)}
+
Database
{formatBytes(disk.db)}
+
Snapshots
{formatBytes(disk.backups)}
+
Disk free
{formatBytes(disk.free)}{usedPct != null ? ` (${usedPct}% used)` : ''}
+
+

Node {data.node} · IQ Bible {data.iqConfigured ? 'connected' : 'not set up'} · data in {data.dataDir}

+
+ +
+
+

Snapshots

+ +
+ {!backups.enabled &&

Automatic snapshots are turned off (BACKUP_DISABLED).

} + {stale &&

{backups.latest ? `The last snapshot is ${ago(backups.latest.at)}.` : 'There are no snapshots yet.'} One should be made every day.

} + {data.backupFailures.length > 0 &&

Last failure: {data.backupFailures[0].detail} ({ago(data.backupFailures[0].at)})

} + {backups.snapshots.length > 0 && ( +
    + {backups.snapshots.map((s) => ( +
  • + {s.name} · {formatBytes(s.bytes)} · {ago(s.at)} + + Download + + +
    • + ))} +
+ )} +

Keeps the newest {backups.keep}. A snapshot holds every account’s data.

+ {restoring && ( +
+

This replaces everyone’s data with what was saved in {restoring}. Anything changed since then is lost, though what’s there now is saved as a new snapshot first. Type the snapshot’s name to go ahead.

+ setTyped(e.target.value)} aria-label="Snapshot name" placeholder={restoring} + className="w-full rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 text-xs" /> +
+ + +
+
+ )} + {message &&

{message}

} +
+ + + +

The failure lists are kept in memory, so they start over when the server restarts.

+ +
+ ); +} diff --git a/src/components/AdminHealth.test.jsx b/src/components/AdminHealth.test.jsx new file mode 100644 index 0000000..2adba63 --- /dev/null +++ b/src/components/AdminHealth.test.jsx @@ -0,0 +1,56 @@ +import { afterEach, expect, test, vi } from 'vitest'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import AdminHealth, { formatBytes, formatUptime } from './AdminHealth.jsx'; + +const health = (over = {}) => ({ + uptimeSeconds: 7200, node: 'v22', dataDir: '/data', iqConfigured: false, + disk: { db: 2048, backups: 4096, free: 5e9, total: 1e10 }, + backups: { enabled: true, keep: 7, latest: { name: 'projects-2026-10-05-03-00.db', bytes: 2048, at: Date.now() - 3600000 }, snapshots: [{ name: 'projects-2026-10-05-03-00.db', bytes: 2048, at: Date.now() - 3600000 }] }, + signinFailures: [{ at: Date.now() - 60000, kind: 'signin', detail: 'Wrong password for a@x.test from 1.2.3.4' }], + notifyFailures: [], backupFailures: [], ...over, +}); +const mockFetch = (routes) => vi.stubGlobal('fetch', vi.fn(async (url, opts) => { + const key = `${opts?.method ?? 'GET'} ${String(url).replace(/^.*\/api/, '')}`; + const r = routes[key] ?? routes.default; + return { ok: r.ok ?? true, status: r.status ?? 200, json: async () => r.body }; +})); +afterEach(() => vi.unstubAllGlobals()); + +test('formats sizes and times plainly', () => { + expect(formatBytes(2048)).toBe('2.0 KB'); + expect(formatBytes(5e9)).toBe('4.7 GB'); + expect(formatBytes(null)).toBe('unknown'); + expect(formatUptime(7200)).toBe('2 hours'); +}); + +test('shows disk use, snapshots and sign-in failures', async () => { + mockFetch({ 'GET /admin/health': { body: health() } }); + render(); + expect(await screen.findByText('2 hours')).toBeInTheDocument(); + expect(screen.getByText(/Wrong password for a@x.test/)).toBeInTheDocument(); + expect(screen.getByText('None since the server last started.')).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Download' })).toHaveAttribute('href', expect.stringContaining('/admin/backups/projects-2026-10-05-03-00.db')); +}); + +test('warns when the newest snapshot is old', async () => { + const old = Date.now() - 4 * 86400000; + mockFetch({ 'GET /admin/health': { body: health({ backups: { enabled: true, keep: 7, latest: { name: 'x', bytes: 1, at: old }, snapshots: [] } }) } }); + render(); + expect(await screen.findByRole('alert')).toHaveTextContent(/last snapshot is 4 days ago/); +}); + +test('restoring needs the snapshot name typed first', async () => { + const name = 'projects-2026-10-05-03-00.db'; + mockFetch({ 'GET /admin/health': { body: health() }, [`POST /admin/backups/${name}/restore`]: { body: { restored: name, safetyCopy: 'projects-new.db' } } }); + const user = userEvent.setup(); + render(); + await user.click(await screen.findByRole('button', { name: 'Restore…' })); + const go = screen.getByRole('button', { name: 'Restore this snapshot' }); + expect(go).toBeDisabled(); + await user.type(screen.getByLabelText('Snapshot name'), name); + expect(go).toBeEnabled(); + await user.click(go); + await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Restored projects-2026-10-05-03-00.db')); + expect(fetch.mock.calls.some(([u, o]) => o?.method === 'POST' && JSON.parse(o.body).confirm === name)).toBe(true); +}); diff --git a/src/components/CommandPalette.jsx b/src/components/CommandPalette.jsx index 07ed582..7e5fc43 100644 --- a/src/components/CommandPalette.jsx +++ b/src/components/CommandPalette.jsx @@ -12,7 +12,7 @@ import { loadProjectById } from '../utils/projectStorage.js'; export default function CommandPalette({ onClose }) { const { readerTheme, authUser, authServerDown, projectIndex, readerBookmarks, readerTextHighlights, readerColorLabels, - jumpToReaderVerse, setCurrentPage, setProject, resumeProject, openNewProject, goStudies, openReadingPlans, + jumpToReaderVerse, setCurrentPage, setProject, resumeProject, openNewProject, goStudies, openReadingPlans, openPrayer, openBibleReader, requestReaderSearch, openBackup, } = useApp(); const [query, setQuery] = useState(''); @@ -40,7 +40,7 @@ export default function CommandPalette({ onClose }) { // 2. Pages and actions const pages = [ ['Studies', 'My Studies', goStudies], ['Read Bible', 'The Bible reader', openBibleReader], ['Reading Plans', 'Plans and today’s reading', openReadingPlans], - ['New project', 'Start a Bible study', openNewProject], ['Settings', 'Account and preferences', () => setCurrentPage('settings')], + ['Prayer journal', 'Requests, answers and the verses behind them', openPrayer], ['New project', 'Start a Bible study', openNewProject], ['Settings', 'Account and preferences', () => setCurrentPage('settings')], ['Back up my data', 'Download everything as a file', openBackup], ]; const lower = q.toLowerCase(); diff --git a/src/components/ShortcutsHelp.jsx b/src/components/ShortcutsHelp.jsx index 93e4c6f..f7f9df2 100644 --- a/src/components/ShortcutsHelp.jsx +++ b/src/components/ShortcutsHelp.jsx @@ -15,6 +15,7 @@ const BY_PAGE = { ['G', 'Pick a book and chapter'], ['B', 'Bookmark the selected verse'], ['C', 'Compare translations'], + ['M', 'Map this chapter’s cross-references (needs IQ Bible)'], ['H', 'Your highlights'], [',', 'Reading settings'], ['F', 'Hide or show the controls'], diff --git a/src/components/reader/CrossRefMap.jsx b/src/components/reader/CrossRefMap.jsx new file mode 100644 index 0000000..2047792 --- /dev/null +++ b/src/components/reader/CrossRefMap.jsx @@ -0,0 +1,89 @@ +// The cross-reference map for a chapter (from IQ Bible's reference data): the chapter in the middle, the chapters +// it is linked to around it, in Bible order. Heavier lines mean more verse-to-verse links. Tap a chapter to see how +// they connect, open it, or move the map's centre there. A list below says the same in words. +import { useEffect, useMemo, useState } from 'react'; +import Sheet from './Sheet.jsx'; +import { useIq } from '../../hooks/useIq.js'; +import { bookOptions } from '../../utils/bibleUtils.jsx'; +import { chapterId, layoutMap, linkedChapters, parseGraph } from '../../utils/xrefMap.js'; + +const SIZE = 700; +const bookName = (abbrev) => bookOptions.find((b) => b.abbrev === abbrev)?.name ?? abbrev; + +export default function CrossRefMap({ open, onClose, book, chapter, onOpenChapter }) { + const [center, setCenter] = useState({ book, chapter }); + const [depth, setDepth] = useState(1); + const [picked, setPicked] = useState(null); + useEffect(() => { if (open) { setCenter({ book, chapter }); setPicked(null); } }, [open, book, chapter]); + + const { status, data, error } = useIq(open ? 'cross-references/graph' : null, { book: center.book, chapter: center.chapter, depth }); + const centerId = chapterId(center.book, center.chapter); + const graph = useMemo(() => parseGraph(data), [data]); + const map = useMemo(() => layoutMap(graph, centerId, SIZE), [graph, centerId]); + const linked = useMemo(() => linkedChapters(graph, centerId), [graph, centerId]); + const byId = new Map(map.nodes.map((n) => [n.id, n])); + const sel = picked ? byId.get(picked) : null; + const selLinks = sel ? graph.edges.filter((e) => (e.source === centerId && e.target === sel.id) || (e.target === centerId && e.source === sel.id)) : []; + const label = (n) => `${bookName(n.book)} ${n.chapter}`; + const hot = new Set([...map.nodes].filter((n) => n.id !== centerId).sort((a, b) => b.weight - a.weight).slice(0, 14).map((n) => n.id)); // labelled on the picture + + return ( + +
+ + {[[1, 'Directly linked'], [2, 'And the ones they link to']].map(([d, name]) => ( + + ))} + + {(center.book !== book || center.chapter !== chapter) && ( + + )} + Lines are heavier where there are more verse links. +
+ + {status === 'loading' &&

Drawing the map…

} + {status === 'error' &&

{error}

} + {status === 'empty' &&

No cross-references are recorded for this chapter.

} + {status === 'ready' && map.nodes.length > 1 && ( + <> + + {map.edges.map((e) => )} + {map.nodes.map((n) => ( + setPicked(n.id === picked ? null : n.id)} className="cursor-pointer" role="button" tabIndex={0} aria-label={`${label(n)}, ${n.weight} links`} + onKeyDown={(ev) => { if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); setPicked(n.id === picked ? null : n.id); } }}> + + {(n.id === centerId || n.id === picked || hot.has(n.id)) && ( + {label(n)} + )} + + ))} + + {graph.truncated &&

A large map: only the first part is shown.

} + + {sel && ( +
+

{label(sel)}

+

{selLinks.length ? `${selLinks.reduce((n, e) => n + e.weight, 0)} verse links with ${bookName(center.book)} ${center.chapter}` : `${sel.ring > 1 ? 'Linked through another chapter' : 'Linked'}`}

+
+ + {sel.id !== centerId && } +
+
+ )} + +

Most linked to {bookName(center.book)} {center.chapter}

+
    + {linked.slice(0, 20).map((c) => ( +
  1. + + {c.weight} +
    2. + ))} +
+ + )} +

Cross-references via IQ Bible.

+ + ); +} diff --git a/src/components/reader/CrossRefMap.test.jsx b/src/components/reader/CrossRefMap.test.jsx new file mode 100644 index 0000000..68c0e71 --- /dev/null +++ b/src/components/reader/CrossRefMap.test.jsx @@ -0,0 +1,69 @@ +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { vi, test, expect, beforeEach, afterEach } from 'vitest'; +import CrossRefMap from './CrossRefMap.jsx'; +import { resetIq } from '../../utils/iqbible.js'; + +let routes; +let asked; +beforeEach(() => { + resetIq(); + asked = []; + routes = {}; + vi.stubGlobal('fetch', vi.fn((url) => { + asked.push(String(url)); + const hit = routes[String(url)]; + return Promise.resolve(hit ? { ok: true, status: 200, json: async () => hit } : { ok: false, status: 404, json: async () => ({ error: 'nf' }) }); + })); +}); +afterEach(() => vi.unstubAllGlobals()); + +const graph = { + nodes: [ + { id: 'GEN.1', book: 'GEN', name_en: 'Genesis', chapter: 1 }, { id: 'PSA.104', book: 'PSA', name_en: 'Psalms', chapter: 104 }, + { id: 'JHN.1', book: 'JHN', name_en: 'John', chapter: 1 }, { id: 'COL.1', book: 'COL', name_en: 'Colossians', chapter: 1 }, + ], + edges: [{ source: 'GEN.1', target: 'PSA.104', weight: 4 }, { source: 'GEN.1', target: 'JHN.1', weight: 9 }, { source: 'GEN.1', target: 'COL.1', weight: 3 }], +}; +const url = (book, chapter, depth = 1) => `/api/iq/cross-references/graph?book=${book}&chapter=${chapter}&depth=${depth}`; + +test('nothing is fetched until the map is opened; then the linked chapters are drawn and listed strongest first', async () => { + const { rerender } = render( {}} book="GEN" chapter={1} onOpenChapter={() => {}} />); + expect(asked).toEqual([]); + routes[url('GEN', 1)] = graph; + rerender( {}} book="GEN" chapter={1} onOpenChapter={() => {}} />); + expect(await screen.findByRole('img', { name: /Map of 3 chapters linked to Genesis 1/ })).toBeInTheDocument(); + const items = screen.getAllByRole('listitem').map((li) => li.textContent); + expect(items[0]).toBe('John 19'); // strongest link first + expect(items[1]).toBe('Psalms 1044'); + expect(screen.getByRole('button', { name: 'John 1, 9 links' })).toBeInTheDocument(); +}); + +test('picking a chapter shows how strongly it links, and can open it or put it in the middle', async () => { + routes[url('GEN', 1)] = graph; + routes[url('JHN', 1)] = { nodes: [{ id: 'JHN.1', book: 'JHN', name_en: 'John', chapter: 1 }, { id: 'GEN.1', book: 'GEN', name_en: 'Genesis', chapter: 1 }], edges: [{ source: 'JHN.1', target: 'GEN.1', weight: 9 }] }; + const onOpenChapter = vi.fn(); + const user = userEvent.setup(); + render( {}} book="GEN" chapter={1} onOpenChapter={onOpenChapter} />); + await user.click(await screen.findByRole('button', { name: 'John 1, 9 links' })); + expect(screen.getByRole('status')).toHaveTextContent('9 verse links with Genesis 1'); + await user.click(screen.getByRole('button', { name: /read john 1/i })); + expect(onOpenChapter).toHaveBeenCalledWith('JHN', 1); + await user.click(screen.getByRole('button', { name: /put it in the middle/i })); + expect(await screen.findByText(/Cross-reference map · John 1/)).toBeInTheDocument(); + expect(asked).toContain(url('JHN', 1)); + await user.click(screen.getByRole('button', { name: /back to genesis 1/i })); + expect(await screen.findByText(/Cross-reference map · Genesis 1/)).toBeInTheDocument(); +}); + +test('following the links further asks for more, and a chapter with no links says so', async () => { + routes[url('GEN', 1)] = graph; + const user = userEvent.setup(); + const { unmount } = render( {}} book="GEN" chapter={1} onOpenChapter={() => {}} />); + await screen.findByRole('img'); + await user.click(screen.getByRole('button', { name: 'And the ones they link to' })); + expect(asked).toContain(url('GEN', 1, 2)); + unmount(); + render( {}} book="OBA" chapter={1} onOpenChapter={() => {}} />); + expect(await screen.findByText(/No cross-references are recorded/)).toBeInTheDocument(); +}); diff --git a/src/components/reader/VerseSheet.jsx b/src/components/reader/VerseSheet.jsx index e55049d..a3b51d3 100644 --- a/src/components/reader/VerseSheet.jsx +++ b/src/components/reader/VerseSheet.jsx @@ -156,7 +156,7 @@ function CompareTab({ book, chapter, verse, current }) { export default function VerseSheet({ verse, book, bookName, chapter, translation, words, crossRefs, crossRefsLoading, onLoadCrossRefs, - bookmarkColor, onToggleBookmark, onCycleColor, bookmarkNote = '', onSetBookmarkNote, onSetHighlightNote, studiesHere = [], onOpenStudy, onPray, onJump, onClose, request, + bookmarkColor, onToggleBookmark, onCycleColor, bookmarkNote = '', onSetBookmarkNote, onSetHighlightNote, studiesHere = [], onOpenStudy, onPray, onOpenMap, onJump, onClose, request, verseHighlights = [], colorLabels = {}, onHighlightVerse, onClearVerseHighlights, panelRef, resizeHandle, }) { const iqOn = useIqAvailable(); @@ -291,6 +291,7 @@ export default function VerseSheet({ {tab === 'commentary' && } {tab === 'compare' && } {tab === 'original' && } + {tab === 'refs' && onOpenMap && } {tab === 'refs' && ( setPreview(null)} />} /> diff --git a/src/components/settings/DevicesSection.jsx b/src/components/settings/DevicesSection.jsx new file mode 100644 index 0000000..40ff5b8 --- /dev/null +++ b/src/components/settings/DevicesSection.jsx @@ -0,0 +1,77 @@ +// Settings → Security: where you're signed in, with a way to sign the others out, and an optional alert for new sign-ins. +import { useEffect, useState } from 'react'; +import { useApp } from '../../context/AppContext.js'; +import { listDevices, setLoginAlerts, signOutDevice, signOutOtherDevices } from '../../syncService.js'; + +const btn = 'rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-xs hover:bg-black/5 disabled:opacity-50'; +const METHODS = { password: 'password', passkey: 'passkey', mfa: 'password and code', register: 'new account' }; + +export function whenText(at, now = Date.now()) { + const m = Math.round((now - at) / 60000); + if (m < 2) return 'just now'; + if (m < 120) return `${m} minutes ago`; + if (m < 2880) return `${Math.round(m / 60)} hours ago`; + return `${Math.round(m / 1440)} days ago`; +} + +export default function DevicesSection() { + const { authUser, setAuthUser } = useApp(); + const [devices, setDevices] = useState(null); + const [error, setError] = useState(''); + const [busy, setBusy] = useState(false); + + const load = async () => { const r = await listDevices(); if (r.ok) setDevices(r.data); else setError(r.error ?? 'Could not load your devices.'); }; + useEffect(() => { load(); }, []); + + const signOut = async (d) => { + if (!window.confirm(`Sign out ${d.label}?`)) return; + const r = await signOutDevice(d.id); + if (!r.ok && r.status !== 404) setError(r.error ?? 'Could not sign it out.'); + load(); + }; + const signOutOthers = async () => { + if (!window.confirm('Sign out every other device? They’ll need to sign in again.')) return; + setBusy(true); + const r = await signOutOtherDevices(); + setBusy(false); + if (!r.ok) setError(r.error ?? 'Could not sign them out.'); + load(); + }; + const toggleAlerts = async (e) => { + setError(''); + const r = await setLoginAlerts(e.target.checked); + if (r.ok) setAuthUser({ ...authUser, loginAlerts: r.data.loginAlerts }); else setError(r.error ?? 'Could not change that.'); + }; + const others = (devices ?? []).filter((d) => !d.current); + + return ( +
+
+

Where you’re signed in

+

If you don’t recognise one, sign it out and change your password.

+
+ {devices === null && !error &&

Loading…

} + {devices && ( +
    + {devices.map((d) => ( +
  • + + {d.label}{d.current && This device} + + {d.current ? 'Active now' : `Last active ${whenText(d.lastSeen)}`}{d.method ? ` · signed in with ${METHODS[d.method] ?? d.method}` : ''}{d.ip ? ` · ${d.ip}` : ''} + + + {!d.current && } +
    • + ))} +
+ )} + {others.length > 0 && } + {error &&

{error}

} + +
+ ); +} diff --git a/src/components/settings/PasskeysSection.jsx b/src/components/settings/PasskeysSection.jsx new file mode 100644 index 0000000..cfe8a60 --- /dev/null +++ b/src/components/settings/PasskeysSection.jsx @@ -0,0 +1,74 @@ +// Settings → Security: sign in with Face ID, a fingerprint or a security key instead of typing a password. +import { useEffect, useState } from 'react'; +import { listPasskeys, passkeyRemove, passkeyRename } from '../../syncService.js'; +import { addPasskeyHere, passkeysSupported } from '../../utils/passkeys.js'; +import { useToast } from '../Toasts.jsx'; + +const btn = 'rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-xs hover:bg-black/5 disabled:opacity-50'; +const day = (t) => new Date(t).toLocaleDateString(); + +export default function PasskeysSection() { + const { toast } = useToast(); + const [list, setList] = useState(null); + const [busy, setBusy] = useState(false); + const [error, setError] = useState(''); + const [editing, setEditing] = useState(null); // { id, name } + const supported = passkeysSupported(); + + useEffect(() => { listPasskeys().then((r) => setList(r.ok ? r.data : [])); }, []); + + const add = async () => { + setBusy(true); setError(''); + const r = await addPasskeyHere(); + setBusy(false); + if (r.ok) { setList(r.data); toast('Passkey added. You can now sign in with it.'); } else setError(r.error ?? 'Could not add a passkey.'); + }; + const remove = async (p) => { + if (!window.confirm(`Remove the passkey “${p.name}”? You can still sign in with your password.`)) return; + const r = await passkeyRemove(p.id); + if (r.ok) setList(r.data); else setError(r.error ?? 'Could not remove it.'); + }; + const rename = async (e) => { + e.preventDefault(); + const r = await passkeyRename(editing.id, editing.name); + if (r.ok) { setList(r.data); setEditing(null); } else setError(r.error ?? 'Could not rename it.'); + }; + + return ( +
+
+

Passkeys

+

Sign in with Face ID, a fingerprint or a security key, with nothing to type. A passkey is checked by your device, so it replaces the authenticator code too.

+
+ {!supported &&

This browser or address can’t use passkeys. They need a recent browser and an https:// address.

} + {list?.length > 0 && ( +
    + {list.map((p) => ( +
  • + {editing?.id === p.id ? ( +
    + setEditing({ ...editing, name: e.target.value })} maxLength={60} + className="min-w-0 flex-1 rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-1.5 text-sm" /> + + +
    + ) : ( + <> + {p.name} + Added {day(p.createdAt)} · {p.lastUsedAt ? `last used ${day(p.lastUsedAt)}` : 'not used yet'} + + + + + + )} +
    • + ))} +
+ )} + {list && list.length === 0 && supported &&

No passkeys yet.

} + {error &&

{error}

} + {supported && } +
+ ); +} diff --git a/src/components/settings/SecurityTab.test.jsx b/src/components/settings/SecurityTab.test.jsx new file mode 100644 index 0000000..ae5711a --- /dev/null +++ b/src/components/settings/SecurityTab.test.jsx @@ -0,0 +1,121 @@ +import { afterEach, beforeEach, expect, test, vi } from 'vitest'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +const app = { authUser: { id: 'u1', email: 'a@x.test', loginAlerts: false }, setAuthUser: vi.fn() }; +vi.mock('../../context/AppContext.js', () => ({ useApp: () => app })); +const webauthn = vi.hoisted(() => ({ browserSupportsWebAuthn: vi.fn(() => true), startRegistration: vi.fn(), startAuthentication: vi.fn() })); +vi.mock('@simplewebauthn/browser', () => webauthn); + +import PasskeysSection from './PasskeysSection.jsx'; +import DevicesSection, { whenText } from './DevicesSection.jsx'; +import { signInWithPasskey } from '../../utils/passkeys.js'; + +const routes = {}; +beforeEach(() => { + Object.keys(routes).forEach((k) => delete routes[k]); + app.setAuthUser.mockClear(); webauthn.browserSupportsWebAuthn.mockReturnValue(true); + vi.stubGlobal('fetch', vi.fn(async (url, opts) => { + const key = `${opts?.method ?? 'GET'} ${String(url).replace(/^.*\/api/, '')}`; + const r = routes[key] ?? { status: 404, body: { error: `no route ${key}` } }; + return { ok: (r.status ?? 200) < 400, status: r.status ?? 200, json: async () => r.body }; + })); +}); +afterEach(() => vi.unstubAllGlobals()); + +const passkey = { id: 'k1', name: 'My phone', createdAt: 1_700_000_000_000, lastUsedAt: null }; + +test('lists passkeys and adds one through the device prompt', async () => { + routes['GET /passkeys'] = { body: [passkey] }; + routes['POST /passkeys/options'] = { body: { challenge: 'c' } }; + routes['POST /passkeys'] = { body: [passkey, { ...passkey, id: 'k2', name: 'Laptop' }] }; + webauthn.startRegistration.mockResolvedValue({ id: 'k2' }); + const user = userEvent.setup(); + render(); + expect(await screen.findByText('My phone')).toBeInTheDocument(); + expect(screen.getByText(/not used yet/)).toBeInTheDocument(); + await user.click(screen.getByRole('button', { name: /Add a passkey on this device/ })); + expect(await screen.findByText('Laptop')).toBeInTheDocument(); + expect(webauthn.startRegistration).toHaveBeenCalledWith({ optionsJSON: { challenge: 'c' } }); +}); + +test('says so when the device prompt is cancelled', async () => { + routes['GET /passkeys'] = { body: [] }; + routes['POST /passkeys/options'] = { body: { challenge: 'c' } }; + webauthn.startRegistration.mockRejectedValue(Object.assign(new Error('x'), { name: 'NotAllowedError' })); + const user = userEvent.setup(); + render(); + await user.click(await screen.findByRole('button', { name: /Add a passkey/ })); + expect(await screen.findByRole('alert')).toHaveTextContent('cancelled or timed out'); +}); + +test('renames and removes a passkey', async () => { + routes['GET /passkeys'] = { body: [passkey] }; + routes['PATCH /passkeys/k1'] = { body: [{ ...passkey, name: 'Pixel' }] }; + routes['DELETE /passkeys/k1'] = { body: [] }; + vi.spyOn(window, 'confirm').mockReturnValue(true); + const user = userEvent.setup(); + render(); + await user.click(await screen.findByRole('button', { name: 'Rename' })); + const input = screen.getByLabelText('Passkey name'); + await user.clear(input); await user.type(input, 'Pixel'); await user.click(screen.getByRole('button', { name: 'Save' })); + expect(await screen.findByText('Pixel')).toBeInTheDocument(); + await user.click(screen.getByRole('button', { name: 'Remove' })); + await waitFor(() => expect(screen.queryByText('Pixel')).not.toBeInTheDocument()); +}); + +test('hides the button where passkeys cannot work', async () => { + webauthn.browserSupportsWebAuthn.mockReturnValue(false); + routes['GET /passkeys'] = { body: [] }; + render(); + expect(await screen.findByText(/can’t use passkeys/)).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /Add a passkey/ })).not.toBeInTheDocument(); +}); + +test('sign-in with a passkey asks the server, then the device, then the server again', async () => { + routes['POST /auth/passkey/options'] = { body: { challenge: 'c' } }; + routes['POST /auth/passkey/verify'] = { body: { id: 'u1', email: 'a@x.test' } }; + webauthn.startAuthentication.mockResolvedValue({ id: 'k1' }); + expect(await signInWithPasskey()).toMatchObject({ ok: true, data: { email: 'a@x.test' } }); + webauthn.startAuthentication.mockRejectedValue(Object.assign(new Error('x'), { name: 'NotAllowedError' })); + expect(await signInWithPasskey()).toMatchObject({ ok: false, cancelled: true }); +}); + +test('shows devices, signs one out, and signs out the rest', async () => { + const devices = [ + { id: 'd1', current: true, label: 'Safari on macOS', method: 'password', ip: '1.1.1.1', lastSeen: Date.now() }, + { id: 'd2', current: false, label: 'Chrome on Windows', method: 'passkey', ip: '2.2.2.2', lastSeen: Date.now() - 3 * 86400000 }, + ]; + routes['GET /sessions'] = { body: devices }; + routes['DELETE /sessions/d2'] = { body: { ok: true } }; + vi.spyOn(window, 'confirm').mockReturnValue(true); + const user = userEvent.setup(); + render(); + expect(await screen.findByText('Chrome on Windows')).toBeInTheDocument(); + expect(screen.getByText('This device')).toBeInTheDocument(); + expect(screen.getByText(/signed in with passkey/)).toBeInTheDocument(); + routes['GET /sessions'] = { body: [devices[0]] }; + await user.click(screen.getByRole('button', { name: 'Sign out' })); + await waitFor(() => expect(screen.queryByText('Chrome on Windows')).not.toBeInTheDocument()); + expect(screen.queryByRole('button', { name: /Sign out the other/ })).not.toBeInTheDocument(); +}); + +test('the sign-in alert switch reports a server refusal', async () => { + routes['GET /sessions'] = { body: [] }; + routes['PUT /auth/login-alerts'] = { status: 400, body: { error: 'Set up a notification topic first (under Notifications).' } }; + const user = userEvent.setup(); + render(); + await user.click(await screen.findByRole('checkbox')); + expect(await screen.findByRole('alert')).toHaveTextContent('notification topic'); + expect(app.setAuthUser).not.toHaveBeenCalled(); + routes['PUT /auth/login-alerts'] = { body: { loginAlerts: true } }; + await user.click(screen.getByRole('checkbox')); + await waitFor(() => expect(app.setAuthUser).toHaveBeenCalledWith(expect.objectContaining({ loginAlerts: true }))); +}); + +test('times read plainly', () => { + const now = 1_000_000_000_000; + expect(whenText(now - 30_000, now)).toBe('just now'); + expect(whenText(now - 5 * 3600_000, now)).toBe('5 hours ago'); + expect(whenText(now - 3 * 86400_000, now)).toBe('3 days ago'); +}); diff --git a/src/pages/AdminPage.jsx b/src/pages/AdminPage.jsx index 2cd8142..657862b 100644 --- a/src/pages/AdminPage.jsx +++ b/src/pages/AdminPage.jsx @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react'; import { useApp } from '../context/AppContext.js'; import AdminSignup from '../components/AdminSignup.jsx'; +import AdminHealth from '../components/AdminHealth.jsx'; import PageShell from '../components/study/PageShell.jsx'; import { buildExportHtml } from '../utils/bibleUtils.jsx'; import { @@ -14,7 +15,7 @@ import { export default function AdminPage() { const { authUser, goHome } = useApp(); - const [adminTab, setAdminTab] = useState('users'); // 'users' | 'projects' | 'signup' + const [adminTab, setAdminTab] = useState('users'); // 'users' | 'projects' | 'signup' | 'health' const [adminUsers, setAdminUsers] = useState([]); const [adminProjects, setAdminProjects] = useState([]); const [adminLoading, setAdminLoading] = useState(false); @@ -84,9 +85,14 @@ export default function AdminPage() { className={`rounded-full px-4 py-1.5 text-sm transition ${adminTab === 'signup' ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'border border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}> Sign-ups + {adminTab === 'signup' && } + {adminTab === 'health' && } {adminLoading &&

Loading…

} {adminError &&

{adminError}

} diff --git a/src/pages/AuthPage.jsx b/src/pages/AuthPage.jsx index 102577e..b6f6d38 100644 --- a/src/pages/AuthPage.jsx +++ b/src/pages/AuthPage.jsx @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react'; import { useApp } from '../context/AppContext.js'; import { themeVars, READER_THEMES } from '../components/reader/readerThemes.js'; +import { passkeysSupported, signInWithPasskey } from '../utils/passkeys.js'; import ResetPasswordForm from '../components/ResetPasswordForm.jsx'; import { getSignupMode, loginUser, registerUser, verifyMfaLogin, logoutUser } from '../syncService.js'; @@ -124,6 +125,15 @@ export default function AuthPage() { signIn(result.data); }; + const submitPasskey = async () => { + setAuthError(''); + setAuthBusy(true); + const result = await signInWithPasskey(); + setAuthBusy(false); + if (result.ok) signIn(result.data); + else if (!result.cancelled) setAuthError(result.error ?? 'Passkey sign-in failed.'); + }; + const submitMfa = async (e) => { e.preventDefault(); setAuthError(''); @@ -265,6 +275,10 @@ export default function AuthPage() { {authBusy ? 'Please wait…' : authMode === 'login' ? 'Sign in' : 'Create account'} + {authMode === 'login' && passkeysSupported() && ( + + )} {authMode === 'login' && ( diff --git a/src/pages/ReaderPage.jsx b/src/pages/ReaderPage.jsx index a942a29..2110356 100644 --- a/src/pages/ReaderPage.jsx +++ b/src/pages/ReaderPage.jsx @@ -21,6 +21,8 @@ import NavigatorSheet from '../components/reader/NavigatorSheet.jsx'; import SettingsSheet from '../components/reader/SettingsSheet.jsx'; import CompareSheet from '../components/reader/CompareSheet.jsx'; import SearchSheet from '../components/reader/SearchSheet.jsx'; +import CrossRefMap from '../components/reader/CrossRefMap.jsx'; +import { useIqAvailable } from '../hooks/useIq.js'; import MarksSheet from '../components/reader/MarksSheet.jsx'; import { useToast } from '../components/Toasts.jsx'; import { HIGHLIGHT_COLORS, colorTitle } from '../utils/highlightColors.js'; @@ -107,7 +109,8 @@ export default function ReaderPage() { const parallelChapter = useParallelChapter(parallelId, readerBookAbbrev, readerChapter); const parallelSource = READER_TRANSLATIONS.find((t) => t.id === parallelId); - const [sheet, setSheet] = useState(null); // null | 'nav' | 'settings' | 'search' | 'bookmarks' | 'highlights' | 'audio' + const [sheet, setSheet] = useState(null); // null | 'nav' | 'settings' | 'search' | 'bookmarks' | 'highlights' | 'audio' | 'xmap' + const iqOn = useIqAvailable(); const [chromeVisible, setChromeVisible] = useState(true); const [readerDrawMode, setReaderDrawMode] = useState(false); const [selectionPicker, setSelectionPicker] = useState(null); @@ -284,6 +287,7 @@ export default function ReaderPage() { else if (e.key === 'g' || e.key === 'G') { e.preventDefault(); openSheet('nav'); } else if (e.key === ',') { e.preventDefault(); openSheet('settings'); } else if (e.key === 'c' || e.key === 'C') { e.preventDefault(); openSheet('compare'); } + else if ((e.key === 'm' || e.key === 'M') && iqOn) { e.preventDefault(); openSheet('xmap'); } else if (e.key === 'h' || e.key === 'H') { e.preventDefault(); openSheet('highlights'); } else if (e.key === 'f' || e.key === 'F') setChromeVisible((v) => !v); else if ((e.key === 'b' || e.key === 'B') && selectedKey) { @@ -575,7 +579,7 @@ export default function ReaderPage() { crossRefsLoading={readerCrossRefsLoading} onLoadCrossRefs={() => { if (!readerCrossRefs) loadReaderCrossRefs(readerBookAbbrev, readerChapter); }} bookmarkColor={readerBookmarks[selectedKey]} - studiesHere={studiesHere} onOpenStudy={openStudyChunk} onPray={startPrayerFor} + studiesHere={studiesHere} onOpenStudy={openStudyChunk} onPray={startPrayerFor} onOpenMap={iqOn ? () => openSheet('xmap') : undefined} bookmarkNote={readerBookmarkNotes?.[selectedKey] ?? ''} onSetBookmarkNote={(text) => setBookmarkNote(selectedKey, text)} onSetHighlightNote={setHighlightNote} onToggleBookmark={() => (readerBookmarks[selectedKey] ? removeBookmark(selectedKey, readerBookmarks[selectedKey]) : toggleReaderBookmark(selectedKey))} onCycleColor={() => cycleBookmarkColor(selectedKey)} @@ -641,6 +645,7 @@ export default function ReaderPage() { bibleMatches={bibleMatches} deferredBibleQuery={deferredBibleQuery} remote={remoteSearch} onJump={jump} /> + {iqOn && jump(b, c, 1)} />} { if (!settingsFocus) return; - document.getElementById(settingsFocus)?.scrollIntoView({ block: 'start' }); + if (settingsFocus === 'backup') setTab('data'); + window.setTimeout(() => document.getElementById(settingsFocus)?.scrollIntoView({ block: 'start' }), 0); clearSettingsFocus(); }, [settingsFocus]); // eslint-disable-line react-hooks/exhaustive-deps const [mfaSetup, setMfaSetup] = useState(null); // { secret, qrCodeDataUrl } while setup is in progress @@ -177,7 +183,9 @@ export default function SettingsPage() { const [reminderTest, setReminderTest] = useState({ busy: false, ok: false, message: '' }); const testReminder = async () => { setReminderTest({ busy: true, ok: false, message: '' }); - const result = await sendReminderTest({ ntfyTopic: reminderForm.ntfyTopic, ntfyUrl: reminderForm.ntfyUrl }); + const server = normalizeNtfyServer(reminderForm.ntfyUrl, reminderForm.ntfyTopic); + if (server.error) { setReminderTest({ busy: false, ok: false, message: server.error }); return; } + const result = await sendReminderTest({ ntfyTopic: reminderForm.ntfyTopic, ntfyUrl: server.value }); setReminderTest(result.ok ? { busy: false, ok: true, message: 'Sent. Check your ntfy app or the topic page in a browser.' } : { busy: false, ok: false, message: result.error ?? 'Could not send the test.' }); @@ -187,13 +195,16 @@ export default function SettingsPage() { e.preventDefault(); setReminderError(''); setReminderBusy(true); - const result = await updateReminderSettings({ ...reminderForm, reminderTz: Intl.DateTimeFormat().resolvedOptions().timeZone }); + const server = normalizeNtfyServer(reminderForm.ntfyUrl, reminderForm.ntfyTopic); + if (server.error) { setReminderBusy(false); setReminderError(server.error); return; } + const result = await updateReminderSettings({ ...reminderForm, ntfyUrl: server.value, reminderTz: Intl.DateTimeFormat().resolvedOptions().timeZone }); setReminderBusy(false); if (!result.ok) { setReminderError(result.error ?? 'Failed to save reminder settings.'); return; } setAuthUser((u) => ({ ...u, ...result.data })); + setReminderForm((f) => ({ ...f, ntfyUrl: server.value })); // shows the address as saved (with https:// added if it was missing) setReminderSaved(true); window.setTimeout(() => setReminderSaved(false), 2500); }; @@ -225,13 +236,25 @@ export default function SettingsPage() { return (
+
+ {SETTINGS_TABS.map(([id, label]) => ( + + ))} +
+
+ {tab === 'account' && (

Account

Signed in as {authUser.email}

+ )} + {tab === 'prefs' && (

Preferences

How the app looks and reads. Study projects always use the Berean Standard Bible.

@@ -275,7 +298,9 @@ export default function SettingsPage() {
+ )} + {tab === 'security' && (

Change password

@@ -327,7 +352,9 @@ export default function SettingsPage() {
+ )} + {tab === 'account' && (

Podcast / show name

@@ -355,9 +382,13 @@ export default function SettingsPage() { {podcastNameSaved &&

Saved.

}
+ )} + {tab === 'data' && ( + )} + {tab === 'prefs' && (

My reading journal

@@ -386,7 +417,9 @@ export default function SettingsPage() {
{journalError &&

{journalError}

}
+ )} + {tab === 'notify' && (

Reading reminders

@@ -394,7 +427,7 @@ export default function SettingsPage() { Get a daily nudge via{' '} ntfy.sh {' '}— a free push-notification service. Install the ntfy app (or open{' '} - {(reminderForm.ntfyUrl || 'https://ntfy.sh').replace(/\/+$/, '')}/{reminderForm.ntfyTopic || ''} + {(normalizeNtfyServer(reminderForm.ntfyUrl, reminderForm.ntfyTopic).value || 'https://ntfy.sh')}/{reminderForm.ntfyTopic || ''} {' '}in a browser) and subscribe to the topic below to receive it.

@@ -465,6 +498,12 @@ export default function SettingsPage() { onChange={(e) => setReminderForm((f) => ({ ...f, ntfyUrl: e.target.value }))} className="mt-1 block w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 text-[var(--r-text)] text-sm focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]" /> + {normalizeNtfyServer(reminderForm.ntfyUrl, reminderForm.ntfyTopic).error && ( + + {normalizeNtfyServer(reminderForm.ntfyUrl, reminderForm.ntfyTopic).error}{' '} + + + )} {reminderError &&

{reminderError}

} {reminderSaved &&

Saved.

} @@ -490,7 +529,9 @@ export default function SettingsPage() {
+ )} + {tab === 'security' && (

Two-factor authentication

@@ -592,6 +633,10 @@ export default function SettingsPage() {
)}
+ )} + {tab === 'security' && } + {tab === 'security' && } +
); diff --git a/src/syncService.js b/src/syncService.js index fa051a7..aab6a80 100644 --- a/src/syncService.js +++ b/src/syncService.js @@ -179,6 +179,19 @@ export async function loginUser(email, password) { return request('POST', '/auth/login', { email, password }); } +// Passkeys and signed-in devices +export const passkeySignInOptions = () => request('POST', '/auth/passkey/options'); +export const passkeySignInVerify = (response) => request('POST', '/auth/passkey/verify', response); +export const listPasskeys = () => request('GET', '/passkeys'); +export const passkeyAddOptions = () => request('POST', '/passkeys/options'); +export const passkeyAdd = (response, name) => request('POST', '/passkeys', { response, name }); +export const passkeyRename = (id, name) => request('PATCH', `/passkeys/${encodeURIComponent(id)}`, { name }); +export const passkeyRemove = (id) => request('DELETE', `/passkeys/${encodeURIComponent(id)}`); +export const listDevices = () => request('GET', '/sessions'); +export const signOutDevice = (id) => request('DELETE', `/sessions/${id}`); +export const signOutOtherDevices = () => request('POST', '/sessions/sign-out-others'); +export const setLoginAlerts = (enabled) => request('PUT', '/auth/login-alerts', { enabled }); + /** Asks for a password-reset code to be sent to the account's notification topic. */ export async function requestPasswordReset(email) { return request('POST', '/auth/forgot', { email }); @@ -275,6 +288,11 @@ export async function adminListUsers() { return request('GET', '/admin/users'); } +export const adminGetHealth = () => request('GET', '/admin/health'); +export const adminBackupNow = () => request('POST', '/admin/backups'); +export const adminRestoreSnapshot = (name) => request('POST', `/admin/backups/${encodeURIComponent(name)}/restore`, { confirm: name }); +export const adminSnapshotUrl = (name) => `${BASE}/admin/backups/${encodeURIComponent(name)}`; + export async function adminDeleteUser(id) { return request('DELETE', `/admin/users/${id}`); } diff --git a/src/test/App.accounts.test.jsx b/src/test/App.accounts.test.jsx index 4daa503..c8571f7 100644 --- a/src/test/App.accounts.test.jsx +++ b/src/test/App.accounts.test.jsx @@ -82,6 +82,23 @@ describe('Authentication', () => { await u.click(await screen.findByRole('menuitem', { name: /settings/i })); expect(await screen.findByDisplayValue('My Show')).toBeInTheDocument(); }); + + test('Settings is split into tabs, one group at a time', async () => { + stubApi({ session: user }); + const u = userEvent.setup(); + render(); + await openAccountMenu(u); + await u.click(await screen.findByRole('menuitem', { name: /settings/i })); + const tabs = await screen.findAllByRole('tab'); + expect(tabs.map((t) => t.textContent)).toEqual(['Account', 'Preferences', 'Notifications', 'Security', 'Your data']); + expect(screen.queryByRole('heading', { name: 'Two-factor authentication' })).not.toBeInTheDocument(); + await u.click(screen.getByRole('tab', { name: 'Security' })); + expect(screen.getByRole('tab', { name: 'Security' })).toHaveAttribute('aria-selected', 'true'); + expect(await screen.findByRole('heading', { name: 'Two-factor authentication' })).toBeInTheDocument(); + expect(screen.getByRole('heading', { name: 'Passkeys' })).toBeInTheDocument(); + expect(screen.getByRole('heading', { name: 'Where you’re signed in' })).toBeInTheDocument(); + expect(screen.queryByDisplayValue('My Show')).not.toBeInTheDocument(); + }); }); // --------------------------------------------------------------------------- diff --git a/src/test/App.pages.test.jsx b/src/test/App.pages.test.jsx index 6944e82..5ebecb7 100644 --- a/src/test/App.pages.test.jsx +++ b/src/test/App.pages.test.jsx @@ -130,6 +130,7 @@ describe('Chosen home page', () => { await renderApp(); await u.click(await screen.findByRole('button', { name: /account menu/i })); await u.click(await screen.findByRole('menuitem', { name: /settings/i })); + await u.click(await screen.findByRole('tab', { name: 'Preferences' })); const prefs = within(await screen.findByRole('region', { name: 'Preferences' })); await u.click(within(prefs.getByRole('group', { name: 'Home page' })).getByRole('button', { name: 'Reading Plans' })); expect(localStorage.getItem('start-page')).toBe('plans'); diff --git a/src/test/App.sync.test.jsx b/src/test/App.sync.test.jsx index d421602..66a87bb 100644 --- a/src/test/App.sync.test.jsx +++ b/src/test/App.sync.test.jsx @@ -169,6 +169,7 @@ describe('Preference sync', () => { async function openSettings(u) { await u.click(await screen.findByRole('button', { name: /account menu/i })); await u.click(await screen.findByRole('menuitem', { name: /settings/i })); + await u.click(await screen.findByRole('tab', { name: 'Preferences' })); return screen.findByRole('region', { name: 'Preferences' }); } diff --git a/src/utils/ntfyServer.js b/src/utils/ntfyServer.js new file mode 100644 index 0000000..f6abaa6 --- /dev/null +++ b/src/utils/ntfyServer.js @@ -0,0 +1,17 @@ +// The optional "ntfy server" box in Settings is the address of a custom ntfy server. It is easy to put the topic +// name there by mistake, so this checks what was typed and says what to do instead of leaving a server-side error. + +// -> { value, error }: value is the address to save ('' means the default, ntfy.sh); error is a plain-language message or '' +export function normalizeNtfyServer(input, topic = '') { + const typed = String(input ?? '').trim(); + if (!typed) return { value: '', error: '' }; + if (/^https?:\/\/\S+$/i.test(typed)) return { value: typed.replace(/\/+$/, ''), error: '' }; + if (typed.toLowerCase() === String(topic).trim().toLowerCase()) { + return { value: '', error: 'That’s your topic name. The topic goes in the Topic box; leave this one empty to use ntfy.sh.' }; + } + // an address typed without https://, like ntfy.example.com or 192.168.1.5:8080 + if (/^[\w.-]+\.[A-Za-z]{2,}(:\d+)?(\/\S*)?$/.test(typed) || /^\d{1,3}(\.\d{1,3}){3}(:\d+)?$/.test(typed)) { + return { value: `https://${typed.replace(/\/+$/, '')}`, error: '' }; + } + return { value: '', error: 'That doesn’t look like a server address. It’s only for your own ntfy server (for example https://ntfy.example.com). Leave it empty to use ntfy.sh.' }; +} diff --git a/src/utils/ntfyServer.test.js b/src/utils/ntfyServer.test.js new file mode 100644 index 0000000..58a6f76 --- /dev/null +++ b/src/utils/ntfyServer.test.js @@ -0,0 +1,23 @@ +import { test, expect } from 'vitest'; +import { normalizeNtfyServer } from './ntfyServer.js'; + +test('empty means the default server, and a full address is kept (without a trailing slash)', () => { + expect(normalizeNtfyServer('')).toEqual({ value: '', error: '' }); + expect(normalizeNtfyServer(' ')).toEqual({ value: '', error: '' }); + expect(normalizeNtfyServer('https://ntfy.example.com/')).toEqual({ value: 'https://ntfy.example.com', error: '' }); + expect(normalizeNtfyServer('http://192.168.1.5:8080')).toEqual({ value: 'http://192.168.1.5:8080', error: '' }); +}); + +test('an address typed without https:// gets one', () => { + expect(normalizeNtfyServer('ntfy.example.com')).toEqual({ value: 'https://ntfy.example.com', error: '' }); + expect(normalizeNtfyServer('ntfy.example.com:8443/')).toEqual({ value: 'https://ntfy.example.com:8443', error: '' }); + expect(normalizeNtfyServer('192.168.1.5:8080')).toEqual({ value: 'https://192.168.1.5:8080', error: '' }); +}); + +test('a topic name put in the server box is recognised and explained', () => { + const r = normalizeNtfyServer('bible-study-project', 'Bible-Study-Project'); + expect(r.value).toBe(''); + expect(r.error).toMatch(/your topic name/); + expect(normalizeNtfyServer('my-topic', 'other').error).toMatch(/doesn’t look like a server address/); + expect(normalizeNtfyServer('two words').error).not.toBe(''); +}); diff --git a/src/utils/passkeys.js b/src/utils/passkeys.js new file mode 100644 index 0000000..de20ad2 --- /dev/null +++ b/src/utils/passkeys.js @@ -0,0 +1,34 @@ +// Passkeys in the browser: ask the device (Face ID, fingerprint, security key) and pass the answer to the server. +import { browserSupportsWebAuthn, startAuthentication, startRegistration } from '@simplewebauthn/browser'; +import { passkeyAdd, passkeyAddOptions, passkeySignInOptions, passkeySignInVerify } from '../syncService.js'; + +// Passkeys only work on https:// (or localhost), and only in browsers that support them. +export function passkeysSupported() { + try { return typeof window !== 'undefined' && window.isSecureContext !== false && browserSupportsWebAuthn(); } catch { return false; } +} + +export function passkeyMessage(err) { + const name = err?.name ?? ''; + if (name === 'NotAllowedError' || name === 'AbortError') return 'That was cancelled or timed out. Try again.'; + if (name === 'InvalidStateError') return 'This device already has a passkey for your account.'; + if (name === 'SecurityError') return 'Passkeys need a secure (https) address.'; + return err?.message ? `That didn’t work: ${err.message}` : 'That didn’t work. Try again.'; +} + +/** Resolves { ok, data (the signed-in user) } or { ok: false, error }. */ +export async function signInWithPasskey() { + const opts = await passkeySignInOptions(); + if (!opts.ok) return opts; + let response; + try { response = await startAuthentication({ optionsJSON: opts.data }); } catch (err) { return { ok: false, error: passkeyMessage(err), cancelled: err?.name === 'NotAllowedError' }; } + return passkeySignInVerify(response); +} + +/** Creates a passkey on this device. Resolves { ok, data (the updated list) } or { ok: false, error }. */ +export async function addPasskeyHere(name) { + const opts = await passkeyAddOptions(); + if (!opts.ok) return opts; + let response; + try { response = await startRegistration({ optionsJSON: opts.data }); } catch (err) { return { ok: false, error: passkeyMessage(err) }; } + return passkeyAdd(response, name); +} diff --git a/src/utils/xrefMap.js b/src/utils/xrefMap.js new file mode 100644 index 0000000..4b5619a --- /dev/null +++ b/src/utils/xrefMap.js @@ -0,0 +1,89 @@ +// The cross-reference map: a chapter in the middle, the chapters it is linked to around it in rings, in Bible order, +// joined by lines that are heavier where there are more verse-to-verse links. Pure layout code (no drawing) so it can be tested. +import { bookOptions } from './bibleUtils.jsx'; +import { groupOfBook } from './bookCovers.js'; + +const ORDER = new Map(bookOptions.map((b, i) => [b.abbrev, i])); +const bookName = (abbrev) => bookOptions.find((b) => b.abbrev === abbrev)?.name ?? abbrev; +export const chapterId = (book, chapter) => `${book}.${chapter}`; + +// The API's { nodes: [{ id, book, name_en, chapter }], edges: [{ source, target, weight }] } -> a clean copy +export function parseGraph(data) { + const nodes = (Array.isArray(data?.nodes) ? data.nodes : []).filter((n) => n && typeof n.id === 'string' && n.book && Number.isFinite(Number(n.chapter))) + .map((n) => ({ id: n.id, book: n.book, chapter: Number(n.chapter), name: n.name_en || bookName(n.book) })); + const have = new Set(nodes.map((n) => n.id)); + const edges = (Array.isArray(data?.edges) ? data.edges : []).filter((e) => have.has(e?.source) && have.has(e?.target) && e.source !== e.target) + .map((e) => ({ source: e.source, target: e.target, weight: Math.max(1, Number(e.weight) || 1) })); + return { nodes, edges, truncated: !!data?.truncated }; +} + +const canonical = (a, b) => (ORDER.get(a.book) ?? 99) - (ORDER.get(b.book) ?? 99) || a.chapter - b.chapter; + +// How many chapter-to-chapter hops each chapter is from the centre (the centre is 0) +export function ringsFrom(nodes, edges, centerId) { + const next = new Map(nodes.map((n) => [n.id, []])); + for (const e of edges) { next.get(e.source)?.push(e.target); next.get(e.target)?.push(e.source); } + const ring = new Map([[centerId, 0]]); + const queue = [centerId]; + while (queue.length) { + const id = queue.shift(); + for (const other of next.get(id) ?? []) if (!ring.has(other)) { ring.set(other, ring.get(id) + 1); queue.push(other); } + } + return ring; +} + +// -> { nodes: [{ ...node, x, y, ring, weight, color, r }], edges: [{ ...edge, path, width, opacity }], size } +// Positions are in a square of `size` units with the centre in the middle. +export function layoutMap(graph, centerId, size = 700) { + const ring = ringsFrom(graph.nodes, graph.edges, centerId); + const maxRing = Math.max(1, ...ring.values()); + const radii = maxRing === 1 ? [0, 0.42] : maxRing === 2 ? [0, 0.24, 0.44] : [0, 0.18, 0.31, 0.44]; + const weightOf = new Map(graph.nodes.map((n) => [n.id, 0])); + for (const e of graph.edges) { weightOf.set(e.source, weightOf.get(e.source) + e.weight); weightOf.set(e.target, weightOf.get(e.target) + e.weight); } + const maxWeight = Math.max(1, ...[...weightOf.entries()].filter(([id]) => id !== centerId).map(([, w]) => w)); + + const byRing = new Map(); + for (const n of graph.nodes) { + const k = Math.min(ring.get(n.id) ?? maxRing, maxRing); + if (!byRing.has(k)) byRing.set(k, []); + byRing.get(k).push(n); + } + const placed = new Map(); + for (const [k, list] of byRing) { + list.sort(canonical); + list.forEach((n, i) => { + const angle = k === 0 ? 0 : -Math.PI / 2 + (2 * Math.PI * i) / list.length; + const radius = (radii[k] ?? 0.44) * size; + const w = weightOf.get(n.id); + placed.set(n.id, { + ...n, ring: k, weight: w, color: groupOfBook(n.book).colors[0], + x: size / 2 + Math.cos(angle) * radius, y: size / 2 + Math.sin(angle) * radius, + r: n.id === centerId ? 13 : 3 + 6 * Math.sqrt(w / maxWeight), + }); + }); + } + const maxEdge = Math.max(1, ...graph.edges.map((e) => e.weight)); + const edges = graph.edges.map((e) => { + const a = placed.get(e.source); + const b = placed.get(e.target); + const toCenter = e.source === centerId || e.target === centerId; + // lines to the middle are straight; the others bow toward the middle so they don't cross the rim + const c = toCenter ? null : { x: size / 2 + (a.x + b.x - size) * 0.18, y: size / 2 + (a.y + b.y - size) * 0.18 }; + return { + ...e, path: c ? `M${a.x.toFixed(1)},${a.y.toFixed(1)} Q${c.x.toFixed(1)},${c.y.toFixed(1)} ${b.x.toFixed(1)},${b.y.toFixed(1)}` : `M${a.x.toFixed(1)},${a.y.toFixed(1)} L${b.x.toFixed(1)},${b.y.toFixed(1)}`, + width: 0.6 + 2.4 * (e.weight / maxEdge), opacity: toCenter ? 0.25 + 0.5 * (e.weight / maxEdge) : 0.08 + 0.3 * (e.weight / maxEdge), + }; + }); + return { nodes: [...placed.values()], edges, size }; +} + +// The chapters linked to the centre, strongest first: [{ id, name, chapter, weight }] +export function linkedChapters(graph, centerId) { + const out = new Map(); + for (const e of graph.edges) { + const other = e.source === centerId ? e.target : e.target === centerId ? e.source : null; + if (other) out.set(other, (out.get(other) ?? 0) + e.weight); + } + const byId = new Map(graph.nodes.map((n) => [n.id, n])); + return [...out].map(([id, weight]) => ({ ...byId.get(id), weight })).sort((a, b) => b.weight - a.weight || canonical(a, b)); +} diff --git a/src/utils/xrefMap.test.js b/src/utils/xrefMap.test.js new file mode 100644 index 0000000..0f929d7 --- /dev/null +++ b/src/utils/xrefMap.test.js @@ -0,0 +1,65 @@ +import { test, expect } from 'vitest'; +import { chapterId, layoutMap, linkedChapters, parseGraph, ringsFrom } from './xrefMap.js'; + +const raw = { + nodes: [ + { id: 'GEN.1', book: 'GEN', name_en: 'Genesis', chapter: 1 }, + { id: 'PSA.104', book: 'PSA', name_en: 'Psalms', chapter: 104 }, + { id: 'JHN.1', book: 'JHN', name_en: 'John', chapter: 1 }, + { id: 'COL.1', book: 'COL', name_en: 'Colossians', chapter: 1 }, + { id: 'junk' }, null, + ], + edges: [ + { source: 'GEN.1', target: 'PSA.104', weight: 4 }, + { source: 'GEN.1', target: 'JHN.1', weight: 9 }, + { source: 'JHN.1', target: 'COL.1', weight: 2 }, + { source: 'GEN.1', target: 'NOPE.9', weight: 1 }, // points at a chapter that isn't in the picture + { source: 'GEN.1', target: 'GEN.1', weight: 5 }, // a chapter linked to itself + ], +}; + +test('the API\'s graph is cleaned: bad nodes, dangling and self links are dropped', () => { + const g = parseGraph(raw); + expect(g.nodes.map((n) => n.id)).toEqual(['GEN.1', 'PSA.104', 'JHN.1', 'COL.1']); + expect(g.edges).toHaveLength(3); + expect(parseGraph(null)).toEqual({ nodes: [], edges: [], truncated: false }); + expect(chapterId('GEN', 1)).toBe('GEN.1'); +}); + +test('chapters are placed in rings by how many links away they are', () => { + const g = parseGraph(raw); + const ring = ringsFrom(g.nodes, g.edges, 'GEN.1'); + expect([...ring]).toEqual([['GEN.1', 0], ['PSA.104', 1], ['JHN.1', 1], ['COL.1', 2]]); +}); + +test('the layout puts the centre in the middle and the rest around it in Bible order', () => { + const g = parseGraph(raw); + const map = layoutMap(g, 'GEN.1', 700); + const at = Object.fromEntries(map.nodes.map((n) => [n.id, n])); + expect(at['GEN.1']).toMatchObject({ x: 350, y: 350, ring: 0 }); + expect(at['PSA.104'].ring).toBe(1); + expect(at['COL.1'].ring).toBe(2); + // ring 1 is Psalms then John, starting at the top and going clockwise + expect(at['PSA.104'].y).toBeLessThan(350); + expect(at['JHN.1'].y).toBeGreaterThan(at['PSA.104'].y); + // every point is inside the square + expect(map.nodes.every((n) => n.x >= 0 && n.x <= 700 && n.y >= 0 && n.y <= 700)).toBe(true); + // heavier links are drawn heavier, and every line has a path + const heavy = map.edges.find((e) => e.weight === 9); + const light = map.edges.find((e) => e.weight === 2); + expect(heavy.width).toBeGreaterThan(light.width); + expect(map.edges.every((e) => e.path.startsWith('M'))).toBe(true); + expect(light.path).toContain('Q'); // a link that doesn't touch the middle bows toward it + expect(heavy.path).toContain('L'); +}); + +test('the linked chapters are listed strongest first', () => { + const g = parseGraph(raw); + expect(linkedChapters(g, 'GEN.1').map((c) => [c.id, c.weight])).toEqual([['JHN.1', 9], ['PSA.104', 4]]); +}); + +test('a map with only the centre, or nothing linked, still lays out', () => { + const lone = { nodes: [{ id: 'GEN.1', book: 'GEN', name: 'Genesis', chapter: 1 }], edges: [] }; + expect(layoutMap(lone, 'GEN.1').nodes).toHaveLength(1); + expect(layoutMap({ nodes: [], edges: [] }, 'GEN.1').nodes).toEqual([]); +});