PM-1049 - Web/Browser/Desktop LoginDecryptionOptions - (1) Wire up approval buttons (2) Add conditional margins (3) Loading spinner added (4) Display userEmail + "not you" logout link

apps/browser/src/auth/popup/login-decryption-options/login-decryption-options.component.html

@@ -6,40 +6,72 @@
   </header>
 
   <div class="content login-page">
-    <div class="standard-x-margin">
-      <p class="lead">{{ "logInInitiated" | i18n }}</p>
-      <h6 class="standard-bottom-margin">{{ "deviceApprovalRequired" | i18n }}</h6>
+    <div class="full-loading-spinner" *ngIf="loading">
+      <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
     </div>
 
-    <form
-      id="rememberDeviceForm"
-      class="standard-bottom-margin standard-x-margin"
-      [formGroup]="rememberDeviceForm"
-    >
-      <div class="">
-        <input
-          type="checkbox"
-          id="rememberDevice"
-          name="rememberDevice"
-          formControlName="rememberDevice"
-        />
-        <label for="rememberDevice">
-          {{ "rememberThisDevice" | i18n }}
-        </label>
-        <p id="rememberThisDeviceHintText">{{ "uncheckIfPublicDevice" | i18n }}</p>
+    <ng-container *ngIf="!loading">
+      <div class="standard-x-margin">
+        <p class="lead">{{ "logInInitiated" | i18n }}</p>
+        <h6 class="mb-20px">{{ "deviceApprovalRequired" | i18n }}</h6>
       </div>
-    </form>
 
-    <div class="box">
-      <button type="button" class="btn primary block btn-bottom-margin">
-        <b>{{ "approveFromYourOtherDevice" | i18n }}</b>
-      </button>
-      <button type="button" class="btn block btn-bottom-margin">
-        {{ "requestAdminApproval" | i18n }}
-      </button>
-      <button type="button" class="btn block">
-        {{ "approveWithMasterPassword" | i18n }}
-      </button>
-    </div>
+      <form
+        id="rememberDeviceForm"
+        class="mb-20px standard-x-margin"
+        [formGroup]="rememberDeviceForm"
+      >
+        <div class="">
+          <input
+            type="checkbox"
+            id="rememberDevice"
+            name="rememberDevice"
+            formControlName="rememberDevice"
+          />
+          <label for="rememberDevice">
+            {{ "rememberThisDevice" | i18n }}
+          </label>
+          <p id="rememberThisDeviceHintText">{{ "uncheckIfPublicDevice" | i18n }}</p>
+        </div>
+      </form>
+
+      <div class="box mb-20px">
+        <button
+          *ngIf="showApproveFromOtherDeviceBtn"
+          (click)="approveFromOtherDevice()"
+          type="button"
+          class="btn primary block"
+          [ngClass]="{
+            'btn-bottom-margin': showReqAdminApprovalBtn || showApproveWithMasterPasswordBtn
+          }"
+        >
+          <b>{{ "approveFromYourOtherDevice" | i18n }}</b>
+        </button>
+        <button
+          *ngIf="showReqAdminApprovalBtn"
+          (click)="requestAdminApproval()"
+          type="button"
+          class="btn block"
+          [ngClass]="{ 'btn-bottom-margin': showApproveWithMasterPasswordBtn }"
+        >
+          {{ "requestAdminApproval" | i18n }}
+        </button>
+        <button
+          type="button"
+          class="btn block"
+          *ngIf="showApproveWithMasterPasswordBtn"
+          (click)="approveWithMasterPassword()"
+        >
+          {{ "approveWithMasterPassword" | i18n }}
+        </button>
+      </div>
+
+      <hr class="muted-hr mx-5px mb-20px" />
+
+      <div class="small mx-5px">
+        <p class="no-margin">{{ "loggingInAs" | i18n }} {{ userEmail }}</p>
+        <a [routerLink]="[]" (click)="logOut()">{{ "notYou" | i18n }}</a>
+      </div>
+    </ng-container>
   </div>
 </div>

apps/browser/src/popup/scss/base.scss

