feat(console): replace wget with curl, user login prompt, warn dialog (#387)

* remove evil wget, add warn-dialog, login hint

* i18n

* reference ngsw.js

* update clientid

* fix warn dialog

* lint

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

Co-authored-by: Florian Forster <[email protected]>

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

Co-authored-by: Florian Forster <[email protected]>

Co-authored-by: Florian Forster <[email protected]>

console/src/app/modules/accounts-card/accounts-card.component.html

@@ -10,7 +10,7 @@
     <button (click)="editUserProfile()" mat-stroked-button>{{'USER.EDITACCOUNT' | translate}}</button>
     <div class="l-accounts">
         <mat-progress-bar *ngIf="loadingUsers" color="primary" mode="indeterminate"></mat-progress-bar>
-        <a class="row" *ngFor="let user of users" (click)="selectAccount(user.userName)">
+        <a class="row" *ngFor="let user of users" (click)="selectAccount(user.loginName)">
             <app-avatar *ngIf="user && user.displayName" class="small-avatar"
                 [name]="user.displayName ? user.displayName : ''" [size]="32">
             </app-avatar>
@@ -22,7 +22,7 @@
             <span class="fill-space"></span>
             <mat-icon>keyboard_arrow_right</mat-icon>
         </a>
-        <a class="row" (click)="selectAccount()">
+        <a class="row" (click)="selectNewAccount()">
             <div class="icon-wrapper">
                 <i class="las la-user-plus"></i>
             </div>

console/src/app/modules/accounts-card/accounts-card.component.ts

@@ -45,21 +45,27 @@ export class AccountsCardComponent implements OnInit {
         }
     }
 
-    public selectAccount(loginHint?: string, idToken?: string): void {
+    public selectAccount(loginName?: string): void {
         const configWithPrompt: Partial<AuthConfig> = {
             customQueryParams: {
-                prompt: 'select_account',
+                // prompt: 'select_account',
             } as any,
         };
-        if (loginHint) {
-            (configWithPrompt as any).customQueryParams['login_hint'] = loginHint;
-        }
-        if (idToken) {
-            (configWithPrompt as any).customQueryParams['id_token_hint'] = idToken;
+        if (loginName) {
+            (configWithPrompt as any).customQueryParams['login_hint'] = loginName;
         }
         this.authService.authenticate(configWithPrompt);
     }
 
+    public selectNewAccount(): void {
+        const configWithPrompt: Partial<AuthConfig> = {
+            customQueryParams: {
+                prompt: 'login',
+            } as any,
+        };
+        this.authService.authenticate(configWithPrompt);
+    }
+
     public logout(): void {
         this.authService.signout();
         this.close.emit();

console/src/app/modules/user-grants/user-grants-datasource.ts

@@ -39,11 +39,10 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
     ): void {
         const offset = pageIndex * pageSize;
 
-        this.loadingSubject.next(true);
-
         switch (context) {
             case UserGrantContext.USER:
                 if (data && data.userId) {
+                    this.loadingSubject.next(true);
                     const userfilter = new UserGrantSearchQuery();
                     userfilter.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID);
                     userfilter.setValue(data.userId);
@@ -59,12 +58,14 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
                 break;
             case UserGrantContext.OWNED_PROJECT:
                 if (data && data.projectId) {
+                    this.loadingSubject.next(true);
                     const promise1 = this.userService.SearchProjectUserGrants(data.projectId, 10, 0, queries);
                     this.loadResponse(promise1);
                 }
                 break;
             case UserGrantContext.GRANTED_PROJECT:
                 if (data && data.grantId) {
+                    this.loadingSubject.next(true);
                     const promise2 = this.userService.SearchProjectGrantUserGrants(data.grantId, 10, 0, queries);
                     this.loadResponse(promise2);
                 }

console/src/app/modules/user-grants/user-grants.component.ts

@@ -139,7 +139,17 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
     deleteGrantSelection(): void {
         this.userService.BulkRemoveUserGrant(this.selection.selected.map(grant => grant.id)).then(() => {
             this.toast.showInfo('Grants deleted');
-            this.loadGrantsPage();
+            const data = this.dataSource.grantsSubject.getValue();
+            console.log(data);
+            this.selection.selected.forEach((item) => {
+                console.log(item);
+                const index = data.findIndex(i => i.id === item.id);
+                if (index > -1) {
+                    data.splice(index, 1);
+                    this.dataSource.grantsSubject.next(data);
+                }
+            });
+            this.selection.clear();
         }).catch(error => {
             this.toast.showError(error.message);
         });

console/src/app/modules/warn-dialog/warn-dialog.component.html

@@ -0,0 +1,13 @@
+<span class="title" mat-dialog-title>{{data.titleKey | translate}}</span>
+<div mat-dialog-content>
+    <p class="desc"> {{data.descriptionKey | translate}}</p>
+</div>
+<div mat-dialog-actions class="action">
+    <button mat-button (click)="closeDialog()">
+        {{data.cancelKey | translate}}
+    </button>
+
+    <button color="warn" mat-raised-button class="ok-button" (click)="closeDialogWithSuccess()">
+        {{data.confirmKey | translate}}
+    </button>
+</div>

console/src/app/modules/warn-dialog/warn-dialog.component.scss

@@ -0,0 +1,22 @@
+.title {
+    font-size: 1.2rem;
+    margin-top: 0;
+}
+
+.desc {
+    color: #8795a1;
+    font-size: .9rem;
+}
+
+.action {
+    display: flex;
+    justify-content: flex-end;
+
+    .ok-button {
+      margin-left: 0.5rem;
+    }
+
+    button {
+      border-radius: 0.5rem;
+    }
+}

console/src/app/modules/warn-dialog/warn-dialog.component.spec.ts

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

console/src/app/modules/warn-dialog/warn-dialog.component.ts

@@ -0,0 +1,26 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+    selector: 'app-warn-dialog',
+    templateUrl: './warn-dialog.component.html',
+    styleUrls: ['./warn-dialog.component.scss'],
+})
+export class WarnDialogComponent implements OnInit {
+
+    constructor(
+        public dialogRef: MatDialogRef<WarnDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any,
+    ) { }
+
+    ngOnInit(): void {
+    }
+
+    public closeDialog(): void {
+        this.dialogRef.close(false);
+    }
+
+    public closeDialogWithSuccess(): void {
+        this.dialogRef.close(true);
+    }
+}

console/src/app/modules/warn-dialog/warn-dialog.module.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { WarnDialogComponent } from './warn-dialog.component';
+
+
+
+@NgModule({
+    declarations: [WarnDialogComponent],
+    imports: [
+        CommonModule,
+        TranslateModule,
+        MatButtonModule,
+    ],
+    entryComponents: [
+        WarnDialogComponent,
+    ],
+})
+export class WarnDialogModule { }