feat: Use V2 API's in Console (#9312)

# Which Problems Are Solved
Solves #8976

# Additional Changes
I have done some intensive refactorings and we are using the new
@zitadel/client package for GRPC access.

# Additional Context
- Closes #8976

---------

Co-authored-by: Max Peintner <[email protected]>

console/src/app/modules/info-row/info-row.component.html

@@ -9,26 +9,26 @@
         inactive: user.state === UserState.USER_STATE_INACTIVE,
       }"
     >
-      {{ 'USER.DATA.STATE' + user.state | translate }}
+      {{ (isV2(user) ? 'USER.STATEV2.' : 'USER.STATE.') + user.state | translate }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'USER.ID' | translate }}</p>
-    <p *ngIf="user && user.id" class="info-row-desc">{{ user.id }}</p>
+    <p *ngIf="userId" class="info-row-desc">{{ userId }}</p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'USER.DETAILS.DATECREATED' | translate }}</p>
-    <p *ngIf="user && user.details && user.details.creationDate" class="info-row-desc">
-      {{ user.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+    <p *ngIf="creationDate" class="info-row-desc">
+      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'USER.DETAILS.DATECHANGED' | translate }}</p>
-    <p *ngIf="user && user.details && user.details.changeDate" class="info-row-desc">
-      {{ user.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+    <p *ngIf="changeDate" class="info-row-desc">
+      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 

console/src/app/modules/info-row/info-row.component.ts

@@ -6,6 +6,9 @@ import { Org, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
 import { LoginPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
 import { GrantedProject, Project, ProjectGrantState, ProjectState } from 'src/app/proto/generated/zitadel/project_pb';
 import { User, UserState } from 'src/app/proto/generated/zitadel/user_pb';
+import { User as UserV1 } from '@zitadel/proto/zitadel/user_pb';
+import { User as UserV2 } from '@zitadel/proto/zitadel/user/v2/user_pb';
+import { LoginPolicy as LoginPolicyV2 } from '@zitadel/proto/zitadel/policy_pb';
 
 @Component({
   selector: 'cnsl-info-row',
@@ -13,14 +16,14 @@ import { User, UserState } from 'src/app/proto/generated/zitadel/user_pb';
   styleUrls: ['./info-row.component.scss'],
 })
 export class InfoRowComponent {
-  @Input() public user!: User.AsObject;
+  @Input() public user?: User.AsObject | UserV2 | UserV1;
   @Input() public org!: Org.AsObject;
   @Input() public instance!: InstanceDetail.AsObject;
   @Input() public app!: App.AsObject;
   @Input() public idp!: IDP.AsObject;
   @Input() public project!: Project.AsObject;
   @Input() public grantedProject!: GrantedProject.AsObject;
-  @Input() public loginPolicy?: LoginPolicy.AsObject;
+  @Input() public loginPolicy?: LoginPolicy.AsObject | LoginPolicyV2;
 
   public UserState: any = UserState;
   public State: any = State;
@@ -35,25 +38,77 @@ export class InfoRowComponent {
   constructor() {}
 
   public get loginMethods(): Set<string> {
-    const methods = this.user?.loginNamesList;
-    let email: string = '';
-    let phone: string = '';
-    if (this.loginPolicy) {
-      if (
-        !this.loginPolicy?.disableLoginWithEmail &&
-        this.user.human?.email?.email &&
-        this.user.human.email.isEmailVerified
-      ) {
-        email = this.user.human?.email?.email;
-      }
-      if (
-        !this.loginPolicy?.disableLoginWithPhone &&
-        this.user.human?.phone?.phone &&
-        this.user.human.phone.isPhoneVerified
-      ) {
-        phone = this.user.human?.phone?.phone;
-      }
+    if (!this.user) {
+      return new Set();
     }
-    return new Set([email, phone, ...methods].filter((method) => !!method));
+
+    const methods = '$typeName' in this.user ? this.user.loginNames : this.user.loginNamesList;
+
+    const loginPolicy = this.loginPolicy;
+    if (!loginPolicy) {
+      return new Set([...methods]);
+    }
+
+    let email = !loginPolicy.disableLoginWithEmail ? this.getEmail(this.user) : '';
+    let phone = !loginPolicy.disableLoginWithPhone ? this.getPhone(this.user) : '';
+
+    return new Set([email, phone, ...methods].filter(Boolean));
+  }
+
+  public get userId() {
+    if (!this.user) {
+      return undefined;
+    }
+    if ('$typeName' in this.user && this.user.$typeName === 'zitadel.user.v2.User') {
+      return this.user.userId;
+    }
+    return this.user.id;
+  }
+
+  public get changeDate() {
+    return this?.user?.details?.changeDate;
+  }
+
+  public get creationDate() {
+    if (!this.user) {
+      return undefined;
+    }
+    return '$typeName' in this.user ? undefined : this.user.details?.creationDate;
+  }
+
+  private getEmail(user: User.AsObject | UserV2 | UserV1) {
+    const human = this.human(user);
+    if (!human) {
+      return '';
+    }
+    if ('$typeName' in human && human.$typeName === 'zitadel.user.v2.HumanUser') {
+      return human.email?.isVerified ? human.email.email : '';
+    }
+    return human.email?.isEmailVerified ? human.email.email : '';
+  }
+
+  private getPhone(user: User.AsObject | UserV2 | UserV1) {
+    const human = this.human(user);
+    if (!human) {
+      return '';
+    }
+    if ('$typeName' in human && human.$typeName === 'zitadel.user.v2.HumanUser') {
+      return human.phone?.isVerified ? human.phone.phone : '';
+    }
+    return human.phone?.isPhoneVerified ? human.phone.phone : '';
+  }
+
+  public human(user: User.AsObject | UserV2 | UserV1) {
+    if (!('$typeName' in user)) {
+      return user.human;
+    }
+    return user.type.case === 'human' ? user.type.value : undefined;
+  }
+
+  public isV2(user: User.AsObject | UserV2 | UserV1) {
+    if ('$typeName' in user) {
+      return user.$typeName === 'zitadel.user.v2.User';
+    }
+    return false;
   }
 }