docs: refresh screenshots — v1-polish + 2FA features#15
Merged
Conversation
The static mockups under docs/preview/ had been promising for several PRs to track the latest live DOM, but the screenshot regeneration kept slipping. Refreshing now to cover everything that's landed since the storage feature: ## Refreshed (existing files updated to match the live DOM) - **vault.html / vault.png** — adds the per-row ✎ Edit icon next to the ✕ Delete, the ↥ Import button in the headrow next to + New credential, and Settings · Export links in the user card. - **vault-add.html / vault-add.png** — switched the example credential from Postgres to SSH so the new SSH private-key (PEM) textarea shows; the password generator popover is open with a 24-char excellent-strength sample so the meter + checkboxes are visible. ## New mockups + screenshots - **login-otp.png** — phase-2 of two-step login (the "Two-factor verification" screen). - **settings-2fa-off.png** — Settings with 2FA disabled (the entry point for the setup flow). - **settings-2fa-setup-qr.png** — Step 1 of setup, the modal showing a real-generated QR + manual-entry fallback. - **settings-2fa-setup-recovery.png** — Step 3, the recovery-codes list with the warning copy and Copy / Download actions. - **settings-2fa-on.png** — Settings with 2FA enabled, recovery-code count visible. Reused the same self-contained pattern as the existing previews: each HTML file `<link>`s the live `packages/web/src/styles.css` so the rendering matches the React app byte-for-byte. The QR is a real SVG generated from the `qrcode` npm lib (the same one the live app uses) so it's a scannable code, not a placeholder. ## README - Hero shot updated to the refreshed vault.png (now showing Edit / Import / Settings). - New paragraph + screenshot for the 2FA feature. ## USER_GUIDE.md - §5g (Two-factor authentication) reorganised to weave in five screenshots inline with the prose, walking the reader through the full setup flow + the post-setup login OTP step. - Updated the alt text on vault-add.png to match the new SSH + password-generator content. Preview index updated to link the new files. The reproducibility one-liner in `docs/USER_GUIDE.md` already covers the new files via the glob loop. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The static preview mockups + screenshots fell behind the live UI across several PRs (#10–#13). Refreshing now to match what's actually shipping.
Refreshed (3 existing screenshots, 2 mockups)
vault.pngvault-add.pngNew (6 mockups, 5 screenshots — the 2FA flow)
login-otp.pngsettings-2fa-off.pngsettings-2fa-setup-qr.pngsettings-2fa-setup-recovery.pngsettings-2fa-on.pngThe QR in the setup mockup is a real SVG generated from the same
qrcodenpm library the live app uses — scannable, not a placeholder.Files
docs/preview/docs/img/docs/preview/index.html— links the 5 new mockupsREADME.md— updated hero alt-text + new 2FA paragraph + screenshotdocs/USER_GUIDE.md— §5g (Two-factor authentication) reorganised to weave the 5 new screenshots inline with the setup walkthroughTotal: 18 files changed, 407 insertions, 34 deletions.
Reproducibility
The existing
docs/preview/server.mjs+ Chrome-headless one-liner underdocs/USER_GUIDE.md"Reproducing the screenshots" cover all the new files via the glob loop — no separate process to maintain.🤖 Generated with Claude Code