Merge Feature/trial initiation

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 @@ <h1 class="center">
       <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 @@ <h1 class="center">
               <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 @@ <h1 class="center">
                 appStopClick
                 appBlurClick
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                (click)="togglePassword(false)"
+                (click)="togglePassword()"
                 [attr.aria-pressed]="showPassword"
               >
                 <i
@@ -96,10 +84,8 @@ <h1 class="center">
             <input
               id="masterPasswordRetype"
               type="{{ showPassword ? 'text' : 'password' }}"
-              name="MasterPasswordRetype"
               class="monospaced"
-              [(ngModel)]="confirmMasterPassword"
-              required
+              formControlName="confirmMasterPassword"
               appInputVerbatim
             />
           </div>
@@ -110,7 +96,7 @@ <h1 class="center">
               appStopClick
               appBlurClick
               appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-              (click)="togglePassword(true)"
+              (click)="togglePassword()"
               [attr.aria-pressed]="showPassword"
             >
               <i
@@ -123,7 +109,7 @@ <h1 class="center">
         </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 @@ <h1 class="center">
           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,11 +1,13 @@
 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";
 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,

apps/desktop/src/app/accounts/register.component.html

@@ -1,19 +1,17 @@
-<form id="register-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+<form
+  id="register-page"
+  #form
+  (ngSubmit)="submit()"
+  [appApiAction]="formPromise"
+  [formGroup]="formGroup"
+>
   <div class="content">
     <h1>{{ "createAccount" | i18n }}</h1>
     <div class="box">
       <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 === ''"
-            appInputVerbatim
-          />
+          <input id="email" type="email" formControlName="email" appInputVerbatim />
         </div>
         <div class="box-content-row" appBoxRow>
           <div class="box-content-row-flex">
@@ -30,11 +28,8 @@ <h1>{{ "createAccount" | i18n }}</h1>
               <input
                 id="masterPassword"
                 type="{{ showPassword ? 'text' : 'password' }}"
-                name="MasterPassword"
                 class="monospaced"
-                [(ngModel)]="masterPassword"
-                required
-                [appAutofocus]="email !== ''"
+                formControlName="masterPassword"
                 (input)="updatePasswordStrength()"
                 appInputVerbatim
               />
@@ -46,7 +41,7 @@ <h1>{{ "createAccount" | i18n }}</h1>
                 appStopClick
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                 [attr.aria-pressed]="showPassword"
-                (click)="togglePassword(false)"
+                (click)="togglePassword()"
               >
                 <i
                   class="bwi bwi-lg"
@@ -81,10 +76,8 @@ <h1>{{ "createAccount" | i18n }}</h1>
             <input
               id="masterPasswordRetype"
               type="{{ showPassword ? 'text' : 'password' }}"
-              name="MasterPasswordRetype"
               class="monospaced"
-              [(ngModel)]="confirmMasterPassword"
-              required
+              formControlName="confirmMasterPassword"
               appInputVerbatim
             />
           </div>
@@ -95,7 +88,7 @@ <h1>{{ "createAccount" | i18n }}</h1>
               appStopClick
               appA11yTitle="{{ 'toggleVisibility' | i18n }}"
               [attr.aria-pressed]="showPassword"
-              (click)="togglePassword(true)"
+              (click)="togglePassword()"
             >
               <i
                 class="bwi bwi-lg"
@@ -107,7 +100,7 @@ <h1>{{ "createAccount" | i18n }}</h1>
         </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 class="box last" [hidden]="!showCaptcha()">
           <div class="box-content">
@@ -127,12 +120,7 @@ <h1>{{ "createAccount" | i18n }}</h1>
     </div>
     <div class="box last" *ngIf="showTerms">
       <div class="box-footer checkbox">
-        <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/desktop/src/app/accounts/register.component.ts

@@ -1,4 +1,5 @@
 import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { RegisterComponent as BaseRegisterComponent } from "@bitwarden/angular/components/register.component";
@@ -7,6 +8,7 @@ import { AuthService } from "@bitwarden/common/abstractions/auth.service";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.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";
@@ -21,6 +23,8 @@ const BroadcasterSubscriptionId = "RegisterComponent";
 })
 export class RegisterComponent extends BaseRegisterComponent implements OnInit, OnDestroy {
   constructor(
+    formValidationErrorService: FormValidationErrorsService,
+    formBuilder: FormBuilder,
     authService: AuthService,
     router: Router,
     i18nService: I18nService,
@@ -35,6 +39,8 @@ export class RegisterComponent extends BaseRegisterComponent implements OnInit,
     logService: LogService
   ) {
     super(
+      formValidationErrorService,
+      formBuilder,
       authService,
       router,
       i18nService,

apps/desktop/src/locales/en/messages.json

@@ -532,10 +532,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": {
@@ -1543,7 +1546,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."
   },
   "enableBrowserIntegration": {