Files
zitadel/console/src/app/services/new-auth.service.ts
T
dd9dcf9f72 feat(console): improve org search performance in create project grant page #11121 (#12057)
<!--
Please inform yourself about the contribution guidelines on submitting a
PR here:
https://github.com/zitadel/zitadel/blob/main/CONTRIBUTING.md#submit-a-pull-request-pr.
Take note of how PR/commit titles should be written and replace the
template texts in the sections below. Don't remove any of the sections.
It is important that the commit history clearly shows what is changed
and why.
Important: By submitting a contribution you agree to the terms from our
Licensing Policy as described here:
https://github.com/zitadel/zitadel/blob/main/LICENSING.md#community-contributions.
-->

# Which Problems Are Solved

When creating a new Project Grant in the Zitadel console, the UI becomes
extremely sluggish/unusable. The issue appears tied to the organization
search dropdown attempting to load a very large dataset.

# How the Problems Are Solved

The refactored `SearchOrgAutocompleteComponent` uses server side
filtering and ondemand loading using infinite scrolling. This makes sure
on a subset of organizations is ever loaded on the client.

# Additional Changes

- Added tailwindcss for easier styling
- Removed build warnings
- Removed some of the SCSS syntax warnings

# Additional Context
- Closes #11121

---------

Co-authored-by: Max Peintner <[email protected]>
2026-04-22 11:46:27 +02:00

91 lines
3.3 KiB
TypeScript

import { Injectable } from '@angular/core';
import { GrpcService } from './grpc.service';
import { create, MessageInitShape } from '@bufbuild/protobuf';
import {
AddMyAuthFactorOTPSMSResponse,
GetMyLoginPolicyResponse,
GetMyLoginPolicyRequestSchema,
GetMyPasswordComplexityPolicyResponse,
ListMyAuthFactorsRequestSchema,
ListMyAuthFactorsResponse,
RemoveMyAuthFactorOTPEmailRequestSchema,
RemoveMyAuthFactorOTPEmailResponse,
RemoveMyAuthFactorOTPRequestSchema,
RemoveMyAuthFactorOTPResponse,
RemoveMyAuthFactorU2FRequestSchema,
RemoveMyAuthFactorU2FResponse,
RemoveMyAuthFactorOTPSMSRequestSchema,
RemoveMyAuthFactorOTPSMSResponse,
ListMyMetadataResponse,
VerifyMyPhoneResponse,
ListMyZitadelPermissionsResponse,
ListMyProjectOrgsRequestSchema,
} from '@zitadel/proto/zitadel/auth_pb';
import { injectQuery } from '@tanstack/angular-query-experimental';
import { UserService } from './user.service';
@Injectable({
providedIn: 'root',
})
export class NewAuthService {
constructor(
private readonly grpcService: GrpcService,
private readonly userService: UserService,
) {}
public verifyMyPhone(code: string): Promise<VerifyMyPhoneResponse> {
return this.grpcService.authNew.verifyMyPhone({ code });
}
public addMyAuthFactorOTPSMS(): Promise<AddMyAuthFactorOTPSMSResponse> {
return this.grpcService.authNew.addMyAuthFactorOTPSMS({});
}
public listMyMetadata(): Promise<ListMyMetadataResponse> {
return this.grpcService.authNew.listMyMetadata({});
}
public listMyMultiFactors(): Promise<ListMyAuthFactorsResponse> {
return this.grpcService.authNew.listMyAuthFactors(create(ListMyAuthFactorsRequestSchema));
}
public removeMyAuthFactorOTPSMS(): Promise<RemoveMyAuthFactorOTPSMSResponse> {
return this.grpcService.authNew.removeMyAuthFactorOTPSMS(create(RemoveMyAuthFactorOTPSMSRequestSchema));
}
public getMyLoginPolicy(): Promise<GetMyLoginPolicyResponse> {
return this.grpcService.authNew.getMyLoginPolicy(create(GetMyLoginPolicyRequestSchema));
}
public removeMyMultiFactorOTP(): Promise<RemoveMyAuthFactorOTPResponse> {
return this.grpcService.authNew.removeMyAuthFactorOTP(create(RemoveMyAuthFactorOTPRequestSchema));
}
public removeMyMultiFactorU2F(tokenId: string): Promise<RemoveMyAuthFactorU2FResponse> {
return this.grpcService.authNew.removeMyAuthFactorU2F(create(RemoveMyAuthFactorU2FRequestSchema, { tokenId }));
}
public removeMyAuthFactorOTPEmail(): Promise<RemoveMyAuthFactorOTPEmailResponse> {
return this.grpcService.authNew.removeMyAuthFactorOTPEmail(create(RemoveMyAuthFactorOTPEmailRequestSchema));
}
public getMyPasswordComplexityPolicy(): Promise<GetMyPasswordComplexityPolicyResponse> {
return this.grpcService.authNew.getMyPasswordComplexityPolicy({});
}
public listMyZitadelPermissions(): Promise<ListMyZitadelPermissionsResponse> {
return this.grpcService.authNew.listMyZitadelPermissions({});
}
public listMyZitadelPermissionsQuery() {
return injectQuery(() => ({
queryKey: [this.userService.userId(), 'auth', 'listMyZitadelPermissions'],
queryFn: () => this.listMyZitadelPermissions().then(({ result }) => result),
}));
}
public listMyProjectOrgs(req: MessageInitShape<typeof ListMyProjectOrgsRequestSchema>, signal?: AbortSignal) {
return this.grpcService.authNew.listMyProjectOrgs(req, { signal });
}
}