[PM-21600] Migrate account and security to standalone (#14762)

Hinton · web-flow · commit a6e2012087f1 · 2025-05-27T10:03:54.000+02:00
Migrates account and security settings components to standalone and removing them from the `LooseComponentsModule`.
diff --git a/apps/web/src/app/auth/settings/account/account.component.ts b/apps/web/src/app/auth/settings/account/account.component.ts
@@ -8,16 +8,27 @@ import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { DialogService } from "@bitwarden/components";
 
+import { HeaderModule } from "../../../layouts/header/header.module";
+import { SharedModule } from "../../../shared";
 import { PurgeVaultComponent } from "../../../vault/settings/purge-vault.component";
 
+import { ChangeEmailComponent } from "./change-email.component";
+import { DangerZoneComponent } from "./danger-zone.component";
 import { DeauthorizeSessionsComponent } from "./deauthorize-sessions.component";
 import { DeleteAccountDialogComponent } from "./delete-account-dialog.component";
+import { ProfileComponent } from "./profile.component";
 import { SetAccountVerifyDevicesDialogComponent } from "./set-account-verify-devices-dialog.component";
 
 @Component({
-  selector: "app-account",
   templateUrl: "account.component.html",
-  standalone: false,
+  standalone: true,
+  imports: [
+    SharedModule,
+    HeaderModule,
+    ProfileComponent,
+    ChangeEmailComponent,
+    DangerZoneComponent,
+  ],
 })
 export class AccountComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
diff --git a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts
@@ -24,14 +24,19 @@ import {
   ToastService,
 } from "@bitwarden/components";
 
+import { SharedModule } from "../../../shared";
+
+import { SelectableAvatarComponent } from "./selectable-avatar.component";
+
 type ChangeAvatarDialogData = {
   profile: ProfileResponse;
 };
 
 @Component({
   templateUrl: "change-avatar-dialog.component.html",
   encapsulation: ViewEncapsulation.None,
-  standalone: false,
+  standalone: true,
+  imports: [SharedModule, SelectableAvatarComponent],
 })
 export class ChangeAvatarDialogComponent implements OnInit, OnDestroy {
   profile: ProfileResponse;
diff --git a/apps/web/src/app/auth/settings/account/change-email.component.spec.ts b/apps/web/src/app/auth/settings/account/change-email.component.spec.ts
@@ -33,8 +33,7 @@ describe("ChangeEmailComponent", () => {
     accountService = mockAccountServiceWith("UserId" as UserId);
 
     await TestBed.configureTestingModule({
-      declarations: [ChangeEmailComponent],
-      imports: [ReactiveFormsModule, SharedModule],
+      imports: [ReactiveFormsModule, SharedModule, ChangeEmailComponent],
       providers: [
         { provide: AccountService, useValue: accountService },
         { provide: ApiService, useValue: apiService },
diff --git a/apps/web/src/app/auth/settings/account/change-email.component.ts b/apps/web/src/app/auth/settings/account/change-email.component.ts
@@ -14,10 +14,13 @@ import { UserId } from "@bitwarden/common/types/guid";
 import { ToastService } from "@bitwarden/components";
 import { KdfConfigService, KeyService } from "@bitwarden/key-management";
 
+import { SharedModule } from "../../../shared";
+
 @Component({
   selector: "app-change-email",
   templateUrl: "change-email.component.html",
-  standalone: false,
+  standalone: true,
+  imports: [SharedModule],
 })
 export class ChangeEmailComponent implements OnInit {
   tokenSent = false;
diff --git a/apps/web/src/app/auth/settings/account/danger-zone.component.ts b/apps/web/src/app/auth/settings/account/danger-zone.component.ts
@@ -3,8 +3,8 @@
 import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
 
-import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { TypographyModule } from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 /**
  * Component for the Danger Zone section of the Account/Organization Settings page.
@@ -13,6 +13,6 @@ import { TypographyModule } from "@bitwarden/components";
   selector: "app-danger-zone",
   templateUrl: "danger-zone.component.html",
   standalone: true,
-  imports: [TypographyModule, JslibModule, CommonModule],
+  imports: [CommonModule, TypographyModule, I18nPipe],
 })
 export class DangerZoneComponent {}
diff --git a/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.ts b/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.ts
@@ -1,6 +1,7 @@
 import { Component } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 
+import { UserVerificationFormInputComponent } from "@bitwarden/auth/angular";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { Verification } from "@bitwarden/common/auth/types/verification";
@@ -9,10 +10,12 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 
+import { SharedModule } from "../../../shared";
+
 @Component({
-  selector: "app-deauthorize-sessions",
   templateUrl: "deauthorize-sessions.component.html",
-  standalone: false,
+  standalone: true,
+  imports: [SharedModule, UserVerificationFormInputComponent],
 })
 export class DeauthorizeSessionsComponent {
   deauthForm = this.formBuilder.group({
diff --git a/apps/web/src/app/auth/settings/account/delete-account-dialog.component.ts b/apps/web/src/app/auth/settings/account/delete-account-dialog.component.ts
@@ -3,15 +3,19 @@
 import { Component } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 
+import { UserVerificationFormInputComponent } from "@bitwarden/auth/angular";
 import { AccountApiService } from "@bitwarden/common/auth/abstractions/account-api.service";
 import { Verification } from "@bitwarden/common/auth/types/verification";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { DialogRef, DialogService, ToastService } from "@bitwarden/components";
 
+import { SharedModule } from "../../../shared";
+
 @Component({
   templateUrl: "delete-account-dialog.component.html",
-  standalone: false,
+  standalone: true,
+  imports: [SharedModule, UserVerificationFormInputComponent],
 })
 export class DeleteAccountDialogComponent {
   deleteForm = this.formBuilder.group({
diff --git a/apps/web/src/app/auth/settings/account/profile.component.ts b/apps/web/src/app/auth/settings/account/profile.component.ts
@@ -14,12 +14,17 @@ import { ProfileResponse } from "@bitwarden/common/models/response/profile.respo
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 
+import { DynamicAvatarComponent } from "../../../components/dynamic-avatar.component";
+import { SharedModule } from "../../../shared";
+import { AccountFingerprintComponent } from "../../../shared/components/account-fingerprint/account-fingerprint.component";
+
 import { ChangeAvatarDialogComponent } from "./change-avatar-dialog.component";
 
 @Component({
   selector: "app-profile",
   templateUrl: "profile.component.html",
-  standalone: false,
+  standalone: true,
+  imports: [SharedModule, DynamicAvatarComponent, AccountFingerprintComponent],
 })
 export class ProfileComponent implements OnInit, OnDestroy {
   loading = true;
diff --git a/apps/web/src/app/auth/settings/account/selectable-avatar.component.ts b/apps/web/src/app/auth/settings/account/selectable-avatar.component.ts
@@ -1,7 +1,10 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { NgClass } from "@angular/common";
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 
+import { AvatarModule } from "@bitwarden/components";
+
 @Component({
   selector: "selectable-avatar",
   template: `<span
@@ -24,7 +27,8 @@ import { Component, EventEmitter, Input, Output } from "@angular/core";
     >
     </bit-avatar>
   </span>`,
-  standalone: false,
+  standalone: true,
+  imports: [NgClass, AvatarModule],
 })
 export class SelectableAvatarComponent {
   @Input() id: string;
diff --git a/apps/web/src/app/auth/settings/security/api-key.component.ts b/apps/web/src/app/auth/settings/security/api-key.component.ts
@@ -3,12 +3,15 @@
 import { Component, Inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
+import { UserVerificationFormInputComponent } from "@bitwarden/auth/angular";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { SecretVerificationRequest } from "@bitwarden/common/auth/models/request/secret-verification.request";
 import { ApiKeyResponse } from "@bitwarden/common/auth/models/response/api-key.response";
 import { Verification } from "@bitwarden/common/auth/types/verification";
 import { DIALOG_DATA, DialogConfig, DialogService } from "@bitwarden/components";
 
+import { SharedModule } from "../../../shared";
+
 export type ApiKeyDialogData = {
   keyType: string;
   isRotation?: boolean;
@@ -21,9 +24,9 @@ export type ApiKeyDialogData = {
   apiKeyDescription: string;
 };
 @Component({
-  selector: "app-api-key",
   templateUrl: "api-key.component.html",
-  standalone: false,
+  standalone: true,
+  imports: [SharedModule, UserVerificationFormInputComponent],
 })
 export class ApiKeyComponent {
   clientId: string;
diff --git a/apps/web/src/app/auth/settings/security/security-keys.component.ts b/apps/web/src/app/auth/settings/security/security-keys.component.ts
@@ -8,12 +8,15 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { DialogService } from "@bitwarden/components";
 
+import { SharedModule } from "../../../shared";
+
 import { ApiKeyComponent } from "./api-key.component";
+import { ChangeKdfModule } from "./change-kdf/change-kdf.module";
 
 @Component({
-  selector: "app-security-keys",
   templateUrl: "security-keys.component.html",
-  standalone: false,
+  standalone: true,
+  imports: [SharedModule, ChangeKdfModule],
 })
 export class SecurityKeysComponent implements OnInit {
   showChangeKdf = true;
diff --git a/apps/web/src/app/auth/settings/security/security.component.ts b/apps/web/src/app/auth/settings/security/security.component.ts
@@ -4,10 +4,13 @@ import { UserVerificationService } from "@bitwarden/common/auth/abstractions/use
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 
+import { HeaderModule } from "../../../layouts/header/header.module";
+import { SharedModule } from "../../../shared";
+
 @Component({
-  selector: "app-security",
   templateUrl: "security.component.html",
-  standalone: false,
+  standalone: true,
+  imports: [SharedModule, HeaderModule],
 })
 export class SecurityComponent implements OnInit {
   showChangePassword = true;
diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts
@@ -15,31 +15,19 @@ import { AcceptFamilySponsorshipComponent } from "../admin-console/organizations
 import { RecoverDeleteComponent } from "../auth/recover-delete.component";
 import { RecoverTwoFactorComponent } from "../auth/recover-two-factor.component";
 import { SetPasswordComponent } from "../auth/set-password.component";
-import { AccountComponent } from "../auth/settings/account/account.component";
-import { ChangeAvatarDialogComponent } from "../auth/settings/account/change-avatar-dialog.component";
-import { ChangeEmailComponent } from "../auth/settings/account/change-email.component";
 import { DangerZoneComponent } from "../auth/settings/account/danger-zone.component";
-import { DeauthorizeSessionsComponent } from "../auth/settings/account/deauthorize-sessions.component";
-import { DeleteAccountDialogComponent } from "../auth/settings/account/delete-account-dialog.component";
-import { ProfileComponent } from "../auth/settings/account/profile.component";
-import { SelectableAvatarComponent } from "../auth/settings/account/selectable-avatar.component";
 import { EmergencyAccessConfirmComponent } from "../auth/settings/emergency-access/confirm/emergency-access-confirm.component";
 import { EmergencyAccessAddEditComponent } from "../auth/settings/emergency-access/emergency-access-add-edit.component";
 import { EmergencyAccessComponent } from "../auth/settings/emergency-access/emergency-access.component";
 import { EmergencyAccessTakeoverComponent } from "../auth/settings/emergency-access/takeover/emergency-access-takeover.component";
 import { EmergencyAccessViewComponent } from "../auth/settings/emergency-access/view/emergency-access-view.component";
-import { ApiKeyComponent } from "../auth/settings/security/api-key.component";
-import { ChangeKdfModule } from "../auth/settings/security/change-kdf/change-kdf.module";
-import { SecurityKeysComponent } from "../auth/settings/security/security-keys.component";
-import { SecurityComponent } from "../auth/settings/security/security.component";
 import { UserVerificationModule } from "../auth/shared/components/user-verification";
 import { UpdatePasswordComponent } from "../auth/update-password.component";
 import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
 import { VerifyEmailTokenComponent } from "../auth/verify-email-token.component";
 import { VerifyRecoverDeleteComponent } from "../auth/verify-recover-delete.component";
 import { SponsoredFamiliesComponent } from "../billing/settings/sponsored-families.component";
 import { SponsoringOrgRowComponent } from "../billing/settings/sponsoring-org-row.component";
-import { DynamicAvatarComponent } from "../components/dynamic-avatar.component";
 // eslint-disable-next-line no-restricted-imports -- Temporarily disabled until DIRT refactors these out of this module
 import { ExposedPasswordsReportComponent as OrgExposedPasswordsReportComponent } from "../dirt/reports/pages/organizations/exposed-passwords-report.component";
 // eslint-disable-next-line no-restricted-imports -- Temporarily disabled until DIRT refactors these out of this module
@@ -68,8 +56,6 @@ import { SharedModule } from "./shared.module";
   imports: [
     SharedModule,
     UserVerificationModule,
-    ChangeKdfModule,
-    DynamicAvatarComponent,
     AccountFingerprintComponent,
     OrganizationBadgeModule,
     PipesModule,
@@ -85,11 +71,6 @@ import { SharedModule } from "./shared.module";
   ],
   declarations: [
     AcceptFamilySponsorshipComponent,
-    AccountComponent,
-    ApiKeyComponent,
-    ChangeEmailComponent,
-    DeauthorizeSessionsComponent,
-    DeleteAccountDialogComponent,
     EmergencyAccessAddEditComponent,
     EmergencyAccessComponent,
     EmergencyAccessConfirmComponent,
@@ -104,15 +85,10 @@ import { SharedModule } from "./shared.module";
     OrgUserConfirmComponent,
     OrgWeakPasswordsReportComponent,
     PremiumBadgeComponent,
-    ProfileComponent,
-    ChangeAvatarDialogComponent,
     PurgeVaultComponent,
     RecoverDeleteComponent,
     RecoverTwoFactorComponent,
     RemovePasswordComponent,
-    SecurityComponent,
-    SecurityKeysComponent,
-    SelectableAvatarComponent,
     SetPasswordComponent,
     SponsoredFamiliesComponent,
     FreeBitwardenFamiliesComponent,
@@ -125,12 +101,6 @@ import { SharedModule } from "./shared.module";
   exports: [
     UserVerificationModule,
     PremiumBadgeComponent,
-    AccountComponent,
-    ApiKeyComponent,
-    ChangeEmailComponent,
-    DeauthorizeSessionsComponent,
-    DeleteAccountDialogComponent,
-    DynamicAvatarComponent,
     EmergencyAccessAddEditComponent,
     EmergencyAccessComponent,
     EmergencyAccessConfirmComponent,
@@ -146,15 +116,10 @@ import { SharedModule } from "./shared.module";
     OrgUserConfirmComponent,
     OrgWeakPasswordsReportComponent,
     PremiumBadgeComponent,
-    ProfileComponent,
-    ChangeAvatarDialogComponent,
     PurgeVaultComponent,
     RecoverDeleteComponent,
     RecoverTwoFactorComponent,
     RemovePasswordComponent,
-    SecurityComponent,
-    SecurityKeysComponent,
-    SelectableAvatarComponent,
     SetPasswordComponent,
     SponsoredFamiliesComponent,
     FreeBitwardenFamiliesComponent,
