feat: merge main into v2 (#3193)

* feat(console): personal access tokens (#3185)

* token dialog, pat module

* pat components

* i18n, warn dialog, add token dialog

* cleanup dialog

* clipboard

* return creationDate of pat

* i18n

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

* fix(cockroach): update to 21.2.5 (#3189)

Co-authored-by: Max Peintner <max@caos.ch>
Co-authored-by: Silvan <silvan.reusser@gmail.com>

build/local/docker-compose-local.yml

@@ -6,7 +6,7 @@ services:
     restart: always
     networks:
       - zitadel
-    image: cockroachdb/cockroach:v21.2.4
+    image: cockroachdb/cockroach:v21.2.5
     command: start-single-node --insecure --listen-addr=0.0.0.0
     healthcheck:
       test: ["CMD", "curl", "-f", "http://localhost:8080/health?ready=1"]

build/zitadel/Dockerfile

@@ -60,9 +60,9 @@ RUN apt install openssl tzdata tar
 
 # cockroach binary used to backup database
 RUN mkdir /usr/local/lib/cockroach
-RUN wget -qO- https://binaries.cockroachdb.com/cockroach-v21.2.4.linux-amd64.tgz \
+RUN wget -qO- https://binaries.cockroachdb.com/cockroach-v21.2.5.linux-amd64.tgz \
-    | tar  xvz && cp -i cockroach-v21.2.4.linux-amd64/cockroach /usr/local/bin/
+    | tar  xvz && cp -i cockroach-v21.2.5.linux-amd64/cockroach /usr/local/bin/
-RUN rm -r cockroach-v21.2.4.linux-amd64
+RUN rm -r cockroach-v21.2.5.linux-amd64
 
 #######################
 ## generates static files

console/src/app/modules/add-token-dialog/add-token-dialog.component.html

@@ -0,0 +1,25 @@
+<span class="title" mat-dialog-title>{{'USER.PERSONALACCESSTOKEN.ADD.TITLE' | translate}}</span>
+<div mat-dialog-content>
+  <cnsl-info-section class="desc"> {{'USER.PERSONALACCESSTOKEN.ADD.DESCRIPTION' | translate}}</cnsl-info-section>
+
+  <cnsl-form-field class="form-field" appearance="outline">
+    <cnsl-label>{{'USER.PERSONALACCESSTOKEN.ADD.CHOOSEEXPIRY' | translate}} (optional)</cnsl-label>
+    <input cnslInput [matDatepicker]="picker" [min]="startDate" [formControl]="dateControl">
+    <mat-datepicker-toggle style="top: 0;" cnslSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
+    <span cnsl-error *ngIf="dateControl?.errors?.matDatepickerMin?.min">
+      {{'USER.PERSONALACCESSTOKEN.ADD.CHOOSEDATEAFTER' | translate}}:
+      {{dateControl?.errors?.matDatepickerMin.min.toDate() | localizedDate: 'EEE dd. MMM'}}
+    </span>
+  </cnsl-form-field>
+</div>
+<div mat-dialog-actions class=" action">
+  <button mat-button (click)="closeDialog()">
+    {{'ACTIONS.CANCEL' | translate}}
+  </button>
+
+  <button color="primary" mat-raised-button class="ok-button" [disabled]="dateControl.invalid"
+    (click)="closeDialogWithSuccess()">
+    {{'ACTIONS.ADD' | translate}}
+  </button>
+</div>

console/src/app/modules/add-token-dialog/add-token-dialog.component.scss

@@ -0,0 +1,17 @@
+.title {
+  font-size: 1.2rem;
+  margin-top: 0;
+}
+
+.form-field {
+  width: 100%;
+}
+
+.action {
+  display: flex;
+  justify-content: flex-end;
+
+  .ok-button {
+    margin-left: 0.5rem;
+  }
+}

console/src/app/modules/add-token-dialog/add-token-dialog.component.spec.ts

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

console/src/app/modules/add-token-dialog/add-token-dialog.component.ts

@@ -0,0 +1,26 @@
+import { Component, Inject } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'cnsl-add-token-dialog',
+  templateUrl: './add-token-dialog.component.html',
+  styleUrls: ['./add-token-dialog.component.scss'],
+})
+export class AddTokenDialogComponent {
+  public startDate: Date = new Date();
+  public dateControl: FormControl = new FormControl('', []);
+
+  constructor(public dialogRef: MatDialogRef<AddTokenDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+    const today = new Date();
+    this.startDate.setDate(today.getDate() + 1);
+  }
+
+  public closeDialog(): void {
+    this.dialogRef.close(false);
+  }
+
+  public closeDialogWithSuccess(): void {
+    this.dialogRef.close({ date: this.dateControl.value });
+  }
+}

console/src/app/modules/add-token-dialog/add-token-dialog.module.ts

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { TranslateModule } from '@ngx-translate/core';
+import { InputModule } from 'src/app/modules/input/input.module';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
+
+import { InfoSectionModule } from '../info-section/info-section.module';
+import { AddTokenDialogComponent } from './add-token-dialog.component';
+
+@NgModule({
+  declarations: [AddTokenDialogComponent],
+  imports: [
+    CommonModule,
+    TranslateModule,
+    MatButtonModule,
+    InfoSectionModule,
+    InputModule,
+    MatSelectModule,
+    MatIconModule,
+    FormsModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
+    ReactiveFormsModule,
+    LocalizedDatePipeModule,
+  ],
+})
+export class AddTokenDialogModule {}

console/src/app/modules/personal-access-tokens/personal-access-tokens.component.html

@@ -0,0 +1,65 @@
+<cnsl-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
+  [timestamp]="keyResult?.details?.viewTimestamp" [selection]="selection">
+  <div actions>
+    <a [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) === false" color="primary"
+      mat-raised-button (click)="openAddKey()">
+      <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+    </a>
+  </div>
+
+  <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 key">
+          <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(key) : null" [checked]="selection.isSelected(key)">
+          </mat-checkbox>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef> {{ 'USER.PERSONALACCESSTOKEN.ID' | translate }} </th>
+        <td mat-cell *matCellDef="let key"> {{key?.id}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="creationDate">
+        <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.CREATIONDATE' | translate }} </th>
+        <td mat-cell *matCellDef="let key">
+          {{key.details?.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm'}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="expirationDate">
+        <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.EXPIRATIONDATE' | translate }} </th>
+        <td mat-cell *matCellDef="let key">
+          {{key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm'}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions" stickyEnd>
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let key">
+          <button [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) === false" mat-icon-button
+            color="warn" matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteKey(key)">
+            <i class="las la-trash"></i>
+          </button>
+        </td>
+      </ng-container>
+
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
+      </tr>
+
+    </table>
+    <cnsl-paginator #paginator class="paginator" [timestamp]="keyResult?.details?.viewTimestamp"
+      [length]="keyResult?.details?.totalResult || 0" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
+      (page)="changePage($event)"></cnsl-paginator>
+  </div>
+</cnsl-refresh-table>

console/src/app/modules/personal-access-tokens/personal-access-tokens.component.scss

@@ -0,0 +1,36 @@
+.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;
+      }
+    }
+  }
+}
+
+tr {
+  outline: none;
+
+  button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    button {
+      visibility: visible;
+    }
+  }
+}

console/src/app/modules/personal-access-tokens/personal-access-tokens.component.spec.ts

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

console/src/app/modules/personal-access-tokens/personal-access-tokens.component.ts

@@ -0,0 +1,163 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTableDataSource } from '@angular/material/table';
+import { TranslateService } from '@ngx-translate/core';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
+import { Moment } from 'moment';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { Key } from 'src/app/proto/generated/zitadel/auth_n_key_pb';
+import { ListPersonalAccessTokensResponse } from 'src/app/proto/generated/zitadel/management_pb';
+import { PersonalAccessToken } from 'src/app/proto/generated/zitadel/user_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { AddTokenDialogComponent } from '../add-token-dialog/add-token-dialog.component';
+import { PageEvent, PaginatorComponent } from '../paginator/paginator.component';
+import { ShowTokenDialogComponent } from '../show-token-dialog/show-token-dialog.component';
+import { WarnDialogComponent } from '../warn-dialog/warn-dialog.component';
+
+@Component({
+  selector: 'cnsl-personal-access-tokens',
+  templateUrl: './personal-access-tokens.component.html',
+  styleUrls: ['./personal-access-tokens.component.scss'],
+})
+export class PersonalAccessTokensComponent implements OnInit {
+  @Input() userId!: string;
+
+  @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
+  public dataSource: MatTableDataSource<PersonalAccessToken.AsObject> =
+    new MatTableDataSource<PersonalAccessToken.AsObject>();
+  public selection: SelectionModel<PersonalAccessToken.AsObject> = new SelectionModel<PersonalAccessToken.AsObject>(
+    true,
+    [],
+  );
+  public keyResult!: ListPersonalAccessTokensResponse.AsObject;
+  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+  @Input() public displayedColumns: string[] = ['select', 'id', 'creationDate', 'expirationDate', 'actions'];
+
+  @Output() public changedSelection: EventEmitter<Array<PersonalAccessToken.AsObject>> = new EventEmitter();
+
+  constructor(
+    public translate: TranslateService,
+    private mgmtService: ManagementService,
+    private dialog: MatDialog,
+    private toast: ToastService,
+  ) {
+    this.selection.changed.subscribe(() => {
+      this.changedSelection.emit(this.selection.selected);
+    });
+  }
+
+  public 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);
+  }
+
+  public deleteKey(key: Key.AsObject): void {
+    const dialogRef = this.dialog.open(WarnDialogComponent, {
+      data: {
+        confirmKey: 'ACTIONS.DELETE',
+        cancelKey: 'ACTIONS.CANCEL',
+        titleKey: 'USER.PERSONALACCESSTOKEN.DELETE.TITLE',
+        descriptionKey: 'USER.PERSONALACCESSTOKEN.DELETE.DESCRIPTION',
+      },
+      width: '400px',
+    });
+    dialogRef.afterClosed().subscribe((resp) => {
+      if (resp) {
+        this.mgmtService
+          .removePersonalAccessToken(key.id, this.userId)
+          .then(() => {
+            this.selection.clear();
+            this.toast.showInfo('USER.PERSONALACCESSTOKEN.DELETED', true);
+            this.getData(10, 0);
+          })
+          .catch((error) => {
+            this.toast.showError(error);
+          });
+      }
+    });
+  }
+
+  public openAddKey(): void {
+    const dialogRef = this.dialog.open(AddTokenDialogComponent, {
+      data: {},
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe((resp) => {
+      if (resp) {
+        let date: Timestamp | undefined;
+
+        if (resp.date as Moment) {
+          const ts = new Timestamp();
+          const milliseconds = resp.date.toDate().getTime();
+          const seconds = Math.abs(milliseconds / 1000);
+          const nanos = (milliseconds - seconds * 1000) * 1000 * 1000;
+          ts.setSeconds(seconds);
+          ts.setNanos(nanos);
+          date = ts;
+        }
+
+        this.mgmtService
+          .addPersonalAccessToken(this.userId, date)
+          .then((response) => {
+            if (response) {
+              setTimeout(() => {
+                this.refreshPage();
+              }, 1000);
+
+              this.dialog.open(ShowTokenDialogComponent, {
+                data: {
+                  token: response,
+                },
+                width: '400px',
+              });
+            }
+          })
+          .catch((error: any) => {
+            this.toast.showError(error);
+          });
+      }
+    });
+  }
+
+  private async getData(limit: number, offset: number): Promise<void> {
+    this.loadingSubject.next(true);
+
+    if (this.userId) {
+      this.mgmtService
+        .listPersonalAccessTokens(this.userId, limit, offset)
+        .then((resp) => {
+          this.keyResult = resp;
+          if (resp.resultList) {
+            this.dataSource.data = resp.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/modules/personal-access-tokens/personal-access-tokens.module.ts

@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
+
+import { AddTokenDialogModule } from '../add-token-dialog/add-token-dialog.module';
+import { CardModule } from '../card/card.module';
+import { InputModule } from '../input/input.module';
+import { PaginatorModule } from '../paginator/paginator.module';
+import { RefreshTableModule } from '../refresh-table/refresh-table.module';
+import { ShowTokenDialogModule } from '../show-token-dialog/show-token-dialog.module';
+import { WarnDialogModule } from '../warn-dialog/warn-dialog.module';
+import { PersonalAccessTokensComponent } from './personal-access-tokens.component';
+
+@NgModule({
+  declarations: [PersonalAccessTokensComponent],
+  imports: [
+    CommonModule,
+    RouterModule,
+    FormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    HasRoleModule,
+    CardModule,
+    MatTableModule,
+    PaginatorModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatCheckboxModule,
+    MatTooltipModule,
+    HasRolePipeModule,
+    TimestampToDatePipeModule,
+    LocalizedDatePipeModule,
+    TranslateModule,
+    RefreshTableModule,
+    InputModule,
+    ShowTokenDialogModule,
+    WarnDialogModule,
+    AddTokenDialogModule,
+  ],
+  exports: [PersonalAccessTokensComponent],
+})
+export class PersonalAccessTokensModule {}

console/src/app/modules/show-token-dialog/show-token-dialog.component.html

@@ -0,0 +1,30 @@
+<span class="title" mat-dialog-title>{{'USER.PERSONALACCESSTOKEN.ADDED.TITLE' | translate}}</span>
+<div mat-dialog-content>
+  <cnsl-info-section [type]="InfoSectionType.WARN"> {{'USER.PERSONALACCESSTOKEN.ADDED.DESCRIPTION' | translate}}
+  </cnsl-info-section>
+
+  <ng-container *ngIf="tokenResponse">
+    <div class="row">
+      <p class="left">{{'USER.PERSONALACCESSTOKEN.ID' | translate}}</p>
+      <p class="right">{{tokenResponse.tokenId}}</p>
+    </div>
+
+    <div class="row" *ngIf="tokenResponse.token">
+      <p class="left">{{'USER.PERSONALACCESSTOKEN.TOKEN' | translate}}</p>
+      <div class="right">
+        <button class="ctc" [disabled]="copied === tokenResponse.token"
+          [matTooltip]="(copied !== tokenResponse.token ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
+          cnslCopyToClipboard [valueToCopy]="tokenResponse.token" (copiedValue)="copied = $event" mat-icon-button>
+          <i *ngIf="copied !== tokenResponse.token" class="las la-clipboard"></i>
+          <i *ngIf="copied === tokenResponse.token" class="las la-clipboard-check"></i>
+        </button>
+        <span>{{tokenResponse.token}}</span>
+      </div>
+    </div>
+  </ng-container>
+</div>
+<div mat-dialog-actions class="action">
+  <button color="primary" mat-raised-button class="ok-button" (click)="closeDialog()">
+    {{'ACTIONS.CLOSE' | translate}}
+  </button>
+</div>

console/src/app/modules/show-token-dialog/show-token-dialog.component.scss

@@ -0,0 +1,48 @@
+.title {
+  font-size: 1.2rem;
+  margin-top: 0;
+}
+
+.desc {
+  color: rgb(201, 51, 71);
+  font-size: 0.9rem;
+}
+
+.action {
+  display: flex;
+  justify-content: flex-end;
+
+  .ok-button {
+    margin-left: 0.5rem;
+  }
+}
+
+.row {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+
+  .left,
+  .right {
+    font-size: 14px;
+  }
+
+  .left {
+    color: var(--grey);
+    margin-right: 1rem;
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+  }
+
+  .right {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    overflow: auto;
+    display: flex;
+    align-items: center;
+
+    .ctc {
+      margin-right: 1rem;
+    }
+  }
+}

console/src/app/modules/show-token-dialog/show-token-dialog.component.spec.ts

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

console/src/app/modules/show-token-dialog/show-token-dialog.component.ts

@@ -0,0 +1,24 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { AddPersonalAccessTokenResponse } from 'src/app/proto/generated/zitadel/management_pb';
+
+import { InfoSectionType } from '../info-section/info-section.component';
+
+@Component({
+  selector: 'cnsl-show-token-dialog',
+  templateUrl: './show-token-dialog.component.html',
+  styleUrls: ['./show-token-dialog.component.scss'],
+})
+export class ShowTokenDialogComponent {
+  public tokenResponse!: AddPersonalAccessTokenResponse.AsObject;
+  public copied: string = '';
+  InfoSectionType: any = InfoSectionType;
+
+  constructor(public dialogRef: MatDialogRef<ShowTokenDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+    this.tokenResponse = data.token;
+  }
+
+  public closeDialog(): void {
+    this.dialogRef.close(false);
+  }
+}

console/src/app/modules/show-token-dialog/show-token-dialog.module.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
+
+import { InfoSectionModule } from '../info-section/info-section.module';
+import { ShowTokenDialogComponent } from './show-token-dialog.component';
+
+@NgModule({
+  declarations: [ShowTokenDialogComponent],
+  imports: [
+    CommonModule,
+    TranslateModule,
+    InfoSectionModule,
+    CopyToClipboardModule,
+    MatButtonModule,
+    MatTooltipModule,
+    LocalizedDatePipeModule,
+    TimestampToDatePipeModule,
+  ],
+})
+export class ShowTokenDialogModule {}

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

@@ -25,8 +25,10 @@ import { MachineKeysModule } from 'src/app/modules/machine-keys/machine-keys.mod
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
 import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
 import { PasswordComplexityViewModule } from 'src/app/modules/password-complexity-view/password-complexity-view.module';
+import { PersonalAccessTokensModule } from 'src/app/modules/personal-access-tokens/personal-access-tokens.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
+import { ShowTokenDialogModule } from 'src/app/modules/show-token-dialog/show-token-dialog.module';
 import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
 import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
@@ -94,11 +96,13 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
     WarnDialogModule,
     MatDialogModule,
     QrCodeModule,
+    ShowTokenDialogModule,
     MetaLayoutModule,
     MatCheckboxModule,
     HasRolePipeModule,
     UserGrantsModule,
     MatButtonModule,
+    PersonalAccessTokensModule,
     MatIconModule,
     CardModule,
     MatProgressSpinnerModule,

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

@@ -85,6 +85,11 @@
         description="{{ 'USER.MACHINE.KEYSDESC' | translate }}">
         <cnsl-machine-keys [userId]="user.id"></cnsl-machine-keys>
       </cnsl-card>
+
+      <cnsl-card *ngIf="user.machine && user.id" title="{{ 'USER.MACHINE.TOKENSTITLE' | translate }}"
+        description="{{ 'USER.MACHINE.TOKENSDESC' | translate }}">
+        <cnsl-personal-access-tokens [userId]="user.id"></cnsl-personal-access-tokens>
+      </cnsl-card>
     </ng-template>
 
     <cnsl-passwordless *ngIf="user && user.human" [user]="user" [disabled]="(canWrite$ | async) === false">

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

@@ -50,6 +50,8 @@ import {
   AddOrgOIDCIDPResponse,
   AddOrgRequest,
   AddOrgResponse,
+  AddPersonalAccessTokenRequest,
+  AddPersonalAccessTokenResponse,
   AddProjectGrantMemberRequest,
   AddProjectGrantMemberResponse,
   AddProjectGrantRequest,
@@ -214,6 +216,8 @@ import {
   ListOrgMemberRolesResponse,
   ListOrgMembersRequest,
   ListOrgMembersResponse,
+  ListPersonalAccessTokensRequest,
+  ListPersonalAccessTokensResponse,
   ListProjectChangesRequest,
   ListProjectChangesResponse,
   ListProjectGrantMemberRolesRequest,
@@ -294,6 +298,8 @@ import {
   RemoveOrgIDPResponse,
   RemoveOrgMemberRequest,
   RemoveOrgMemberResponse,
+  RemovePersonalAccessTokenRequest,
+  RemovePersonalAccessTokenResponse,
   RemoveProjectGrantMemberRequest,
   RemoveProjectGrantMemberResponse,
   RemoveProjectGrantRequest,
@@ -984,6 +990,44 @@ export class ManagementService {
     return this.grpcService.mgmt.setTriggerActions(req, null).then((resp) => resp.toObject());
   }
 
+  public addPersonalAccessToken(userId: string, date?: Timestamp): Promise<AddPersonalAccessTokenResponse.AsObject> {
+    const req = new AddPersonalAccessTokenRequest();
+    req.setUserId(userId);
+    if (date) {
+      req.setExpirationDate(date);
+    }
+    return this.grpcService.mgmt.addPersonalAccessToken(req, null).then((resp) => resp.toObject());
+  }
+
+  public removePersonalAccessToken(tokenId: string, userId: string): Promise<RemovePersonalAccessTokenResponse.AsObject> {
+    const req = new RemovePersonalAccessTokenRequest();
+    req.setTokenId(tokenId);
+    req.setUserId(userId);
+    return this.grpcService.mgmt.removePersonalAccessToken(req, null).then((resp) => resp.toObject());
+  }
+
+  public listPersonalAccessTokens(
+    userId: string,
+    limit?: number,
+    offset?: number,
+    asc?: boolean,
+  ): Promise<ListPersonalAccessTokensResponse.AsObject> {
+    const req = new ListPersonalAccessTokensRequest();
+    const metadata = new ListQuery();
+    req.setUserId(userId);
+    if (limit) {
+      metadata.setLimit(limit);
+    }
+    if (offset) {
+      metadata.setOffset(offset);
+    }
+    if (asc) {
+      metadata.setAsc(asc);
+    }
+    req.setQuery(metadata);
+    return this.grpcService.mgmt.listPersonalAccessTokens(req, null).then((resp) => resp.toObject());
+  }
+
   public getIAM(): Promise<GetIAMResponse.AsObject> {
     const req = new GetIAMRequest();
     return this.grpcService.mgmt.getIAM(req, null).then((resp) => resp.toObject());

console/src/assets/i18n/de.json

@@ -378,6 +378,8 @@
       "DESCRIPTION": "Beschreibung",
       "KEYSTITLE": "Schlüssel",
       "KEYSDESC": "Definiere Deine Schlüssel mit einem optionalen Ablaufdatum.",
+      "TOKENSTITLE": "Access Tokens",
+      "TOKENSDESC": "Diese Access Tokens funktionieren wie gewöhnliche OAuth Access Tokens.",
       "ID": "Schlüssel-ID",
       "TYPE": "Typ",
       "EXPIRATIONDATE": "Ablaufdatum",
@@ -533,6 +535,25 @@
         "PROJECT": "Projekt",
         "GRANTEDPROJECT": "Berechtigtes Projekt"
       }
+    },
+    "PERSONALACCESSTOKEN": {
+      "ID": "ID",
+      "TOKEN": "Token",
+      "ADD": {
+        "TITLE": "Personal Access Token generieren",
+        "DESCRIPTION": "Definieren Sie das Ablaufdatum für das zu erstellende Token",
+        "CHOOSEEXPIRY": "Ablaufdatum",
+        "CHOOSEDATEAFTER": "Geben Sie ein valides Ablaufdatum an. Ab"
+      },
+      "ADDED": {
+        "TITLE": "Personal Access Token",
+        "DESCRIPTION": "Kopieren Sie Ihr Access Token. Sie werden später nicht mehr darauf zugreifen können."
+      },
+      "DELETE": {
+        "TITLE": "Token löschen",
+        "DESCRIPTION": "Sie sind im Begriff das Token unwiederruflich zu löschen. Wollen Sie dies wirklich tun?"
+      },
+      "DELETED": "Personal Access Token gelöscht."
     }
   },
   "FLOWS": {

console/src/assets/i18n/en.json

@@ -378,6 +378,8 @@
       "DESCRIPTION": "Description",
       "KEYSTITLE": "Keys",
       "KEYSDESC": "Define your keys and add an optional expiration date.",
+      "TOKENSTITLE": "Access Tokens",
+      "TOKENSDESC": "Personal access tokens function like ordinary OAuth access tokens.",
       "ID": "Key ID",
       "TYPE": "Type",
       "EXPIRATIONDATE": "Expiration date",
@@ -533,6 +535,25 @@
         "PROJECT": "Project",
         "GRANTEDPROJECT": "Granted Project"
       }
+    },
+    "PERSONALACCESSTOKEN": {
+      "ID": "ID",
+      "TOKEN": "Token",
+      "ADD": {
+        "TITLE": "Generate new Personal Access Token",
+        "DESCRIPTION": "Define a custom expiration for the token.",
+        "CHOOSEEXPIRY": "Select an expiration date",
+        "CHOOSEDATEAFTER": "Enter a valid expiration after"
+      },
+      "ADDED": {
+        "TITLE": "Personal Access Token",
+        "DESCRIPTION": "Make sure to copy your personal access token. You won't be able to see it again!"
+      },
+      "DELETE": {
+        "TITLE": "Delete Token",
+        "DESCRIPTION": "You are about to delete the personal access token. Are you sure?"
+      },
+      "DELETED": "Token deleted with success."
     }
   },
   "FLOWS": {

console/src/assets/i18n/it.json

@@ -378,6 +378,8 @@
       "DESCRIPTION": "Descrizione",
       "KEYSTITLE": "Chiavi",
       "KEYSDESC": "Definisci le tue chiavi e aggiungi una data di scadenza opzionale.",
+      "TOKENSTITLE": "Access Tokens",
+      "TOKENSDESC": "Questi Token d'accesso personali funzionano come i Access Token per OAuth.",
       "ID": "ID chiave",
       "TYPE": "Tipo",
       "EXPIRATIONDATE": "Data di scadenza",
@@ -533,6 +535,25 @@
         "PROJECT": "Progetto",
         "GRANTEDPROJECT": "Progetto concesso"
       }
+    },
+    "PERSONALACCESSTOKEN": {
+      "ID": "ID",
+      "TOKEN": "Token",
+      "ADD": {
+        "TITLE": "Genera un nuovo token",
+        "DESCRIPTION": "Definisci la data di scadenza del token",
+        "CHOOSEEXPIRY": "Seleziona una data di scadenza",
+        "CHOOSEDATEAFTER": "Inserisci una scadenza valida"
+      },
+      "ADDED": {
+        "TITLE": "Personal Access Token",
+        "DESCRIPTION": "Copia il tuo token di accesso. Non sarà possibile recuperarlo in seguito."
+      },
+      "DELETE": {
+        "TITLE": "Elimina Token",
+        "DESCRIPTION": "Stai per eliminare il token di accesso. Sei sicuro di voler continuare?"
+      },
+      "DELETED": "Token eliminato con successo."
     }
   },
   "FLOWS": {

internal/api/grpc/user/personal_access_token.go

@@ -18,7 +18,7 @@ func PersonalAccessTokensToPb(tokens []*query.PersonalAccessToken) []*user.Perso
 func PersonalAccessTokenToPb(token *query.PersonalAccessToken) *user.PersonalAccessToken {
 	return &user.PersonalAccessToken{
 		Id:             token.ID,
-		Details:        object.ChangeToDetailsPb(token.Sequence, token.ChangeDate, token.ResourceOwner),
+		Details:        object.ToViewDetailsPb(token.Sequence, token.CreationDate, token.ChangeDate, token.ResourceOwner),
 		ExpirationDate: timestamppb.New(token.Expiration),
 		Scopes:         token.Scopes,
 	}

operator/common/images.go

@@ -9,7 +9,7 @@ type dockerhubImage image
 type zitadelImage image
 
 const (
-	CockroachImage       dockerhubImage = "cockroachdb/cockroach:v21.2.4"
+	CockroachImage       dockerhubImage = "cockroachdb/cockroach:v21.2.5"
 	PostgresImage        dockerhubImage = "postgres:9.6.17"
 	FlywayImage          dockerhubImage = "flyway/flyway:8.0.2"
 	AlpineImage          dockerhubImage = "alpine:3.11"