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 <[email protected]> * fix(cockroach): update to 21.2.5 (#3189) Co-authored-by: Max Peintner <[email protected]> Co-authored-by: Silvan <[email protected]>
2026-11-13 01:25:11 +00:00 · 2022-02-11 13:33:31 +01:00
parent b44b48fa1e
commit 5d4351f47c
25 changed files with 745 additions and 6 deletions
@@ -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 {}