[SG-168] Passwordless login web MVP (#3424)

* passwordless login page redesign

* passwordless login page redesign

* restyled login form to use tailwind

* restyled login form to use tailwind

* moved texts on login device template to locales

* made reactive form changes for clients

* added request model

* made more changes

* added implmentation to auth request api

* fixed refrencing issue

* renamed model property

* Added resend notification functionality

* Added new file

* login with device first draft

* login with device first draft

* login with device first draft

* login with device first draft

* connection to anonymous hub

* connection to anonymous hub

* refactored confirm login response

* removed comment

* cleaned up login

* changed uptyped form builder

* changed uptyped form builder

* [SG-168] Update login strategy with passwordless login credentials.

* [SG-168] Removed logs. Changed inputs for passwordless logic strategy. Removed tokenRequestPasswordless it is using the same as password.

* code cleanup

* code cleanup

* removed login with device from self hosted

* fixed PR comments

* added module for login

* fixed post request bug

* added feature flag

* added feature flag

* added feature flag

Co-authored-by: André Bispo <abispo@bitwarden.com>

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

@@ -16,6 +16,7 @@
     #form
     (ngSubmit)="submit()"
     [appApiAction]="formPromise"
+    [formGroup]="formGroup"
     attr.aria-hidden="{{ showingModal }}"
   >
     <div id="content" class="content">
@@ -25,14 +26,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
-              appInputVerbatim="false"
-            />
+            <input id="email" type="email" formControlName="email" appInputVerbatim="false" />
           </div>
           <div class="box-content-row box-content-row-flex" appBoxRow>
             <div class="row-main">
@@ -40,10 +34,8 @@
               <input
                 id="masterPassword"
                 type="{{ showPassword ? 'text' : 'password' }}"
-                name="MasterPassword"
                 class="monospaced"
-                [(ngModel)]="masterPassword"
-                required
+                formControlName="masterPassword"
                 appInputVerbatim
               />
             </div>

apps/desktop/src/app/accounts/login.component.ts

@@ -1,4 +1,5 @@
 import { Component, NgZone, OnDestroy, ViewChild, ViewContainerRef } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { LoginComponent as BaseLoginComponent } from "@bitwarden/angular/components/login.component";
@@ -7,6 +8,7 @@ import { AuthService } from "@bitwarden/common/abstractions/auth.service";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { CryptoFunctionService } from "@bitwarden/common/abstractions/cryptoFunction.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 { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
@@ -47,7 +49,9 @@ export class LoginComponent extends BaseLoginComponent implements OnDestroy {
     private broadcasterService: BroadcasterService,
     ngZone: NgZone,
     private messagingService: MessagingService,
-    logService: LogService
+    logService: LogService,
+    formBuilder: FormBuilder,
+    formValidationErrorService: FormValidationErrorsService
   ) {
     super(
       authService,
@@ -59,7 +63,9 @@ export class LoginComponent extends BaseLoginComponent implements OnDestroy {
       passwordGenerationService,
       cryptoFunctionService,
       logService,
-      ngZone
+      ngZone,
+      formBuilder,
+      formValidationErrorService
     );
     super.onSuccessfulLogin = () => {
       return syncService.fullSync(true);