[PM-3301] Login - Move incorrect username or password error to inline field error

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

@@ -19,6 +19,21 @@
   "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"
+  },
+  "or": {
+    "message": "or"
+  },
   "setAStrongPassword": {
     "message": "Set a strong password"
   },
@@ -805,6 +820,9 @@
   "logIn": {
     "message": "Log in"
   },
+  "logInToBitwarden": {
+    "message": "Log in to Bitwarden"
+  },
   "restartRegistration": {
     "message": "Restart registration"
   },

apps/browser/src/auth/popup/login.component.ts → apps/browser/src/auth/popup/login-v1.component.ts

@@ -3,7 +3,7 @@
 import { ActivatedRoute, Router } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
-import { LoginComponent as BaseLoginComponent } from "@bitwarden/angular/auth/components/login.component";
+import { LoginComponentV1 as BaseLoginComponent } from "@bitwarden/angular/auth/components/login-v1.component";
 import { FormValidationErrorsService } from "@bitwarden/angular/platform/abstractions/form-validation-errors.service";
 import {
   LoginStrategyServiceAbstraction,
@@ -29,9 +29,9 @@
 
 @Component({
   selector: "app-login",
-  templateUrl: "login.component.html",
+  templateUrl: "login-v1.component.html",
 })
-export class LoginComponent extends BaseLoginComponent implements OnInit {
+export class LoginComponentV1 extends BaseLoginComponent implements OnInit {
   showPasswordless = false;
   constructor(
     devicesApiService: DevicesApiServiceAbstraction,

apps/browser/src/auth/popup/login/extension-login-component.service.spec.ts

@@ -0,0 +1,72 @@
+import { TestBed } from "@angular/core/testing";
+import { MockProxy, mock } from "jest-mock-extended";
+
+import { DefaultLoginComponentService } from "@bitwarden/auth/angular";
+import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
+import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
+
+import { flagEnabled } from "../../../platform/flags";
+import { BrowserPlatformUtilsService } from "../../../platform/services/platform-utils/browser-platform-utils.service";
+
+import { ExtensionLoginComponentService } from "./extension-login-component.service";
+
+jest.mock("../../../platform/flags", () => ({
+  flagEnabled: jest.fn(),
+}));
+
+describe("ExtensionLoginComponentService", () => {
+  let service: ExtensionLoginComponentService;
+  let cryptoFunctionService: MockProxy<CryptoFunctionService>;
+  let environmentService: MockProxy<EnvironmentService>;
+  let passwordGenerationService: MockProxy<PasswordGenerationServiceAbstraction>;
+  let platformUtilsService: MockProxy<BrowserPlatformUtilsService>;
+  let ssoLoginService: MockProxy<SsoLoginServiceAbstraction>;
+
+  beforeEach(() => {
+    cryptoFunctionService = mock<CryptoFunctionService>();
+    environmentService = mock<EnvironmentService>();
+    passwordGenerationService = mock<PasswordGenerationServiceAbstraction>();
+    platformUtilsService = mock<BrowserPlatformUtilsService>();
+    ssoLoginService = mock<SsoLoginServiceAbstraction>();
+
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: ExtensionLoginComponentService,
+          useFactory: () =>
+            new ExtensionLoginComponentService(
+              cryptoFunctionService,
+              environmentService,
+              passwordGenerationService,
+              platformUtilsService,
+              ssoLoginService,
+            ),
+        },
+        { provide: DefaultLoginComponentService, useExisting: ExtensionLoginComponentService },
+        { provide: CryptoFunctionService, useValue: cryptoFunctionService },
+        { provide: EnvironmentService, useValue: environmentService },
+        { provide: PasswordGenerationServiceAbstraction, useValue: passwordGenerationService },
+        { provide: PlatformUtilsService, useValue: platformUtilsService },
+        { provide: SsoLoginServiceAbstraction, useValue: ssoLoginService },
+      ],
+    });
+    service = TestBed.inject(ExtensionLoginComponentService);
+  });
+
+  it("creates the service", () => {
+    expect(service).toBeTruthy();
+  });
+
+  it("returns true if showPasswordless flag is enabled", () => {
+    (flagEnabled as jest.Mock).mockReturnValue(true);
+    expect(service.isLoginViaAuthRequestSupported()).toBe(true);
+  });
+
+  it("returns false if showPasswordless flag is disabled", () => {
+    (flagEnabled as jest.Mock).mockReturnValue(false);
+    expect(service.isLoginViaAuthRequestSupported()).toBeFalsy();
+  });
+});

