chore(console): Angular 20 #10690 (#10768)

# Which Problems Are Solved # How the Problems Are Solved # Additional Changes # Additional Context - Closes #10690
2026-11-11 00:25:12 +00:00 · 2025-10-08 07:10:50 +00:00
parent 4c078c1474
commit e47acaeef2
272 changed files with 3264 additions and 5037 deletions
@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { OrgListComponent } from './actions.component';
-
-describe('OrgListComponent', () => {
-  let component: OrgListComponent;
-  let fixture: ComponentFixture<OrgListComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [OrgListComponent],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(OrgListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -12,6 +12,7 @@ const TARGETS: SidenavSetting = { id: 'targets', i18nKey: 'MENU.TARGETS' };
  templateUrl: './actions.component.html',
  styleUrls: ['./actions.component.scss'],
  animations: [enterAnimations],
+  standalone: false,
 })
 export class ActionsComponent {
  public settingsList: SidenavSetting[] = [ACTIONS, TARGETS];
@@ -17,6 +17,7 @@ import { Location } from '@angular/common';
  selector: 'cnsl-app-create',
  templateUrl: './app-create.component.html',
  styleUrls: ['./app-create.component.scss'],
+  standalone: false,
 })
 export class AppCreateComponent implements OnDestroy {
  public InfoSectionType: any = InfoSectionType;
@@ -15,6 +15,7 @@ export enum GrantType {
  selector: 'cnsl-grants',
  templateUrl: './grants.component.html',
  styleUrls: ['./grants.component.scss'],
+  standalone: false,
 })
 export class GrantsComponent implements OnDestroy {
  public grantContext: UserGrantContext = UserGrantContext.NONE;
@@ -11,6 +11,7 @@ import { Router } from '@angular/router';
  selector: 'cnsl-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
+  standalone: false,
 })
 export class HomeComponent {
  public greendark: string = COLORS[6][700];
@@ -15,6 +15,7 @@ import { InstanceMembersDataSource } from './instance-members-datasource';
  selector: 'cnsl-instance-members',
  templateUrl: './instance-members.component.html',
  styleUrls: ['./instance-members.component.scss'],
+  standalone: false,
 })
 export class InstanceMembersComponent {
  public INITIALPAGESIZE: number = 25;
@@ -43,6 +43,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
  selector: 'cnsl-instance',
  templateUrl: './instance.component.html',
  styleUrls: ['./instance.component.scss'],
+  standalone: false,
 })
 export class InstanceComponent {
  protected instance?: InstanceDetail.AsObject;
@@ -23,6 +23,7 @@ import { AddActionDialogComponent } from '../add-action-dialog/add-action-dialog
  selector: 'cnsl-action-table',
  templateUrl: './action-table.component.html',
  styleUrls: ['./action-table.component.scss'],
+  standalone: false,
 })
 export class ActionTableComponent implements OnInit {
  @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
@@ -18,6 +18,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
  selector: 'cnsl-actions',
  templateUrl: './actions.component.html',
  styleUrls: ['./actions.component.scss'],
+  standalone: false,
 })
 export class ActionsComponent {
  protected flow!: Flow.AsObject;
@@ -14,6 +14,7 @@ import { ToastService } from 'src/app/services/toast.service';
  selector: 'cnsl-add-action-dialog',
  templateUrl: './add-action-dialog.component.html',
  styleUrls: ['./add-action-dialog.component.scss'],
+  standalone: false,
 })
 export class AddActionDialogComponent implements OnInit, OnDestroy {
  public id: string = '';
@@ -11,6 +11,7 @@ import { ToastService } from 'src/app/services/toast.service';
  selector: 'cnsl-add-flow-dialog',
  templateUrl: './add-flow-dialog.component.html',
  styleUrls: ['./add-flow-dialog.component.scss'],
+  standalone: false,
 })
 export class AddFlowDialogComponent {
  public flowType?: FlowType.AsObject;
@@ -20,6 +20,7 @@ import { SetUpOrgRequestSchema } from '@zitadel/proto/zitadel/admin_pb';
  selector: 'cnsl-org-create',
  templateUrl: './org-create.component.html',
  styleUrls: ['./org-create.component.scss'],
+  standalone: false,
 })
 export class OrgCreateComponent {
  protected orgForm = this.fb.group({
@@ -7,6 +7,7 @@ import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/
  templateUrl: './org-list.component.html',
  styleUrls: ['./org-list.component.scss'],
  animations: [enterAnimations],
+  standalone: false,
 })
 export class OrgListComponent {
  constructor(breadcrumbService: BreadcrumbService) {
@@ -25,6 +25,7 @@ import {
  selector: 'cnsl-org-settings',
  templateUrl: './org-settings.component.html',
  styleUrls: ['./org-settings.component.scss'],
+  standalone: false,
 })
 export class OrgSettingsComponent implements OnInit {
  public id: string = '';
@@ -25,6 +25,7 @@ import { toObservable } from '@angular/core/rxjs-interop';
  selector: 'cnsl-org-detail',
  templateUrl: './org-detail.component.html',
  styleUrls: ['./org-detail.component.scss'],
+  standalone: false,
 })
 export class OrgDetailComponent implements OnInit {
  public PolicyComponentServiceType: any = PolicyComponentServiceType;
@@ -16,6 +16,7 @@ import { OrgMembersDataSource } from './org-members-datasource';
  selector: 'cnsl-org-members',
  templateUrl: './org-members.component.html',
  styleUrls: ['./org-members.component.scss'],
+  standalone: false,
 })
 export class OrgMembersComponent {
  public INITIALPAGESIZE: number = 25;
@@ -6,6 +6,7 @@ import { Observable, Subscription } from 'rxjs';
  selector: 'cnsl-additional-origins',
  templateUrl: './additional-origins.component.html',
  styleUrls: ['./additional-origins.component.scss'],
+  standalone: false,
 })
 export class AdditionalOriginsComponent implements OnInit, OnDestroy {
  @Input() title: string = '';
@@ -48,6 +48,7 @@ const MAX_ALLOWED_SIZE = 1 * 1024 * 1024;
  selector: 'cnsl-app-create',
  templateUrl: './app-create.component.html',
  styleUrls: ['./app-create.component.scss'],
+  standalone: false,
 })
 export class AppCreateComponent implements OnInit, OnDestroy {
  private subscription: Subscription = new Subscription();
@@ -10,14 +10,14 @@
  <ng-template topActions cnslHasRole [hasRole]="['project.app.write:' + projectId, 'project.app.write']">
    <div
      class="regen-secret"
-      *ngIf="!isZitadel && this.app?.oidcConfig && (currentAuthMethod === 'CODE' || currentAuthMethod === 'POST')"
+      *ngIf="!isZitadel && app?.oidcConfig && (currentAuthMethod === 'CODE' || currentAuthMethod === 'POST')"
    >
      <button type="button" [disabled]="!canWrite" mat-menu-item (click)="regenerateOIDCClientSecret()">
        {{ 'APP.OIDC.REGENERATESECRET' | translate }}
      </button>
    </div>

-    <div class="regen-secret" *ngIf="!isZitadel && this.app?.apiConfig && currentAuthMethod === 'BASIC'">
+    <div class="regen-secret" *ngIf="!isZitadel && app?.apiConfig && currentAuthMethod === 'BASIC'">
      <button [disabled]="!canWrite" mat-menu-item (click)="regenerateAPIClientSecret()">
        {{ 'APP.API.REGENERATESECRET' | translate }}
      </button>
@@ -137,8 +137,8 @@
                    color="primary"
                    class="rt"
                    (change)="toggleRefreshToken($event)"
-                    [disabled]="!this.grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE)"
-                    [checked]="this.grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN)"
+                    [disabled]="!grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE)"
+                    [checked]="grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN)"
                  >
                    {{ 'APP.OIDC.REFRESHTOKEN' | translate }}
                  </mat-checkbox>
@@ -65,6 +65,7 @@ const MAX_ALLOWED_SIZE = 1 * 1024 * 1024;
  selector: 'cnsl-app-detail',
  templateUrl: './app-detail.component.html',
  styleUrls: ['./app-detail.component.scss'],
+  standalone: false,
 })
 export class AppDetailComponent implements OnInit, OnDestroy {
  public editState: boolean = false;
@@ -5,6 +5,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
  selector: 'cnsl-auth-method-dialog',
  templateUrl: './auth-method-dialog.component.html',
  styleUrls: ['./auth-method-dialog.component.scss'],
+  standalone: false,
 })
 export class AuthMethodDialogComponent {
  public authmethod: string = '';
@@ -12,7 +12,7 @@
      matTooltip="copy to clipboard"
      cnslCopyToClipboard
      [valueToCopy]="data.clientId"
-      (copiedValue)="this.copied = $event"
+      (copiedValue)="copied = $event"
      mat-icon-button
      data-e2e="client-id-copy"
    >
@@ -29,7 +29,7 @@
      matTooltip="copy to clipboard"
      cnslCopyToClipboard
      [valueToCopy]="data.clientSecret"
-      (copiedValue)="this.copied = $event"
+      (copiedValue)="copied = $event"
      mat-icon-button
    >
      <i *ngIf="copied !== data.clientSecret" class="las la-clipboard"></i>
@@ -5,6 +5,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
  selector: 'cnsl-app-secret-dialog',
  templateUrl: './app-secret-dialog.component.html',
  styleUrls: ['./app-secret-dialog.component.scss'],
+  standalone: false,
 })
 export class AppSecretDialogComponent {
  public copied: string = '';
@@ -39,6 +39,7 @@ import { NameDialogComponent } from 'src/app/modules/name-dialog/name-dialog.com
  selector: 'cnsl-integrate',
  templateUrl: './integrate.component.html',
  styleUrls: ['./integrate.component.scss'],
+  standalone: false,
 })
 export class IntegrateAppComponent implements OnInit, OnDestroy {
  private destroy$: Subject<void> = new Subject();
@@ -13,6 +13,7 @@ import { Observable, Subject, takeUntil } from 'rxjs';
      multi: true,
    },
  ],
