trackslash
VAULT-71 P2

App Lock Password setup doesn't look like the lock screen it unlocks (and audit similar surfaces)

0
All issues

Description

Problem

The icon and UI for setting the App Lock Password (the encryption password) don't match the UI where you later enter it to unlock Vault. Setting it up and using it look like two unrelated features, so it isn't obvious that the password you set here is the one the lock screen asks for.

  • Setting it: AppLockPasswordFormView (.set purpose) is a standard Form sheet with a BackupHeroHeader using the ellipsis.rectangle.fill symbol in the accent colour. The same symbol is on the "App Lock Password" row in AppLockSettingsSection and the header of AppLockPasswordSheet.
  • Unlocking: AppLockView is the vault door scene (AppLockBackdrop) with the title "Vault Locked" and a glass capsule SecureField. It doesn't use ellipsis.rectangle.fill or anything else from the setup screen.

Scope

  1. Decide on one visual identity for the App Lock Password and use it on both the setup and unlock sides. For example, the setup/change header could pick up the vault door or lock motif, or the lock screen's password step could use the same symbol and colour as Settings. This ticket leaves the design choice open.
  2. Audit similar surfaces for the same kind of mismatch, where the screen that sets something up and the screen that uses it look unrelated. Fix any small ones as part of this ticket and file follow-ups for anything bigger. Check at least:
    • The rest of the App Lock Password flow: the Change, Turn Off, duress password, Erase After N Failed Passwords and Turn Off Erasing headers in AppLockPasswordFormView, the rows in AppLockPasswordSheet, and the "App Lock" / "Require Unlock" rows in AppLockSettingsSection.
    • The lock screen states: the Face ID / Touch ID step, the password step, the wrong-password and wait messages, and the "needs the app" state.
    • The backup password: setting or changing it (BackupKeyChangeView) against entering it on restore (BackupRestoreView), plus the other BackupHeroHeader screens (export, PDF, auto backup).
    • InterruptedEraseView: does it match the erase settings that lead to it?
    • AutoFill: any place the extension asks to unlock or points you to the app.
    • The same symbol used for different meanings, or one meaning shown with different symbols, across Settings.

Done when

  • Setting, changing and entering the App Lock Password read as one feature: a consistent icon, colour and wording.
  • The audit's findings are written up as a comment here, each one either fixed in the PR or linked to a follow-up issue.
  • Snapshot tests for the affected screens are re-recorded.

Linked issues

1
Relates to VAULT-77 P2 Make the import flow look like the other backup screens Done

Sub-issues

0

GitHub

0

No branches or pull requests linked.

Comments

1
Bradley

Fixed in https://github.com/badbundle/vault-app/pull/664 (merged as 58756f29).

Design choice

The App Lock Password's mark is the lock screen's own vault door (AppLockPasswordMark):

  • Headers: Set, Change, the password's sheet, and the Set and Changed done screens draw the door as the lock screen does.
  • Rows: the Settings row and the sheet's Change Password row show it in white on the Security section's green tile.
  • Buttons: Set and Change use a lock, not the backup password's shield.
  • Wording: already matched ("App Lock Password" and "Enter your App Lock Password").

Audit findings

Each item is fixed in the PR unless it says otherwise.

  1. The rest of the flow:
    • Turn Off, Duress, Erase and Turn Off Erasing already used the same symbol in their row and header.
    • The Duress and Erasing done screens borrowed the backup password's checkmark.shield; each now uses its own flow's symbol, as Turn Off did.
    • "App Lock" and "Require Unlock" are fine.
  2. Lock screen states (Face ID step, password step, wrong password, waiting, needs the app, no passcode): all the door, "Vault Locked" and "App Lock Password". Nothing to fix.
  3. Backup password:
    • It had a key on the Backups, Export and Auto-Backup rows, a shield on the Set screen, and a locked document on Decrypt Backup, where it's entered on restore.
    • It's now the shield throughout, matching its status row and done screen.
  4. Other BackupHeroHeader screens (Export, Restore, PDF, Auto-Backup): each matches the Backups row that opens it. Nothing to fix.
  5. InterruptedEraseView: it had an orange warning triangle; it's now the red trash of the erase settings and the Danger Zone.
  6. AutoFill: its lock gate uses the same door and wording as the lock screen. Nothing to fix.
  7. Symbols with two meanings:
    • "Keep it somewhere safe" shared lock.doc.fill with Lock New Items; it's now a written-password symbol.
    • The privacy policy shared lock.fill with App Lock; it's now hand.raised.fill.
    • Considered and left: Unlock (open lock) and Authenticate (key) both mean Face ID or passcode, but their wording differs and neither clashes with a password any more.

No follow-ups needed: everything found was a symbol change. 79 snapshots are re-recorded and checked, light and dark.