apps/browser/src/auth/popup/login/extension-login-component.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from "@angular/core";
+
+import { DefaultLoginComponentService, LoginComponentService } from "@bitwarden/auth/angular";
+import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
+import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
+
+import { flagEnabled } from "../../../platform/flags";
+
+@Injectable()
+export class ExtensionLoginComponentService
+  extends DefaultLoginComponentService
+  implements LoginComponentService
+{
+  constructor(
+    cryptoFunctionService: CryptoFunctionService,
+    environmentService: EnvironmentService,
+    passwordGenerationService: PasswordGenerationServiceAbstraction,
+    platformUtilsService: PlatformUtilsService,
+    ssoLoginService: SsoLoginServiceAbstraction,
+  ) {
+    super(
+      cryptoFunctionService,
+      environmentService,
+      passwordGenerationService,
+      platformUtilsService,
+      ssoLoginService,
+    );
+    this.clientType = this.platformUtilsService.getClientType();
+  }
+
+  isLoginViaAuthRequestSupported(): boolean {
+    return flagEnabled("showPasswordless");
+  }
+}

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

@@ -2,6 +2,7 @@
 import { ActivatedRouteSnapshot, RouteReuseStrategy, RouterModule, Routes } from "@angular/router";
 
 import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/components/environment-selector.component";
+import { unauthUiRefreshRedirect } from "@bitwarden/angular/auth/functions/unauth-ui-refresh-redirect";
 import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui-refresh-route-swap";
 import {
   authGuard,
@@ -16,6 +17,8 @@
 import {
   AnonLayoutWrapperComponent,
   AnonLayoutWrapperData,
+  LoginComponent,
+  LoginSecondaryContentComponent,
   LockIcon,
   LockV2Component,
   PasswordHintComponent,
@@ -25,6 +28,7 @@
   RegistrationStartSecondaryComponentData,
   SetPasswordJitComponent,
   UserLockIcon,
+  VaultIcon,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
@@ -40,8 +44,8 @@
 import { HomeComponent } from "../auth/popup/home.component";
 import { LockComponent } from "../auth/popup/lock.component";
 import { LoginDecryptionOptionsComponent } from "../auth/popup/login-decryption-options/login-decryption-options.component";
+import { LoginComponentV1 } from "../auth/popup/login-v1.component";
 import { LoginViaAuthRequestComponent } from "../auth/popup/login-via-auth-request.component";
-import { LoginComponent } from "../auth/popup/login.component";
 import { RegisterComponent } from "../auth/popup/register.component";
 import { RemovePasswordComponent } from "../auth/popup/remove-password.component";
 import { SetPasswordComponent } from "../auth/popup/set-password.component";
@@ -152,20 +156,14 @@
   {
     path: "home",
     component: HomeComponent,
-    canActivate: [unauthGuardFn(unauthRouteOverrides)],
+    canActivate: [unauthGuardFn(unauthRouteOverrides), unauthUiRefreshRedirect("/login")],
     data: { state: "home" } satisfies RouteDataProperties,
   },
   ...extensionRefreshSwap(Fido2V1Component, Fido2Component, {
     path: "fido2",
     canActivate: [fido2AuthGuard],
     data: { state: "fido2" } satisfies RouteDataProperties,
   }),
-  {
-    path: "login",
-    component: LoginComponent,
-    canActivate: [unauthGuardFn(unauthRouteOverrides)],
-    data: { state: "login" } satisfies RouteDataProperties,
-  },
   {
     path: "login-with-device",
     component: LoginViaAuthRequestComponent,
@@ -440,6 +438,35 @@
       ],
     },
   ),
