Initial work on a new Security Checkup feature. #3792313

Created on 2020-06-10, translation required by 2020-06-14 (1463 days ago.)

Translations Glossary

Original string	ar	de	es	fr	he	id	it	ja	ko	nl	pt-br	ru	sv	tr	zh-cn	zh-tw
You do not have any connected applications.	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
You currently have %(numberOfApps)d connected application.	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
Your account email address is {{strong}}%(emailAddress)s{{/strong}}, but is not verified yet.	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
Your account email address is {{strong}}%(emailAddress)s{{/strong}}.	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
Account Email	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
You do not have a recovery email address.	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
You still need to verify your recovery email address: {{strong}}%(recoveryEmailAddress)s{{/strong}}	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
You have set {{strong}}%(recoveryEmailAddress)s{{/strong}} as your recovery email address.	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
You do not have a recovery SMS number.	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
You still need to verify your recovery SMS number: {{strong}}%(recoveryPhoneNumber)s{{/strong}}	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
You have set {{strong}}%(recoveryPhoneNumber)s{{/strong}} as your recovery SMS number.	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
Recovery SMS Number	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
You have two-step authentication {{strong}}enabled{{/strong}} using an app.	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
You have two-step authentication {{strong}}enabled{{/strong}} using SMS messages to {{strong}}%(phoneNumber)s{{/strong}}.	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑
You do not have two-step authentication enabled.	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑	☑

Description

Changes proposed in this Pull Request

This PR sets the groundwork for a new Security Checkup feature (described here), which is currently set up behind the security/security-checkup feature flag, which is limited to dev environments for now.

The goal is to show a quick overview of a user’s security and account recovery settings. For now, this initial PR does not represent a wrapped product, but a basic skeleton to support further iteration.

At present, this PR includes the following items:

Create SecurityCheckupComponent with basic styling and wire it into the security nav
Wire in the following links and basic assessments:
- Account email
- 2FA configuration
- Recovery email
- Recovery phone/SMS number
- Connected apps

Open issues

I’ll address these in subsequent iterations/PRs.

The security nav is now using a dropdown instead of a tab-like view due to the additional menu item
The wording almost certainly needs additional love/attention
Maybe add in a row for password details — not quite sure what ought to go in here
Add in a row for social logins
Consider using different/better icons, possibly with colours – I just picked some existing icons as a starting point
Clean up the use of userSettings and the 2FA logic, including expanding the assessment to include backup codes
General event tracking/logging
Most bugs! 😁 I suspect there are some with the 2FA handling, as that seemed the most likely to be buggy.

Side note: A huge 🎩 to @fditrapani! I cribbed his designs for the new domain settings UI for the basic layout, as the core UX in the two screens is very similar.

Testing instructions

Verify that the feature flag is working and does not expose the new UI when not in a dev environment.
With the feature flag on, verify that the following work:
- All of the rows render correct information and an appropriate icon
- Clicking on each row navigates to the correct target UI

Relates to #26874, though it doesn’t directly address all of the items in the issue yet.

Unfortunately, no screenshots were provided by the developer.

Show less Show more | Github Pull request