Extension: setup EmailEntry state UI

apps/browser/src/_locales/en/messages.json

@@ -19,6 +19,18 @@
   "createAccount": {
     "message": "Create account"
   },
+  "newToBitwarden": {
+    "message": "New to Bitwarden?"
+  },
+  "logInWithPasskey": {
+    "message": "Log in with passkey"
+  },
+  "useSingleSignOn": {
+    "message": "Use single sign-on"
+  },
+  "welcomeBack": {
+    "message": "Welcome back"
+  },
   "setAStrongPassword": {
     "message": "Set a strong password"
   },

apps/browser/src/popup/app-routing.module.ts

@@ -17,6 +17,7 @@ import {
   AnonLayoutWrapperComponent,
   AnonLayoutWrapperData,
   LoginComponentV2,
+  LoginSecondaryContentComponent,
   RegistrationFinishComponent,
   RegistrationStartComponent,
   RegistrationStartSecondaryComponent,
@@ -403,6 +404,7 @@ const routes: Routes = [
           }, // TODO-rr-bw: add `satisfies DataProperties & ExtensionAnonLayoutWrapperData
           children: [
             { path: "", component: LoginComponentV2 },
+            { path: "", component: LoginSecondaryContentComponent, outlet: "secondary" },
             { path: "", component: EnvironmentSelectorComponent, outlet: "environment-selector" },
           ],
         },

libs/auth/src/angular/login/login-secondary-content.component.ts

@@ -11,6 +11,9 @@ import { RegisterRouteService } from "@bitwarden/auth/common";
   template: `
     <div class="tw-text-center">
       {{ "newToBitwarden" | i18n }}
+      <!-- TODO-rr-bw: on Browser ext, this link isn't styled like other clients.
+           It seems to be using default browser (chrome, etc.) styles.
+      -->
       <a class="tw-font-bold" bitLink [routerLink]="registerRoute$ | async">{{
         "createAccount" | i18n
       }}</a>

libs/auth/src/angular/login/login.component.html

@@ -122,7 +122,53 @@
 <!--             Browser Template             -->
 <!---------------------------------------------->
 <form *ngIf="clientType === ClientType.Browser" [bitSubmit]="submit" [formGroup]="formGroup">
-  <main tabindex="-1"></main>
+  <ng-container *ngIf="uiState === LoginUiState.EMAIL_ENTRY">
+    <!-- Email Address input -->
+    <bit-form-field class="!tw-mb-4">
+      <bit-label>{{ "emailAddress" | i18n }}</bit-label>
+      <input type="email" formControlName="email" bitInput appAutofocus />
+    </bit-form-field>
+
+    <!-- Remember Email input -->
+    <bit-form-control class="!tw-mb-4">
+      <input type="checkbox" formControlName="rememberEmail" bitCheckbox />
+      <bit-label>{{ "rememberEmail" | i18n }}</bit-label>
+    </bit-form-control>
+
+    <div class="tw-grid tw-gap-3">
+      <!-- Continue button -->
+      <button type="submit" bitButton block buttonType="primary" (click)="validateEmail()">
+        {{ "continue" | i18n }}
+      </button>
+
+      <!-- TODO-rr-bw: Figma shows no Login with Passkey option on browser? -->
+      <!-- Link to Login with Passkey page -->
+      <!-- <div class="tw-text-center">{{ "or" | i18n }}</div>
+      <a
+        bitButton
+        block
+        linkType="primary"
+        routerLink="/login-with-passkey"
+        (mousedown)="$event.preventDefault()"
+      >
+        <i class="bwi bwi-passkey tw-mr-1"></i>
+        {{ "logInWithPasskey" | i18n }}
+      </a> -->
+
+      <!-- Link to Login with SSO page -->
+      <a
+        bitButton
+        block
+        buttonType="secondary"
+        routerLink="/sso"
+        [queryParams]="{ email: formGroup.value.email }"
+        (click)="saveEmailSettings()"
+      >
+        <i class="bwi bwi-provider tw-mr-1"></i>
+        {{ "useSingleSignOn" | i18n }}
+      </a>
+    </div>
+  </ng-container>
 </form>
 
 <!---------------------------------------------->

libs/auth/src/angular/login/login.component.ts

@@ -224,6 +224,8 @@ export class LoginComponentV2 implements OnInit, OnDestroy {
    * @returns A simple `return` statement for each conditional check.
    *          If you update this method, do not forget to add a `return`
    *          to each if-condition block where necessary to stop code execution.
+   *
+   * TODO-rr-bw: is using returns a good approach, or should we stick with is/else if/else?
    */
   private async handleAuthResult(authResult: AuthResult): Promise<void> {
     if (this.handleCaptchaRequired(authResult)) {
@@ -512,7 +514,6 @@ export class LoginComponentV2 implements OnInit, OnDestroy {
 
   private async webOnInit(): Promise<void> {
     this.activatedRoute.queryParams.pipe(first(), takeUntil(this.destroy$)).subscribe((qParams) => {
-      // If there is a parameter called 'org', set previousUrl to `/create-organization?org=<paramValue>`
       if (qParams.org != null) {
         const route = this.router.createUrlTree(["create-organization"], {
           queryParams: { plan: qParams.org },
@@ -520,10 +521,9 @@ export class LoginComponentV2 implements OnInit, OnDestroy {
         this.loginService.setPreviousUrl(route);
       }
 
-      /**
-       * If there is a parameter called 'sponsorshipToken', they are coming from an email for sponsoring a families organization.
-       * Therefore set the prevousUrl to `/setup/families-for-enterprise?token=<paramValue>`
-       */
+      /* If there is a parameter called 'sponsorshipToken', they are coming
+         from an email for sponsoring a families organization. Therefore set
+         the prevousUrl to /setup/families-for-enterprise?token=<paramValue> */
       if (qParams.sponsorshipToken != null) {
         const route = this.router.createUrlTree(["setup/families-for-enterprise"], {
           queryParams: { token: qParams.sponsorshipToken },