From 350459f04f28e6f5ea31badc480c2f6e0cbffad6 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 12 Sep 2024 14:55:28 -0700
Subject: [PATCH] Extension: setup MasterPasswordEntry state UI

---
 apps/browser/src/_locales/en/messages.json    |  3 ++
 .../src/angular/login/login.component.html    | 48 +++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 59ca20cffa8..084445d8ce6 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -31,6 +31,9 @@
   "welcomeBack": {
     "message": "Welcome back"
   },
+  "or": {
+    "message": "or"
+  },
   "setAStrongPassword": {
     "message": "Set a strong password"
   },
diff --git a/libs/auth/src/angular/login/login.component.html b/libs/auth/src/angular/login/login.component.html
index b44ba646580..731cc7c31f4 100644
--- a/libs/auth/src/angular/login/login.component.html
+++ b/libs/auth/src/angular/login/login.component.html
@@ -169,6 +169,54 @@
       </a>
     </div>
   </ng-container>
+
+  <ng-container *ngIf="uiState === LoginUiState.MASTER_PASSWORD_ENTRY">
+    <!-- Master Password input -->
+    <bit-form-field class="!tw-mb-1">
+      <bit-label>{{ "masterPass" | i18n }}</bit-label>
+      <input type="password" formControlName="masterPassword" bitInput #masterPasswordInputRef />
+      <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+    </bit-form-field>
+
+    <!-- Link to Password Hint page -->
+    <a
+      class="tw-inline-block tw-mb-4 tw-font-semibold"
+      routerLink="/hint"
+      (mousedown)="goToHint()"
+      (click)="saveEmailSettings()"
+    >
+      {{ "getMasterPasswordHint" | i18n }}
+    </a>
+
+    <!-- TODO-rr-bw: will we still be handling captcha? -->
+    <!-- Captcha iframe -->
+    <div [hidden]="!showCaptcha()">
+      <iframe id="hcaptcha_iframe" height="80" sandbox="allow-scripts allow-same-origin"></iframe>
+    </div>
+
+    <div class="tw-grid tw-gap-3">
+      <!-- Submit button to Login with Master Password -->
+      <button type="submit" bitButton bitFormButton block buttonType="primary">
+        {{ "loginWithMasterPassword" | i18n }}
+      </button>
+
+      <!-- Button to Login with Device -->
+      <ng-container *ngIf="showLoginWithDevice && showPasswordless">
+        <div class="tw-text-center">{{ "or" | i18n }}</div>
+
+        <button
+          type="button"
+          bitButton
+          block
+          buttonType="secondary"
+          (click)="startAuthRequestLogin()"
+        >
+          <i class="bwi bwi-mobile"></i>
+          {{ "loginWithDevice" | i18n }}
+        </button>
+      </ng-container>
+    </div>
+  </ng-container>
 </form>
 
 <!---------------------------------------------->