Merge pull request #313 from swisstopo/feature/assets-70-disclaimer

Feature 70: add disclaimer

apps/client-asset-sg/project.json

@@ -43,14 +43,6 @@
             }
           ]
         },
-        "int": {
-          "fileReplacements": [
-            {
-              "replace": "apps/client-asset-sg/src/environments/environment.ts",
-              "with": "apps/client-asset-sg/src/environments/environment.int.ts"
-            }
-          ]
-        },
         "development": {
           "buildOptimizer": false,
           "optimization": false,
@@ -68,9 +60,6 @@
         "production": {
           "buildTarget": "client-asset-sg:build:production"
         },
-        "int": {
-          "buildTarget": "client-asset-sg:build:int"
-        },
         "development": {
           "buildTarget": "client-asset-sg:build:development"
         }

apps/client-asset-sg/src/app/app.component.ts

@@ -1,12 +1,13 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, inject } from '@angular/core';
-import { AuthService, AuthState, ErrorService } from '@asset-sg/auth';
 import { AppPortalService, appSharedStateActions, setCssCustomProperties } from '@asset-sg/client-shared';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
 import { WINDOW } from 'ngx-window-token';
 import { debounceTime, fromEvent, startWith, switchMap } from 'rxjs';
 import { assert } from 'tsafe';
+import { AuthService, AuthState } from './features/auth/auth.service';
+import { ErrorService } from './features/auth/error.service';
 import { AppState } from './state/app-state';
 
 const fullHdWidth = 1920;

apps/client-asset-sg/src/app/app.module.ts

@@ -5,14 +5,15 @@ import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import locale_deCH from '@angular/common/locales/de-CH';
 import { inject, NgModule } from '@angular/core';
 import { MatButton } from '@angular/material/button';
