Feature/consent dialog (#300)

* added consent dialog with timeout

* expanded config model

* fixed consent stuff

* make prettier happy

Co-authored-by: crapStone <[email protected]>

src-tauri/cabr2_config/src/types.rs

@@ -27,13 +27,15 @@ impl std::convert::From<BackendConfig> for FrontendConfig {
 pub struct FrontendGlobal {
   pub dark_theme: bool,
   pub language: String,
+  pub accepted_consent: bool,
 }
 
 impl std::convert::From<Global> for FrontendGlobal {
   fn from(config: Global) -> Self {
     FrontendGlobal {
       dark_theme: config.dark_theme,
       language: config.language,
+      accepted_consent: config.accepted_consent,
     }
   }
 }
@@ -64,6 +66,7 @@ impl std::default::Default for BackendConfig {
       global: Global {
         dark_theme: false,
         language: "de_de".into(),
+        accepted_consent: false,
       },
       logging: Logging {
         all: Some(LogLevel::DEBUG),
@@ -79,13 +82,15 @@ impl std::default::Default for BackendConfig {
 pub struct Global {
   pub dark_theme: bool,
   pub language: String,
+  pub accepted_consent: bool,
 }
 
 impl std::convert::From<FrontendGlobal> for Global {
   fn from(config: FrontendGlobal) -> Self {
     Global {
       dark_theme: config.dark_theme,
       language: config.language,
+      accepted_consent: config.accepted_consent,
     }
   }
 }

src/app/@core/models/config.model.ts

@@ -12,7 +12,7 @@ export class ConfigModel {
       this.global = global;
     } else {
       logger.debug('returning default config');
-      this.global = { darkTheme: false, language: 'de_de' };
+      this.global = { darkTheme: false, language: 'de_de', acceptedConsent: false };
     }
   }
 
@@ -36,11 +36,18 @@ export class ConfigModel {
       configSubject.next(new ConfigModel({ ...this.global, language }));
     }
   }
+
+  setAcceptedConsent(acceptedConsent: boolean): void {
+    if (this.global.acceptedConsent !== acceptedConsent) {
+      configSubject.next(new ConfigModel({ ...this.global, acceptedConsent }));
+    }
+  }
 }
 
 export interface Global {
   readonly darkTheme: boolean;
   readonly language: string;
+  readonly acceptedConsent: boolean;
 }
 
 export const configSubject = new BehaviorSubject<ConfigModel>(new ConfigModel());

src/app/app.component.ts

@@ -1,13 +1,15 @@
 import { Component, HostBinding, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { first, skip, switchMap } from 'rxjs/operators';
 import { DOCUMENT } from '@angular/common';
+import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 
 import { ConfigModel, configObservable } from './@core/models/config.model';
 import { I18nService, LocalizedStrings } from './@core/services/i18n/i18n.service';
 import { name, version } from '../../package.json';
 import { AlertService } from './@core/services/alertsnackbar/altersnackbar.service';
 import { ConfigService } from './@core/services/config/config.service';
+import { ConsentComponent } from './consent/consent.component';
 import { GlobalModel } from './@core/models/global.model';
 import Logger from './@core/utils/logger';
 
@@ -29,6 +31,7 @@ export class AppComponent implements OnInit, OnDestroy {
   constructor(
     @Inject(DOCUMENT) private document: Document,
     private renderer: Renderer2,
+    private dialog: MatDialog,
 
     private global: GlobalModel,
     private configService: ConfigService,
@@ -104,6 +107,33 @@ export class AppComponent implements OnInit, OnDestroy {
         },
       ),
     );
+
+    // skip initial config only first load is needed
+    configObservable.pipe(skip(1), first()).subscribe((config) => {
+      if (!config.globalSection.acceptedConsent) {
+        this.dialog
+          .open(ConsentComponent, {
+            data: {
+              duration: 10,
+            },
+            disableClose: true,
+          })
+          .afterClosed()
+          .subscribe(() => {
+            this.config.setAcceptedConsent(true);
+            this.configService
+              .saveConfig(this.config)
+              .pipe(first())
+              .subscribe(
+                () => logger.info('config saved'),
+                (err) => {
+                  logger.error('saving config failed:', err);
+                  this.alertService.error(this.strings.error.configSave);
+                },
+              );
+          });
+      }
+    });
   }
 
   @HostBinding('class')

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { NgModule } from '@angular/core';
 
 import { AlertModule } from './@core/modules/alert.module';
 import { AppComponent } from './app.component';
+import { ConsentComponent } from './consent/consent.component';
 import { EditSearchResultsComponent } from './search/edit-search-results/edit-search-results.component';
 import { GlobalModel } from './@core/models/global.model';
 import { HeaderComponent } from './header/header.component';
@@ -36,6 +37,7 @@ import { YesNoDialogComponent } from './yes-no-dialog/yes-no-dialog.component';
     YesNoDialogComponent,
     SettingsComponent,
     ReportBugComponent,
+    ConsentComponent,
     SubMolecularFormula,
   ],
   imports: [BrowserModule, FormsModule, ReactiveFormsModule, BrowserAnimationsModule, MatModules, AlertModule],

src/app/consent/consent.component.html

@@ -0,0 +1,24 @@
+<h2 mat-dialog-title>Wichtige Information! | Important!</h2>
+<p>
+  Bei CaBr<sub>2</sub> handelt es sich um ein Open-Source-Projekt und daher basiert die Verwendung der generierten
+  Betriebsanweisungen auf Eigenverantwortung.
+</p>
+<p>
+  Weder das Programm, noch die Entwickler sind für den Inhalt verantwortlich und können für unkorrekte oder
+  unvollständige Informationen zur Rechenschaft gezogen werden.
+</p>
+<mat-divider></mat-divider>
+<p>
+  CaBr<sub>2</sub> is an open-source project and therefore the use of the generated operating instructions is based on
+  personal responsibility.
+</p>
+<p>
+  Neither the program, nor the developers are responsible for the content and can be held liable for incorrect or
+  incomplete information.
+</p>
+<mat-divider></mat-divider>
+<mat-dialog-actions>
+  <button (click)="dialogRef.close()" [disabled]="timer > 0" mat-raised-button>
+    {{ strings.base.ok }} {{ timer > 0 ? '(' + timer + ')' : '' }}
+  </button>
+</mat-dialog-actions>

src/app/consent/consent.component.spec.ts

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

src/app/consent/consent.component.ts

@@ -0,0 +1,31 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+import { GlobalModel } from '../@core/models/global.model';
+import { LocalizedStrings } from '../@core/services/i18n/i18n.service';
+
+@Component({
+  selector: 'app-consent',
+  templateUrl: './consent.component.html',
+  styleUrls: ['./consent.component.scss'],
+})
+export class ConsentComponent implements OnInit {
+  strings!: LocalizedStrings;
+  timer = this.data.duration;
+
+  constructor(
+    public dialogRef: MatDialogRef<ConsentComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { duration: number },
+    private globals: GlobalModel,
+  ) {
+    this.globals.localizedStringsObservable.subscribe((strings) => (this.strings = strings));
+  }
+
+  ngOnInit(): void {
+    setInterval(() => {
+      if (this.timer > 0) {
+        this.timer -= 1;
+      }
+    }, 1000);
+  }
+}

src/app/menubar/menubar.component.ts

@@ -6,6 +6,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { AlertService } from '../@core/services/alertsnackbar/altersnackbar.service';
 import { CaBr2Document } from '../@core/services/loadSave/loadSave.model';
 import { ConfigService } from '../@core/services/config/config.service';
+import { ConsentComponent } from '../consent/consent.component';
 import { docsTemplate } from '../../assets/docsTemplate.json';
 import { GlobalModel } from '../@core/models/global.model';
 import { LoadSaveService } from '../@core/services/loadSave/loadSave.service';