From a6ba1b92dcf5687cf38040c881fbc65f51765aeb Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Thu, 2 Aug 2018 16:39:08 +0200
Subject: [PATCH] Add legal notice and privacy police

enhanced visuals and site container
---
 .../legal-notice.dialog.component.css         |  0
 .../legal-notice.dialog.component.html        |  9 ++++
 .../legal-notice.dialog.component.spec.ts     | 24 +++++++++
 .../legal-notice.dialog.component.ts          | 15 ++++++
 .../privacy-policy.dialog.component.css       |  0
 .../privacy-policy.dialog.component.html      | 40 ++++++++++++++
 .../privacy-policy.dialog.component.spec.ts   | 24 +++++++++
 .../privacy-policy.dialog.component.ts        | 15 ++++++
 client/src/app/shared/shared.module.ts        |  8 ++-
 client/src/app/site/site.component.html       | 17 ++++--
 client/src/app/site/site.component.scss       | 20 +++++++
 .../app/site/site.component.scss-theme.scss   | 11 ++++
 client/src/app/site/site.component.ts         | 52 ++++++++++++++++---
 client/src/styles.scss                        |  7 +--
 14 files changed, 226 insertions(+), 16 deletions(-)
 create mode 100644 client/src/app/shared/components/legal-notice/legal-notice.dialog.component.css
 create mode 100644 client/src/app/shared/components/legal-notice/legal-notice.dialog.component.html
 create mode 100644 client/src/app/shared/components/legal-notice/legal-notice.dialog.component.spec.ts
 create mode 100644 client/src/app/shared/components/legal-notice/legal-notice.dialog.component.ts
 create mode 100644 client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.css
 create mode 100644 client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.html
 create mode 100644 client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.spec.ts
 create mode 100644 client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.ts

