fix(console): set user language (#4028)

fix: cnsl user language

Co-authored-by: Livio Spring <livio.a@gmail.com>

console/src/app/pages/users/user-create/user-create.component.ts

@@ -43,7 +43,7 @@ function passwordConfirmValidator(c: AbstractControl): any {
 export class UserCreateComponent implements OnDestroy {
   public user: AddHumanUserRequest.AsObject = new AddHumanUserRequest().toObject();
   public genders: Gender[] = [Gender.GENDER_FEMALE, Gender.GENDER_MALE, Gender.GENDER_UNSPECIFIED];
-  public languages: string[] = ['de', 'en'];
+  public languages: string[] = ['de', 'en', 'it', 'fr'];
   public userForm!: UntypedFormGroup;
   public pwdForm!: UntypedFormGroup;
 
@@ -94,6 +94,10 @@ export class UserCreateComponent implements OnDestroy {
         this.envSuffixLabel = this.envSuffix();
         this.changeDetRef.detectChanges();
       });
+
+    this.mgmtService.getSupportedLanguages().then((lang) => {
+      this.languages = lang.languagesList;
+    });
   }
 
   public close(): void {

console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.ts

@@ -1,7 +1,9 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Buffer } from 'buffer';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
+import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
@@ -17,7 +19,8 @@ export class MetadataDialogComponent {
   public ts!: Timestamp.AsObject | undefined;
 
   constructor(
-    private service: ManagementService,
+    private managementService: ManagementService,
+    private authService: GrpcAuthService,
     private toast: ToastService,
     public dialogRef: MatDialogRef<MetadataDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any,
@@ -46,17 +49,25 @@ export class MetadataDialogComponent {
   public loadMetadata(): Promise<void> {
     this.loading = true;
     if (this.injData.userId) {
-      return this.service.listUserMetadata(this.injData.userId).then((resp) => {
+      return this.managementService.listUserMetadata(this.injData.userId).then((resp) => {
         this.metadata = resp.resultList.map((md) => {
           return {
             key: md.key,
-            value: atob(md.value as string),
+            value: Buffer.from(md.value as string, 'base64'),
           };
         });
         this.ts = resp.details?.viewTimestamp;
       });
     } else {
-      return Promise.reject();
+      return this.authService.listMyMetadata().then((resp) => {
+        this.metadata = resp.resultList.map((md) => {
+          return {
+            key: md.key,
+            value: Buffer.from(md.value as string, 'base64'),
+          };
+        });
+        this.ts = resp.details?.viewTimestamp;
+      });
     }
   }
 
@@ -93,7 +104,7 @@ export class MetadataDialogComponent {
 
   public setMetadata(key: string, value: string): void {
     if (key && value) {
-      this.service
+      this.managementService
         .setUserMetadata(key, btoa(value), this.injData.userId)
         .then(() => {
           this.toast.showInfo('USER.METADATA.SETSUCCESS', true);
@@ -105,7 +116,7 @@ export class MetadataDialogComponent {
   }
 
   public removeMetadata(key: string): Promise<void> {
-    return this.service
+    return this.managementService
       .removeUserMetadata(key, this.injData.userId)
       .then((resp) => {
         this.toast.showInfo('USER.METADATA.REMOVESUCCESS', true);

console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts

@@ -39,7 +39,7 @@ export class UserDetailComponent implements OnInit {
   public user!: User.AsObject;
   public metadata: Metadata.AsObject[] = [];
   public genders: Gender[] = [Gender.GENDER_MALE, Gender.GENDER_FEMALE, Gender.GENDER_DIVERSE];
-  public languages: string[] = ['de', 'en'];
+  public languages: string[] = ['de', 'en', 'it', 'fr'];
 
   public ChangeType: any = ChangeType;
   public loading: boolean = true;
@@ -91,6 +91,10 @@ export class UserDetailComponent implements OnInit {
     this.mediaMatcher.matchMedia(mediaq).onchange = (small) => {
       this.changeSelection(small.matches);
     };
+
+    this.mgmtUserService.getSupportedLanguages().then((lang) => {
+      this.languages = lang.languagesList;
+    });
   }
 
   private changeSelection(small: boolean): void {

console/src/app/services/grpc-auth.service.ts

@@ -5,88 +5,91 @@ import { BehaviorSubject, from, merge, Observable, of, Subject } from 'rxjs';
 import { catchError, filter, finalize, map, mergeMap, switchMap, take, timeout } from 'rxjs/operators';
 
 import {
-  AddMyAuthFactorOTPRequest,
-  AddMyAuthFactorOTPResponse,
-  AddMyAuthFactorU2FRequest,
-  AddMyAuthFactorU2FResponse,
-  AddMyPasswordlessLinkRequest,
-  AddMyPasswordlessLinkResponse,
-  AddMyPasswordlessRequest,
-  AddMyPasswordlessResponse,
-  GetMyEmailRequest,
-  GetMyEmailResponse,
-  GetMyLabelPolicyRequest,
-  GetMyLabelPolicyResponse,
-  GetMyPasswordComplexityPolicyRequest,
-  GetMyPasswordComplexityPolicyResponse,
-  GetMyPhoneRequest,
-  GetMyPhoneResponse,
-  GetMyPrivacyPolicyRequest,
-  GetMyPrivacyPolicyResponse,
-  GetMyProfileRequest,
-  GetMyProfileResponse,
-  GetMyUserRequest,
-  GetMyUserResponse,
-  GetSupportedLanguagesRequest,
-  GetSupportedLanguagesResponse,
-  ListMyAuthFactorsRequest,
-  ListMyAuthFactorsResponse,
-  ListMyLinkedIDPsRequest,
-  ListMyLinkedIDPsResponse,
-  ListMyMembershipsRequest,
-  ListMyMembershipsResponse,
-  ListMyPasswordlessRequest,
-  ListMyPasswordlessResponse,
-  ListMyProjectOrgsRequest,
-  ListMyProjectOrgsResponse,
-  ListMyUserChangesRequest,
-  ListMyUserChangesResponse,
-  ListMyUserGrantsRequest,
-  ListMyUserGrantsResponse,
-  ListMyUserSessionsRequest,
-  ListMyUserSessionsResponse,
-  ListMyZitadelPermissionsRequest,
-  ListMyZitadelPermissionsResponse,
-  RemoveMyAuthFactorOTPRequest,
-  RemoveMyAuthFactorOTPResponse,
-  RemoveMyAuthFactorU2FRequest,
-  RemoveMyAuthFactorU2FResponse,
-  RemoveMyAvatarRequest,
-  RemoveMyAvatarResponse,
-  RemoveMyLinkedIDPRequest,
-  RemoveMyLinkedIDPResponse,
-  RemoveMyPasswordlessRequest,
-  RemoveMyPasswordlessResponse,
-  RemoveMyPhoneRequest,
-  RemoveMyPhoneResponse,
-  RemoveMyUserRequest,
-  RemoveMyUserResponse,
-  ResendMyEmailVerificationRequest,
-  ResendMyEmailVerificationResponse,
-  ResendMyPhoneVerificationRequest,
-  ResendMyPhoneVerificationResponse,
-  SendMyPasswordlessLinkRequest,
-  SendMyPasswordlessLinkResponse,
-  SetMyEmailRequest,
-  SetMyEmailResponse,
-  SetMyPhoneRequest,
-  SetMyPhoneResponse,
-  UpdateMyPasswordRequest,
-  UpdateMyPasswordResponse,
-  UpdateMyProfileRequest,
-  UpdateMyProfileResponse,
-  UpdateMyUserNameRequest,
-  UpdateMyUserNameResponse,
-  VerifyMyAuthFactorOTPRequest,
-  VerifyMyAuthFactorOTPResponse,
-  VerifyMyAuthFactorU2FRequest,
-  VerifyMyAuthFactorU2FResponse,
-  VerifyMyPasswordlessRequest,
-  VerifyMyPasswordlessResponse,
-  VerifyMyPhoneRequest,
-  VerifyMyPhoneResponse,
+    AddMyAuthFactorOTPRequest,
+    AddMyAuthFactorOTPResponse,
+    AddMyAuthFactorU2FRequest,
+    AddMyAuthFactorU2FResponse,
+    AddMyPasswordlessLinkRequest,
+    AddMyPasswordlessLinkResponse,
+    AddMyPasswordlessRequest,
+    AddMyPasswordlessResponse,
+    GetMyEmailRequest,
+    GetMyEmailResponse,
+    GetMyLabelPolicyRequest,
+    GetMyLabelPolicyResponse,
+    GetMyPasswordComplexityPolicyRequest,
+    GetMyPasswordComplexityPolicyResponse,
+    GetMyPhoneRequest,
+    GetMyPhoneResponse,
+    GetMyPrivacyPolicyRequest,
+    GetMyPrivacyPolicyResponse,
+    GetMyProfileRequest,
+    GetMyProfileResponse,
+    GetMyUserRequest,
+    GetMyUserResponse,
+    GetSupportedLanguagesRequest,
+    GetSupportedLanguagesResponse,
+    ListMyAuthFactorsRequest,
+    ListMyAuthFactorsResponse,
+    ListMyLinkedIDPsRequest,
+    ListMyLinkedIDPsResponse,
+    ListMyMembershipsRequest,
+    ListMyMembershipsResponse,
+    ListMyMetadataRequest,
+    ListMyMetadataResponse,
+    ListMyPasswordlessRequest,
+    ListMyPasswordlessResponse,
+    ListMyProjectOrgsRequest,
+    ListMyProjectOrgsResponse,
+    ListMyUserChangesRequest,
+    ListMyUserChangesResponse,
+    ListMyUserGrantsRequest,
+    ListMyUserGrantsResponse,
+    ListMyUserSessionsRequest,
+    ListMyUserSessionsResponse,
+    ListMyZitadelPermissionsRequest,
+    ListMyZitadelPermissionsResponse,
+    RemoveMyAuthFactorOTPRequest,
+    RemoveMyAuthFactorOTPResponse,
+    RemoveMyAuthFactorU2FRequest,
+    RemoveMyAuthFactorU2FResponse,
+    RemoveMyAvatarRequest,
+    RemoveMyAvatarResponse,
+    RemoveMyLinkedIDPRequest,
+    RemoveMyLinkedIDPResponse,
+    RemoveMyPasswordlessRequest,
+    RemoveMyPasswordlessResponse,
+    RemoveMyPhoneRequest,
+    RemoveMyPhoneResponse,
+    RemoveMyUserRequest,
+    RemoveMyUserResponse,
+    ResendMyEmailVerificationRequest,
+    ResendMyEmailVerificationResponse,
+    ResendMyPhoneVerificationRequest,
+    ResendMyPhoneVerificationResponse,
+    SendMyPasswordlessLinkRequest,
+    SendMyPasswordlessLinkResponse,
+    SetMyEmailRequest,
+    SetMyEmailResponse,
+    SetMyPhoneRequest,
+    SetMyPhoneResponse,
+    UpdateMyPasswordRequest,
+    UpdateMyPasswordResponse,
+    UpdateMyProfileRequest,
+    UpdateMyProfileResponse,
+    UpdateMyUserNameRequest,
+    UpdateMyUserNameResponse,
+    VerifyMyAuthFactorOTPRequest,
+    VerifyMyAuthFactorOTPResponse,
+    VerifyMyAuthFactorU2FRequest,
+    VerifyMyAuthFactorU2FResponse,
+    VerifyMyPasswordlessRequest,
+    VerifyMyPasswordlessResponse,
+    VerifyMyPhoneRequest,
+    VerifyMyPhoneResponse,
 } from '../proto/generated/zitadel/auth_pb';
 import { ChangeQuery } from '../proto/generated/zitadel/change_pb';
+import { MetadataQuery } from '../proto/generated/zitadel/metadata_pb';
 import { ListQuery } from '../proto/generated/zitadel/object_pb';
 import { Org, OrgFieldName, OrgQuery } from '../proto/generated/zitadel/org_pb';
 import { Gender, MembershipQuery, User, WebAuthNVerification } from '../proto/generated/zitadel/user_pb';
@@ -145,6 +148,25 @@ export class GrpcAuthService {
     });
   }
 
+  public listMyMetadata(
+    offset?: number,
+    limit?: number,
+    queryList?: MetadataQuery[],
+  ): Promise<ListMyMetadataResponse.AsObject> {
+    const req = new ListMyMetadataRequest();
+    const metadata = new ListQuery();
+    if (offset) {
+      metadata.setOffset(offset);
+    }
+    if (limit) {
+      metadata.setLimit(limit);
+    }
+    if (queryList) {
+      req.setQueriesList(queryList);
+    }
+    return this.grpcService.auth.listMyMetadata(req, null).then((resp) => resp.toObject());
+  }
+
   public async getActiveOrg(id?: string): Promise<Org.AsObject> {
     if (id) {
       const find = this.cachedOrgs.find((tmp) => tmp.id === id);