More dynamic Motion-Detail metainfo

* Adjust login page
* Rework legal notice and pp
* Add more custom animations
* Add Router to navigation panel

client/src/app/shared/animations.ts

@@ -1,10 +1,12 @@
-import { trigger, animate, transition, style, query, stagger, group, state } from '@angular/animations';
+import { trigger, animate, transition, style, query, stagger, group, state, sequence } from '@angular/animations';
 
 export const pageTransition = trigger('pageTransition', [
     transition('* => *', [
         /** keep the dom clean - let all items "just" enter */
         query(':enter mat-card', [style({ opacity: 0 })], { optional: true }),
         query(':enter .on-transition-fade', [style({ opacity: 0 })], { optional: true }),
+        query(':enter mat-row', [style({ opacity: 0 })], { optional: true }),
+        query(':enter mat-expansion-panel', [style({ opacity: 0 })], { optional: true }),
 
         /** parallel vanishing */
         group([
@@ -15,6 +17,12 @@ export const pageTransition = trigger('pageTransition', [
             /** how the material cards are leaving */
             query(':leave mat-card', [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], {
                 optional: true
+            }),
+            query(':leave mat-row', [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], {
+                optional: true
+            }),
+            query(':leave mat-expansion-panel', [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], {
+                optional: true
             })
         ]),
 
@@ -33,6 +41,24 @@ export const pageTransition = trigger('pageTransition', [
                     animate('300ms ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 }))
                 ]),
                 { optional: true }
+            ),
+            query(
+                ':enter mat-row',
+                /** stagger = "one after another" with a distance of 50ms" */
+                stagger(30, [
+                    style({ transform: 'translateY(24px)' }),
+                    animate('200ms ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 }))
+                ]),
+                { optional: true }
+            ),
+            query(
+                ':enter mat-expansion-panel',
+                /** stagger = "one after another" with a distance of 50ms" */
+                stagger(100, [
+                    style({ transform: 'translateY(50px)' }),
+                    animate('300ms ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 }))
+                ]),
+                { optional: true }
             )
         ])
     ])

client/src/app/shared/components/legal-notice/legal-notice.dialog.component.html

@@ -1,9 +0,0 @@
-<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.ts

@@ -1,15 +0,0 @@
-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

@@ -1,40 +0,0 @@
-<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.ts

@@ -1,15 +0,0 @@
-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/models/motions/motion.ts

@@ -154,7 +154,16 @@ export class Motion extends BaseModel {
         const workflowId = +motionsWorkflowConfig.value;
         //get the workflow for out motion
         const selectedWorkflow = this.DS.get(Workflow, workflowId) as Workflow;
-        return selectedWorkflow.getStateNameById(this.state_id);
+        const stateName = selectedWorkflow.getStateNameById(this.state_id);
+        if (stateName !== 'NULL') {
+            return stateName;
+        } else {
+            return '';
+        }
+    }
+
+    get possibleStates() {
+        return '';
     }
 
     /**

client/src/app/shared/shared.module.ts

@@ -32,9 +32,6 @@ 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';
-// import { CdkTableModule } from '@angular/cdk/table';
 
 library.add(fas);
 
@@ -91,7 +88,6 @@ library.add(fas);
         TranslateModule,
         OsPermsDirective
     ],
-    declarations: [OsPermsDirective, DomChangeDirective, LegalnoticeDialogComponent, PrivacyPolicyDialogComponent],
-    entryComponents: [LegalnoticeDialogComponent, PrivacyPolicyDialogComponent]
+    declarations: [OsPermsDirective, DomChangeDirective]
 })
 export class SharedModule {}

client/src/app/site/legal-notice/legal-notice.component.html

@@ -0,0 +1,16 @@
+<mat-toolbar color='primary'>
+    <span class='app-name on-transition-fade' translate>Legal Notice</span>
+</mat-toolbar>
+
+<mat-card class="os-card on-transition-fade">
+    <div>
+        <div class='legal-notice-text'>
+            <a href="https://openslides.org/">OpenSlides</a> ist ein freies, webbasiertes Präsentations- und Versammlungssystem zur Darstellung und Steuerung
+            von Tagesordnung, Anträgen und Wahlen einer Versammlung.
+        </div>
+        <mat-divider></mat-divider>
+        <div class='version-text'>
+            OpenSlides 3.0 PRE ALPHA (Lizenz: MIT)
+        </div>
+    </div>
+</mat-card>

client/src/app/site/legal-notice/legal-notice.component.scss

@@ -0,0 +1,9 @@
+.legal-notice-text {
+    display: block;
+    padding-bottom: 20px;
+}
+
+.version-text {
+    display: block;
+    padding-top: 20px;
+}

client/src/app/site/legal-notice/legal-notice.component.spec.ts

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LegalnoticeDialogComponent } from './legal-notice.dialog.component';
+import { LegalNoticeComponent } from './legal-notice.component';
 
-describe('LegalnoticeDialogComponent', () => {
-    let component: LegalnoticeDialogComponent;
-    let fixture: ComponentFixture<LegalnoticeDialogComponent>;
+describe('LegalNoticeComponent', () => {
+    let component: LegalNoticeComponent;
+    let fixture: ComponentFixture<LegalNoticeComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [LegalnoticeDialogComponent]
+            declarations: [LegalNoticeComponent]
         }).compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(LegalnoticeDialogComponent);
+        fixture = TestBed.createComponent(LegalNoticeComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

client/src/app/site/legal-notice/legal-notice.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-legal-notice',
+    templateUrl: './legal-notice.component.html',
+    styleUrls: ['./legal-notice.component.scss']
+})
+export class LegalNoticeComponent implements OnInit {
+    constructor() {}
+
+    ngOnInit() {}
+}

client/src/app/site/login/login.component.scss

@@ -9,6 +9,7 @@ mat-form-field {
         margin-left: auto;
         margin-right: auto;
         width: 90%;
+        max-width: 400px;
     }
 }
 
@@ -26,8 +27,8 @@ mat-form-field {
 }
 
 .form-wrapper {
-    padding-left: 15px;
-    padding-right: 15px;
+    padding-left: 30px;
+    padding-right: 30px;
 
     mat-spinner {
         position: absolute;
@@ -41,5 +42,5 @@ mat-form-field {
 .login-form {
     padding-top: 60px;
     margin: 0 auto;
-    max-width: 600px;
+    max-width: 400px;
 }

client/src/app/site/motions/motion-detail/motion-detail.component.html

@@ -26,25 +26,62 @@
         </mat-expansion-panel-header>
         <div class='meta-info-panel-body'>
 
-            <h3 translate *ngIf="motion.submitterName">Submitters</h3>
-            {{motion.submitterName}}
+            <div *ngIf="motion.submitterName">
+                <h3 translate>Submitters</h3>
+                {{motion.submitterName}}
+            </div>
 
-            <h3 translate *ngIf='motion.supporters_id && motion.supporters_id.length > 0'>Supporters</h3>
+            <div *ngIf='motion.supporters_id && motion.supporters_id.length > 0'>
+                <h3>translate>Supporters</h3>
+                <!-- print all motion supporters -->
+            </div>
 
-            <h3 translate *ngIf='motion.state_id'>Status</h3>
-            {{motion.stateName}}
+            <div *ngIf='motion.state_id'>
+                <h3>
+                    <a [matMenuTriggerFor]="stateMenu">
+                        <span translate>Status</span>
+                        <fa-icon icon='cog'></fa-icon>
+                    </a>
+                </h3>
+                {{motion.stateName}}
+            </div>
 
-            <h3 translate *ngIf='motion.recommendation_id'>{{motion.recomBy}}</h3>
-            <!-- config.get(motions_recommendations_by) -->
-            {{motion.recommendation}}
+            <div *ngIf='motion.recommendation_id'>
+                <h3>
+                    <a [matMenuTriggerFor]="stateMenu">
+                        <span>{{motion.recomBy}}</span>
+                        <fa-icon icon='cog'></fa-icon>
+                    </a>
+                </h3>
+                {{motion.recommendation}}
+            </div>
 
-            <h3 translate *ngIf="motion.category_id">Category</h3>
-            {{motion.category}}
+            <div *ngIf="motion.category_id">
+                <h3>
+                    <a [matMenuTriggerFor]="categoryMenu">
+                        <span translate>Category</span>
+                        <fa-icon icon='cog'></fa-icon>
+                    </a>
+                </h3>
+                {{motion.category}}
+            </div>
 
-            <h3 translate *ngIf="motion.origin">Origin</h3>
-            {{motion.origin}}
+            <div *ngIf="motion.origin">
+                <h3>
+                    <span translate>Origin</span>
+                    <fa-icon icon='cog'></fa-icon>
+                </h3>
+                <span>{{motion.origin}}</span>
 
-            <h3 translate *ngIf='motion.polls && motion.polls.length > 0'>Voting</h3>
+                <br>
+                <mat-form-field>
+                    <input matInput #origin placeholder='Origin' value={{motion.origin}}>
+                </mat-form-field>
+            </div>
+
+            <div *ngIf='motion.polls && motion.polls.length > 0'>
+                <h3 translate>Voting</h3>
+            </div>
         </div>
     </mat-expansion-panel>
     <!-- <mat-expansion-panel [expanded]='true'> -->
@@ -72,4 +109,16 @@
         <div [innerHtml]='motion.currentReason'></div>
 
     </mat-expansion-panel>
-</mat-accordion>
+</mat-accordion>
+
+<!-- dummy values -->
+<mat-menu #stateMenu="matMenu">
+    <button mat-menu-item translate>Accept</button>
+    <button mat-menu-item translate>Reject</button>
+    <button mat-menu-item translate>Do not decice</button>
+</mat-menu>
+
+<mat-menu #categoryMenu="matMenu">
+    <button mat-menu-item translate>B - Bildung</button>
+    <button mat-menu-item translate>T - Test</button>
+</mat-menu>

client/src/app/site/motions/motion-detail/motion-detail.component.scss

@@ -21,12 +21,36 @@ mat-panel-title {
 
 .meta-info-panel {
     padding-top: 25px;
+
+    a:hover {
+        cursor: pointer;
+    }
+
     h3 {
         display: block;
         margin-top: 12px; //distance between heading and text
         margin-bottom: 3px; //distance between heading and text
         font-size: 80%;
         color: gray;
+
+        fa-icon {
+            margin-left: 5px;
+        }
+    }
+
+    mat-form-field {
+        margin-top: 12px; //distance between heading and text
+    }
+
+    .mat-form-field-label {
+        font-size: 12pt;
+        color: gray;
+    }
+
+    .mat-form-field-label-wrapper {
+        fa-icon {
+            margin-left: 5px;
+        }
     }
 
     .meta-info-panel-body {

client/src/app/site/motions/motion-detail/motion-detail.component.ts

@@ -27,6 +27,7 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
                     if (newModel.id === +params.id) {
                         this.motion = newModel as Motion;
                         console.log('this.motion = ', this.motion);
+                        // console.log('motion state name: ', this.motion.stateName);
                     }
                 }
             });
@@ -35,6 +36,7 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
 
     ngOnInit() {
         console.log('(init)the motion: ', this.motion);
+        console.log('motion state name: ', this.motion.stateName);
     }
 
     downloadSingleMotionButton() {

client/src/app/site/privacy-policy/privacy-policy.component.html

@@ -0,0 +1,27 @@
+<mat-toolbar color='primary'>
+    <span class='app-name on-transition-fade' translate>Privacy Policy</span>
+</mat-toolbar>
+
+<mat-card class="os-card on-transition-fade">
+    <div>
+        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. 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.
+        Eine Weitergabe von Teilen der erhobenen Daten erfolgt ausschließlich gemäß gesetzlicher Verpflichtung z.B. an Strafverfolgungs-
+        oder Steuerbehörden. 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.
+        <h3 translate>Cookies</h3>
+        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.
+        <h3 translate>Logfiles</h3>
+        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.
+        <h3 translate>Database</h3>
+        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.
+        <h3 translate>Deleting Files</h3>
+        Die Daten dieser OpenSlides-Demo-Instanz werden nächtlich automatisch gelöscht.
+    </div>
+</mat-card>

client/src/app/site/privacy-policy/privacy-policy.component.spec.ts

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PrivacyPolicyDialogComponent } from './privacy-policy.dialog.component';
+import { PrivacyPolicyComponent } from './privacy-policy.component';
 
-describe('PrivacyPolicyDialogComponent', () => {
-    let component: PrivacyPolicyDialogComponent;
-    let fixture: ComponentFixture<PrivacyPolicyDialogComponent>;
+describe('PrivacyPolicyComponent', () => {
+    let component: PrivacyPolicyComponent;
+    let fixture: ComponentFixture<PrivacyPolicyComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [PrivacyPolicyDialogComponent]
+            declarations: [PrivacyPolicyComponent]
         }).compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(PrivacyPolicyDialogComponent);
+        fixture = TestBed.createComponent(PrivacyPolicyComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

client/src/app/site/privacy-policy/privacy-policy.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-privacy-policy',
+    templateUrl: './privacy-policy.component.html',
+    styleUrls: ['./privacy-policy.component.scss']
+})
+export class PrivacyPolicyComponent implements OnInit {
+    constructor() {}
+
+    ngOnInit() {}
+}

client/src/app/site/site-routing.module.ts

@@ -4,6 +4,8 @@ import { Routes, RouterModule } from '@angular/router';
 import { SiteComponent } from './site.component';
 
 import { StartComponent } from './start/start.component';
+import { PrivacyPolicyComponent } from './privacy-policy/privacy-policy.component';
+import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
 // import { LoginComponent } from './login/login.component';
 
 /**
@@ -18,6 +20,8 @@ const routes: Routes = [
         component: SiteComponent,
         children: [
             { path: '', component: StartComponent },
+            { path: 'legalnotice', component: LegalNoticeComponent },
+            { path: 'privacypolicy', component: PrivacyPolicyComponent },
             { path: 'agenda', loadChildren: './agenda/agenda.module#AgendaModule' },
             {
                 path: 'assignments',

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

@@ -72,16 +72,29 @@
                 <fa-icon icon='cog'></fa-icon>
                 <span translate>Settings</span>
             </a>
+            <mat-divider></mat-divider>
+            <a [@navItemAnim] *appOsPerms="['core.can_see_projector']" mat-list-item routerLink='/projector' routerLinkActive='active'
+                (click)='isMobile ? sideNav.toggle() : null'>
+                <fa-icon icon='video'></fa-icon>
+                <span translate>Projector</span>
+            </a>
         </mat-nav-list>
 
 
         <footer>
-            <button mat-button (click)='openLegalNotice()'>
-                <span translate>Legal Notice</span>
+            <button mat-button>
+                <a routerLink='/legalnotice' (click)='isMobile ? sideNav.toggle() : null'>
+                    <span translate>Legal Notice</span>
+                </a>
             </button>
-            <button mat-button (click)='openPrivacyPolicy()'>
+            <button mat-button>
+                <a routerLink='/privacypolicy' (click)='isMobile ? sideNav.toggle() : null'>
+                    <span translate>Privacy Policy</span>
+                </a>
+            </button>
+            <!-- <button mat-button (click)='openPrivacyPolicy()'>
                 <span translate>Privacy Policy</span>
-            </button>
+            </button> -->
             <br>
             <span align="center">© Copyright by
                 <a href='https://openslides.org/'>OpenSlides</a>
@@ -103,16 +116,10 @@
         <button mat-icon-button (click)='sideNav.toggle()'>
             <fa-icon icon='search'></fa-icon>
         </button>
-
     </mat-toolbar>
 
     <!-- continue with <mat-toolbar> in the app-->
     <main [@pageTransition]="o.isActivated ? o.activatedRoute : ''">
         <router-outlet #o="outlet"></router-outlet>
     </main>
-
-    <!-- the global projector button -->
-    <!-- <button class='projector-button' mat-fab>
-        <fa-icon icon='video'></fa-icon>
-    </button> -->
 </mat-sidenav-container>

client/src/app/site/site.component.ts

@@ -10,8 +10,6 @@ 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',
@@ -112,18 +110,4 @@ export class SiteComponent extends BaseComponent implements OnInit {
         this.authService.logout().subscribe();
         this.router.navigate(['/login']);
     }
-
-    /**
-     * 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/app/site/site.module.ts

@@ -7,9 +7,11 @@ import { TranslateModule } from '@ngx-translate/core';
 
 import { SiteComponent } from './site.component';
 import { StartComponent } from './start/start.component';
+import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
+import { PrivacyPolicyComponent } from './privacy-policy/privacy-policy.component';
 
 @NgModule({
     imports: [CommonModule, SharedModule, SiteRoutingModule, TranslateModule.forChild()],
-    declarations: [SiteComponent, StartComponent]
+    declarations: [SiteComponent, StartComponent, LegalNoticeComponent, PrivacyPolicyComponent]
 })
 export class SiteModule {}