+  standalone: false,
 })
 export class RedirectUrisComponent implements ControlValueAccessor, OnInit, OnDestroy {
  @Input() title: string = '';
@@ -19,6 +19,7 @@ import { ToastService } from 'src/app/services/toast.service';
  selector: 'cnsl-granted-project-detail',
  templateUrl: './granted-project-detail.component.html',
  styleUrls: ['./granted-project-detail.component.scss'],
+  standalone: false,
 })
 export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
  public projectId: string = '';
@@ -8,6 +8,7 @@ import { ManagementService } from 'src/app/services/mgmt.service';
  selector: 'cnsl-application-grid',
  templateUrl: './application-grid.component.html',
  styleUrls: ['./application-grid.component.scss'],
+  standalone: false,
 })
 export class ApplicationGridComponent implements OnInit {
  @Input() public projectId: string = '';
@@ -13,6 +13,7 @@ import { ProjectApplicationsDataSource } from './applications-datasource';
  selector: 'cnsl-applications',
  templateUrl: './applications.component.html',
  styleUrls: ['./applications.component.scss'],
+  standalone: false,
 })
 export class ApplicationsComponent implements AfterViewInit, OnInit {
  @Input() public projectId: string = '';
@@ -32,6 +32,7 @@ const GRANTS: SidenavSetting = { id: 'grants', i18nKey: 'MENU.GRANTS' };
  selector: 'cnsl-owned-project-detail',
  templateUrl: './owned-project-detail.component.html',
  styleUrls: ['./owned-project-detail.component.scss'],
+  standalone: false,
 })
 export class OwnedProjectDetailComponent implements OnInit {
  public projectId: string = '';
@@ -13,6 +13,7 @@ const ROUTEPARAM = 'projectid';
  selector: 'cnsl-project-grant-create',
  templateUrl: './project-grant-create.component.html',
  styleUrls: ['./project-grant-create.component.scss'],
+  standalone: false,
 })
 export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
  public org?: Org.AsObject;