+  ...unauthUiRefreshSwap(
+    LoginComponentV1,
+    ExtensionAnonLayoutWrapperComponent,
+    {
+      path: "login",
+      canActivate: [unauthGuardFn(unauthRouteOverrides)],
+      data: { state: "login" },
+    },
+    {
+      path: "",
+      children: [
+        {
+          path: "login",
+          canActivate: [unauthGuardFn(unauthRouteOverrides)],
+          data: {
+            pageIcon: VaultIcon,
+            pageTitle: "logInToBitwarden",
+            state: "login",
+            showAcctSwitcher: true,
+          } satisfies RouteDataProperties & ExtensionAnonLayoutWrapperData,
+          children: [
+            { path: "", component: LoginComponent },
+            { path: "", component: LoginSecondaryContentComponent, outlet: "secondary" },
+            { path: "", component: EnvironmentSelectorComponent, outlet: "environment-selector" },
+          ],
+        },
+      ],
+    },
+  ),
   {
     path: "",
     component: ExtensionAnonLayoutWrapperComponent,

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

@@ -25,8 +25,8 @@
 import { HomeComponent } from "../auth/popup/home.component";
 import { LockComponent } from "../auth/popup/lock.component";
 import { LoginDecryptionOptionsComponent } from "../auth/popup/login-decryption-options/login-decryption-options.component";
+import { LoginComponentV1 } from "../auth/popup/login-v1.component";
 import { LoginViaAuthRequestComponent } from "../auth/popup/login-via-auth-request.component";
-import { LoginComponent } from "../auth/popup/login.component";
 import { RegisterComponent } from "../auth/popup/register.component";
 import { RemovePasswordComponent } from "../auth/popup/remove-password.component";
 import { SetPasswordComponent } from "../auth/popup/set-password.component";
@@ -159,7 +159,7 @@
     HintComponent,
     HomeComponent,
     LockComponent,
-    LoginComponent,
+    LoginComponentV1,
     LoginViaAuthRequestComponent,
     LoginDecryptionOptionsComponent,
     NotificationsSettingsV1Component,

apps/browser/src/popup/services/services.module.ts

@@ -1,7 +1,7 @@
 import { APP_INITIALIZER, NgModule, NgZone } from "@angular/core";
 import { Subject, merge, of } from "rxjs";
 
 import { CollectionService } from "@bitwarden/admin-console/common";
 import { ViewCacheService } from "@bitwarden/angular/platform/abstractions/view-cache.service";
 import { AngularThemingService } from "@bitwarden/angular/platform/services/theming/angular-theming.service";
 import { SafeProvider, safeProvider } from "@bitwarden/angular/platform/utils/safe-provider";
@@ -18,7 +18,11 @@
   ENV_ADDITIONAL_REGIONS,
 } from "@bitwarden/angular/services/injection-tokens";
 import { JslibServicesModule } from "@bitwarden/angular/services/jslib-services.module";
-import { AnonLayoutWrapperDataService, LockComponentService } from "@bitwarden/auth/angular";
+import {
+  AnonLayoutWrapperDataService,
+  LoginComponentService,
+  LockComponentService,
+} from "@bitwarden/auth/angular";
 import { LockService, PinServiceAbstraction } from "@bitwarden/auth/common";
 import { EventCollectionService as EventCollectionServiceAbstraction } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
@@ -29,6 +33,7 @@
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { KdfConfigService } from "@bitwarden/common/auth/abstractions/kdf-config.service";
 import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/auth/abstractions/master-password.service.abstraction";
+import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import {
   AutofillSettingsService,
@@ -49,7 +54,10 @@
   DefaultAnimationControlService,
 } from "@bitwarden/common/platform/abstractions/animation-control.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service";