diff --git a/client/src/app/shared/components/legal-notice/legal-notice.dialog.component.css b/client/src/app/shared/components/legal-notice/legal-notice.dialog.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/app/shared/components/legal-notice/legal-notice.dialog.component.html b/client/src/app/shared/components/legal-notice/legal-notice.dialog.component.html
new file mode 100644
index 000000000..600cb90eb
--- /dev/null
+++ b/client/src/app/shared/components/legal-notice/legal-notice.dialog.component.html
@@ -0,0 +1,9 @@
+<h2 mat-dialog-title>Impressum</h2>
+<mat-dialog-content>
+    OpenSlides ist ein freies, webbasiertes Präsentations- und Versammlungssystem zur Darstellung und Steuerung von Tagesordnung,
+    Anträgen und Wahlen einer Versammlung.
+</mat-dialog-content>
+<br>
+<mat-dialog-content>
+    OpenSlides 3.0 PRE ALPHA (Lizenz: MIT)
+</mat-dialog-content>
\ No newline at end of file
diff --git a/client/src/app/shared/components/legal-notice/legal-notice.dialog.component.spec.ts b/client/src/app/shared/components/legal-notice/legal-notice.dialog.component.spec.ts
new file mode 100644
index 000000000..cc847b209
--- /dev/null
+++ b/client/src/app/shared/components/legal-notice/legal-notice.dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LegalnoticeDialogComponent } from './legal-notice.dialog.component';
+
+describe('LegalnoticeDialogComponent', () => {
+    let component: LegalnoticeDialogComponent;
+    let fixture: ComponentFixture<LegalnoticeDialogComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [LegalnoticeDialogComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(LegalnoticeDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/client/src/app/shared/components/legal-notice/legal-notice.dialog.component.ts b/client/src/app/shared/components/legal-notice/legal-notice.dialog.component.ts
new file mode 100644
index 000000000..a6d82d3e5
--- /dev/null
+++ b/client/src/app/shared/components/legal-notice/legal-notice.dialog.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+
+@Component({
+    selector: 'app-impressum',
+    templateUrl: './legal-notice.dialog.component.html',
+    styleUrls: ['./legal-notice.dialog.component.css']
+})
+export class LegalnoticeDialogComponent {
+    constructor(public dialogRef: MatDialogRef<LegalnoticeDialogComponent>) {}
+
+    onNoClick(): void {
+        this.dialogRef.close();
+    }
+}
diff --git a/client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.css b/client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.html b/client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.html
new file mode 100644
index 000000000..793b33ff5
--- /dev/null
+++ b/client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.html
@@ -0,0 +1,40 @@
+<h2 mat-dialog-title>Datenschutzerklärung</h2>
+<mat-dialog-content>
+    OpenSlides speichert nur so viele personenbezogene Daten wie unbedingt nötig sind, um Besuchern Informationen und Dienste
+    zuverlässig und sicher anbieten zu können.
+</mat-dialog-content>
+<br>
+<mat-dialog-content>
+    Eine Auswertung der Dienste-Protokolle erfolgt nur von uns selbst und auch nur, um mögliche Fehler, Einbruchsversuche oder
+    technisches Verhalten der Server auf unseren Server zu analysieren.
+</mat-dialog-content>
+<br>
+<mat-dialog-content>
+    Nachfolgend wird genau aufgeschlüsselt, bei welcher Gelegenheit welche Daten wie lange gespeichert sind. Zudem wird beschrieben,
+    welche Schritte erforderlich sind um Daten zu löschen.
+</mat-dialog-content>
+<br>
+<h3>Cookies</h3>
+<mat-dialog-content>
+    Beim Besuch der Website wird ein sogenanntes Cookie angelegt. Dieses Cookie wird ausschließlich dazu verwendet, um auf der
+    Website eingeloggt zu bleiben. Ein sogenanntes "Tracking Cookie" wird nicht verwendet.
+</mat-dialog-content>
+<br>
+<h3>Logfiles</h3>
+<mat-dialog-content>
+    Zu OpenSlides gehören verschiedene Unter-Services. Diese loggen folgende Informationen: Quell-IP-Adresse, Zeitstempel, genutztes
+    Betriebssystem, verwendeter Web-Browser, Referer-URL, E-Mail-Adresse und besuchte Seite.
+</mat-dialog-content>
+<br>
+<h3>Datenbank</h3>
+<mat-dialog-content>
+    Als Mitglied werden folgende Daten von Ihnen gespeichert: Titel, Vorname, Nachname, EMail, Gliederungsebene, Teilnehmernummer,
+    Gruppenzugehörigkeit, Initiales Passwort im Klartext, Vergebenes Passwort als kryptografischer Hashwert und ein Kommentar
+    für interne Notizen. Diese Informationen werden mit den Aktionen innerhalb von OpenSlides in Verbindung gebracht. Diese
+    Informationen werden nicht an Dritte weiter gegeben und sind auch nicht für diese zugänglich.
+</mat-dialog-content>
+<br>
+<h3>Löschung von Daten</h3>
+<mat-dialog-content>
+    Die Daten dieser OpenSlides-Demo-Instanz werden nächtlich automatisch gelöscht.
+</mat-dialog-content>
\ No newline at end of file
diff --git a/client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.spec.ts b/client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.spec.ts
new file mode 100644
index 000000000..9bf6c06fe
--- /dev/null
+++ b/client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PrivacyPolicyDialogComponent } from './privacy-policy.dialog.component';
+
+describe('PrivacyPolicyDialogComponent', () => {
+    let component: PrivacyPolicyDialogComponent;
+    let fixture: ComponentFixture<PrivacyPolicyDialogComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [PrivacyPolicyDialogComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PrivacyPolicyDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.ts b/client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.ts
new file mode 100644
index 000000000..f407db353
--- /dev/null
+++ b/client/src/app/shared/components/privacy-policy/privacy-policy.dialog.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+
+@Component({
+    selector: 'app-privacy-policy.dialog',
+    templateUrl: './privacy-policy.dialog.component.html',
+    styleUrls: ['./privacy-policy.dialog.component.css']
+})
+export class PrivacyPolicyDialogComponent {
+    constructor(public dialogRef: MatDialogRef<PrivacyPolicyDialogComponent>) {}
+
+    onNoClick(): void {
+        this.dialogRef.close();
+    }
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 6450038c4..54fb55c32 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -13,6 +13,7 @@ import {
     MatSidenavModule,
     MatSnackBarModule
 } from '@angular/material';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatListModule } from '@angular/material/list';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatMenuModule } from '@angular/material/menu';
@@ -28,6 +29,8 @@ import { TranslateModule } from '@ngx-translate/core';
 // directives
 import { OsPermsDirective } from './directives/os-perms.directive';
 import { DomChangeDirective } from './directives/dom-change.directive';
+import { LegalnoticeDialogComponent } from './components/legal-notice/legal-notice.dialog.component';
+import { PrivacyPolicyDialogComponent } from './components/privacy-policy/privacy-policy.dialog.component';
 
 library.add(fas);
 
@@ -56,6 +59,7 @@ library.add(fas);
         MatExpansionModule,
         MatMenuModule,
         MatSnackBarModule,
+        MatDialogModule,
         FontAwesomeModule
     ],
     exports: [
@@ -71,11 +75,13 @@ library.add(fas);
         MatListModule,
         MatExpansionModule,
         MatMenuModule,
+        MatDialogModule,
         MatSnackBarModule,
         FontAwesomeModule,
         TranslateModule,
         OsPermsDirective
     ],
-    declarations: [OsPermsDirective, DomChangeDirective]
+    declarations: [OsPermsDirective, DomChangeDirective, LegalnoticeDialogComponent, PrivacyPolicyDialogComponent],
+    entryComponents: [LegalnoticeDialogComponent, PrivacyPolicyDialogComponent]
 })
 export class SharedModule {}
diff --git a/client/src/app/site/site.component.html b/client/src/app/site/site.component.html
index a9f839e95..371f9dba6 100644
--- a/client/src/app/site/site.component.html
+++ b/client/src/app/site/site.component.html
@@ -3,8 +3,8 @@
         <mat-toolbar class='nav-toolbar'>
 
             <!-- logo -->
-            <mat-toolbar-row>
-                <img src='/assets/img/openslides-logo-dark.png' alt='OpenSlides-logo'>
+            <mat-toolbar-row class='os-logo-container'>
+                <!-- <img src='/assets/img/openslides-logo-h-dark-transparent.svg' alt='OpenSlides-logo'> -->
             </mat-toolbar-row>
         </mat-toolbar>
 
@@ -21,7 +21,8 @@
 
         <!-- navigation -->
         <mat-nav-list class='main-nav'>
-            <a [@navItemAnim] *appOsPerms="['core.can_see_frontpage']" mat-list-item routerLink='/' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
+            <a [@navItemAnim] *appOsPerms="['core.can_see_frontpage']" mat-list-item routerLink='/' routerLinkActive='active' [routerLinkActiveOptions]="{exact: true}"
+                (click)='isMobile ? sideNav.toggle() : null'>
                 <fa-icon icon='home'></fa-icon>
                 <span translate>Home</span>
             </a>
@@ -53,6 +54,16 @@
             </a>
         </mat-nav-list>
 
+
+        <footer>
+            <!-- TODO Translate -->
+            <button mat-button (click)='openLegalNotice()'>Legal Notice</button>
+            <button mat-button (click)='openPrivacyPolicy()'>Privacy Policy</button>
+            <br>
+            <span align="center">© Copyright by
+                <a href='https://openslides.org/'>OpenSlides</a>
+            </span>
+        </footer>
     </mat-sidenav>
 
     <!-- the first toolbar row is (still) a global element
diff --git a/client/src/app/site/site.component.scss b/client/src/app/site/site.component.scss
index db4a1fb44..9ca546ea7 100644
--- a/client/src/app/site/site.component.scss
+++ b/client/src/app/site/site.component.scss
@@ -8,6 +8,26 @@ mat-sidenav-container {
     right: 10px;
 }
 
+.os-logo-container {
+    min-width: 240px;
+    background-image: url(/assets/img/openslides-logo-h-dark-transparent.svg);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
 .side-panel {
     box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.2);
 }
+
+footer {
+    position: fixed;
+    bottom: 0;
+
+    span {
+        // width: 100%;
+        display: block;
+        text-align: center;
+        margin-bottom: 5px;
+    }
+}
diff --git a/client/src/app/site/site.component.scss-theme.scss b/client/src/app/site/site.component.scss-theme.scss
index a56dbca9e..7ded4badf 100644
--- a/client/src/app/site/site.component.scss-theme.scss
+++ b/client/src/app/site/site.component.scss-theme.scss
@@ -38,8 +38,19 @@
                 margin-right: 10px; // the distance from the icon to the text
             }
             span {
+                font-weight: bold;
                 color: mat-color($foreground, text);
             }
         }