@@ -18,6 +18,7 @@ import { ProjectGrantMembersDataSource } from './project-grant-members-datasourc
  selector: 'cnsl-project-grant-detail',
  templateUrl: './project-grant-detail.component.html',
  styleUrls: ['./project-grant-detail.component.scss'],
+  standalone: false,
 })
 export class ProjectGrantDetailComponent {
  public INITIALPAGESIZE: number = 25;
@@ -5,6 +5,7 @@ import { GrantedProject, ProjectGrantState, Role } from 'src/app/proto/generated
  selector: 'cnsl-project-grant-illustration',
  templateUrl: './project-grant-illustration.component.html',
  styleUrls: ['./project-grant-illustration.component.scss'],
+  standalone: false,
 })
 export class ProjectGrantIllustrationComponent {
  @Input() public grantedProject!: GrantedProject.AsObject;
@@ -25,6 +25,7 @@ import { ProjectGrantsDataSource } from './project-grants-datasource';
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
+  standalone: false,
 })
 export class ProjectGrantsComponent implements OnInit {
  public INITIAL_PAGESIZE: number = 10;
@@ -26,6 +26,7 @@ import { ToastService } from 'src/app/services/toast.service';
      ]),
    ]),
  ],
+  standalone: false,
 })
 export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
  private subscription: Subscription = new Subscription();
