mirror of
https://github.com/zitadel/zitadel
synced 2024-11-21 16:30:53 +00:00
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>
This commit is contained in:
Livio Amstutz
GitHub
parent
b44b48fa1e
commit
5d4351f47c
@ -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"]
|
||||
|
||||
@ -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 \
|
||||
| tar xvz && cp -i cockroach-v21.2.4.linux-amd64/cockroach /usr/local/bin/
|
||||
RUN rm -r cockroach-v21.2.4.linux-amd64
|
||||
RUN wget -qO- https://binaries.cockroachdb.com/cockroach-v21.2.5.linux-amd64.tgz \
|
||||
| tar xvz && cp -i cockroach-v21.2.5.linux-amd64/cockroach /usr/local/bin/
|
||||
RUN rm -r cockroach-v21.2.5.linux-amd64
|
||||
|
||||
#######################
|
||||
## generates static files
|
||||
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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 });
|
||||
}
|
||||
}
|
||||
@ -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 {}
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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 {}
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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 {}
|
||||
@ -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,
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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());
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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,
|
||||
}
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user