From a6b87bf5019e05d103d229ef910e40b3c1703da0 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Wed, 4 Apr 2018 16:29:43 -0400
Subject: [PATCH] u2f support on 2fa page

---
 jslib                                         |  2 +-
 src/_locales/en/messages.json                 |  3 ++
 src/popup2/accounts/two-factor.component.html | 44 ++++++++++++++-----
 src/popup2/accounts/two-factor.component.ts   |  6 ++-
 src/scss/box.scss                             |  4 ++
 src/scss/misc.scss                            | 21 ++++++++-
 6 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/jslib b/jslib
index f673bd62d7a..013bf20a35c 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit f673bd62d7abb773fa5a6abfb5307b7c3feca59b
+Subproject commit 013bf20a35c74383389337ac2c5ae9ac19a0bba7
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index fba05c0e714..0cb4c619408 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -1049,5 +1049,8 @@
   "organization": {
     "message": "Organization",
     "description": "An entity of multiple related people (ex. a team or business organization)."
+  },
+  "loading": {
+    "message": "Loading..."
   }
 }
diff --git a/src/popup2/accounts/two-factor.component.html b/src/popup2/accounts/two-factor.component.html
index c744d34d683..4ce0377eebe 100644
--- a/src/popup2/accounts/two-factor.component.html
+++ b/src/popup2/accounts/two-factor.component.html
@@ -1,7 +1,7 @@
 <form id="two-factor-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
     <header>
         <div class="left">
-            <a routerLink="/login">{{'cancel' | i18n}}</a>
+            <a routerLink="/login">{{'back' | i18n}}</a>
         </div>
         <div class="center">
             <span class="title">{{title}}</span>
@@ -17,13 +17,15 @@
     </header>
     <ng-container *ngIf="selectedProviderType === providerType.Authenticator ||
                   selectedProviderType === providerType.Email">
-        <div class="content">
-            <p *ngIf="selectedProviderType === providerType.Authenticator">{{'enterVerificationCodeApp' | i18n}}</p>
-            <p *ngIf="selectedProviderType === providerType.Email">
+        <div class="content text-center">
+            <span *ngIf="selectedProviderType === providerType.Authenticator">
+                {{'enterVerificationCodeApp' | i18n}}
+            </span>
+            <span *ngIf="selectedProviderType === providerType.Email">
                 {{'enterVerificationCodeEmail' | i18n : twoFactorEmail}}
-            </p>
+            </span>
         </div>
-        <div class="box">
+        <div class="box first">
             <div class="box-content">
                 <div class="box-content-row" appBoxRow>
                     <label for="code">{{'verificationCode' | i18n}}</label>
@@ -37,11 +39,11 @@
         </div>
     </ng-container>
     <ng-container *ngIf="selectedProviderType === providerType.Yubikey">
-        <div class="content">
+        <div class="content text-center">
             <p>{{'insertYubiKey' | i18n}}</p>
             <img src="../images/yubikey.jpg" class="img-rounded img-responsive" alt="">
         </div>
-        <div class="box">
+        <div class="box first">
             <div class="box-content">
                 <div class="box-content-row" appBoxRow>
                     <label for="code" class="sr-only">{{'verificationCode' | i18n}}</label>
@@ -54,6 +56,23 @@
             </div>
         </div>
     </ng-container>
+    <ng-container *ngIf="selectedProviderType === providerType.U2f">
+        <div class="content text-center">
+            <span *ngIf="!u2fReady">{{'loading' | i18n}}</span>
+            <div *ngIf="u2fReady">
+                <p>{{'insertU2f' | i18n}}</p>
+                <img src="../images/u2fkey.jpg" alt="" class="img-rounded img-responsive" />
+            </div>
+        </div>
+        <div class="box first">
+            <div class="box-content">
+                <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                    <label for="remember">{{'rememberMe' | i18n}}</label>
+                    <input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
+                </div>
+            </div>
+        </div>
+    </ng-container>
     <ng-container *ngIf="selectedProviderType === providerType.Duo ||
                         selectedProviderType === providerType.OrganizationDuo">
         <div id="duo-frame"><iframe id="duo_iframe"></iframe></div>
@@ -66,18 +85,19 @@
             </div>
         </div>
     </ng-container>
-    <div class="content" *ngIf="selectedProviderType == null">
+    <div class="content text-center" *ngIf="selectedProviderType == null">
         <p>{{'noTwoStepProviders' | i18n}}</p>
         <p>{{'noTwoStepProviders2' | i18n}}</p>
     </div>
-    <div class="content">
-        <p class="text-center">
+    <div class="content no-vpad text-center" *ngIf="selectedProviderType != null">
+        <p>
             <a href="#" appStopClick (click)="anotherMethod()">{{'useAnotherTwoStepMethod' | i18n}}</a>
         </p>
-        <p class="text-center" *ngIf="selectedProviderType === providerType.Email">
+        <p *ngIf="selectedProviderType === providerType.Email">
             <a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise">
                 {{'sendVerificationCodeEmailAgain' | i18n}}
             </a>
         </p>
     </div>
 </form>
+<iframe id="u2f_iframe" hidden></iframe>
diff --git a/src/popup2/accounts/two-factor.component.ts b/src/popup2/accounts/two-factor.component.ts
index 4cbbfe9b93b..b01047b8fce 100644
--- a/src/popup2/accounts/two-factor.component.ts
+++ b/src/popup2/accounts/two-factor.component.ts
@@ -9,6 +9,7 @@ import { Angulartics2 } from 'angulartics2';
 
 import { ApiService } from 'jslib/abstractions/api.service';
 import { AuthService } from 'jslib/abstractions/auth.service';
+import { EnvironmentService } from 'jslib/abstractions/environment.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
@@ -23,9 +24,10 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
     constructor(authService: AuthService, router: Router,
         analytics: Angulartics2, toasterService: ToasterService,
         i18nService: I18nService, apiService: ApiService,
-        platformUtilsService: PlatformUtilsService, syncService: SyncService) {
+        platformUtilsService: PlatformUtilsService, syncService: SyncService,
+        environmentService: EnvironmentService) {
         super(authService, router, analytics, toasterService, i18nService, apiService,
-            platformUtilsService, syncService);
+            platformUtilsService, syncService, window, environmentService);
     }
 
     anotherMethod() {
diff --git a/src/scss/box.scss b/src/scss/box.scss
index d9677d0b7cc..25d35fe43ff 100644
--- a/src/scss/box.scss
+++ b/src/scss/box.scss
@@ -4,6 +4,10 @@
     width: 100%;
     margin: 10px 0;
 
+    &.first {
+        margin-top: 0;
+    }
+
     .box-header {
         margin: 0 10px 5px 10px;
         color: $gray-light;
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index dc95c6336c4..d09c3ab2e1b 100644
--- a/src/scss/misc.scss
+++ b/src/scss/misc.scss
@@ -32,6 +32,16 @@ small {
     margin: 0 !important;
 }
 
+.no-vmargin {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+
+.no-vpad {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
 [hidden] {
     display: none !important;
 }
@@ -62,7 +72,16 @@ small {
 }
 
 #duo-frame {
-    // TODO
+    background: url('../popup2/images/loading.svg') 0 0 no-repeat;
+    width: 100%;
+    height: 470px;
+    margin-bottom: -10px;
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
 }
 
 app-root > #loading {