fix: console app type (#1437)

* home, user create, list, app list

* org create fix

* fix user bindings, usertable, changes, projects

* fix app grid type, domains

* e.164 international phonenumber validation, create user, phone email dialog

* single authmethod create dialog

* fix timestamp to date pipe, app create secret dialog

* validate e164 number edit dialog

* fix machine keys, timestamp pipe

* rm comment

* projecttype circular deps

* downgrade protoc to 3.13.0 due to deserializer error, fix circular dep

* apptype controlname

* fix user grants, autocomplete components

* apptype reference

console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts

@@ -6,6 +6,7 @@ import { MatChipInputEvent } from '@angular/material/chips';
 import { forkJoin, from, Subject } from 'rxjs';
 import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators';
 import { ListProjectGrantsResponse, ListProjectsResponse } from 'src/app/proto/generated/zitadel/management_pb';
+import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';
 import { GrantedProject, Project, ProjectNameQuery, ProjectQuery } from 'src/app/proto/generated/zitadel/project_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
 
@@ -52,6 +53,7 @@ export class SearchProjectAutocompleteComponent implements OnDestroy {
                     const query = new ProjectQuery();
                     const nameQuery = new ProjectNameQuery();
                     nameQuery.setName(value);
+                    nameQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
                     query.setNameQuery(nameQuery);
 
                     switch (this.autocompleteType) {

console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html

@@ -8,7 +8,8 @@
         <mat-chip-list *ngIf="!singleOutput" #chipList aria-label="loginname selection">
             <mat-chip class="chip" *ngFor="let selecteduser of users" [selectable]="selectable" [removable]="removable"
                 (removed)="remove(selecteduser)">
-                {{ selecteduser?.human ? (selecteduser.human.firstName + ' ' + selecteduser.human.lastName) : selecteduser?.machine?.name}}
+                {{ selecteduser?.human ? (selecteduser.human.firstName + ' ' + selecteduser.human.lastName) :
+                selecteduser?.machine?.name}}
                 | <small>
                     {{selecteduser.preferredLoginName}}</small>
                 <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
@@ -24,7 +25,7 @@
                 <mat-spinner diameter="30"></mat-spinner>
             </mat-option>
             <mat-option *ngFor="let user of filteredUsers" [value]="user">
-                {{user.human? user.human.firstName : user.machine?.name}}
+                {{user.human?.profile?.displayName ? user.human.profile.displayName : user.machine?.name}}
                 <small>{{user.preferredLoginName}}</small>
             </mat-option>
         </mat-autocomplete>

console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts

@@ -15,6 +15,7 @@ import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material
 import { MatChipInputEvent } from '@angular/material/chips';
 import { from, of, Subject } from 'rxjs';
 import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators';
+import { ListUsersResponse } from 'src/app/proto/generated/zitadel/management_pb';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';
 import { SearchQuery, User, UserNameQuery } from 'src/app/proto/generated/zitadel/user_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
@@ -73,9 +74,12 @@ export class SearchUserAutocompleteComponent implements OnInit, AfterContentChec
             tap(() => this.isLoading = true),
             switchMap(value => {
                 const query = new SearchQuery();
+
                 const unQuery = new UserNameQuery();
                 unQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
-                query.setUserNameQuery(value);
+                unQuery.setUserName(value);
+
+                query.setUserNameQuery(unQuery);
 
                 if (this.target === UserTarget.SELF) {
                     return from(this.userService.listUsers(10, 0, [query]));
@@ -83,10 +87,11 @@ export class SearchUserAutocompleteComponent implements OnInit, AfterContentChec
                     return of();
                 }
             }),
-        ).subscribe((userresp: any) => {
+        ).subscribe((userresp: ListUsersResponse.AsObject | unknown) => {
             this.isLoading = false;
+            console.log(userresp);
             if (this.target === UserTarget.SELF && userresp) {
-                this.filteredUsers = userresp.toObject().resultList;
+                this.filteredUsers = (userresp as ListUsersResponse.AsObject).resultList;
             }
         });
     }

console/src/app/pages/projects/apps/app-detail/app-detail.component.html

@@ -6,7 +6,7 @@
             </a>
             <div class="title-col">
                 <h1>{{app?.name}}</h1>
-                <span *ngIf="app?.oidcConfig">{{'APP.OIDC.APPTYPE.'+app?.oidcConfig?.applicationType |
+                <span *ngIf="app?.oidcConfig">{{'APP.OIDC.APPTYPE.'+app?.oidcConfig?.appType |
                     translate}}</span>
                 <span *ngIf="app?.apiConfig">API</span>
             </div>

console/src/app/pages/projects/apps/app-detail/app-detail.component.ts

@@ -211,6 +211,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
             this.mgmtService.getAppByID(projectid, id).then(app => {
                 if (app.app) {
                     this.app = app.app;
+                    console.log(this.app);
                     this.appNameForm.patchValue(this.app);
 
                     if (this.app.oidcConfig) {
@@ -300,6 +301,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
 
         const snackRef = this.snackbar.open(message, action, { duration: 5000, verticalPosition: 'top' });
         snackRef.onAction().subscribe(() => {
+            console.log(this.app);
             if (this.app.oidcConfig) {
                 this.saveOIDCApp();
             } else if (this.app.apiConfig) {

console/src/app/pages/projects/apps/authtypes.ts

@@ -27,7 +27,7 @@ export const WEB_TYPE = {
     titleI18nKey: 'APP.OIDC.SELECTION.APPTYPE.WEB.TITLE',
     descI18nKey: 'APP.OIDC.SELECTION.APPTYPE.WEB.DESCRIPTION',
     createType: AppCreateType.OIDC,
-    oidcApplicationType: OIDCAppType.OIDC_APP_TYPE_WEB,
+    oidcAppType: OIDCAppType.OIDC_APP_TYPE_WEB,
     prefix: 'WEB',
     background: 'rgb(80, 110, 110)',
 };
@@ -37,7 +37,7 @@ export const USER_AGENT_TYPE = {
     titleI18nKey: 'APP.OIDC.SELECTION.APPTYPE.USERAGENT.TITLE',
     descI18nKey: 'APP.OIDC.SELECTION.APPTYPE.USERAGENT.DESCRIPTION',
     createType: AppCreateType.OIDC,
-    oidcApplicationType: OIDCAppType.OIDC_APP_TYPE_USER_AGENT,
+    oidcAppType: OIDCAppType.OIDC_APP_TYPE_USER_AGENT,
     prefix: 'UA',
     background: '#6a506e',
 };
@@ -47,7 +47,7 @@ export const NATIVE_TYPE = {
     titleI18nKey: 'APP.OIDC.SELECTION.APPTYPE.NATIVE.TITLE',
     descI18nKey: 'APP.OIDC.SELECTION.APPTYPE.NATIVE.DESCRIPTION',
     createType: AppCreateType.OIDC,
-    oidcApplicationType: OIDCAppType.OIDC_APP_TYPE_NATIVE,
+    oidcAppType: OIDCAppType.OIDC_APP_TYPE_NATIVE,
     prefix: 'N',
     background: '#595d80',
 };

console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html

@@ -34,11 +34,11 @@
                 <th mat-header-cell *matHeaderCellDef> {{ 'APP.TYPE' | translate }} </th>
                 <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id ]" mat-cell
                     *matCellDef="let app">
-                    <span *ngIf="app?.oidcConfig?.applicationType !== undefined && app?.oidcConfig?.applicationType !== null">
-                    {{'APP.OIDC.APPTYPE.'+app?.oidcConfig?.applicationType | translate}}
-                </span>
-                <span *ngIf="app.apiConfig">API</span>
-            </td>
+                    <span *ngIf="app?.oidcConfig?.appType !== undefined && app?.oidcConfig?.appType !== null">
+                        {{'APP.OIDC.APPTYPE.'+app?.oidcConfig?.appType | translate}}
+                    </span>
+                    <span *ngIf="app.apiConfig">API</span>
+                </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

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

@@ -95,6 +95,10 @@ export class UserGrantCreateComponent implements OnDestroy {
     public addGrant(): void {
         switch (this.context) {
             case UserGrantContext.OWNED_PROJECT:
+                console.log('owned', this.userId,
+                    this.rolesList,
+                    this.projectId,
+                    this.grantId);
                 this.userService.addUserGrant(
                     this.userId,
                     this.rolesList,
@@ -107,6 +111,11 @@ export class UserGrantCreateComponent implements OnDestroy {
                 });
                 break;
             case UserGrantContext.GRANTED_PROJECT:
+
+                console.log('granted', this.userId,
+                    this.rolesList,
+                    this.projectId,
+                    this.grantId);
                 this.userService.addUserGrant(
                     this.userId,
                     this.rolesList,
@@ -126,10 +135,15 @@ export class UserGrantCreateComponent implements OnDestroy {
                     grantId = (this.project as GrantedProject.AsObject).grantId;
                 }
 
+                console.log(this.userId,
+                    this.rolesList,
+                    this.projectId,
+                    grantId);
+
                 this.userService.addUserGrant(
                     this.userId,
                     this.rolesList,
-                    (this.project as GrantedProject.AsObject).projectId,
+                    this.projectId,
                     grantId,
                 ).then(() => {
                     this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTUSERGRANTADDED', true);
@@ -148,7 +162,7 @@ export class UserGrantCreateComponent implements OnDestroy {
                 this.userService.addUserGrant(
                     this.userId,
                     this.rolesList,
-                    (this.project as GrantedProject.AsObject).projectId,
+                    this.projectId,
                     tempGrantId,
                 ).then(() => {
                     this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTUSERGRANTADDED', true);
@@ -163,7 +177,7 @@ export class UserGrantCreateComponent implements OnDestroy {
 
     public selectProject(project: Project.AsObject | GrantedProject.AsObject | any): void {
         this.project = project;
-        this.projectId = project.projectId;
+        this.projectId = project.id || project.projectId;
         this.grantRolesKeyList = project.roleKeysList ?? [];
     }