Merge Feature/trial initiation (#3036)

* [SG-74] Trial Initiation Component with Vertical Stepper (#2913)

* Vertical stepper PoC

* Convert stepper css to tailwind

* trial component start

* trial component params

* tailwind-ify header

* Support teams, enterprise, and families layout param and more layout ui work

* Some more theming fixes

* Rename TrialModule to TrialInitiationModule

* Stepper fixes, plus more functionality demo

* Cleanup

* layout params and placeholders

* Only allow trial route to be hit if not logged in

* fix typo

* Use background-alt2 color for header

* Move vertical stepper out of trial-initiation

* Create components for the different plan types

* Remove width on steps

* Remove content projection for label

* Tailwind style fixes

* Extract step content into a component

* Remove layout param for now

* Remove step tags

* remove pointer classes from step button

* Remove most tailwind important designations

* Update apps/web/src/app/modules/vertical-stepper/vertical-step.component.ts

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Tailwind and layout fixes

* Remove container

* lint & prettier fixes

* Remove extra CdkStep declaration

* Styles fixes

* Style logo directly

* Remove 0 margin on image

* Fix tiling and responsiveness

* Minor padding fixes for org pages

* Update apps/web/src/app/modules/trial-initiation/trial-initiation.component.html

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* prettier fix

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* [SG-65] Reusable Registration Form (#2946)

* created reusable registration form

* fixed conflicts

* replicated reactive form changes in other clients

* removed comments

* client template cleanup

* client template cleanup

* removed comments in template file

* changed to component suffix

* switched show password to use component

* comments resolution

* comments resolution

* added toast disable functionality

* removed unused locale

* mode custom input validator generic

* fixed button

* fixed linter

* removed horizontal rule

* switched to button component

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: gbubemismith <gsmithwalter@gmail.com>

apps/browser/src/_locales/en/messages.json

@@ -423,10 +423,13 @@
   "invalidEmail": {
     "message": "Invalid email address."
   },
-  "masterPassRequired": {
+  "masterPasswordRequired": {
     "message": "Master password is required."
   },
-  "masterPassLength": {
+  "confirmMasterPasswordRequired": {
+    "message": "Master password retype is required."
+  },
+  "masterPasswordMinLength": {
     "message": "Master password must be at least 8 characters long."
   },
   "masterPassDoesntMatch": {
@@ -1480,7 +1483,7 @@
   "acceptPolicies": {
     "message": "By checking this box you agree to the following:"
   },
-  "acceptPoliciesError": {
+  "acceptPoliciesRequired": {
     "message": "Terms of Service and Privacy Policy have not been acknowledged."
   },
   "termsOfService": {

apps/browser/src/popup/accounts/register.component.html

@@ -1,4 +1,4 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" [formGroup]="formGroup">
   <header>
     <div class="left">
       <a routerLink="/home">{{ "cancel" | i18n }}</a>
@@ -18,16 +18,7 @@
       <div class="box-content">
         <div class="box-content-row" appBoxRow>
           <label for="email">{{ "emailAddress" | i18n }}</label>
-          <input
-            id="email"
-            type="text"
-            name="Email"
-            [(ngModel)]="email"
-            required
-            [appAutofocus]="email === ''"
-            inputmode="email"
-            appInputVerbatim="false"
-          />
+          <input id="email" type="email" formControlName="email" appInputVerbatim="false" />
         </div>
         <div class="box-content-row" appBoxRow>
           <div class="box-content-row-flex">
@@ -44,11 +35,8 @@
               <input
                 id="masterPassword"
                 type="{{ showPassword ? 'text' : 'password' }}"
-                name="MasterPassword"
                 class="monospaced"
-                [(ngModel)]="masterPassword"
-                required
-                [appAutofocus]="email !== ''"
+                formControlName="masterPassword"
                 appInputVerbatim
                 (input)="updatePasswordStrength()"
               />
@@ -60,7 +48,7 @@
                 appStopClick
                 appBlurClick
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                (click)="togglePassword(false)"
+                (click)="togglePassword()"
                 [attr.aria-pressed]="showPassword"
               >
                 <i
@@ -96,10 +84,8 @@
             <input
               id="masterPasswordRetype"
               type="{{ showPassword ? 'text' : 'password' }}"
-              name="MasterPasswordRetype"
               class="monospaced"
-              [(ngModel)]="confirmMasterPassword"
-              required
+              formControlName="confirmMasterPassword"
               appInputVerbatim
             />
           </div>
@@ -110,7 +96,7 @@
               appStopClick
               appBlurClick
               appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-              (click)="togglePassword(true)"
+              (click)="togglePassword()"
               [attr.aria-pressed]="showPassword"
             >
               <i
@@ -123,7 +109,7 @@
         </div>
         <div class="box-content-row" appBoxRow>
           <label for="hint">{{ "masterPassHint" | i18n }}</label>
-          <input id="hint" type="text" name="Hint" [(ngModel)]="hint" />
+          <input id="hint" type="text" formControlName="hint" />
         </div>
       </div>
       <div class="box-footer">
@@ -137,12 +123,7 @@
           class="box-content-row box-content-row-checkbox box-content-row-checkbox-left box-content-row-word-break"
           appBoxRow
         >
-          <input
-            type="checkbox"
-            id="acceptPolicies"
-            [(ngModel)]="acceptPolicies"
-            name="AcceptPolicies"
-          />
+          <input type="checkbox" id="acceptPolicies" formControlName="acceptPolicies" />
           <label for="acceptPolicies">
             {{ "acceptPolicies" | i18n }}<br />
             <a href="https://bitwarden.com/terms/" target="_blank" rel="noopener">{{

apps/browser/src/popup/accounts/register.component.ts

@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { RegisterComponent as BaseRegisterComponent } from "@bitwarden/angular/components/register.component";
@@ -6,6 +7,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuthService } from "@bitwarden/common/abstractions/auth.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
+import { FormValidationErrorsService } from "@bitwarden/common/abstractions/formValidationErrors.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { PasswordGenerationService } from "@bitwarden/common/abstractions/passwordGeneration.service";
@@ -18,6 +20,8 @@ import { StateService } from "@bitwarden/common/abstractions/state.service";
 })
 export class RegisterComponent extends BaseRegisterComponent {
   constructor(
+    formValidationErrorService: FormValidationErrorsService,
+    formBuilder: FormBuilder,
     authService: AuthService,
     router: Router,
     i18nService: I18nService,
@@ -30,6 +34,8 @@ export class RegisterComponent extends BaseRegisterComponent {
     logService: LogService
   ) {
     super(
+      formValidationErrorService,
+      formBuilder,
       authService,
       router,
       i18nService,