feat: add confirmation field for user deletion, self warning (#2971)

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

@@ -1,16 +1,22 @@
 <span class="title" mat-dialog-title>{{data.titleKey | translate: data.titleParam}}</span>
 <div mat-dialog-content>
   <div class="icon-wrapper" *ngIf="data.icon">
-    <i  class="icon {{data.icon}}"></i>
+    <i class="icon {{data.icon}}"></i>
   </div>
   <p class="desc"> {{data.descriptionKey | translate: data.descriptionParam}}</p>
+
+  <cnsl-form-field *ngIf="data.confirmation && data.confirmationKey" class="formfield">
+    <cnsl-label>{{data.confirmationKey | translate: {value: data.confirmation} }}</cnsl-label>
+    <input cnslInput [(ngModel)]="confirm" />
+  </cnsl-form-field>
 </div>
 <div mat-dialog-actions class="action">
   <button *ngIf="data.cancelKey" mat-button (click)="closeDialog()">
-      {{data.cancelKey | translate}}
+    {{data.cancelKey | translate}}
   </button>
   <span class="fill-space"></span>
-  <button color="warn" mat-raised-button class="ok-button" (click)="closeDialogWithSuccess()">
-      {{data.confirmKey | translate}}
+  <button color="warn" [disabled]="data.confirmation && confirm !== data.confirmation" mat-raised-button
+    class="ok-button" (click)="closeDialogWithSuccess()">
+    {{data.confirmKey | translate}}
   </button>
 </div>

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

@@ -7,11 +7,8 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
   styleUrls: ['./warn-dialog.component.scss'],
 })
 export class WarnDialogComponent {
-
-  constructor(
-    public dialogRef: MatDialogRef<WarnDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
-  ) { }
+  public confirm: string = '';
+  constructor(public dialogRef: MatDialogRef<WarnDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
 
   public closeDialog(): void {
     this.dialogRef.close(false);

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

@@ -1,18 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { InputModule } from '../input/input.module';
 import { WarnDialogComponent } from './warn-dialog.component';
 
-
-
 @NgModule({
-    declarations: [WarnDialogComponent],
-    imports: [
-        CommonModule,
-        TranslateModule,
-        MatButtonModule,
-    ],
+  declarations: [WarnDialogComponent],
+  imports: [CommonModule, FormsModule, TranslateModule, MatButtonModule, InputModule],
 })
-export class WarnDialogModule { }
+export class WarnDialogModule {}