[SG-168] Passwordless login web MVP

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

@@ -1,4 +1,4 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" [formGroup]="formGroup">
   <header>
     <div class="left">
       <button type="button" routerLink="/home">{{ "cancel" | i18n }}</button>
@@ -18,26 +18,16 @@ <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
-            inputmode="email"
-            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">
             <label for="masterPassword">{{ "masterPass" | i18n }}</label>
             <input
               id="masterPassword"
               type="{{ showPassword ? 'text' : 'password' }}"
-              name="MasterPassword"
               class="monospaced"
-              [(ngModel)]="masterPassword"
-              required
+              formControlName="masterPassword"
               appInputVerbatim
             />
           </div>

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

@@ -1,10 +1,12 @@
 import { Component, NgZone } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { LoginComponent as BaseLoginComponent } from "@bitwarden/angular/components/login.component";
 import { AuthService } from "@bitwarden/common/abstractions/auth.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 { PasswordGenerationService } from "@bitwarden/common/abstractions/passwordGeneration.service";
@@ -30,7 +32,9 @@ export class LoginComponent extends BaseLoginComponent {
     protected cryptoFunctionService: CryptoFunctionService,
     syncService: SyncService,
     logService: LogService,
-    ngZone: NgZone
+    ngZone: NgZone,
+    formBuilder: FormBuilder,
+    formValidationErrorService: FormValidationErrorsService
   ) {
     super(
       authService,
@@ -42,7 +46,9 @@ export class LoginComponent extends BaseLoginComponent {
       passwordGenerationService,
       cryptoFunctionService,
       logService,
-      ngZone
+      ngZone,
+      formBuilder,
+      formValidationErrorService
     );
     super.onSuccessfulLogin = async () => {
       await syncService.fullSync(true);

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,25 +26,16 @@
         <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">
               <label for="masterPassword">{{ "masterPass" | i18n }}</label>
               <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);

apps/web/config/base.json

@@ -10,5 +10,7 @@
     "port": 8080,
     "allowedHosts": "auto"
   },
-  "flags": {}
+  "flags": {
+    "showPasswordless": false
+  }
 }

apps/web/config/cloud.json

@@ -16,6 +16,7 @@
     "proxyEvents": "https://events.bitwarden.com"
   },
   "flags": {
-    "showTrial": true
+    "showTrial": true,
+    "showPasswordless": false
   }
 }

apps/web/config/development.json

@@ -10,6 +10,7 @@
     "proxyNotifications": "http://localhost:61840"
   },
   "flags": {
-    "showTrial": true
+    "showTrial": true,
+    "showPasswordless": true
   }
 }

apps/web/config/qa.json

@@ -10,6 +10,7 @@
     "proxyEvents": "https://events.qa.bitwarden.pw"
   },
   "flags": {
-    "showTrial": true
+    "showTrial": true,
+    "showPasswordless": true
   }
 }

apps/web/config/selfhosted.json

@@ -7,6 +7,7 @@
     "port": 8081
   },
   "flags": {
-    "showTrial": false
+    "showTrial": false,
+    "showPasswordless": false
   }
 }

apps/web/src/app/accounts/login/login-with-device.component.html

@@ -0,0 +1,44 @@
+<div
+  class="tw-mx-auto tw-mt-5 tw-flex tw-max-w-lg tw-flex-col tw-items-center tw-justify-center tw-p-8"
+>
+  <div>
+    <img class="logo logo-themed" alt="Bitwarden" />
+    <p class="tw-mx-4 tw-mt-3 tw-mb-4 tw-text-center tw-text-xl">
+      {{ "loginOrCreateNewAccount" | i18n }}
+    </p>
+
+    <div
+      class="tw-mt-3 tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-6"
+    >
+      <h2 class="tw-mb-6 tw-text-xl tw-font-semibold">{{ "logInInitiated" | i18n }}</h2>
+
+      <div class="tw-text-light">
+        <p class="tw-mb-6">{{ "notificationSentDevice" | i18n }}</p>
+
+        <p class="tw-mb-6">
+          {{ "fingerprintMatchInfo" | i18n }}
+        </p>
+      </div>
+
+      <div class="tw-mb-6">
+        <h4 class="tw-font-semibold">{{ "fingerprintPhraseHeader" | i18n }}</h4>
+        <p>
+          <code>{{ passwordlessRequest?.fingerprintPhrase }}</code>
+        </p>
+      </div>
+
+      <div class="tw-my-10" *ngIf="showResendNotification">
+        <a [routerLink]="[]" disabled="true" (click)="startPasswordlessLogin()">{{
+          "resendNotification" | i18n
+        }}</a>
+      </div>
+
+      <hr />
+
+      <div class="tw-text-light tw-mt-3">
+        {{ "loginWithDevciceEnabledInfo" | i18n }}
+        <a routerLink="/login">{{ "viewAllLoginOptions" | i18n }}</a>
+      </div>
+    </div>
+  </div>
+</div>