feat: SMTP xoauth2 in console (#11545)

# Which Problems Are Solved
This adds the newly added xoauth2 option to the console allowing SMTP
Providers to be setup that use xoauth2 instead of plain auth.

# How the Problems Are Solved
Added the xoauth2 option to the SMTP Provider Settings


# Additional Changes
Heavily refactored the SMTP Provider page to allow more dynamic
configuration and use Tanstack Query for Data Fetching.

# Additional Context
- Closes #11451
- Backend changes #11239

console/src/app/services/new-admin.service.ts

@@ -2,12 +2,14 @@ import { Injectable } from '@angular/core';
 import { GrpcService } from './grpc.service';
 import { MessageInitShape } from '@bufbuild/protobuf';
 import {
+  AddEmailProviderSMTPRequestSchema,
   GetDefaultOrgResponse,
   GetMyInstanceResponse,
   SetUpOrgRequestSchema,
-  SetUpOrgResponse,
+  TestEmailProviderSMTPRequestSchema,
+  UpdateEmailProviderSMTPRequestSchema,
 } from '@zitadel/proto/zitadel/admin_pb';
-import { injectQuery } from '@tanstack/angular-query-experimental';
+import { injectQuery, queryOptions, skipToken } from '@tanstack/angular-query-experimental';
 import { NewAuthService } from './new-auth.service';
 import { UserService } from './user.service';
 
@@ -21,7 +23,7 @@ export class NewAdminService {
     private readonly userService: UserService,
   ) {}
 
-  public setupOrg(req: MessageInitShape<typeof SetUpOrgRequestSchema>): Promise<SetUpOrgResponse> {
+  public setupOrg(req: MessageInitShape<typeof SetUpOrgRequestSchema>) {
     return this.grpcService.adminNew.setUpOrg(req);
   }
 
@@ -41,4 +43,35 @@ export class NewAdminService {
       enabled: (listMyZitadelPermissionsQuery.data() ?? []).includes('iam.write'),
     }));
   }
+
+  public testEmailProviderSMTP(req: MessageInitShape<typeof TestEmailProviderSMTPRequestSchema>) {
+    return this.grpcService.adminNew.testEmailProviderSMTP(req);
+  }
+
+  public getEmailProviderById(id: string, signal: AbortSignal) {
+    return this.grpcService.adminNew.getEmailProviderById({ id }, { signal });
+  }
+
+  public getEmailProviderByIdQueryOptions(id?: string) {
+    return queryOptions({
+      queryKey: [this.userService.userId(), 'AdminService', 'getEmailProviderById', id],
+      queryFn: id ? ({ signal }) => this.getEmailProviderById(id, signal) : skipToken,
+    });
+  }
+
+  public addEmailProviderSMTP(req: MessageInitShape<typeof AddEmailProviderSMTPRequestSchema>) {
+    return this.grpcService.adminNew.addEmailProviderSMTP(req);
+  }
+
+  public updateEmailProviderSMTP(req: MessageInitShape<typeof UpdateEmailProviderSMTPRequestSchema>) {
+    return this.grpcService.adminNew.updateEmailProviderSMTP(req);
+  }
+
+  public activateSMTPConfig(id: string) {
+    return this.grpcService.adminNew.activateSMTPConfig({ id });
+  }
+
+  public deactivateSMTPConfig(id: string) {
+    return this.grpcService.adminNew.deactivateSMTPConfig({ id });
+  }
 }