+import { MatDialogActions, MatDialogContent } from '@angular/material/dialog';
+import { MatDivider } from '@angular/material/divider';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltip } from '@angular/material/tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
-import { AuthInterceptor, AuthModule, ErrorService } from '@asset-sg/auth';
 import {
   AdminOnlyDirective,
   AlertModule,
@@ -23,6 +24,7 @@ import {
   CURRENT_LANG,
   currentLangFactory,
   icons,
+  LanguageSelectorComponent,
   TranslateTsLoader,
 } from '@asset-sg/client-shared';
 import { storeLogger } from '@asset-sg/core';
@@ -34,15 +36,18 @@ import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-transla
 import { ForModule } from '@rx-angular/template/for';
 import { LetModule } from '@rx-angular/template/let';
 import { PushModule } from '@rx-angular/template/push';
-
 import { environment } from '../environments/environment';
 
 import { adminGuard } from './app-guards';
 import { AppComponent } from './app.component';
 import { AppBarComponent, MenuBarComponent, NotFoundComponent, RedirectToLangComponent } from './components';
+import { DisclaimerDialogComponent } from './components/disclaimer-dialog/disclaimer-dialog.component';
 import { MenuBarItemComponent } from './components/menu-bar-item/menu-bar-item.component';
 import { SplashScreenComponent } from './components/splash-screen/splash-screen.component';
+import { AuthModule } from './features/auth/auth.module';
+import { ErrorService } from './features/auth/error.service';
 import { appTranslations } from './i18n';
+import { HttpInterceptor } from './services/http.interceptor';
 import { AppSharedStateEffects } from './state';
 import { appSharedStateReducer } from './state/app-shared.reducer';
 
@@ -57,10 +62,12 @@ registerLocaleData(locale_deCH, 'de-CH');
     MenuBarComponent,
     MenuBarItemComponent,
     SplashScreenComponent,
+    DisclaimerDialogComponent,
   ],
   imports: [
     CommonModule,
     BrowserModule,
+    AuthModule,
     BrowserAnimationsModule,
     HttpClientModule,
     RouterModule.forRoot([
@@ -120,11 +127,15 @@ registerLocaleData(locale_deCH, 'de-CH');
     MatButton,
     MatMenuTrigger,
     MatMenu,
+    LanguageSelectorComponent,
+    MatDivider,
+    MatDialogContent,
+    MatDialogActions,
   ],
   providers: [
     provideSvgIcons(icons),
     ErrorService,
-    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
+    { provide: HTTP_INTERCEPTORS, useClass: HttpInterceptor, multi: true },
     { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill', floatLabel: 'auto' } },
     { provide: CURRENT_LANG, useFactory: currentLangFactory },
   ],

apps/client-asset-sg/src/app/components/app-bar/app-bar.component.html

@@ -5,31 +5,7 @@
 <div class="spacer"></div>
 <span class="version">{{ version }}</span>
 
-<button mat-button type="button" class="language" [matMenuTriggerFor]="languageMenu" *rxLet="currentLang$; let lang">
-  {{ lang.lang }}
-
-  <svg-icon key="arrow-down" class="open" />
-  <svg-icon key="arrow-up" class="close" />
-</button>
-<mat-menu #languageMenu="matMenu" backdropClass="languages">
-  <ng-container *rxLet="languages$; let languages">
-    @for (language of languages; track language.lang) {
-    <a
-      asset-sg-reset
-      [routerLink]="language.params"
-      [queryParams]="language.queryParams"
-      [class.is-active]="language.isActive"
-    >
-      <span class="icon">
-        <svg-icon key="checkmark" />
-      </span>
-      <span class="name">
-        {{ language.lang }}
-      </span>
-    </a>
-    }
-  </ng-container>
-</mat-menu>
+<asset-sg-language-selector />
 
 <ng-container *ngIf="(isAnonymous$ | async) === false">
   <button mat-button type="button" class="profile" [matMenuTriggerFor]="profileMenu">

apps/client-asset-sg/src/app/components/app-bar/app-bar.component.scss

@@ -22,91 +22,6 @@ a.logo {
   color: #828e9a;
 }
 
-button.language {
-  text-transform: uppercase;
-  width: 69px;
-  height: 36px;
-  padding: 8px 12px;
-  border-radius: 4px;
-  color: #337083;
-  transition: 150ms ease-in;
-  transition-property: color, background-color;
-
-  & > ::ng-deep .mdc-button__label {
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0;
-  }
-
-  &:hover,
-  &[aria-expanded="true"] {
-    background-color: #adc6cd;
-    color: #2f4356;
-  }
-
-  svg-icon {
-    display: flex;
-    align-items: center;
-    width: 20px;
-    height: 20px;
-  }
-
-  svg-icon.close {
-    display: none;
-  }
-
-  &[aria-expanded="true"] svg-icon {
-    &.open {
-      display: none;
-    }
-    &.close {
-      display: flex;
-    }
-  }
-}
-
-::ng-deep .languages + * .mat-mdc-menu-panel {
-  text-transform: uppercase;
-  min-width: 85px;
-  max-width: 85px;
-
-  & > .mat-mdc-menu-content {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-  }
-
-  a {
-    color: #1c2834;
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 12px;
-    transition: color 150ms ease-in;
-  }
-  a:hover {
-    background-color: #dfe4e9;
-  }
-
-  a > span.name {
-    flex-basis: 30%;
-  }
-
-  a > span.icon {
-    flex-grow: 1;
-    display: flex;
-    justify-content: flex-start;
-  }
-  a:not(.is-active) > span.icon {
-    visibility: hidden;
-  }
-}
-
 button.profile {
   background-color: #295969;
   color: white;

apps/client-asset-sg/src/app/components/app-bar/app-bar.component.ts

@@ -10,17 +10,13 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
-import { AuthService } from '@asset-sg/auth';
-import { appSharedStateActions, fromAppShared, supportedLangs } from '@asset-sg/client-shared';
-import { isNotNull, isTruthy } from '@asset-sg/core';
-import { Lang } from '@asset-sg/shared';
+import { Router } from '@angular/router';
+import { appSharedStateActions, fromAppShared } from '@asset-sg/client-shared';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
-import { flow, pipe } from 'fp-ts/function';
 import * as O from 'fp-ts/Option';
-import queryString from 'query-string';
-import { debounceTime, EMPTY, filter, map, Observable, startWith, Subject, switchMap } from 'rxjs';
+import { EMPTY, filter, map, Observable, Subject, switchMap } from 'rxjs';
+import { AuthService } from '../../features/auth/auth.service';
 import { AppState } from '../../state/app-state';
 import { Version } from './version';
 
@@ -49,40 +45,6 @@ export class AppBarComponent implements OnInit {
 
   public readonly user$ = this.authService.getUserProfile$();
 
-  public readonly currentLang$ = this.router.events.pipe(
-    filter((e): e is NavigationEnd => e instanceof NavigationEnd),
-    map((e) => e.urlAfterRedirects),
-    startWith(this.router.url),
-    map(
-      flow(
-        (url) => O.of(url.match('^/(\\w\\w)(.*)$')),
-        O.filter(isTruthy),
-        O.bindTo('match'),
-        O.bind('lang', ({ match }) => pipe(Lang.decode(match[1]), O.fromEither)),
-        O.bind('parsed', ({ match }) => O.of(queryString.parseUrl(match[2]))),
-        O.map(({ parsed, lang }) => ({
-          lang,
-          path: parsed.url,
-          queryParams: parsed.query,
-        }))
-      )
-    ),
-    map((it) => O.toNullable(it)),
-    filter(isNotNull)
-  );
-
-  public readonly languages$ = this.currentLang$.pipe(
-    debounceTime(0),
-    map((currentLang) =>
-      supportedLangs.map((lang) => ({
-        isActive: lang === currentLang.lang,
-        lang: lang.toUpperCase(),
-        params: [`/${lang}${currentLang.path}`],
-        queryParams: currentLang.queryParams,
-      }))
-    )
-  );
-
   private readonly _ngOnInit$ = new Subject<void>();
 
   constructor(private readonly router: Router, private readonly httpClient: HttpClient) {

apps/client-asset-sg/src/app/components/disclaimer-dialog/disclaimer-dialog.component.html

@@ -0,0 +1,16 @@
+<div>
+  <div class="header">
+    <h2 translate>disclaimer.title</h2>
+    <asset-sg-language-selector></asset-sg-language-selector>
+  </div>
+  <mat-divider></mat-divider>
+  <div mat-dialog-content class="content">
+    <h1 translate>disclaimer.subtitle</h1>
+    <p [innerHTML]="disclaimerText$ | async"></p>
+    <a *rxLet="legalUrl$; let lang" [href]="lang" target="_blank" rel="noopener nofollow">{{ lang }}</a>
+  </div>
+  <mat-divider></mat-divider>
+  <div mat-dialog-actions class="actions">
+    <button asset-sg-primary (click)="close()" translate>disclaimer.accept</button>
+  </div>
+</div>

apps/client-asset-sg/src/app/components/disclaimer-dialog/disclaimer-dialog.component.scss

@@ -0,0 +1,34 @@
+::ng-deep .cdk-overlay-dark-backdrop {
+  background-color: grey;
+}
+
+h1 {
+  color: black;
+  font-weight: 500;
+}
+
+h2 {
+  margin: 0;
+}
+
+p {
+  margin: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 24px 16px 24px;
+}
+
+.content {
+  padding: 24px;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 24px;
+  align-items: center;
+}

apps/client-asset-sg/src/app/components/disclaimer-dialog/disclaimer-dialog.component.ts

@@ -0,0 +1,31 @@
+import { Component, inject } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { CURRENT_LANG } from '@asset-sg/client-shared';
+import { TranslateService } from '@ngx-translate/core';
+import { map } from 'rxjs';
+
+const LEGAL_BASE_URL = 'https://www.swissgeol.ch/datenschutz';
+
+@Component({
+  selector: 'asset-sg-disclaimer-dialog',
+  templateUrl: './disclaimer-dialog.component.html',
+  styleUrl: './disclaimer-dialog.component.scss',
+})
+export class DisclaimerDialogComponent {
+  public text = '';
+  private readonly dialogRef = inject(MatDialogRef<DisclaimerDialogComponent>);
+  private readonly translateService = inject(TranslateService);
+
+  private readonly currentLang$ = inject(CURRENT_LANG);
+  public readonly legalUrl$ = this.currentLang$.pipe(
+    map((lang) => (lang === 'de' ? LEGAL_BASE_URL : `${LEGAL_BASE_URL}-${lang}/`))
+  );
+
+  public readonly disclaimerText$ = this.currentLang$.pipe(
+    map(() => this.translateService.instant(`disclaimer.content`).replaceAll('\n', '<br>'))
+  );
+
+  public close() {
+    this.dialogRef.close();
+  }
+}

apps/client-asset-sg/src/app/components/redirect-to-lang/redirect-to-lang.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { AuthService } from '@asset-sg/auth';
 import { UntilDestroy } from '@ngneat/until-destroy';
+import { AuthService } from '../../features/auth/auth.service';
 
 @UntilDestroy()
 @Component({