add template for desktop first UI state: email entry

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">

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"
   },

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": {

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>