Add console delete confirmation dialogs (#1197)

console/ui/dist/prod-nt/static/3rdpartylicenses.txt

@@ -72,6 +72,30 @@ THE SOFTWARE.
 @ng-select/ng-select
 MIT
 
+@popperjs/core
+MIT
+The MIT License (MIT)
+
+Copyright (c) 2019 Federico Zivolo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+
 @swimlane/ngx-charts
 MIT
 MIT License
@@ -997,21 +1021,6 @@ Apache-2.0
 
 
 
-tslib
-0BSD
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-
 ui
 
 vanilla-jsoneditor

console/ui/dist/prod/static/3rdpartylicenses.txt

@@ -72,6 +72,30 @@ THE SOFTWARE.
 @ng-select/ng-select
 MIT
 
+@popperjs/core
+MIT
+The MIT License (MIT)
+
+Copyright (c) 2019 Federico Zivolo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+
 @swimlane/ngx-charts
 MIT
 MIT License
@@ -997,21 +1021,6 @@ Apache-2.0
 
 
 
-tslib
-0BSD
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-
 ui
 
 vanilla-jsoneditor

console/ui/src/app/account/account.component.ts

@@ -18,6 +18,9 @@ import {ActivatedRoute, ActivatedRouteSnapshot, Resolve, Router, RouterStateSnap
 import {AuthenticationService} from '../authentication.service';
 import {saveAs} from 'file-saver';
 import {Observable} from 'rxjs';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {DeleteConfirmDialogComponent} from '../shared/delete-confirm-dialog/delete-confirm-dialog.component';
+import {DeleteConfirmService} from '../shared/delete-confirm.service';
 
 @Component({
   templateUrl: './account.component.html',
@@ -42,6 +45,7 @@ export class AccountComponent implements OnInit {
     private readonly router: Router,
     private readonly consoleService: ConsoleService,
     private readonly authService: AuthenticationService,
+    private readonly deleteConfirmService: DeleteConfirmService,
   ) {}
 
   ngOnInit(): void {
@@ -55,14 +59,18 @@ export class AccountComponent implements OnInit {
   }
 
   deleteAccount(event, recorded: boolean): void {
-    event.target.disabled = true;
-    this.error = '';
-    this.consoleService.deleteAccount('', this.account.user.id, recorded).subscribe(() => {
-      this.error = '';
-      this.router.navigate(['/accounts']);
-    }, err => {
-      this.error = err;
-    });
+    this.deleteConfirmService.openDeleteConfirmModal(
+      () => {
+        event.target.disabled = true;
+        this.error = '';
+        this.consoleService.deleteAccount('', this.account.user.id, recorded).subscribe(() => {
+          this.error = '';
+          this.router.navigate(['/accounts']);
+        }, err => {
+          this.error = err;
+        });
+      }
+    );
   }
 
   banUnbanAccount(event): void {

console/ui/src/app/account/friends/friends.component.ts

@@ -21,6 +21,7 @@ import {
 import {ActivatedRoute, ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
 import {AuthenticationService} from '../../authentication.service';
 import {Observable} from 'rxjs';
+import {DeleteConfirmService} from '../../shared/delete-confirm.service';
 
 @Component({
   templateUrl: './friends.component.html',
@@ -36,6 +37,7 @@ export class FriendsComponent implements OnInit {
     private readonly router: Router,
     private readonly consoleService: ConsoleService,
     private readonly authService: AuthenticationService,
+    private readonly deleteConfirmService: DeleteConfirmService,
   ) {}
 
   ngOnInit(): void {
@@ -62,15 +64,19 @@ export class FriendsComponent implements OnInit {
   }
 
   deleteFriend(event, i: number, f: ApiFriend): void {
-    event.target.disabled = true;
-    event.preventDefault();
-    this.error = '';
-    this.consoleService.deleteFriend('', this.account.user.id, f.user.id).subscribe(() => {
-      this.error = '';
-      this.friends.splice(i, 1);
-    }, err => {
-      this.error = err;
-    });
+    this.deleteConfirmService.openDeleteConfirmModal(
+      () => {
+        event.target.disabled = true;
+        event.preventDefault();
+        this.error = '';
+        this.consoleService.deleteFriend('', this.account.user.id, f.user.id).subscribe(() => {
+          this.error = '';
+          this.friends.splice(i, 1);
+        }, err => {
+          this.error = err;
+        });
+      }
+    );
   }
 }
 

console/ui/src/app/account/groups/groups.component.ts

@@ -21,6 +21,7 @@ import {
 import {ActivatedRoute, ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
 import {AuthenticationService} from '../../authentication.service';
 import {Observable} from 'rxjs';
+import {DeleteConfirmService} from '../../shared/delete-confirm.service';
 
 @Component({
   templateUrl: './groups.component.html',
@@ -36,6 +37,7 @@ export class GroupsComponent implements OnInit {
     private readonly router: Router,
     private readonly consoleService: ConsoleService,
     private readonly authService: AuthenticationService,
+    private readonly deleteConfirmService: DeleteConfirmService,
   ) {}
 
   ngOnInit(): void {
@@ -57,20 +59,24 @@ export class GroupsComponent implements OnInit {
       });
   }
 
-  deleteAllowed() {
+  deleteAllowed(): boolean {
     return this.authService.sessionRole <= UserRole.USER_ROLE_MAINTAINER;
   }
 
-  deleteGroupUser(event, i: number, f: UserGroupListUserGroup) {
-    event.target.disabled = true;
-    event.preventDefault();
-    this.error = '';
-    this.consoleService.deleteGroupUser('', this.account.user.id, f.group.id).subscribe(() => {
-      this.error = '';
-      this.groups.splice(i, 1)
-    }, err => {
-      this.error = err;
-    })
+  deleteGroupUser(event, i: number, f: UserGroupListUserGroup): void {
+    this.deleteConfirmService.openDeleteConfirmModal(
+      () => {
+        event.target.disabled = true;
+        event.preventDefault();
+        this.error = '';
+        this.consoleService.deleteGroupUser('', this.account.user.id, f.group.id).subscribe(() => {
+          this.error = '';
+          this.groups.splice(i, 1)
+        }, err => {
+          this.error = err;
+        });
+      }
+    );
   }
 
   viewAccount(g: UserGroupListUserGroup): void {

console/ui/src/app/account/wallet/wallet.component.ts

@@ -25,6 +25,7 @@ import {ActivatedRoute, ActivatedRouteSnapshot, Resolve, Router, RouterStateSnap
 import {AuthenticationService} from '../../authentication.service';
 import {JSONEditor, Mode, toTextContent} from 'vanilla-jsoneditor';
 import {Observable} from 'rxjs';
+import {DeleteConfirmService} from '../../shared/delete-confirm.service';
 
 @Component({
   templateUrl: './wallet.component.html',
@@ -50,6 +51,7 @@ export class WalletComponent implements OnInit, AfterViewInit {
     private readonly router: Router,
     private readonly consoleService: ConsoleService,
     private readonly authService: AuthenticationService,
+    private readonly deleteConfirmService: DeleteConfirmService,
   ) {}
 
   ngOnInit(): void {
@@ -135,16 +137,20 @@ export class WalletComponent implements OnInit, AfterViewInit {
   }
 
   deleteLedgerItem(event, i: number, w: WalletLedger): void {
-    event.target.disabled = true;
-    event.preventDefault();
-    this.error = '';
-    this.consoleService.deleteWalletLedger('', this.account.user.id, w.id).subscribe(() => {
-      this.error = '';
-      this.walletLedger.splice(i, 1);
-      this.walletLedgerMetadataOpen.splice(i, 1);
-    }, err => {
-      this.error = err;
-    });
+    this.deleteConfirmService.openDeleteConfirmModal(
+      () => {
+        event.target.disabled = true;
+        event.preventDefault();
+        this.error = '';
+        this.consoleService.deleteWalletLedger('', this.account.user.id, w.id).subscribe(() => {
+          this.error = '';
+          this.walletLedger.splice(i, 1);
+          this.walletLedgerMetadataOpen.splice(i, 1);
+        }, err => {
+          this.error = err;
+        });
+      }
+    );
   }
 }
 

console/ui/src/app/accounts/accounts.component.ts

@@ -18,6 +18,9 @@ import {AccountList, ApiUser, ConsoleService, UserRole} from '../console.service
 import {Observable} from 'rxjs';
 import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {AuthenticationService} from '../authentication.service';
+import {DeleteConfirmDialogComponent} from '../shared/delete-confirm-dialog/delete-confirm-dialog.component';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {DeleteConfirmService} from '../shared/delete-confirm.service';
 
 @Component({
   templateUrl: './accounts.component.html',
@@ -38,6 +41,7 @@ export class AccountListComponent implements OnInit {
     private readonly consoleService: ConsoleService,
     private readonly authService: AuthenticationService,
     private readonly formBuilder: UntypedFormBuilder,
+    private readonly deleteConfirmService: DeleteConfirmService,
   ) {}
 
   ngOnInit(): void {
@@ -110,16 +114,20 @@ export class AccountListComponent implements OnInit {
   }
 
   deleteAccount(event, i: number, o: ApiUser): void {
-    event.target.disabled = true;
-    event.preventDefault();
-    this.error = '';
-    this.consoleService.deleteAccount('', o.id, false).subscribe(() => {
-      this.error = '';
-      this.accounts.splice(i, 1);
-      this.accountsCount--;
-    }, err => {
-      this.error = err;
-    });
+    this.deleteConfirmService.openDeleteConfirmModal(
+      () => {
+        event.target.disabled = true;
+        event.preventDefault();
+        this.error = '';
+        this.consoleService.deleteAccount('', o.id, false).subscribe(() => {
+          this.error = '';
+          this.accounts.splice(i, 1);
+          this.accountsCount--;
+        }, err => {
+          this.error = err;
+        });
+      }
+    );
   }
 
   deleteAllowed(): boolean {

console/ui/src/app/app.module.ts

@@ -60,6 +60,7 @@ import {LeaderboardRecordsComponent} from './leaderboard/records/records.compone
 import {ApiExplorerComponent} from './apiexplorer/apiexplorer.component';
 import {PurchasesComponent} from './account/purchases/purchases.component';
 import {SubscriptionsComponent} from './account/subscriptions/subscriptions.component';
+import {DeleteConfirmDialogComponent} from './shared/delete-confirm-dialog/delete-confirm-dialog.component';
 
 @NgModule({
   declarations: [
@@ -93,6 +94,7 @@ import {SubscriptionsComponent} from './account/subscriptions/subscriptions.comp
     SubscriptionsComponent,
     GroupListComponent,
     ChatListComponent,
+    DeleteConfirmDialogComponent,
   ],
   imports: [
     NgxFileDropModule,

console/ui/src/app/channels/chatMessages.component.html

@@ -132,28 +132,6 @@ <h6 class="mr-2 d-inline font-weight-bold">{{total_deleted}} messages {{total_de
 </ngb-alert>
 
 <div class="d-flex justify-content-between align-items-center" role="alert">
-  <ng-template #confirmDelete let-modal>
-    <div class="modal-header">
-      <h5 class="modal-title">Delete messages</h5>
-      <button type="button" class="close" aria-describedby="modal-title" (click)="modal.dismiss()">
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-    <div class="modal-body">
-      <div class="d-flex flex-column justify-content-center">
-        <form [formGroup]="confirmDeleteForm" autocomplete="off">
-          <div class="mt-2"><p><b>Choose how many days to retain: </b>
-            <input type="number" style="width: 80px;" value="30" min="0" formControlName="days" />
-          </p></div>
-          <input type="text" class="form-control" id="delete-confirm" placeholder="Type 'DELETE' to confirm" formControlName="delete" [ngClass]="{'is-invalid': f.delete.touched && f.delete.invalid}" />
-        </form>
-      </div>
-    </div>
-    <div class="modal-footer">
-      <button type="button" class="btn btn-outline-secondary" (click)="modal.dismiss()">Cancel</button>
-      <button type="button" class="btn btn-danger" [disabled]="f.delete.invalid" (click)="modal.close()">DELETE</button>
-    </div>
-  </ng-template>
-  <button *ngIf="deleteMessagesAllowed()" [disabled]="deleting" (click)="openDeleteDataModal(confirmDelete)" type="button" class="btn btn-danger">Delete messages</button>
+  <button *ngIf="deleteMessagesAllowed()" [disabled]="deleting" (click)="deleteData()" type="button" class="btn btn-danger">Delete messages</button>
 </div>