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 <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>

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

@@ -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>

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(() => {
+                    return this.userService.AddMachineKey(this.userId, type, date).then((response) => {
-                        this.toast.showInfo('ORG.TOAST.MEMBERADDED', true);
+                        if (response) {
+                            console.log(response.toObject());
+                            this.dialog.open(ShowKeyDialogComponent, {
+                                data: {
+                                    key: response.toObject(),
+                                },
+                                width: '400px',
+                            });
+                        }
                     }).catch((error: any) => {
                         this.toast.showError(error);
                     });

console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.html

@@ -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>

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;
+}

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<ShowKeyDialogComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ShowKeyDialogComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ShowKeyDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

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<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);
+    }
+}

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 { }

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,

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"
             }

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"
             }