[CL-700] Move auth-owned layout components to UIF ownership (#15093)

libs/angular/src/services/jslib-services.module.ts

@@ -14,8 +14,6 @@ import {
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
 import {
-  AnonLayoutWrapperDataService,
-  DefaultAnonLayoutWrapperDataService,
   DefaultLoginApprovalComponentService,
   DefaultLoginComponentService,
   DefaultLoginDecryptionOptionsService,
@@ -299,7 +297,11 @@ import { FolderService } from "@bitwarden/common/vault/services/folder/folder.se
 import { TotpService } from "@bitwarden/common/vault/services/totp.service";
 import { VaultSettingsService } from "@bitwarden/common/vault/services/vault-settings/vault-settings.service";
 import { DefaultTaskService, TaskService } from "@bitwarden/common/vault/tasks";
-import { ToastService } from "@bitwarden/components";
+import {
+  AnonLayoutWrapperDataService,
+  DefaultAnonLayoutWrapperDataService,
+  ToastService,
+} from "@bitwarden/components";
 import {
   GeneratorHistoryService,
   LocalGeneratorHistoryService,

libs/auth/src/angular/icons/index.ts

@@ -1,8 +1,4 @@
-export * from "./bitwarden-logo.icon";
-export * from "./bitwarden-shield.icon";
 export * from "./devices.icon";
-export * from "./lock.icon";
-export * from "./registration-check-email.icon";
 export * from "./user-lock.icon";
 export * from "./user-verification-biometrics-fingerprint.icon";
 export * from "./wave.icon";

libs/auth/src/angular/index.ts

@@ -1,13 +1,6 @@
 /**
  * This barrel file should only contain Angular exports
  */
-
-// anon layout
-export * from "./anon-layout/anon-layout.component";
-export * from "./anon-layout/anon-layout-wrapper.component";
-export * from "./anon-layout/anon-layout-wrapper-data.service";
-export * from "./anon-layout/default-anon-layout-wrapper-data.service";
-
 // change password
 export * from "./change-password/change-password.component";
 export * from "./change-password/change-password.service.abstraction";

libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts

@@ -30,6 +30,7 @@ import { UserId } from "@bitwarden/common/types/guid";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
 import {
+  AnonLayoutWrapperDataService,
   AsyncActionsModule,
   ButtonModule,
   CheckboxModule,
@@ -40,8 +41,6 @@ import {
 } from "@bitwarden/components";
 import { KeyService } from "@bitwarden/key-management";
 
-import { AnonLayoutWrapperDataService } from "../anon-layout/anon-layout-wrapper-data.service";
-
 import { LoginDecryptionOptionsService } from "./login-decryption-options.service";
 
 // FIXME: update to use a const object instead of a typescript enum

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

@@ -32,6 +32,7 @@ import { UserId } from "@bitwarden/common/types/guid";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
 import {
+  AnonLayoutWrapperDataService,
   AsyncActionsModule,
   ButtonModule,
   CheckboxModule,
@@ -41,7 +42,6 @@ import {
   ToastService,
 } from "@bitwarden/components";
 
-import { AnonLayoutWrapperDataService } from "../anon-layout/anon-layout-wrapper-data.service";
 import { VaultIcon, WaveIcon } from "../icons";
 
 import { LoginComponentService, PasswordPolicies } from "./login-component.service";

libs/auth/src/angular/registration/registration-finish/registration-finish.component.ts

@@ -16,14 +16,13 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
-import { ToastService } from "@bitwarden/components";
+import { AnonLayoutWrapperDataService, ToastService } from "@bitwarden/components";
 
 import {
   LoginStrategyServiceAbstraction,
   LoginSuccessHandlerService,
   PasswordLoginCredentials,
 } from "../../../common";
-import { AnonLayoutWrapperDataService } from "../../anon-layout/anon-layout-wrapper-data.service";
 import {
   InputPasswordComponent,
   InputPasswordFlow,

libs/auth/src/angular/registration/registration-start/registration-start.component.ts

@@ -14,18 +14,18 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
 import {
+  AnonLayoutWrapperDataService,
   AsyncActionsModule,
   ButtonModule,
   CheckboxModule,
   FormFieldModule,
+  Icons,
   IconModule,
   LinkModule,
 } from "@bitwarden/components";
 
 import { LoginEmailService } from "../../../common";
-import { AnonLayoutWrapperDataService } from "../../anon-layout/anon-layout-wrapper-data.service";
 import { RegistrationUserAddIcon } from "../../icons";
-import { RegistrationCheckEmailIcon } from "../../icons/registration-check-email.icon";
 import { RegistrationEnvSelectorComponent } from "../registration-env-selector/registration-env-selector.component";
 
 // FIXME: update to use a const object instead of a typescript enum
@@ -170,7 +170,7 @@ export class RegistrationStartComponent implements OnInit, OnDestroy {
       pageTitle: {
         key: "checkYourEmail",
       },
-      pageIcon: RegistrationCheckEmailIcon,
+      pageIcon: Icons.RegistrationCheckEmailIcon,
     });
     this.registrationStartStateChange.emit(this.state);
   };

libs/auth/src/angular/registration/registration-start/registration-start.stories.ts

@@ -18,6 +18,8 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
 import {
+  AnonLayoutWrapperData,
+  AnonLayoutWrapperDataService,
   AsyncActionsModule,
   ButtonModule,
   DialogModule,
@@ -34,8 +36,6 @@ import {
 // eslint-disable-next-line import/no-restricted-paths, no-restricted-imports
 import { PreloadedEnglishI18nModule } from "../../../../../../apps/web/src/app/core/tests";
 import { LoginEmailService } from "../../../common";
-import { AnonLayoutWrapperDataService } from "../../anon-layout/anon-layout-wrapper-data.service";
-import { AnonLayoutWrapperData } from "../../anon-layout/anon-layout-wrapper.component";
 
 import { RegistrationStartComponent } from "./registration-start.component";
 

libs/auth/src/angular/two-factor-auth/two-factor-auth.component.spec.ts

@@ -36,9 +36,7 @@ import { FakeAccountService, mockAccountServiceWith } from "@bitwarden/common/sp
 import { UserId } from "@bitwarden/common/types/guid";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
-import { DialogService, ToastService } from "@bitwarden/components";
-
-import { AnonLayoutWrapperDataService } from "../anon-layout/anon-layout-wrapper-data.service";
+import { DialogService, ToastService, AnonLayoutWrapperDataService } from "@bitwarden/components";
 
 import { TwoFactorAuthComponentCacheService } from "./two-factor-auth-component-cache.service";
 import { TwoFactorAuthComponentService } from "./two-factor-auth-component.service";

libs/auth/src/angular/two-factor-auth/two-factor-auth.component.ts

@@ -41,6 +41,7 @@ import { UserId } from "@bitwarden/common/types/guid";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
 import {
+  AnonLayoutWrapperDataService,
   AsyncActionsModule,
   ButtonModule,
   CheckboxModule,
@@ -49,7 +50,6 @@ import {
   ToastService,
 } from "@bitwarden/components";
 
-import { AnonLayoutWrapperDataService } from "../anon-layout/anon-layout-wrapper-data.service";
 import {
   TwoFactorAuthAuthenticatorIcon,
   TwoFactorAuthEmailIcon,

libs/components/src/anon-layout/anon-layout-wrapper.component.ts

@@ -4,13 +4,13 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, Data, NavigationEnd, Router, RouterModule } from "@angular/router";
 import { Subject, filter, switchMap, takeUntil, tap } from "rxjs";
 
-import { AnonLayoutComponent } from "@bitwarden/auth/angular";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
-// eslint-disable-next-line no-restricted-imports
-import { Icon, Translation } from "@bitwarden/components";
+
+import { Translation } from "../dialog";
+import { Icon } from "../icon";
 
 import { AnonLayoutWrapperDataService } from "./anon-layout-wrapper-data.service";
+import { AnonLayoutComponent } from "./anon-layout.component";
 
 export interface AnonLayoutWrapperData {
   /**

libs/components/src/anon-layout/anon-layout-wrapper.stories.ts

@@ -14,24 +14,19 @@ import {
   EnvironmentService,
   Environment,
 } from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
-// eslint-disable-next-line no-restricted-imports
-import { ButtonModule } from "@bitwarden/components";
 
-// FIXME: remove `/apps` import from `/libs`
-// FIXME: remove `src` and fix import
-// eslint-disable-next-line import/no-restricted-paths, no-restricted-imports
-import { PreloadedEnglishI18nModule } from "../../../../../apps/web/src/app/core/tests";
-import { LockIcon } from "../icons";
-import { RegistrationCheckEmailIcon } from "../icons/registration-check-email.icon";
+import { ButtonModule } from "../button";
+import { LockIcon, RegistrationCheckEmailIcon } from "../icon/icons";
+import { I18nMockService } from "../utils";
 
 import { AnonLayoutWrapperDataService } from "./anon-layout-wrapper-data.service";
 import { AnonLayoutWrapperComponent, AnonLayoutWrapperData } from "./anon-layout-wrapper.component";
 import { DefaultAnonLayoutWrapperDataService } from "./default-anon-layout-wrapper-data.service";
 
 export default {
-  title: "Auth/Anon Layout Wrapper",
+  title: "Component Library/Anon Layout Wrapper",
   component: AnonLayoutWrapperComponent,
 } as Meta;
 
@@ -84,13 +79,21 @@ const decorators = (options: {
             getClientType: () => options.clientType || ClientType.Web,
           } as Partial<PlatformUtilsService>,
         },
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              setAStrongPassword: "Set a strong password",
+              appLogoLabel: "app logo label",
+              finishCreatingYourAccountBySettingAPassword:
+                "Finish creating your account by setting a password",
+            });
+          },
+        },
       ],
     }),
     applicationConfig({
-      providers: [
-        importProvidersFrom(RouterModule.forRoot(options.routes)),
-        importProvidersFrom(PreloadedEnglishI18nModule),
-      ],
+      providers: [importProvidersFrom(RouterModule.forRoot(options.routes))],
     }),
   ];
 };
@@ -102,18 +105,21 @@ type Story = StoryObj<AnonLayoutWrapperComponent>;
 @Component({
   selector: "bit-default-primary-outlet-example-component",
   template: "<p>Primary Outlet Example: <br> your primary component goes here</p>",
+  standalone: false,
 })
 export class DefaultPrimaryOutletExampleComponent {}
 
 @Component({
   selector: "bit-default-secondary-outlet-example-component",
   template: "<p>Secondary Outlet Example: <br> your secondary component goes here</p>",
+  standalone: false,
 })
 export class DefaultSecondaryOutletExampleComponent {}
 
 @Component({
   selector: "bit-default-env-selector-outlet-example-component",
   template: "<p>Env Selector Outlet Example: <br> your env selector component goes here</p>",
+  standalone: false,
 })
 export class DefaultEnvSelectorOutletExampleComponent {}
 
@@ -188,6 +194,7 @@ const changedData: AnonLayoutWrapperData = {
   template: `
     <button type="button" bitButton buttonType="primary" (click)="toggleData()">Toggle Data</button>
   `,
+  standalone: false,
 })
 export class DynamicContentExampleComponent {
   initialData = true;

libs/components/src/anon-layout/anon-layout.component.ts

@@ -9,16 +9,10 @@ import { ClientType } from "@bitwarden/common/enums";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
-// FIXME: remove `src` and fix import
-// eslint-disable-next-line no-restricted-imports
-import { IconModule, Icon } from "../../../../components/src/icon";
-// FIXME: remove `src` and fix import
-// eslint-disable-next-line no-restricted-imports
-import { SharedModule } from "../../../../components/src/shared";
-// FIXME: remove `src` and fix import
-// eslint-disable-next-line no-restricted-imports
-import { TypographyModule } from "../../../../components/src/typography";
-import { BitwardenLogo, BitwardenShield } from "../icons";
+import { IconModule, Icon } from "../icon";
+import { BitwardenLogo, BitwardenShield } from "../icon/icons";
+import { SharedModule } from "../shared";
+import { TypographyModule } from "../typography";
 
 @Component({
   selector: "auth-anon-layout",

libs/components/src/anon-layout/anon-layout.mdx

@@ -6,8 +6,8 @@ import * as stories from "./anon-layout.stories";
 
 # AnonLayout Component
 
-The Auth-owned AnonLayoutComponent is to be used primarily for unauthenticated pages\*, where we
-don't know who the user is.
+The AnonLayoutComponent is to be used primarily for unauthenticated pages\*, where we don't know who
+the user is.
 
 \*There will be a few exceptions to this—that is, AnonLayout will also be used for the Unlock
 and View Send pages.

libs/components/src/anon-layout/anon-layout.stories.ts

@@ -7,13 +7,9 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
-// FIXME: remove `src` and fix import
-// eslint-disable-next-line no-restricted-imports
-import { ButtonModule } from "../../../../components/src/button";
-// FIXME: remove `src` and fix import
-// eslint-disable-next-line no-restricted-imports
-import { I18nMockService } from "../../../../components/src/utils/i18n-mock.service";
-import { LockIcon } from "../icons";
+import { ButtonModule } from "../button";
+import { LockIcon } from "../icon/icons";
+import { I18nMockService } from "../utils/i18n-mock.service";
 
 import { AnonLayoutComponent } from "./anon-layout.component";
 
@@ -23,7 +19,7 @@ class MockPlatformUtilsService implements Partial<PlatformUtilsService> {
 }
 
 export default {
-  title: "Auth/Anon Layout",
+  title: "Component Library/Anon Layout",
   component: AnonLayoutComponent,
   decorators: [
     moduleMetadata({
@@ -38,6 +34,7 @@ export default {
           useFactory: () => {
             return new I18nMockService({
               accessing: "Accessing",
+              appLogoLabel: "app logo label",
             });
           },
         },

libs/components/src/anon-layout/index.ts

@@ -0,0 +1,4 @@
+export * from "./anon-layout-wrapper-data.service";
+export * from "./anon-layout-wrapper.component";
+export * from "./anon-layout.component";
+export * from "./default-anon-layout-wrapper-data.service";

libs/components/src/icon/icons/bitwarden-logo.icon.ts

@@ -1,6 +1,4 @@
-// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
-// eslint-disable-next-line no-restricted-imports
-import { svgIcon } from "@bitwarden/components";
+import { svgIcon } from "../icon";
 
 export const BitwardenLogo = svgIcon`
   <svg viewBox="0 0 290 45" xmlns="http://www.w3.org/2000/svg">

libs/components/src/icon/icons/bitwarden-shield.icon.ts

@@ -1,6 +1,4 @@
-// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
-// eslint-disable-next-line no-restricted-imports
-import { svgIcon } from "@bitwarden/components";
+import { svgIcon } from "../icon";
 
 export const BitwardenShield = svgIcon`
   <svg viewBox="0 0 120 132" xmlns="http://www.w3.org/2000/svg">

libs/components/src/icon/icons/index.ts

@@ -1,8 +1,13 @@
-export * from "./search";
-export * from "./security";
+export * from "./bitwarden-logo.icon";
+export * from "./bitwarden-shield.icon";
+export * from "./extension-bitwarden-logo.icon";
+export * from "./lock.icon";
+export * from "./generator";
 export * from "./no-access";
 export * from "./no-results";
-export * from "./generator";
+export * from "./registration-check-email.icon";
+export * from "./search";
+export * from "./security";
 export * from "./send";
 export * from "./settings";
 export * from "./vault";

libs/components/src/icon/icons/lock.icon.ts

@@ -1,6 +1,4 @@
-// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
-// eslint-disable-next-line no-restricted-imports
-import { svgIcon } from "@bitwarden/components";
+import { svgIcon } from "../icon";
 
 export const LockIcon = svgIcon`
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 100" fill="none">

libs/components/src/icon/icons/registration-check-email.icon.ts

@@ -1,6 +1,4 @@
-// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
-// eslint-disable-next-line no-restricted-imports
-import { svgIcon } from "@bitwarden/components";
+import { svgIcon } from "../icon";
 
 export const RegistrationCheckEmailIcon = svgIcon`
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 100" fill="none">

libs/components/src/index.ts

@@ -1,5 +1,6 @@
 export { ButtonType, ButtonLikeAbstraction } from "./shared/button-like.abstraction";
 export * from "./a11y";
+export * from "./anon-layout";
 export * from "./async-actions";
 export * from "./avatar";
 export * from "./badge-list";

libs/key-management-ui/src/lock/components/lock.component.ts

@@ -16,7 +16,6 @@ import {
 } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { AnonLayoutWrapperDataService } from "@bitwarden/auth/angular";
 import { LogoutService, PinServiceAbstraction } from "@bitwarden/auth/common";
 import { InternalPolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/models/domain/master-password-policy-options";
@@ -42,6 +41,7 @@ import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/pass
 import { UserKey } from "@bitwarden/common/types/key";
 import {
   AsyncActionsModule,
+  AnonLayoutWrapperDataService,
   ButtonModule,
   DialogService,
   FormFieldModule,