+
+        /** style the active link */
+        .active {
+            .ng-fa-icon {
+                color: mat-color($primary);
+            }
+            span {
+                color: mat-color($primary);
+            }
+        }
     }
 }
diff --git a/client/src/app/site/site.component.ts b/client/src/app/site/site.component.ts
index ed4695782..41eface9d 100644
--- a/client/src/app/site/site.component.ts
+++ b/client/src/app/site/site.component.ts
@@ -9,6 +9,9 @@ import { OperatorService } from 'app/core/services/operator.service';
 import { TranslateService } from '@ngx-translate/core'; //showcase
 import { BaseComponent } from 'app/base.component';
 import { pageTransition, navItemAnim } from 'app/shared/animations';
+import { MatDialog } from '@angular/material';
+import { LegalnoticeDialogComponent } from '../shared/components/legal-notice/legal-notice.dialog.component';
+import { PrivacyPolicyDialogComponent } from '../shared/components/privacy-policy/privacy-policy.dialog.component';
 
 @Component({
     selector: 'app-site',
@@ -17,23 +20,42 @@ import { pageTransition, navItemAnim } from 'app/shared/animations';
     styleUrls: ['./site.component.scss']
 })
 export class SiteComponent extends BaseComponent implements OnInit {
+    /**
+     * Get the username from the operator (should be known already)
+     */
     username = this.operator.username;
+
+    /**
+     * True if Viewport equals mobile or small resolution. Set by breakpointObserver.
+     */
     isMobile = false;
 
-    //test
-    state = 'hidden';
-
+    /**
+     * Constructor
+     *
+     * @param authService
+     * @param autoupdateService
+     * @param operator
+     * @param router
+     * @param breakpointObserver
+     * @param translate
+     * @param dialog
+     */
     constructor(
         private authService: AuthService,
         private autoupdateService: AutoupdateService,
         private operator: OperatorService,
         private router: Router,
         private breakpointObserver: BreakpointObserver,
-        private translate: TranslateService
+        private translate: TranslateService,
+        public dialog: MatDialog
     ) {
         super();
     }
 
+    /**
+     * Initialize the site component
+     */
     ngOnInit() {
         this.breakpointObserver
             .observe([Breakpoints.Small, Breakpoints.HandsetPortrait])
@@ -62,6 +84,10 @@ export class SiteComponent extends BaseComponent implements OnInit {
         });
     }
 
