feat: add basic EULA/TOS confirmation

sovity · Jun 10, 2024 · 0f09505 · 0f09505
1 parent bacab96
commit 0f09505
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,8 @@ the detailed section referring to by linking pull requests or issues.
 
 #### Patch
 
+- Added Initiate Transfer Confirm ToS Dialog
+
 #### Deployment Migration Notes
 
 ## [v3.2.2] - 2024-04-20

diff --git a/...brary/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.module.ts b/...brary/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.module.ts
@@ -0,0 +1,33 @@
+import {ClipboardModule} from '@angular/cdk/clipboard';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatIconModule} from '@angular/material/icon';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {PipesAndDirectivesModule} from '../pipes-and-directives/pipes-and-directives.module';
+import {InitiateTransferConfirmTosDialogComponent} from './initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component';
+
+@NgModule({
+  imports: [
+    // Angular
+    CommonModule,
+
+    // Angular CDK
+    ClipboardModule,
+
+    // Angular Material
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatIconModule,
+    MatTooltipModule,
+
+    // EDC UI Feature Modules
+    PipesAndDirectivesModule,
+  ],
+  declarations: [InitiateTransferConfirmTosDialogComponent],
+  exports: [InitiateTransferConfirmTosDialogComponent],
+})
+export class InitiateTransferConfirmTosDialogModule {}
diff --git a/.../initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.html b/.../initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.html
@@ -0,0 +1,26 @@
+<h1 mat-dialog-title>EULA/TOS Confirmation</h1>
+
+<div mat-dialog-content>
+  <p>
+    Hereby I agree that by pressing the 'Confirm' button, I legally accept the
+    license terms, policies, and additional conditions for use, including any
+    copyright notices, associated with the provider's offer.
+  </p>
+</div>
+
+<div class="w-full flex flex-col justify-center">
+  <mat-checkbox [checked]="checkboxChecked" (change)="onCheckboxChange($event)">
+    I agree to the EULA/TOS
+  </mat-checkbox>
+
+  <div class="w-full flex flex-row justify-end" mat-dialog-actions>
+    <button mat-button color="accent" (click)="onCancel()">Cancel</button>
+    <button
+      mat-raised-button
+      color="primary"
+      [disabled]="!checkboxChecked"
+      (click)="onConfirm()">
+      Confirm
+    </button>
+  </div>
+</div>
diff --git a/.../initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.scss b/.../initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.scss
diff --git a/...og/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.ts b/...og/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.ts
@@ -0,0 +1,32 @@
+import {Component, OnInit} from '@angular/core';
+import {MatCheckboxChange} from '@angular/material/checkbox';
+import {MatDialogRef} from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-initiate-transfer-confirm-tos-dialog',
+  templateUrl: './initiate-transfer-confirm-tos-dialog.component.html',
+  styleUrls: ['./initiate-transfer-confirm-tos-dialog.component.scss'],
+})
+export class InitiateTransferConfirmTosDialogComponent implements OnInit {
+  checkboxChecked = false;
+
+  constructor(
+    public dialogRef: MatDialogRef<InitiateTransferConfirmTosDialogComponent>,
+  ) {}
+
+  ngOnInit(): void {}
+
+  public onCheckboxChange($event: MatCheckboxChange) {
+    this.checkboxChecked = $event.checked;
+  }
+
+  onCancel() {
+    this.dialogRef.close(false);
+  }
+
+  onConfirm() {
+    if (this.checkboxChecked) {
+      this.dialogRef.close(true);
+    }
+  }
+}
diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page.module.ts b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page.module.ts
@@ -21,6 +21,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
 import {RouterModule} from '@angular/router';
 import {NgChartsModule} from 'ng2-charts';
 import {NgxJsonViewerModule} from 'ngx-json-viewer';
+import {InitiateTransferConfirmTosDialogModule} from 'src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.module';
 import {CatalogModule} from '../../../component-library/catalog/catalog.module';
 import {DataAddressModule} from '../../../component-library/data-address/data-address.module';
 import {PipesAndDirectivesModule} from '../../../component-library/pipes-and-directives/pipes-and-directives.module';
