TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2024-12-13 03:24:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): show machine key after creation, fix bulk delete (#716)

Browse Source 
* show machinekey after creation

* delete bulk

* lint

* download button

* lint

* Update console/src/assets/i18n/de.json

Co-authored-by: Florian Forster <florian@caos.ch>

* Update console/src/assets/i18n/en.json

Co-authored-by: Florian Forster <florian@caos.ch>

Co-authored-by: Florian Forster <florian@caos.ch>
This commit is contained in:
Max Peintner 2020-09-11 09:57:08 +02:00 committed by GitHub
parent 5c6989e831
commit 173f9dd5d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 190 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.html
View File

@ -46,7 +46,7 @@
</ng-container>
<ng-container matColumnDef="expirationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.EXPIRYDATE' | translate }} </th>
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.EXPIRATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let key">
{{key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
</td>

20
console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.ts
View File

@ -11,6 +11,7 @@ import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { AddKeyDialogComponent } from './add-key-dialog/add-key-dialog.component';
import { ShowKeyDialogComponent } from './show-key-dialog/show-key-dialog.component';
@Component({
selector: 'app-machine-keys',
@ -59,12 +60,15 @@ export class MachineKeysComponent implements OnInit {
}
public deleteSelectedKeys(): void {
Promise.all(this.selection.selected.map(value => {
const mappedDeletions = this.selection.selected.map(value => {
return this.userService.DeleteMachineKey(value.id, this.userId);
})).then(() => {
});
Promise.all(mappedDeletions).then(() => {
this.selection.clear();
this.toast.showInfo('USER.TOAST.SELECTEDKEYSDELETED', true);
this.getData(10, 0);
}).catch(error => {
this.toast.showError(error);
});
}
@ -94,8 +98,16 @@ export class MachineKeysComponent implements OnInit {
if (type) {
console.log(this.userId, type, date);
return this.userService.AddMachineKey(this.userId, type, date).then(() => {
this.toast.showInfo('ORG.TOAST.MEMBERADDED', true);
return this.userService.AddMachineKey(this.userId, type, date).then((response) => {
if (response) {
console.log(response.toObject());
this.dialog.open(ShowKeyDialogComponent, {
data: {
key: response.toObject(),
},
width: '400px',
});
}
}).catch((error: any) => {
this.toast.showError(error);
});

28
console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.html Normal file
View File

@ -0,0 +1,28 @@
<span class="title" mat-dialog-title>{{'USER.MACHINE.ADDED.TITLE' | translate}}</span>
<div mat-dialog-content>
<p class="desc"> {{'USER.MACHINE.ADDED.DESCRIPTION' | translate}}</p>
<ng-container *ngIf="addedKey">
<div class="row">
<p class="left">{{'USER.MACHINE.ID' | translate}}</p>
<p class="right">{{addedKey?.id}}</p>
</div>
<div class="row">
<p class="left">{{'USER.MACHINE.TYPE' | translate}}</p>
<p class="right">{{'USER.MACHINE.KEYTYPES.'+addedKey?.type | translate}}</p>
</div>
<div class="row">
<p class="left">{{'USER.MACHINE.EXPIRATIONDATE' | translate}}</p>
<p class="right">{{addedKey?.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</p>
</div>
<div class="row">
<p class="left">{{'USER.MACHINE.EXPIRATIONDATE' | translate}}</p>
<p class="right">{{addedKey?.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</p>
</div>
<button class="download-button" mat-stroked-button color="primary" (click)="saveFile()">Download</button>
</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>

56
console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.scss Normal file
View File

@ -0,0 +1,56 @@
.title {
font-size: 1.2rem;
margin-top: 0;
}
.desc {
color: rgb(201, 51, 71);
font-size: .9rem;
}
.form-field {
width: 100%;
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: .5rem;
}
button {
border-radius: .5rem;
}
}
.row {
display: flex;
width: 100%;
flex-direction: column;
.left,
.right {
font-size: 14px;
flex: 1 0 auto;
}
.left {
color: #8795a1;
margin-right: 1rem;
margin-top: 0;
margin-bottom: .5rem;
}
.right {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
}
}
.download-button {
margin-bottom: 1rem;
border-radius: .5rem;
}

25
console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.spec.ts Normal file
View File

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

30
console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.ts Normal file
View File

@ -0,0 +1,30 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { saveAs } from 'file-saver';
import { AddMachineKeyResponse } from 'src/app/proto/generated/management_pb';
@Component({
selector: 'app-show-key-dialog',
templateUrl: './show-key-dialog.component.html',
styleUrls: ['./show-key-dialog.component.scss'],
})
export class ShowKeyDialogComponent {
public addedKey!: AddMachineKeyResponse.AsObject;
constructor(
public dialogRef: MatDialogRef<ShowKeyDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
) {
this.addedKey = data.key;
}
public saveFile(): void {
const json = atob(this.addedKey.keyDetails.toString());
const blob = new Blob([json], { type: 'text/plain;charset=utf-8' });
saveAs(blob, `${this.addedKey.id}.json`);
}
public closeDialog(): void {
this.dialogRef.close(false);
}
}

20
console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.module.ts Normal file
View File

@ -0,0 +1,20 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { TranslateModule } from '@ngx-translate/core';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe.module';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module';
import { ShowKeyDialogComponent } from './show-key-dialog.component';
@NgModule({
declarations: [ShowKeyDialogComponent],
imports: [
CommonModule,
TranslateModule,
MatButtonModule,
LocalizedDatePipeModule,
TimestampToDatePipeModule,
],
})
export class ShowKeyDialogModule { }

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

@ -38,6 +38,7 @@ import { DetailFormMachineModule } from './detail-form-machine/detail-form-machi
import { DetailFormModule } from './detail-form/detail-form.module';
import { AddKeyDialogModule } from './machine-keys/add-key-dialog/add-key-dialog.module';
import { MachineKeysComponent } from './machine-keys/machine-keys.component';
import { ShowKeyDialogModule } from './machine-keys/show-key-dialog/show-key-dialog.module';
import { MembershipsComponent } from './memberships/memberships.component';
import { PasswordComponent } from './password/password.component';
import { UserDetailRoutingModule } from './user-detail-routing.module';
@ -69,6 +70,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
QRCodeModule,
MetaLayoutModule,
AddKeyDialogModule,
ShowKeyDialogModule,
MatCheckboxModule,
HasRolePipeModule,
MatFormFieldModule,

7
console/src/assets/i18n/de.json
View File

@ -155,13 +155,18 @@
"KEYSDESC":"Definieren Sie Ihre Schlüssel mit einem optionalen Ablaufdatum",
"ID":"Schlüssel Id",
"TYPE":"Typ",
"EXPIRYDATE":"Ablaufdatum",
"EXPIRATIONDATE":"Ablaufdatum",
"CHOOSEEXPIRY":"Definieren Sie ein Ablaufdatum",
"CREATIONDATE":"Erstelldatum",
"KEYDETAILS":"Schlüssel Details",
"ADD": {
"TITLE":"Schlüssel hinzufügen",
"DESCRIPTION":"Wählen Sie den Typ und selektieren Sie ein optionales Ablaufdatum."
},
"ADDED": {
"TITLE":"Schlüssel wurde erstellt",
"DESCRIPTION":"Speichern Sie den Schlüssen. Der Schlüssel kann später nicht nochmal aufgerufen werden!"
},
"KEYTYPES": {
"1":"JSON"
}

7
console/src/assets/i18n/en.json
View File

@ -155,13 +155,18 @@
"KEYSDESC":"Define your keys and add an optional expiration date.",
"ID":"Key Id",
"TYPE":"Type",
"EXPIRYDATE":"Expiration date",
"EXPIRATIONDATE":"Expiration date",
"CHOOSEEXPIRY":"Select an expiration Date",
"CREATIONDATE":"Creation Date",
"KEYDETAILS":"Key Details",
"ADD": {
"TITLE":"Add Key",
"DESCRIPTION":"Select your key type and choose an optional expiry date."
},
"ADDED": {
"TITLE":"The key was created",
"DESCRIPTION":"Download the key as it won't be visible after closing this dialog!"
},
"KEYTYPES": {
"1":"JSON"
}