@@ -7,6 +7,7 @@ const ROUTEPARAM = 'projectid';
  selector: 'cnsl-project-roles',
  templateUrl: './project-roles.component.html',
  styleUrls: ['./project-roles.component.scss'],
+  standalone: false,
 })
 export class ProjectRolesComponent {
  @Input() public projectId: string = '';
@@ -10,6 +10,7 @@ import { ToastService } from 'src/app/services/toast.service';
  selector: 'cnsl-project-create',
  templateUrl: './project-create.component.html',
  styleUrls: ['./project-create.component.scss'],
+  standalone: false,
 })
 export class ProjectCreateComponent {
  public project: AddProjectRequest.AsObject = new AddProjectRequest().toObject();
@@ -44,6 +44,7 @@ import { ToastService } from 'src/app/services/toast.service';
      ]),
    ]),
  ],
+  standalone: false,
 })
 export class ProjectGridComponent implements OnInit, OnDestroy {
  public projectList: Array<Project.AsObject | GrantedProject.AsObject> = [];
@@ -32,6 +32,7 @@ import { ToastService } from 'src/app/services/toast.service';
      ]),
    ]),
  ],
+  standalone: false,
 })
 export class ProjectListComponent implements OnInit, OnDestroy {
  public totalResult: number = 0;
@@ -9,6 +9,7 @@ import { ManagementService } from 'src/app/services/mgmt.service';
  selector: 'cnsl-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss'],