+import {
+  CryptoFunctionService,
+  CryptoFunctionService as CryptoFunctionServiceAbstraction,
+} from "@bitwarden/common/platform/abstractions/crypto-function.service";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { EncryptService } from "@bitwarden/common/platform/abstractions/encrypt.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
@@ -58,8 +66,11 @@
 import { KeyGenerationService } from "@bitwarden/common/platform/abstractions/key-generation.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService as MessagingServiceAbstraction } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import {
+  PlatformUtilsService,
+  PlatformUtilsService as PlatformUtilsServiceAbstraction,
+} from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SdkClientFactory } from "@bitwarden/common/platform/abstractions/sdk/sdk-client-factory";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import {
   AbstractStorageService,
@@ -68,11 +79,11 @@
 import { Message, MessageListener, MessageSender } from "@bitwarden/common/platform/messaging";
 // eslint-disable-next-line no-restricted-imports -- Used for dependency injection
 import { SubjectMessageSender } from "@bitwarden/common/platform/messaging/internal";
 import { flagEnabled } from "@bitwarden/common/platform/misc/flags";
 import { TaskSchedulerService } from "@bitwarden/common/platform/scheduling";
 import { ConsoleLogService } from "@bitwarden/common/platform/services/console-log.service";
 import { ContainerService } from "@bitwarden/common/platform/services/container.service";
 import { NoopSdkClientFactory } from "@bitwarden/common/platform/services/sdk/noop-sdk-client-factory";
 import { StorageServiceProvider } from "@bitwarden/common/platform/services/storage-service.provider";
 import { WebCryptoFunctionService } from "@bitwarden/common/platform/services/web-crypto-function.service";
 import {
@@ -91,11 +102,13 @@
 import { TotpService as TotpServiceAbstraction } from "@bitwarden/common/vault/abstractions/totp.service";
 import { TotpService } from "@bitwarden/common/vault/services/totp.service";
 import { DialogService, ToastService } from "@bitwarden/components";
+import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 import { BiometricsService, BiometricStateService } from "@bitwarden/key-management";
 import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { ForegroundLockService } from "../../auth/popup/accounts/foreground-lock.service";
 import { ExtensionAnonLayoutWrapperDataService } from "../../auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper-data.service";
+import { ExtensionLoginComponentService } from "../../auth/popup/login/extension-login-component.service";
 import { AutofillService as AutofillServiceAbstraction } from "../../autofill/services/abstractions/autofill.service";
 import AutofillService from "../../autofill/services/autofill.service";
 import MainBackground from "../../background/main.background";
@@ -117,7 +130,7 @@
 import { BrowserScriptInjectorService } from "../../platform/services/browser-script-injector.service";
 import I18nService from "../../platform/services/i18n.service";
 import { ForegroundPlatformUtilsService } from "../../platform/services/platform-utils/foreground-platform-utils.service";
 import { BrowserSdkClientFactory } from "../../platform/services/sdk/browser-sdk-client-factory";
 import { ForegroundTaskSchedulerService } from "../../platform/services/task-scheduler/foreground-task-scheduler.service";
 import { BrowserStorageServiceProvider } from "../../platform/storage/browser-storage-service.provider";
 import { ForegroundMemoryStorageService } from "../../platform/storage/foreground-memory-storage.service";
@@ -571,6 +584,17 @@
     useClass: ExtensionAnonLayoutWrapperDataService,
     deps: [],
   }),
+  safeProvider({
+    provide: LoginComponentService,
+    useClass: ExtensionLoginComponentService,
+    deps: [
+      CryptoFunctionServiceAbstraction,
+      EnvironmentService,
+      PasswordGenerationServiceAbstraction,
+      PlatformUtilsServiceAbstraction,
+      SsoLoginServiceAbstraction,
+    ],
+  }),
   safeProvider({
     provide: LockService,
     useClass: ForegroundLockService,