From 173f9dd5d6e4ccb82f262ae7d6e4eff87a1cf61a Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Fri, 11 Sep 2020 09:57:08 +0200 Subject: [PATCH] fix(console): show machine key after creation, fix bulk delete (#716) * show machinekey after creation * delete bulk * lint * download button * lint * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster Co-authored-by: Florian Forster --- .../machine-keys/machine-keys.component.html | 2 +- .../machine-keys/machine-keys.component.ts | 20 +++++-- .../show-key-dialog.component.html | 28 ++++++++++ .../show-key-dialog.component.scss | 56 +++++++++++++++++++ .../show-key-dialog.component.spec.ts | 25 +++++++++ .../show-key-dialog.component.ts | 30 ++++++++++ .../show-key-dialog/show-key-dialog.module.ts | 20 +++++++ .../users/user-detail/user-detail.module.ts | 2 + console/src/assets/i18n/de.json | 7 ++- console/src/assets/i18n/en.json | 7 ++- 10 files changed, 190 insertions(+), 7 deletions(-) create mode 100644 console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.html create mode 100644 console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.scss create mode 100644 console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.spec.ts create mode 100644 console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.ts create mode 100644 console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.module.ts diff --git a/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.html b/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.html index fe6dc446d3..6eb948730e 100644 --- a/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.html +++ b/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.html @@ -46,7 +46,7 @@ - {{ 'USER.MACHINE.EXPIRYDATE' | translate }} + {{ 'USER.MACHINE.EXPIRATIONDATE' | translate }} {{key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}} diff --git a/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.ts b/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.ts index 3bfce2d764..91cbccd5a7 100644 --- a/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.ts +++ b/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.ts @@ -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); }); diff --git a/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.html b/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.html new file mode 100644 index 0000000000..928a1555e4 --- /dev/null +++ b/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.html @@ -0,0 +1,28 @@ +{{'USER.MACHINE.ADDED.TITLE' | translate}} +
+

{{'USER.MACHINE.ADDED.DESCRIPTION' | translate}}

+ +
+

{{'USER.MACHINE.ID' | translate}}

+

{{addedKey?.id}}

+
+
+

{{'USER.MACHINE.TYPE' | translate}}

+

{{'USER.MACHINE.KEYTYPES.'+addedKey?.type | translate}}

+
+
+

{{'USER.MACHINE.EXPIRATIONDATE' | translate}}

+

{{addedKey?.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}

+
+
+

{{'USER.MACHINE.EXPIRATIONDATE' | translate}}

+

{{addedKey?.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}

+
+ + +
+
+ +
\ No newline at end of file diff --git a/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.scss b/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.scss new file mode 100644 index 0000000000..b3912e2019 --- /dev/null +++ b/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.scss @@ -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; +} diff --git a/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.spec.ts b/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.spec.ts new file mode 100644 index 0000000000..68e840920e --- /dev/null +++ b/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ShowKeyDialogComponent], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ShowKeyDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.ts b/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.ts new file mode 100644 index 0000000000..cc45b76c7a --- /dev/null +++ b/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.ts @@ -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, + @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); + } +} diff --git a/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.module.ts b/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.module.ts new file mode 100644 index 0000000000..5553cfc39b --- /dev/null +++ b/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.module.ts @@ -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 { } diff --git a/console/src/app/pages/users/user-detail/user-detail.module.ts b/console/src/app/pages/users/user-detail/user-detail.module.ts index 938ee1d8c6..2e5b893839 100644 --- a/console/src/app/pages/users/user-detail/user-detail.module.ts +++ b/console/src/app/pages/users/user-detail/user-detail.module.ts @@ -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, diff --git a/console/src/assets/i18n/de.json b/console/src/assets/i18n/de.json index 05197f0aab..d117d0a6d6 100644 --- a/console/src/assets/i18n/de.json +++ b/console/src/assets/i18n/de.json @@ -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" } diff --git a/console/src/assets/i18n/en.json b/console/src/assets/i18n/en.json index 60fe17ef69..e7bfdf7fca 100644 --- a/console/src/assets/i18n/en.json +++ b/console/src/assets/i18n/en.json @@ -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" }