Add legal notice and privacy police

enhanced visuals and site container

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>

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();
+    });
+});

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();
+    }
+}

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>

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();
+    });
+});

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();
+    }
+}

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 {}

client/src/app/site/site.component.html

@@ -3,8 +3,8 @@
         <mat-toolbar class='nav-toolbar'>
 
             <!-- logo -->
-            <mat-toolbar-row>
+            <mat-toolbar-row class='os-logo-container'>
-                <img src='/assets/img/openslides-logo-dark.png' alt='OpenSlides-logo'>
+                <!-- <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

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;
+    }
+}

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);
+            }
+        }
     }
 }

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);
     }
 }

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;