From e8e5ec23f9af501ea75c31c0deb1ed5ca75d95d7 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Mon, 9 Sep 2024 16:58:37 -0700
Subject: [PATCH] add template for desktop first UI state: email entry

---
 .../src/auth/login/login.component.html       |  3 ++
 apps/desktop/src/locales/en/messages.json     |  9 +++++
 apps/web/src/locales/en/messages.json         |  2 +-
 .../src/angular/login/login.component.html    | 39 ++++++++++++++++++-
 4 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/src/auth/login/login.component.html b/apps/desktop/src/auth/login/login.component.html
index 8a8611ad03d..ecfc60272e2 100644
--- a/apps/desktop/src/auth/login/login.component.html
+++ b/apps/desktop/src/auth/login/login.component.html
@@ -28,6 +28,7 @@
           <environment-selector #environmentSelector (onOpenSelfHostedSettings)="settings()">
           </environment-selector>
         </div>
+
         <div class="checkbox remember-email">
           <label for="rememberEmail">
             <input
@@ -39,6 +40,7 @@
             {{ "rememberEmail" | i18n }}
           </label>
         </div>
+
         <div class="buttons with-rows">
           <div class="buttons-row">
             <button type="button" class="btn primary block" (click)="continue()">
@@ -46,6 +48,7 @@
             </button>
           </div>
         </div>
+
         <div class="sub-options">
           <p class="no-margin">{{ "newAroundHere" | i18n }}</p>
           <button type="button" class="text text-primary" [routerLink]="registerRoute$ | async">
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index b54cf39281a..43774a88b52 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -511,6 +511,15 @@
   "logInToBitwarden": {
     "message": "Log in to Bitwarden"
   },
+  "logInWithPasskey": {
+    "message": "Log in with passkey"
+  },
+  "or": {
+    "message": "or"
+  },
+  "useSingleSignOn": {
+    "message": "Use single sign-on"
+  },
   "submit": {
     "message": "Submit"
   },
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 6bd810c6946..cec3a7b21b6 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -797,7 +797,7 @@
   "useADifferentLogInMethod": {
     "message": "Use a different log in method"
   },
-  "loginWithPasskey": {
+  "logInWithPasskey": {
     "message": "Log in with passkey"
   },
   "invalidPasskeyPleaseTryAgain": {
diff --git a/libs/auth/src/angular/login/login.component.html b/libs/auth/src/angular/login/login.component.html
index 62bb573ad3c..b99750769ed 100644
--- a/libs/auth/src/angular/login/login.component.html
+++ b/libs/auth/src/angular/login/login.component.html
@@ -58,7 +58,7 @@
         routerLink="/login-with-passkey"
         (mousedown)="$event.preventDefault()"
       >
-        <span><i class="bwi bwi-passkey"></i> {{ "loginWithPasskey" | i18n }}</span>
+        <span><i class="bwi bwi-passkey"></i> {{ "logInWithPasskey" | i18n }}</span>
       </a>
     </div>
 
@@ -164,4 +164,39 @@
 </form>
 
 <!-- Desktop Template -->
-<form [bitSubmit]="submit" [formGroup]="formGroup">Desktop Template</form>
+<form *ngIf="clientType === ClientType.Desktop" [bitSubmit]="submit" [formGroup]="formGroup">
+  <ng-container *ngIf="!validatedEmail">
+    <!-- Email Address input -->
+    <bit-form-field>
+      <bit-label>{{ "emailAddress" | i18n }}</bit-label>
+      <input type="email" bitInput formControlName="email" appAutofocus />
+    </bit-form-field>
+
+    <!-- Remember Email input -->
+    <bit-form-control>
+      <input type="checkbox" bitCheckbox formControlName="rememberEmail" />
+      <bit-label>{{ "rememberEmail" | i18n }}</bit-label>
+    </bit-form-control>
+
+    <div class="tw-grid tw-gap-3">
+      <!-- Continue button -->
+      <button bitButton type="submit" buttonType="primary" (click)="validateEmail()">
+        <span> {{ "continue" | i18n }} </span>
+      </button>
+
+      <div class="tw-text-center">{{ "or" | i18n }}</div>
+
+      <!-- Link to Login with Passkey page -->
+      <button type="button" bitButton buttonType="secondary" block routerLink="/login-with-passkey">
+        <span><i class="bwi bwi-passkey"></i> {{ "logInWithPasskey" | i18n }}</span>
+      </button>
+
+      <!-- Link to SSO page -->
+      <button type="button" bitButton buttonType="secondary" block routerLink="/sso">
+        <span><i class="bwi bwi-provider"></i> {{ "useSingleSignOn" | i18n }}</span>
+      </button>
+    </div>
+
+    <!-- TODO-rr-bw: add "New to Bitwarden? Create Account (might need to be AnonLayout secondary content)" -->
+  </ng-container>
+</form>