handle browser routing and basic browser template

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

@@ -756,6 +756,9 @@
   "logIn": {
     "message": "Log in"
   },
+  "logInToBitwarden": {
+    "message": "Log in to Bitwarden"
+  },
   "restartRegistration": {
     "message": "Restart registration"
   },

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

@@ -1,6 +1,8 @@
 import { Injectable, NgModule } from "@angular/core";
 import { ActivatedRouteSnapshot, RouteReuseStrategy, RouterModule, Routes } from "@angular/router";
 
+import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/components/environment-selector.component";
+import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui-refresh-route-swap";
 import {
   authGuard,
   lockGuard,
@@ -14,6 +16,7 @@ import { extensionRefreshSwap } from "@bitwarden/angular/utils/extension-refresh
 import {
   AnonLayoutWrapperComponent,
   AnonLayoutWrapperData,
+  LoginComponentV2,
   RegistrationFinishComponent,
   RegistrationStartComponent,
   RegistrationStartSecondaryComponent,
@@ -26,6 +29,7 @@ import { twofactorRefactorSwap } from "../../../../libs/angular/src/utils/two-fa
 import { fido2AuthGuard } from "../auth/guards/fido2-auth.guard";
 import { AccountSwitcherComponent } from "../auth/popup/account-switching/account-switcher.component";
 import { EnvironmentComponent } from "../auth/popup/environment.component";
+import { ExtensionAnonLayoutWrapperComponent } from "../auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component";
 import { HintComponent } from "../auth/popup/hint.component";
 import { HomeComponent } from "../auth/popup/home.component";
 import { LockComponent } from "../auth/popup/lock.component";
@@ -134,12 +138,6 @@ const routes: Routes = [
     canActivate: [fido2AuthGuard],
     data: { state: "fido2" },
   }),
-  {
-    path: "login",
-    component: LoginComponent,
-    canActivate: [unauthGuardFn(unauthRouteOverrides)],
-    data: { state: "login" },
-  },
   {
     path: "login-with-device",
     component: LoginViaAuthRequestComponent,
@@ -385,6 +383,32 @@ const routes: Routes = [
     canActivate: [authGuard],
     data: { state: "update-temp-password" },
   },
+  ...unauthUiRefreshSwap(
+    LoginComponent,
+    ExtensionAnonLayoutWrapperComponent,
+    {
+      path: "login",
+      canActivate: [unauthGuardFn(unauthRouteOverrides)],
+      data: { state: "login" },
+    },
+    {
+      path: "",
+      children: [
+        {
+          path: "login",
+          canActivate: [unauthGuardFn(unauthRouteOverrides)],
+          data: {
+            pageTitle: "logInToBitwarden",
+            state: "login",
+          }, // TODO-rr-bw: add `satisfies DataProperties & ExtensionAnonLayoutWrapperData
+          children: [
+            { path: "", component: LoginComponentV2 },
+            { path: "", component: EnvironmentSelectorComponent, outlet: "environment-selector" },
+          ],
+        },
+      ],
+    },
+  ),
   {
     path: "",
     component: AnonLayoutWrapperComponent,

libs/angular/src/auth/functions/unauth-ui-refresh-route-swap.ts

@@ -20,6 +20,7 @@ export function unauthUiRefreshSwap(
   defaultComponent: Type<any>,
   refreshedComponent: Type<any>,
   options: Route,
+  altOptions?: Route,
 ): Routes {
   return componentRouteSwap(
     defaultComponent,
@@ -29,5 +30,6 @@ export function unauthUiRefreshSwap(
       return configService.getFeatureFlag(FeatureFlag.UnauthenticatedExtensionUIRefresh);
     },
     options,
+    altOptions,
   );
 }

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

@@ -1,4 +1,20 @@
-<form [bitSubmit]="submit.bind(null, false)" [formGroup]="formGroup">
+<!-- Web Template -->
+
+<!--
+    TODO-rr-bw: Clarify this comment if necessary.
+
+    Why not use <form *ngIf="clientType === ClientType.Web"> to display this section?
+    Because this file contains 3 separate templates for Web, Browser, and Desktop. For Web,
+    we want access to the masterPasswordInput reference in the class file.
+    - If we used *ngIf, we would not be able to access the reference initially.
+    - Using a hidden form allows us to access the reference, because it ensures that the element
+      reference does exist (it's just potentially hidden instead of non-existent).
+  -->
+<form
+  [ngClass]="{ 'tw-hidden': clientType !== ClientType.Web }"
+  [bitSubmit]="submit.bind(null, false)"
+  [formGroup]="formGroup"
+>
   <!-------------------------
     UI STATE 1: Email Entry
   -------------------------->
@@ -141,3 +157,8 @@
     </div>
   </div>
 </form>
+
+<!-- Browser Template -->
+<form *ngIf="clientType === ClientType.Browser" [bitSubmit]="submit" [formGroup]="formGroup">
+  <main tabindex="-1"></main>
+</form>

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

@@ -62,6 +62,7 @@ export class LoginComponentV2 implements OnInit, OnDestroy {
   captcha: CaptchaIFrame;
   captchaToken: string = null;
   clientType: ClientType;
+  ClientType = ClientType;
   registerRoute$ = this.registerRouteService.registerRoute$(); // TODO: remove when email verification flag is removed
   showLoginWithDevice = false;
   validatedEmail = false;
@@ -140,7 +141,7 @@ export class LoginComponentV2 implements OnInit, OnDestroy {
     this.destroy$.complete();
   }
 
-  submit = async (showToast: boolean): Promise<void> => {
+  submit = async (showToast = true): Promise<void> => {
     const data = this.formGroup.value;
 
     await this.setupCaptcha();
@@ -153,6 +154,8 @@ export class LoginComponentV2 implements OnInit, OnDestroy {
     }
     // Web specific (end)
 
+    // TODO-rr-bw: handle toast here for Browser/Desktop? See base LoginComponent -> submit()
+
     const credentials = new PasswordLoginCredentials(
       data.email,
       data.masterPassword,

libs/common/src/enums/feature-flag.enum.ts

@@ -74,7 +74,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.IdpAutoSubmitLogin]: FALSE,
   [FeatureFlag.DeviceTrustLogging]: FALSE,
   [FeatureFlag.AuthenticatorTwoFactorToken]: FALSE,
-  [FeatureFlag.UnauthenticatedExtensionUIRefresh]: FALSE,
+  [FeatureFlag.UnauthenticatedExtensionUIRefresh]: true,
   [FeatureFlag.EnableUpgradePasswordManagerSub]: FALSE,
   [FeatureFlag.GenerateIdentityFillScriptRefactor]: FALSE,
   [FeatureFlag.EnableNewCardCombinedExpiryAutofill]: FALSE,