feat: external idps on user (#755)

* feat: show external idps on user

* feat: show external idps on user

* fix: angular linting

* fix: display Name

* fix: display Name email

console/src/app/pages/users/user-detail/external-idps/external-idps.component.html

@@ -0,0 +1,49 @@
+<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
+                   [timestamp]="externalIdpResult?.viewTimestamp" [selection]="selection">
+
+  <div class="table-wrapper">
+    <table class="table" mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+                        [checked]="selection.hasValue() && isAllSelected()"
+                        [indeterminate]="selection.hasValue() && !isAllSelected()">
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let idp">
+          <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
+          </mat-checkbox>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="idpConfigId">
+        <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
+        <td mat-cell *matCellDef="let idp"> {{idp?.idpConfigId}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="idpName">
+        <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
+        <td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="externalUserDisplayName">
+        <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
+        <td mat-cell *matCellDef="let idp"> {{idp?.externalUserDisplayName}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="externalUserId">
+        <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
+        <td mat-cell *matCellDef="let idp"> {{idp?.externalUserId}} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+      </tr>
+
+    </table>
+    <mat-paginator #paginator class="paginator" [length]="externalIdpResult?.totalResult || 0" [pageSize]="10"
+                   [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
+  </div>
+
+</app-refresh-table>

console/src/app/pages/users/user-detail/external-idps/external-idps.component.scss

@@ -0,0 +1,39 @@
+
+.table-wrapper {
+  overflow: auto;
+
+  .table,
+  .paginator {
+    width: 100%;
+
+    td,
+    th {
+      padding: 0 1rem;
+
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    .data-row {
+      cursor: pointer;
+
+      &:hover {
+        background-color: #ffffff05;
+      }
+    }
+  }
+}
+
+tr {
+  outline: none;
+}
+
+.add-button {
+  border-radius: .5rem;
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExternalIdpsComponent } from './external-idps.component';
+
+describe('ExternalIdpsComponent', () => {
+  let component: ExternalIdpsComponent;
+  let fixture: ComponentFixture<ExternalIdpsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExternalIdpsComponent ],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExternalIdpsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,68 @@
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {MatPaginator, PageEvent} from '@angular/material/paginator';
+import {MatTableDataSource} from '@angular/material/table';
+import {
+  ExternalIDPSearchResponse,
+  ExternalIDPView,
+} from '../../../../proto/generated/management_pb';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {ManagementService} from '../../../../services/mgmt.service';
+import {ToastService} from '../../../../services/toast.service';
+import {SelectionModel} from '@angular/cdk/collections';
+
+@Component({
+  selector: 'app-external-idps',
+  templateUrl: './external-idps.component.html',
+  styleUrls: ['./external-idps.component.scss'],
+})
+export class ExternalIdpsComponent implements OnInit {
+  @Input() userId!: string;
+  @ViewChild(MatPaginator) public paginator!: MatPaginator;
+  public externalIdpResult!: ExternalIDPSearchResponse.AsObject;
+  public dataSource: MatTableDataSource<ExternalIDPView.AsObject> = new MatTableDataSource<ExternalIDPView.AsObject>();
+  public selection: SelectionModel<ExternalIDPView.AsObject> = new SelectionModel<ExternalIDPView.AsObject>(true, []);
+  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+  @Input() public displayedColumns: string[] = [ 'idpConfigId', 'idpName', 'externalUserId', 'externalUserDisplayName'];
+
+  constructor(private mgmtService: ManagementService,
+              private toast: ToastService) { }
+
+  ngOnInit(): void {
+    this.getData(10, 0);
+  }
+
+  public isAllSelected(): boolean {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  public masterToggle(): void {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+  public changePage(event: PageEvent): void {
+    this.getData(event.pageSize, event.pageIndex * event.pageSize);
+  }
+
+  private async getData(limit: number, offset: number): Promise<void> {
+    this.loadingSubject.next(true);
+
+    this.mgmtService.SearchExternalIdps(this.userId, limit, offset).then(resp => {
+      this.externalIdpResult = resp.toObject();
+      this.dataSource.data = this.externalIdpResult.resultList;
+      console.log(this.externalIdpResult.resultList);
+      this.loadingSubject.next(false);
+    }).catch((error: any) => {
+      this.toast.showError(error);
+      this.loadingSubject.next(false);
+    });
+  }
+
+  public refreshPage(): void {
+    this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+  }
+}

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

@@ -45,6 +45,7 @@ import { PasswordComponent } from './password/password.component';
 import { UserDetailRoutingModule } from './user-detail-routing.module';
 import { UserDetailComponent } from './user-detail/user-detail.component';
 import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
+import { ExternalIdpsComponent } from './external-idps/external-idps.component';
 
 @NgModule({
     declarations: [
@@ -58,6 +59,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
         CodeDialogComponent,
         MembershipsComponent,
         MachineKeysComponent,
+        ExternalIdpsComponent,
     ],
     imports: [
         UserDetailRoutingModule,

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

@@ -43,6 +43,11 @@
                 </app-detail-form>
             </app-card>
 
+          <app-card *ngIf="user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
+                    description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
+            <app-external-idps [userId]="user.id"></app-external-idps>
+          </app-card>
+
             <app-card *ngIf="user.machine" title="{{ 'USER.MACHINE.TITLE' | translate }}">
                 <app-detail-form-machine
                     [disabled]="(['user.write:' + user?.id, 'user.write'] | hasRole | async) == false"
@@ -191,4 +196,4 @@
 
         <app-changes class="changes" [changeType]="ChangeType.USER" [id]="user.id"></app-changes>
     </div>
-</app-meta-layout>
+</app-meta-layout>

console/src/app/services/mgmt.service.ts

@@ -3,153 +3,153 @@ import { Empty } from 'google-protobuf/google/protobuf/empty_pb';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 
 import {
-    AddMachineKeyRequest,
+  AddMachineKeyRequest,
-    AddMachineKeyResponse,
+  AddMachineKeyResponse,
-    AddOrgDomainRequest,
+  AddOrgDomainRequest,
-    AddOrgMemberRequest,
+  AddOrgMemberRequest,
-    Application,
+  Application,
-    ApplicationID,
+  ApplicationID,
-    ApplicationSearchQuery,
+  ApplicationSearchQuery,
-    ApplicationSearchRequest,
+  ApplicationSearchRequest,
-    ApplicationSearchResponse,
+  ApplicationSearchResponse,
-    ApplicationUpdate,
+  ApplicationUpdate,
-    ApplicationView,
+  ApplicationView,
-    ChangeOrgMemberRequest,
+  ChangeOrgMemberRequest,
-    ChangeRequest,
+  ChangeRequest,
-    Changes,
+  Changes,
-    CreateHumanRequest,
+  CreateHumanRequest,
-    CreateMachineRequest,
+  CreateMachineRequest,
-    CreateUserRequest,
+  CreateUserRequest,
-    Domain,
+  Domain, ExternalIDPSearchRequest, ExternalIDPSearchResponse,
-    Gender,
+  Gender,
-    GrantedProjectSearchRequest,
+  GrantedProjectSearchRequest,
-    Iam,
+  Iam,
-    Idp,
+  Idp,
-    IdpID,
+  IdpID,
-    IdpProviderAdd,
+  IdpProviderAdd,
-    IdpProviderID,
+  IdpProviderID,
-    IdpProviderSearchRequest,
+  IdpProviderSearchRequest,
-    IdpProviderSearchResponse,
+  IdpProviderSearchResponse,
-    IdpProviderType,
+  IdpProviderType,
-    IdpSearchQuery,
+  IdpSearchQuery,
-    IdpSearchRequest,
+  IdpSearchRequest,
-    IdpSearchResponse,
+  IdpSearchResponse,
-    IdpView,
+  IdpView,
-    LoginName,
+  LoginName,
-    LoginPolicy,
+  LoginPolicy,
-    LoginPolicyView,
+  LoginPolicyView,
-    MachineKeyIDRequest,
+  MachineKeyIDRequest,
-    MachineKeySearchRequest,
+  MachineKeySearchRequest,
-    MachineKeySearchResponse,
+  MachineKeySearchResponse,
-    MachineKeyType,
+  MachineKeyType,
-    MachineResponse,
+  MachineResponse,
-    MultiFactors,
+  MultiFactors,
-    NotificationType,
+  NotificationType,
-    OIDCApplicationCreate,
+  OIDCApplicationCreate,
-    OIDCConfig,
+  OIDCConfig,
-    OIDCConfigUpdate,
+  OIDCConfigUpdate,
-    OidcIdpConfig,
+  OidcIdpConfig,
-    OidcIdpConfigCreate,
+  OidcIdpConfigCreate,
-    OidcIdpConfigUpdate,
+  OidcIdpConfigUpdate,
-    Org,
+  Org,
-    OrgCreateRequest,
+  OrgCreateRequest,
-    OrgDomain,
+  OrgDomain,
-    OrgDomainSearchQuery,
+  OrgDomainSearchQuery,
-    OrgDomainSearchRequest,
+  OrgDomainSearchRequest,
-    OrgDomainSearchResponse,
+  OrgDomainSearchResponse,
-    OrgDomainValidationRequest,
+  OrgDomainValidationRequest,
-    OrgDomainValidationResponse,
+  OrgDomainValidationResponse,
-    OrgDomainValidationType,
+  OrgDomainValidationType,
-    OrgIamPolicy,
+  OrgIamPolicy,
-    OrgMember,
+  OrgMember,
-    OrgMemberRoles,
+  OrgMemberRoles,
-    OrgMemberSearchRequest,
+  OrgMemberSearchRequest,
-    OrgMemberSearchResponse,
+  OrgMemberSearchResponse,
-    OrgView,
+  OrgView,
-    PasswordAgePolicy,
+  PasswordAgePolicy,
-    PasswordAgePolicyCreate,
+  PasswordAgePolicyCreate,
-    PasswordAgePolicyID,
+  PasswordAgePolicyID,
-    PasswordAgePolicyUpdate,
+  PasswordAgePolicyUpdate,
-    PasswordComplexityPolicy,
+  PasswordComplexityPolicy,
-    PasswordComplexityPolicyCreate,
+  PasswordComplexityPolicyCreate,
-    PasswordComplexityPolicyID,
+  PasswordComplexityPolicyID,
-    PasswordComplexityPolicyUpdate,
+  PasswordComplexityPolicyUpdate,
-    PasswordLockoutPolicy,
+  PasswordLockoutPolicy,
-    PasswordLockoutPolicyCreate,
+  PasswordLockoutPolicyCreate,
-    PasswordLockoutPolicyID,
+  PasswordLockoutPolicyID,
-    PasswordLockoutPolicyUpdate,
+  PasswordLockoutPolicyUpdate,
-    PasswordRequest,
+  PasswordRequest,
-    PrimaryOrgDomainRequest,
+  PrimaryOrgDomainRequest,
-    Project,
+  Project,
-    ProjectCreateRequest,
+  ProjectCreateRequest,
-    ProjectGrant,
+  ProjectGrant,
-    ProjectGrantCreate,
+  ProjectGrantCreate,
-    ProjectGrantID,
+  ProjectGrantID,
-    ProjectGrantMember,
+  ProjectGrantMember,
-    ProjectGrantMemberAdd,
+  ProjectGrantMemberAdd,
-    ProjectGrantMemberChange,
+  ProjectGrantMemberChange,
-    ProjectGrantMemberRemove,
+  ProjectGrantMemberRemove,
-    ProjectGrantMemberRoles,
+  ProjectGrantMemberRoles,
-    ProjectGrantMemberSearchQuery,
+  ProjectGrantMemberSearchQuery,
-    ProjectGrantMemberSearchRequest,
+  ProjectGrantMemberSearchRequest,
-    ProjectGrantSearchRequest,
+  ProjectGrantSearchRequest,
-    ProjectGrantSearchResponse,
+  ProjectGrantSearchResponse,
-    ProjectGrantUpdate,
+  ProjectGrantUpdate,
-    ProjectGrantView,
+  ProjectGrantView,
-    ProjectID,
+  ProjectID,
-    ProjectMember,
+  ProjectMember,
-    ProjectMemberAdd,
+  ProjectMemberAdd,
-    ProjectMemberChange,
+  ProjectMemberChange,
-    ProjectMemberRemove,
+  ProjectMemberRemove,
-    ProjectMemberRoles,
+  ProjectMemberRoles,
-    ProjectMemberSearchQuery,
+  ProjectMemberSearchQuery,
-    ProjectMemberSearchRequest,
+  ProjectMemberSearchRequest,
-    ProjectMemberSearchResponse,
+  ProjectMemberSearchResponse,
-    ProjectRole,
+  ProjectRole,
-    ProjectRoleAdd,
+  ProjectRoleAdd,
-    ProjectRoleAddBulk,
+  ProjectRoleAddBulk,
-    ProjectRoleChange,
+  ProjectRoleChange,
-    ProjectRoleRemove,
+  ProjectRoleRemove,
-    ProjectRoleSearchQuery,
+  ProjectRoleSearchQuery,
-    ProjectRoleSearchRequest,
+  ProjectRoleSearchRequest,
-    ProjectRoleSearchResponse,
+  ProjectRoleSearchResponse,
-    ProjectSearchQuery,
+  ProjectSearchQuery,
-    ProjectSearchRequest,
+  ProjectSearchRequest,
-    ProjectSearchResponse,
+  ProjectSearchResponse,
-    ProjectUpdateRequest,
+  ProjectUpdateRequest,
-    ProjectView,
+  ProjectView,
-    RemoveOrgDomainRequest,
+  RemoveOrgDomainRequest,
-    RemoveOrgMemberRequest,
+  RemoveOrgMemberRequest,
-    SetPasswordNotificationRequest,
+  SetPasswordNotificationRequest,
-    UpdateMachineRequest,
+  UpdateMachineRequest,
-    UpdateUserAddressRequest,
+  UpdateUserAddressRequest,
-    UpdateUserEmailRequest,
+  UpdateUserEmailRequest,
-    UpdateUserPhoneRequest,
+  UpdateUserPhoneRequest,
-    UpdateUserProfileRequest,
+  UpdateUserProfileRequest,
-    UserAddress,
+  UserAddress,
-    UserEmail,
+  UserEmail,
-    UserGrant,
+  UserGrant,
-    UserGrantCreate,
+  UserGrantCreate,
-    UserGrantID,
+  UserGrantID,
-    UserGrantRemoveBulk,
+  UserGrantRemoveBulk,
-    UserGrantSearchQuery,
+  UserGrantSearchQuery,
-    UserGrantSearchRequest,
+  UserGrantSearchRequest,
-    UserGrantSearchResponse,
+  UserGrantSearchResponse,
-    UserGrantUpdate,
+  UserGrantUpdate,
-    UserGrantView,
+  UserGrantView,
-    UserID,
+  UserID,
-    UserMembershipSearchQuery,
+  UserMembershipSearchQuery,
-    UserMembershipSearchRequest,
+  UserMembershipSearchRequest,
-    UserMembershipSearchResponse,
+  UserMembershipSearchResponse,
-    UserPhone,
+  UserPhone,
-    UserProfile,
+  UserProfile,
-    UserResponse,
+  UserResponse,
-    UserSearchQuery,
+  UserSearchQuery,
-    UserSearchRequest,
+  UserSearchRequest,
-    UserSearchResponse,
+  UserSearchResponse,
-    UserView,
+  UserView,
-    ValidateOrgDomainRequest,
+  ValidateOrgDomainRequest,
-    ZitadelDocs,
+  ZitadelDocs,
 } from '../proto/generated/management_pb';
 import { GrpcService } from './grpc.service';
 
@@ -331,6 +331,18 @@ export class ManagementService {
         return this.grpcService.mgmt.searchMachineKeys(req);
     }
 
+  public async SearchExternalIdps(
+    userId: string,
+    limit: number,
+    offset: number,
+    asc?: boolean,
+  ): Promise<ExternalIDPSearchResponse> {
+    const req = new ExternalIDPSearchRequest();
+    req.setUserId(userId);
+    req.setLimit(limit);
+    req.setOffset(offset);
+    return this.grpcService.mgmt.searchUserExternalIDPs(req);
+  }
     public async GetIam(): Promise<Iam> {
         const req = new Empty();
         return this.grpcService.mgmt.getIam(req);

console/src/assets/i18n/de.json

@@ -114,6 +114,14 @@
                 "OTP_DELETE_DESCRIPTION":"Sie sind im Begriff OTP als Zweitfaktormethode zu entfernen. Sind sie sicher?"
             }
         },
+        "EXTERNALIDP": {
+          "TITLE": "Externe Identitäts Provider",
+          "DESC": "",
+          "IDPCONFIGID": "Idp Konfig ID",
+          "IDPNAME": "Idp Name",
+          "USERDISPLAYNAME":  "Externer Name",
+          "EXTERNALUSERID": "Externe Benutzer ID"
+        },
         "CREATE": {
             "TITLE": "Neuen Benutzer erstellen",
             "DESCRIPTION": "Gebe die erforderlichen Daten ein.",

console/src/assets/i18n/en.json

@@ -114,6 +114,14 @@
                 "OTP_DELETE_DESCRIPTION":"You are about to delete OTP as second factor. Are you sure?"
             }
         },
+        "EXTERNALIDP": {
+          "TITLE": "External Identity Providers",
+          "DESC": "",
+          "IDPCONFIGID": "Idp Config ID",
+          "IDPNAME": "Idp Name",
+          "USERDISPLAYNAME":  "External Name",
+          "EXTERNALUSERID": "External User ID"
+        },
         "CREATE": {
             "TITLE": "Create a New User",
             "DESCRIPTION": "Please provide the necesary information.",

internal/ui/login/handler/external_login_handler.go

@@ -188,6 +188,9 @@ func (l *Login) handleAutoRegister(w http.ResponseWriter, r *http.Request, authR
 
 func (l *Login) mapTokenToLoginUser(tokens *oidc.Tokens, idpConfig *iam_model.IDPConfigView) *model.ExternalUser {
 	displayName := tokens.IDTokenClaims.PreferredUsername
+	if displayName == "" && tokens.IDTokenClaims.Email != "" {
+		displayName = tokens.IDTokenClaims.Email
+	}
 	switch idpConfig.OIDCIDPDisplayNameMapping {
 	case iam_model.OIDCMappingFieldEmail:
 		if tokens.IDTokenClaims.EmailVerified && tokens.IDTokenClaims.Email != "" {