Auth/PM-7324 - Registration with Email Verification - Registration Start Component Implementation

[JaredSnider-Bitwarden]

🎟️ Tracking

PM-7324

Associated server PR: bitwarden/server#4173

📔 Objective

To implement the business logic of the first component in the new registration with email verification feature. This also includes redesigning the registration start component to have implicit consent to our privacy policy and terms of service while providing a mechanism for opting in or out to receiving marketing emails.

Tools & Admin Console team changes

• I've had to change the register route in a few components to route to the new /signup route or the existing /register route based on the email verification feature flag.

📸 Screenshots

Storybook

Web

Note: the local environment is a special, JSON configured additional env. As such, it is not treated as a self hosted env, and the registration start component shows the receive marketing emails checkbox as it is only hidden on self hosted. This is only a web specific configuration inconsistency, but we didn't want to add conditionals to check if the env was dev and coerce it to treat it as self hosted so that it would be easier to locally test the receive marketing emails checkbox + putting dev env checks into prod code should probably be avoided.

Email Verification Required - New User

Note: in this scenario, new and existing users get the exact same experience to avoid account enumeration.

PM-7324.-.Web.-.Email.Verification.-.Registration.Start.-.Email.Verification.required.mov

Email Verification Not Required - New User

PM-7324.-.Web.-.Email.Verification.-.Registration.Start.-.Email.Verification.not.required.mov

Email Verification Not Required - Existing user

PM-7324.-.Web.-.Email.Verification.-.Registration.Start.-.Email.Verification.not.required.-.existing.user.mov

Browser Extension

Email Verification Required - New User

PM-7324.-.Browser.Extension.-.Email.Verification.-.Registration.Start.-.Email.Verification.required.mov

Email Verification Not Required - New User

PM-7324.-.Browser.Extension.-.Email.Verification.-.Registration.Start.-.Email.Verification.not.required.mov

Desktop

Email Verification Required - New User

PM-7324.-.Desktop.-.Email.Verification.-.Registration.Start.-.Email.Verification.required.mov

Email Verification Not Required - New User

PM-7324.-.Desktop.-.Email.Verification.-.Registration.Start.-.Email.Verification.not.required.mov

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[codecov]

Codecov Report

Attention: Patch coverage is 2.20588% with 133 lines in your changes missing coverage. Please review.

Project coverage is 28.69%. Comparing base (2333059) to head (31ba034).
Report is 7 commits behind head on main.

Files	Patch %	Lines
...gular/anon-layout/anon-layout-wrapper.component.ts	0.00%	25 Missing ⚠️
...registration-start/registration-start.component.ts	0.00%	21 Missing ⚠️
...bs/common/src/auth/services/account-api.service.ts	0.00%	12 Missing ⚠️
...ganization-invite/accept-organization.component.ts	0.00%	9 Missing ⚠️
apps/browser/src/auth/popup/home.component.ts	0.00%	7 Missing ⚠️
apps/web/src/app/tools/send/access.component.ts	0.00%	7 Missing ⚠️
...ibs/angular/src/auth/components/login.component.ts	0.00%	7 Missing ⚠️
...on-start/registration-start-secondary.component.ts	0.00%	7 Missing ⚠️
apps/web/src/app/common/base.accept.component.ts	28.57%	5 Missing ⚠️
...gistration-finish/registration-finish.component.ts	0.00%	5 Missing ⚠️
... and 13 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9573      +/-   ##
==========================================
- Coverage   28.72%   28.69%   -0.03%     
==========================================
  Files        2497     2499       +2     
  Lines       72656    72766     +110     
  Branches    13542    13565      +23     
==========================================
+ Hits        20867    20877      +10     
- Misses      50187    50286      +99     
- Partials     1602     1603       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Checkmarx One – Scan Summary & Details – 4ed99342-bdee-446c-9a07-141ed0efbfac

New Issues

Severity	Issue	Source File / Package	Checkmarx Insight
	Angular_Improper_Type_Pipe_Usage	/apps/web/src/app/tools/send/access.component.html: [51](https://github.com/bitwarden/clients/blob/auth/pm-7324/email-verification-registration-start-implementation//apps/web/src/app/tools/send/access.component.html# L51)	Attack Vector
	Angular_Improper_Type_Pipe_Usage	/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html: [36](https://github.com/bitwarden/clients/blob/auth/pm-7324/email-verification-registration-start-implementation//bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html# L36)	Attack Vector
	Angular_Improper_Type_Pipe_Usage	/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html: [30](https://github.com/bitwarden/clients/blob/auth/pm-7324/email-verification-registration-start-implementation//bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html# L30)	Attack Vector
	Angular_Improper_Type_Pipe_Usage	/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html: [1](https://github.com/bitwarden/clients/blob/auth/pm-7324/email-verification-registration-start-implementation//bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html# L1)	Attack Vector

[jlf0dev]

Great work! Had a few questions