@@ -63,6 +64,7 @@ import {ContractAgreementTransferDialogComponent} from './contract-agreement-tra
     // EDC UI Modules
     CatalogModule,
     DataAddressModule,
+    InitiateTransferConfirmTosDialogModule,
     PipesAndDirectivesModule,
     UiElementsModule,
   ],

diff --git a/...t-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts b/...t-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts
@@ -1,12 +1,17 @@
 import {Component, Inject, OnDestroy} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogRef,
+} from '@angular/material/dialog';
 import {Observable, Subject} from 'rxjs';
 import {finalize} from 'rxjs/operators';
 import {
   IdResponseDto,
   InitiateCustomTransferRequest,
   InitiateTransferRequest,
 } from '@sovity.de/edc-client';
+import {InitiateTransferConfirmTosDialogComponent} from 'src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component';
 import {EdcApiService} from '../../../../core/services/api/edc-api.service';
 import {DataAddressMapper} from '../../../../core/services/data-address-mapper';
 import {HttpRequestParamsMapper} from '../../../../core/services/http-params-mapper.service';
@@ -77,6 +82,7 @@ export class ContractAgreementTransferDialogComponent implements OnDestroy {
     public form: ContractAgreementTransferDialogForm,
     public validationMessages: ValidationMessages,
     private dialogRef: MatDialogRef<ContractAgreementTransferDialogComponent>,
+    private confirmationDialog: MatDialog,
     private edcApiService: EdcApiService,
     private notificationService: NotificationService,
     private httpRequestParamsMapper: HttpRequestParamsMapper,
@@ -88,37 +94,47 @@ export class ContractAgreementTransferDialogComponent implements OnDestroy {
     if (this.loading && !this.form.all.valid) {
       return;
     }
-    this.loading = true;
-    this.form.all.disable();
-
-    const value = this.form.value;
-    let request$: Observable<IdResponseDto>;
-    if (value.dataAddressType === 'Custom-Transfer-Process-Request') {
-      const request = this.buildCustomTransferRequest(value);
-      request$ = this.edcApiService.initiateCustomTransfer(request);
-    } else {
-      const request = this.buildTransferRequest(value);
-      request$ = this.edcApiService.initiateTransfer(request);
-    }
 
-    request$
-      .pipe(
-        finalize(() => {
-          this.loading = false;
-          this.form.all.enable();
-        }),
-      )
-      .subscribe({
-        next: (response) =>
-          this.close({
-            transferProcessId: response.id!,
-            contractId: this.data.contractId,
-          }),
-        error: (err) => {
-          this.notificationService.showError('Failed initiating transfer!');
-          console.error('Failed initiating transfer', err);
-        },
-      });
+    const confirmationDialogRef = this.confirmationDialog.open(
+      InitiateTransferConfirmTosDialogComponent,
+      {maxWidth: '30%'},
+    );
+
+    confirmationDialogRef.afterClosed().subscribe((result) => {
+      if (result) {
+        this.loading = true;
+        this.form.all.disable();
+
+        const value = this.form.value;
+        let request$: Observable<IdResponseDto>;
+        if (value.dataAddressType === 'Custom-Transfer-Process-Request') {
+          const request = this.buildCustomTransferRequest(value);
+          request$ = this.edcApiService.initiateCustomTransfer(request);
+        } else {
+          const request = this.buildTransferRequest(value);
+          request$ = this.edcApiService.initiateTransfer(request);
+        }
+
+        request$
+          .pipe(
+            finalize(() => {
+              this.loading = false;
+              this.form.all.enable();
+            }),
+          )
+          .subscribe({
+            next: (response) =>
+              this.close({
+                transferProcessId: response.id!,
+                contractId: this.data.contractId,
+              }),
+            error: (err) => {
+              this.notificationService.showError('Failed initiating transfer!');
+              console.error('Failed initiating transfer', err);
+            },
+          });
+      }
+    });
   }
 
   private close(params: ContractAgreementTransferDialogResult) {