handle oss-routing swap

apps/web/src/app/auth/login/login.component.html

@@ -40,7 +40,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>
 

apps/web/src/app/oss-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from "@angular/core";
 import { Route, RouterModule, Routes } from "@angular/router";
 
+import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui-refresh-route-swap";
 import {
   authGuard,
   lockGuard,
@@ -20,6 +21,7 @@ import {
   LockIcon,
   RegistrationLinkExpiredComponent,
   LoginComponentV2,
+  LoginSecondaryContentComponent,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
@@ -168,6 +170,51 @@ const routes: Routes = [
       },
     ],
   },
+  ...unauthUiRefreshSwap(
+    AnonLayoutWrapperComponent,
+    AnonLayoutWrapperComponent,
+    {
+      path: "login",
+      canActivate: [unauthGuardFn()],
+      children: [
+        {
+          path: "",
+          component: LoginComponent,
+        },
+        {
+          path: "",
+          component: EnvironmentSelectorComponent,
+          outlet: "environment-selector",
+        },
+      ],
+      data: {
+        pageTitle: "logIn",
+      },
+    },
+    {
+      path: "login",
+      canActivate: [unauthGuardFn()],
+      data: {
+        pageTitle: "logInToBitwarden",
+      } satisfies DataProperties & AnonLayoutWrapperData,
+      children: [
+        {
+          path: "",
+          component: LoginComponentV2,
+        },
+        {
+          path: "",
+          component: LoginSecondaryContentComponent,
+          outlet: "secondary",
+        },
+        {
+          path: "",
+          component: EnvironmentSelectorComponent,
+          outlet: "environment-selector",
+        },
+      ],
+    },
+  ),
   {
     path: "",
     component: AnonLayoutWrapperComponent,
@@ -269,24 +316,6 @@ const routes: Routes = [
           },
         ],
       },
-      {
-        path: "login",
-        canActivate: [unauthGuardFn()],
-        data: {
-          pageTitle: "logInToBitwarden",
-        } satisfies DataProperties & AnonLayoutWrapperData,
-        children: [
-          {
-            path: "",
-            component: LoginComponentV2,
-          },
-          {
-            path: "",
-            component: EnvironmentSelectorComponent,
-            outlet: "environment-selector",
-          },
-        ],
-      },
       {
         path: "lock",
         canActivate: [deepLinkGuard(), lockGuard()],

apps/web/src/locales/en/messages.json

@@ -881,6 +881,9 @@
   "createAccount": {
     "message": "Create account"
   },
+  "newToBitwarden": {
+    "message": "New to Bitwarden?"
+  },
   "setAStrongPassword": {
     "message": "Set a strong password"
   },

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

@@ -44,31 +44,26 @@
 >
   <ng-container *ngIf="uiState === LoginUiState.EMAIL_ENTRY">
     <!-- Email Address input -->
-    <div class="tw-mb-3">
+    <bit-form-field class="!tw-mb-4">
-      <bit-form-field>
       <bit-label>{{ "emailAddress" | i18n }}</bit-label>
       <input type="email" formControlName="email" bitInput appAutofocus />
     </bit-form-field>
-    </div>
 
     <!-- Remember Email input -->
-    <div class="tw-mb-3 tw-flex tw-items-start">
+    <bit-form-control class="!tw-mb-4">
-      <bit-form-control class="tw-mb-0">
       <input type="checkbox" formControlName="rememberEmail" bitCheckbox />
       <bit-label>{{ "rememberEmail" | i18n }}</bit-label>
     </bit-form-control>
-    </div>
 
+    <div class="tw-grid tw-gap-3 tw-text-center">
       <!-- Continue button -->
-    <div class="tw-mb-3">
       <button type="submit" bitButton block buttonType="primary" (click)="validateEmail()">
         <span> {{ "continue" | i18n }} </span>
       </button>
-    </div>
+
+      <div>{{ "or" | i18n }}</div>
 
       <!-- Link to Login with Passkey page -->
-    <div class="tw-mb-3 tw-flex tw-flex-col tw-items-center tw-justify-center">
-      <p class="tw-mb-3">{{ "or" | i18n }}</p>
       <a
         bitLink
         block
@@ -80,11 +75,10 @@
       </a>
     </div>
 
-    <hr />
+    <!-- TODO-rr-bw: according to Figma, move this to AnonLayout secondary content -->
-
     <!-- Link to Create Account page -->
-    <p class="tw-m-0 tw-text-sm">
+    <!-- <p class="tw-m-0 tw-text-sm">
-      {{ "newAroundHere" | i18n }}
+      {{ "newAroundHere" | i18n }} -->
     <!-- Two notes:  
            (1) We check the value and validity of email so we don't send an invalid email to autofill 
            on load of register for both enter and mouse based navigation
@@ -92,13 +86,13 @@
            and move the create account link down the page on click which causes the user to miss actually 
            clicking on the link. Mousedown fires before onBlur. 
       -->
-      <a
+    <!-- <a
         [routerLink]="registerRoute$ | async"
         [queryParams]="emailFormControl.valid ? { email: emailFormControl.value } : {}"
         (mousedown)="goToRegister()"
         >{{ "createAccount" | i18n }}</a
       >
-    </p>
+    </p> -->
   </ng-container>
 
   <!--