@@ -651,10 +651,21 @@ main {
   .margin-auto {
     margin: auto;
   }
-  .standard-bottom-margin {
+  .mb-20px {
     margin-bottom: 20px;
   }
 
+  .mx-5px {
+    margin-left: 5px !important;
+    margin-right: 5px !important;
+  }
+
+  .muted-hr {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
   .standard-x-margin {
     margin-left: 5px;
     margin-right: 5px;

apps/desktop/src/auth/login/login-decryption-options/login-decryption-options.component.html

@@ -3,43 +3,65 @@
     <img class="logo-image" alt="Bitwarden" />
     <h1 id="heading">{{ "logInInitiated" | i18n }}</h1>
 
-    <h6 id="subHeading" class="standard-bottom-margin">{{ "deviceApprovalRequired" | i18n }}</h6>
-
-    <form id="rememberDeviceForm" class="standard-bottom-margin" [formGroup]="rememberDeviceForm">
-      <div class="checkbox">
-        <label for="rememberDevice">
-          <input
-            id="rememberDevice"
-            type="checkbox"
-            name="rememberDevice"
-            formControlName="rememberDevice"
-          />
-          {{ "rememberThisDevice" | i18n }}
-        </label>
-      </div>
-      <span id="rememberThisDeviceHintText">{{ "uncheckIfPublicDevice" | i18n }}</span>
-    </form>
-
-    <div class="buttons with-rows">
-      <div class="buttons-row">
-        <button
-          type="button"
-          class="btn primary block"
-          [appA11yTitle]="'approveFromYourOtherDevice' | i18n"
-        >
-          {{ "approveFromYourOtherDevice" | i18n }}
-        </button>
-      </div>
-      <div class="buttons-row">
-        <button type="button" class="btn block" [appA11yTitle]="'requestAdminApproval' | i18n">
-          {{ "requestAdminApproval" | i18n }}
-        </button>
-      </div>
-      <div class="buttons-row">
-        <button type="button" class="btn block" [appA11yTitle]="'approveWithMasterPassword' | i18n">
-          {{ "approveWithMasterPassword" | i18n }}
-        </button>
-      </div>
+    <div class="container loading-spinner" *ngIf="loading">
+      <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
     </div>
+
+    <ng-container *ngIf="!loading">
+      <h6 id="subHeading" class="standard-bottom-margin">{{ "deviceApprovalRequired" | i18n }}</h6>
+
+      <form id="rememberDeviceForm" class="standard-bottom-margin" [formGroup]="rememberDeviceForm">
+        <div class="checkbox">
+          <label for="rememberDevice">
+            <input
+              id="rememberDevice"
+              type="checkbox"
+              name="rememberDevice"
+              formControlName="rememberDevice"
+            />
+            {{ "rememberThisDevice" | i18n }}
+          </label>
+        </div>
+        <span id="rememberThisDeviceHintText">{{ "uncheckIfPublicDevice" | i18n }}</span>
+      </form>
+
+      <div class="buttons with-rows">
+        <div class="buttons-row" *ngIf="showApproveFromOtherDeviceBtn">
+          <button
+            (click)="approveFromOtherDevice()"
+            type="button"
+            class="btn primary block"
+            [appA11yTitle]="'approveFromYourOtherDevice' | i18n"
+          >
+            {{ "approveFromYourOtherDevice" | i18n }}
+          </button>
+        </div>
+        <div class="buttons-row" *ngIf="showReqAdminApprovalBtn">
+          <button
+            (click)="requestAdminApproval()"
+            type="button"
+            class="btn block"
+            [appA11yTitle]="'requestAdminApproval' | i18n"
+          >
+            {{ "requestAdminApproval" | i18n }}
+          </button>
+        </div>
+        <div class="buttons-row" *ngIf="showApproveWithMasterPasswordBtn">
+          <button
+            (click)="approveWithMasterPassword()"
+            type="button"
+            class="btn block"
+            [appA11yTitle]="'approveWithMasterPassword' | i18n"
+          >
+            {{ "approveWithMasterPassword" | i18n }}
+          </button>
+        </div>
+      </div>
+
+      <div style="text-align: center">
+        <p class="no-margin">{{ "loggingInAs" | i18n }} {{ userEmail }}</p>
+        <a [routerLink]="[]" (click)="logOut()">{{ "notYou" | i18n }}</a>
+      </div>
+    </ng-container>
   </div>
 </div>

apps/web/src/app/auth/login/login-decryption-options/login-decryption-options.component.html

@@ -7,7 +7,7 @@
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 
-<div class="tw-container tw-mx-auto">
+<div class="tw-container tw-mx-auto" *ngIf="!loading">
   <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"
   >
@@ -30,14 +30,15 @@
         </bit-form-control>
       </form>
 
-      <div class="tw-flex tw-flex-col">
+      <div class="tw-mb-6 tw-flex tw-flex-col">
         <button
           *ngIf="showApproveFromOtherDeviceBtn"
+          (click)="approveFromOtherDevice()"
           bitButton
           type="button"
           buttonType="primary"
           [block]="true"
-          class="tw-mb-3"
+          [ngClass]="{ 'tw-mb-3': showReqAdminApprovalBtn || showApproveWithMasterPasswordBtn }"
           [appA11yTitle]="'approveFromYourOtherDevice' | i18n"
         >
           {{ "approveFromYourOtherDevice" | i18n }}
@@ -45,10 +46,11 @@
 
         <button
           *ngIf="showReqAdminApprovalBtn"
+          (click)="requestAdminApproval()"
           bitButton
           type="button"
           buttonType="secondary"
-          class="tw-mb-3"
+          [ngClass]="{ 'tw-mb-3': showApproveWithMasterPasswordBtn }"
           [appA11yTitle]="'requestAdminApproval' | i18n"
         >
           {{ "requestAdminApproval" | i18n }}
@@ -65,6 +67,13 @@
           {{ "approveWithMasterPassword" | i18n }}
         </button>
       </div>
+
+      <hr class="tw-mb-6 tw-mt-0" />
+
+      <div class="tw-m-0 tw-text-sm">
+        <p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ userEmail }}</p>
+        <a [routerLink]="[]" (click)="logOut()">{{ "notYou" | i18n }}</a>
+      </div>
     </div>
   </div>
 </div>