Empty state for popup
For the main site's password and group lists, we have empty states to help guide new users. Code example We also have a state for after the user adds the first secret.
We want that, but in the popup. It's possible that someone can discover and register for Passit entirely in the extension, so we need to provide a good experience.
Here are my designs:
Empty state for popup; zero secrets
Notes:
- That yellow dot is meant to be an extra visual cue to encourage the user to click into the full tab. We have something similar in the main tab's navbar that goes next to "Groups" when there are group invites.
- The importer link should go to our import page in a full tab.
- Disable the search field when there are zero passwords.
One-secret state for popup; first secret has a URL
Notes:
- Those icons are embedded differently for the popup than elsewhere through the site. Take a look at popup-item.component.html to see how they are used.
- This case is invoked if the first secret has a URL. If not, do the next screenshot.
One-secret state for popup; first secret has a URL
General tips and notes:
- Note the
ngIf
logic for the list view onboarding. We didn't want the onboarding stuff to show when the New Password from was showing, and we didn't want it to flash in and out while the page was loading (and zero secrets were showing as a result). The former isn't relevant to the popup, the latter might be. - You can go to localhost:4200/popup to view and edit the popup. You'll want to try everything in the extension before you wrap up, but /popup is a faster way to work.
Edited by Brendan Berkley