PM-1049 - Desktop - login decryption options component html done

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

@@ -76,6 +76,12 @@ const systemTimeoutOptions = {
     <ng-template #appGenerator></ng-template>
     <ng-template #loginApproval></ng-template>
     <app-header></app-header>
+
+    <div class="d-flex flex-row justify-content-between">
+      <button class="btn btn-primary mr-2" (click)="goTo('/login')">Login</button>
+      <button class="btn btn-primary" (click)="goTo('/login-initiated')">Login Initiated</button>
+    </div>
+
     <div id="container">
       <div class="loading" *ngIf="loading">
         <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
@@ -140,6 +146,10 @@ export class AppComponent implements OnInit, OnDestroy {
     private dialogService: DialogServiceAbstraction
   ) {}
 
+  goTo(route: string) {
+    this.router.navigate([route]);
+  }
+
   ngOnInit() {
     this.stateService.activeAccount$.pipe(takeUntil(this.destroy$)).subscribe((userId) => {
       this.activeUserId = userId;

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

@@ -1 +1,45 @@
-nothing here yet
+<div id="login-decryption-options-page">
+  <div id="content" class="content">
+    <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>
+  </div>
+</div>

apps/desktop/src/auth/login/login.module.ts

@@ -3,12 +3,13 @@ import { RouterModule } from "@angular/router";
 
 import { SharedModule } from "../../app/shared/shared.module";
 
+import { LoginDecryptionOptionsComponent } from "./login-decryption-options/login-decryption-options.component";
 import { LoginWithDeviceComponent } from "./login-with-device.component";
 import { LoginComponent } from "./login.component";
 
 @NgModule({
   imports: [SharedModule, RouterModule],
-  declarations: [LoginComponent, LoginWithDeviceComponent],
+  declarations: [LoginComponent, LoginWithDeviceComponent, LoginDecryptionOptionsComponent],
   exports: [LoginComponent, LoginWithDeviceComponent],
 })
 export class LoginModule {}

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

@@ -2251,5 +2251,24 @@
   },
   "windowsBiometricUpdateWarningTitle": {
     "message": "Recommended Settings Update"
+  },
+  "deviceApprovalRequired": {
+    "message": "Device approval required. Select an approval option below:"
+  },
+  "rememberThisDevice": {
+    "message": "Remember this device"
+  },
+  "uncheckIfPublicDevice": {
+    "message": "Uncheck if using a public device"
+  },
+  "approveFromYourOtherDevice": {
+    "message": "Approve from your other device"
+  },
+  "requestAdminApproval": {
+    "message": "Request admin approval"
+  },
+  "approveWithMasterPassword": {
+    "message": "Approve with master password" 
   }
+  
 }

apps/desktop/src/scss/pages.scss

@@ -5,7 +5,8 @@
 #lock-page,
 #sso-page,
 #set-password-page,
-#remove-password-page {
+#remove-password-page,
+#login-decryption-options-page {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -53,7 +54,8 @@
 #hint-page,
 #two-factor-page,
 #lock-page,
-#update-temp-password-page {
+#update-temp-password-page,
+#login-decryption-options-page {
   .content {
     width: 325px;
     transition: width 0.25s linear;
@@ -189,7 +191,8 @@
 }
 
 #login-page,
-#login-with-device-page {
+#login-with-device-page,
+#login-decryption-options-page {
   flex-direction: column;
   justify-content: unset;
   padding-top: 20px;
@@ -272,3 +275,14 @@
     }
   }
 }
+
+#login-decryption-options-page {
+  .standard-bottom-margin {
+    margin-bottom: 20px;
+  }
+
+  #rememberThisDeviceHintText {
+    font-size: $font-size-small;
+    color: $text-muted;
+  }
+}