+  standalone: false,
 })
 export class ProjectsComponent {
  public zitadelProjectId: string = '';
@@ -7,6 +7,7 @@ const LABELPOLICY_LOCALSTORAGE_KEY = 'labelPolicyOnSignout';
  selector: 'cnsl-signedout',
  templateUrl: './signedout.component.html',
  styleUrls: ['./signedout.component.scss'],
+  standalone: false,
 })
 export class SignedoutComponent {
  public dark: boolean = true;
@@ -16,6 +16,7 @@ import { NewOrganizationService } from '../../services/new-organization.service'
  selector: 'cnsl-user-grant-create',
  templateUrl: './user-grant-create.component.html',
  styleUrls: ['./user-grant-create.component.scss'],
+  standalone: false,
 })
 export class UserGrantCreateComponent implements OnDestroy {
  public context!: UserGrantContext;
@@ -14,6 +14,7 @@ import { ToastService } from 'src/app/services/toast.service';
  selector: 'cnsl-user-create-machine',
  templateUrl: './user-create-machine.component.html',
  styleUrls: ['./user-create-machine.component.scss'],
+  standalone: false,
 })
 export class UserCreateMachineComponent implements OnDestroy {
  public user: AddMachineUserRequest.AsObject = new AddMachineUserRequest().toObject();
@@ -46,6 +46,7 @@ type AuthenticationFactor =
  templateUrl: './user-create-v2.component.html',
  styleUrls: ['./user-create-v2.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class UserCreateV2Component implements OnInit {
  protected readonly loading = signal(false);
@@ -145,7 +145,7 @@
        <button
          data-e2e="create-button"
          color="primary"
-          [disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)"
+          [disabled]="userForm.invalid || (usePassword && pwdForm.invalid)"
          type="submit"
          class="create-button"
          mat-raised-button
@@ -40,6 +40,7 @@ import { PasswordComplexityValidatorFactoryService } from 'src/app/services/pass
  selector: 'cnsl-user-create',
  templateUrl: './user-create.component.html',
  styleUrls: ['./user-create.component.scss'],
+  standalone: false,
 })
 export class UserCreateComponent implements OnInit {
  protected readonly genders: Gender[] = [Gender.GENDER_FEMALE, Gender.GENDER_MALE, Gender.GENDER_UNSPECIFIED];
@@ -155,7 +155,7 @@
          matTooltip="copy to clipboard"
          cnslCopyToClipboard
          [valueToCopy]="otpsecret"
-          (copiedValue)="this.copied = $event"
+          (copiedValue)="copied = $event"
          mat-icon-button
        >
          <i *ngIf="copied !== otpsecret" class="las la-clipboard"></i>
@@ -32,6 +32,7 @@ export type AddAuthFactorDialogData = {
  selector: 'cnsl-auth-factor-dialog',
  templateUrl: './auth-factor-dialog.component.html',
  styleUrls: ['./auth-factor-dialog.component.scss'],
+  standalone: false,
 })
 export class AuthFactorDialogComponent {
  public otpurl: string = '';
@@ -26,6 +26,7 @@ export interface WebAuthNOptions {
  selector: 'cnsl-auth-passwordless',
  templateUrl: './auth-passwordless.component.html',
  styleUrls: ['./auth-passwordless.component.scss'],
+  standalone: false,
 })
 export class AuthPasswordlessComponent implements OnInit, OnDestroy {
  public displayedColumns: string[] = ['name', 'state', 'actions'];
@@ -16,6 +16,7 @@ export enum U2FComponentDestination {
  selector: 'cnsl-dialog-passwordless',
  templateUrl: './dialog-passwordless.component.html',
  styleUrls: ['./dialog-passwordless.component.scss'],
+  standalone: false,
 })
 export class DialogPasswordlessComponent {
  private type!: U2FComponentDestination;
@@ -46,6 +46,7 @@ type UserWithHumanType = Omit<User, 'type'> & { type: { case: 'human'; value: Hu
  selector: 'cnsl-auth-user-detail',
  templateUrl: './auth-user-detail.component.html',
  styleUrls: ['./auth-user-detail.component.scss'],
+  standalone: false,
 })
 export class AuthUserDetailComponent implements OnInit {
  protected readonly genders: Gender[] = [Gender.MALE, Gender.FEMALE, Gender.DIVERSE];
@@ -112,23 +113,20 @@ export class AuthUserDetailComponent implements OnInit {
      filter(Boolean),
    );

-    effect(
-      () => {
-        const user = this.user.data();
-        if (!user || user.type.case !== 'human') {
-          return;
-        }
+    effect(() => {
+      const user = this.user.data();
+      if (!user || user.type.case !== 'human') {
+        return;
+      }

-        this.breadcrumbService.setBreadcrumb([
-          new Breadcrumb({
-            type: BreadcrumbType.AUTHUSER,
-            name: user.type.value.profile?.displayName,
-            routerLink: ['/users', 'me'],
-          }),
-        ]);
-      },
-      { allowSignalWrites: true },
-    );
+      this.breadcrumbService.setBreadcrumb([
+        new Breadcrumb({
+          type: BreadcrumbType.AUTHUSER,
+          name: user.type.value.profile?.displayName,
+          routerLink: ['/users', 'me'],
+        }),
+      ]);
+    });

    effect(() => {
      const error = this.user.error();
@@ -117,6 +117,7 @@ describe('AuthUserMfaComponent', () => {

    expect(serviceStub.listMyMultiFactors).toHaveBeenCalled();
    // Our stub returns 3 items
+    // @ts-ignore
    expect(component.dataSource.data.length).toBe(3);

    // Use the public getter methods to access protected properties
@@ -24,6 +24,7 @@ export interface WebAuthNOptions {
  selector: 'cnsl-auth-user-mfa',
  templateUrl: './auth-user-mfa.component.html',
  styleUrls: ['./auth-user-mfa.component.scss'],
+  standalone: false,
 })
 export class AuthUserMfaComponent implements OnInit, OnDestroy {
  public displayedColumns: string[] = ['name', 'type', 'state', 'actions'];
@@ -5,6 +5,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
  selector: 'cnsl-code-dialog',
  templateUrl: './code-dialog.component.html',
  styleUrls: ['./code-dialog.component.scss'],
+  standalone: false,
 })
 export class CodeDialogComponent {
  public code: string = '';
@@ -16,6 +16,7 @@ export enum U2FComponentDestination {
  selector: 'cnsl-dialog-u2f',
  templateUrl: './dialog-u2f.component.html',
  styleUrls: ['./dialog-u2f.component.scss'],
+  standalone: false,
 })
 export class DialogU2FComponent {
  private type!: U2FComponentDestination;
@@ -33,6 +33,7 @@ export type EditDialogResult = {
  selector: 'cnsl-edit-dialog',
  templateUrl: './edit-dialog.component.html',
  styleUrls: ['./edit-dialog.component.scss'],
+  standalone: false,
 })
 export class EditDialogComponent implements OnInit {
  public controlKey = 'editingField';
@@ -11,6 +11,7 @@ export type ResendEmailDialogResult = { send: true; email: string } | { send: fa
  selector: 'cnsl-resend-email-dialog',
  templateUrl: './resend-email-dialog.component.html',
  styleUrls: ['./resend-email-dialog.component.scss'],
+  standalone: false,
 })
 export class ResendEmailDialogComponent {
  public email: string = '';
@@ -12,6 +12,7 @@ import { Human } from '@zitadel/proto/zitadel/user_pb';
  selector: 'cnsl-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss'],
+  standalone: false,
 })
 export class ContactComponent {
  @Input() disablePhoneCode: boolean = false;
@@ -10,6 +10,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
  selector: 'cnsl-detail-form-machine',
  templateUrl: './detail-form-machine.component.html',
  styleUrls: ['./detail-form-machine.component.scss'],
+  standalone: false,
 })
 export class DetailFormMachineComponent {
  @Input({ required: true }) public set username(username: string) {
@@ -31,6 +31,7 @@ function toHumanProfile(profile: HumanProfile | Profile): HumanProfile {
  selector: 'cnsl-detail-form',
  templateUrl: './detail-form.component.html',
  styleUrls: ['./detail-form.component.scss'],
+  standalone: false,
 })
 export class DetailFormComponent implements OnInit {
  @Input() public showEditImage: boolean = false;
@@ -8,6 +8,7 @@ import { ToastService } from 'src/app/services/toast.service';
  selector: 'cnsl-profile-picture',
  templateUrl: './profile-picture.component.html',
  styleUrls: ['./profile-picture.component.scss'],
+  standalone: false,
 })
 export class ProfilePictureComponent {
  constructor(
@@ -16,6 +16,7 @@ import { ToastService } from 'src/app/services/toast.service';
  selector: 'cnsl-external-idps',
  templateUrl: './external-idps.component.html',
  styleUrls: ['./external-idps.component.scss'],
+  standalone: false,
 })
 export class ExternalIdpsComponent implements OnInit, OnDestroy {
  @Input({ required: true }) service!: GrpcAuthService | ManagementService;
@@ -28,6 +28,7 @@ import { PasswordComplexityValidatorFactoryService } from 'src/app/services/pass
  selector: 'cnsl-password',
  templateUrl: './password.component.html',
  styleUrls: ['./password.component.scss'],
+  standalone: false,
 })
 export class PasswordComponent implements OnInit {
  private readonly breadcrumb$: Observable<Breadcrumb[]>;
@@ -5,6 +5,7 @@ import { formatPhone } from 'src/app/utils/formatPhone';
  selector: 'cnsl-phone-detail',
  templateUrl: './phone-detail.component.html',
  styleUrls: ['./phone-detail.component.scss'],
+  standalone: false,
 })
 export class PhoneDetailComponent implements OnChanges {
  @Input() phone: string | undefined;
@@ -36,7 +36,6 @@ import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
-import { QRCodeModule } from 'angularx-qrcode';
 import { InfoDialogModule } from 'src/app/modules/info-dialog/info-dialog.module';
 import { MetadataModule } from 'src/app/modules/metadata/metadata.module';
 import { CountryCallingCodesService } from 'src/app/services/country-calling-codes.service';
@@ -61,6 +60,7 @@ import { MachineSecretDialogComponent } from './user-detail/machine-secret-dialo
 import { PasswordlessComponent } from './user-detail/passwordless/passwordless.component';
 import { UserDetailComponent } from './user-detail/user-detail.component';
 import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
+import { QRCodeComponent } from 'angularx-qrcode';

@NgModule({
  declarations: [
@@ -95,7 +95,6 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
    DetailFormMachineModule,
    WarnDialogModule,
    MatDialogModule,
-    QRCodeModule,
    ShowTokenDialogModule,
    MetaLayoutModule,
    MatCheckboxModule,
@@ -129,6 +128,8 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
    InfoSectionModule,
    MatSelectModule,
    TypeSafeCellDefModule,
+    QRCodeComponent,
+    MatProgressSpinnerModule,
  ],
 })
 export class UserDetailModule {}
@@ -12,7 +12,7 @@
      matTooltip="copy to clipboard"
      cnslCopyToClipboard
      [valueToCopy]="data.clientId"
-      (copiedValue)="this.copied = $event"
+      (copiedValue)="copied = $event"
      mat-icon-button
      data-e2e="client-id-copy"
    >
@@ -29,7 +29,7 @@
      matTooltip="copy to clipboard"
      cnslCopyToClipboard
      [valueToCopy]="data.clientSecret"
-      (copiedValue)="this.copied = $event"
+      (copiedValue)="copied = $event"
      mat-icon-button
    >
      <i *ngIf="copied !== data.clientSecret" class="las la-clipboard"></i>
@@ -5,6 +5,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
  selector: 'cnsl-machine-secret-dialog',
  templateUrl: './machine-secret-dialog.component.html',
  styleUrls: ['./machine-secret-dialog.component.scss'],
+  standalone: false,
 })
 export class MachineSecretDialogComponent {
  public copied: string = '';
@@ -23,6 +23,7 @@ export interface WebAuthNOptions {
  selector: 'cnsl-passwordless',
  templateUrl: './passwordless.component.html',
  styleUrls: ['./passwordless.component.scss'],
+  standalone: false,
 })
 export class PasswordlessComponent implements OnInit, OnDestroy {
  @Input({ required: true }) public user!: User;
@@ -81,6 +81,7 @@ type UserWithHumanType = Omit<UserV2, 'type'> & { type: { case: 'human'; value:
  selector: 'cnsl-user-detail',
  templateUrl: './user-detail.component.html',
  styleUrls: ['./user-detail.component.scss'],
+  standalone: false,
 })
 export class UserDetailComponent implements OnInit {
  public user$: Observable<UserQuery>;
@@ -23,6 +23,7 @@ type MFAQuery =
  selector: 'cnsl-user-mfa',
  templateUrl: './user-mfa.component.html',
  styleUrls: ['./user-mfa.component.scss'],
+  standalone: false,
 })
 export class UserMfaComponent {
  @Input({ required: true }) public set user(user: User) {
@@ -6,6 +6,7 @@ import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/
  selector: 'cnsl-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.scss'],
+  standalone: false,
 })
 export class UserListComponent {
  constructor(
@@ -2,7 +2,7 @@
  <cnsl-refresh-table
    *ngIf="type$ | async as type"
    [loading]="loading()"
-    (refreshed)="this.refresh$.next(true)"
+    (refreshed)="refresh$.next(true)"
    [hideRefresh]="true"
    [timestamp]="(users$ | async)?.details?.timestamp"
    [selection]="selection"
@@ -61,7 +61,7 @@
    <cnsl-filter-user
      actions
      *ngIf="!selection.hasValue()"
-      (filterChanged)="this.searchQueries$.next($any($event))"
+      (filterChanged)="searchQueries$.next($any($event))"
      (filterOpen)="filterOpen = $event"
    ></cnsl-filter-user>
    <ng-template cnslHasRole [hasRole]="['user.write']" actions>
@@ -54,6 +54,7 @@ type Query = NonNullable<QueryWrapper extends { query?: infer Q } ? Q : never>;
  templateUrl: './user-table.component.html',
  styleUrls: ['./user-table.component.scss'],
  animations: [enterAnimations],
+  standalone: false,
 })
 export class UserTableComponent implements OnInit {
  protected readonly Type = Type;