+    /**
+     * Let the user change the language
+     * @param lang the desired language (en, de, fr, ...)
+     */
     selectLang(lang: string): void {
         console.log('selected langauge: ', lang);
         console.log('get Langs : ', this.translate.getLangs());
@@ -71,13 +97,25 @@ export class SiteComponent extends BaseComponent implements OnInit {
         });
     }
 
+    /**
+     * Function to log out the current user
+     */
     logOutButton() {
-        console.log('logout');
         this.authService.logout().subscribe();
         this.router.navigate(['/login']);
     }
 
-    changeState() {
-        this.state = this.state === 'hidden' ? 'show' : 'hidden';
+    /**
+     * Opens the legal notice as dialog
+     */
+    openLegalNotice() {
+        const dialogRef = this.dialog.open(LegalnoticeDialogComponent);
+    }
+
+    /**
+     * Opens the privacy Policy as dialog
+     */
+    openPrivacyPolicy() {
+        const dialogRef = this.dialog.open(PrivacyPolicyDialogComponent);
     }
 }
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 21ba5db81..eafeb0a95 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -27,6 +27,7 @@ body {
     right: 0;
     margin: 0;
     padding: 0;
+    overflow: hidden !important;
     height: 100% !important;
 }
 
@@ -40,6 +41,7 @@ router-outlet ~ * {
     position: absolute;
     height: 100%;
     width: 100%;
+    overflow: hidden !important;
 }
 
 /**the plus button in Motion, Agenda, etc*/
@@ -48,11 +50,6 @@ router-outlet ~ * {
     z-index: 100;
 }
 
-.test-thing {
-    bottom: -30px;
-    z-index: 100;
-}
-
 .os-card {
     max-width: 90%;
     margin-top: 10px;