cleanup and refractor code

-combine the features of the two previous commits
-add prettier and pretty-quick
-more routing and logout button

client/.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 

client/.prettierrc

@@ -0,0 +1,8 @@
+{
+    "printWidth": 120,
+    "singleQuote": true,
+    "useTabs": false,
+    "tabWidth": 4,
+    "semi": true,
+    "bracketSpacing": true
+}

client/README.md

@@ -5,6 +5,8 @@ Prototype application for OpenSlides 3.0 (Client)
 ## Development server
 
 Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-A running OpenSlides (2.2) instance is expected on port 8000
 
-Start OpenSlides as usual using python manage.py start --no-browser --host 0.0.0.0
+A running OpenSlides (2.2) instance is expected on port 8000.
+
+Start OpenSlides as usual using
+`python manage.py start --no-browser --host 0.0.0.0`

client/angular.json

@@ -18,13 +18,8 @@
                         "main": "src/main.ts",
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "src/tsconfig.app.json",
-            "assets": [
+                        "assets": ["src/favicon.ico", "src/assets"],
-              "src/favicon.ico",
+                        "styles": ["src/styles.css"],
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
                         "scripts": []
                     },
                     "configurations": {
@@ -71,26 +66,16 @@
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "src/tsconfig.spec.json",
                         "karmaConfig": "src/karma.conf.js",
-            "styles": [
+                        "styles": ["src/styles.css"],
-              "src/styles.css"
-            ],
                         "scripts": [],
-            "assets": [
+                        "assets": ["src/favicon.ico", "src/assets"]
-              "src/favicon.ico",
-              "src/assets"
-            ]
                     }
                 },
                 "lint": {
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
-            "tsConfig": [
+                        "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-              "src/tsconfig.app.json",
+                        "exclude": ["**/node_modules/**"]
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
                     }
                 }
             }
@@ -115,9 +100,7 @@
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
                         "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
+                        "exclude": ["**/node_modules/**"]
-              "**/node_modules/**"
-            ]
                     }
                 }
             }

client/e2e/protractor.conf.js

@@ -5,11 +5,9 @@ const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
     allScriptsTimeout: 11000,
-  specs: [
+    specs: ['./src/**/*.e2e-spec.ts'],
-    './src/**/*.e2e-spec.ts'
-  ],
     capabilities: {
-    'browserName': 'chrome'
+        browserName: 'chrome'
     },
     directConnect: true,
     baseUrl: 'http://localhost:4200/',

client/e2e/tsconfig.e2e.json

@@ -4,10 +4,6 @@
         "outDir": "../out-tsc/app",
         "module": "commonjs",
         "target": "es5",
-    "types": [
+        "types": ["jasmine", "jasminewd2", "node"]
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
     }
 }

client/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "client",
+    "name": "OpenSlides3-Client",
     "version": "0.0.0",
     "scripts": {
         "ng": "ng",
@@ -7,7 +7,9 @@
         "build": "ng build",
         "test": "ng test",
         "lint": "ng lint",
-    "e2e": "ng e2e"
+        "e2e": "ng e2e",
+        "format:fix": "pretty-quick --staged",
+        "precommit": "run-s format:fix lint"
     },
     "private": true,
     "dependencies": {
@@ -37,13 +39,17 @@
         "@types/jasminewd2": "~2.0.3",
         "@types/node": "~8.9.4",
         "codelyzer": "~4.2.1",
+        "husky": "^0.14.3",
         "jasmine-core": "~2.99.1",
         "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~1.7.1",
+        "karma": "^2.0.3",
         "karma-chrome-launcher": "~2.2.0",
         "karma-coverage-istanbul-reporter": "~2.0.0",
         "karma-jasmine": "~1.1.1",
         "karma-jasmine-html-reporter": "^0.2.2",
+        "npm-run-all": "^4.1.3",
+        "prettier": "^1.13.5",
+        "pretty-quick": "^1.6.0",
         "protractor": "~5.3.0",
         "ts-node": "~5.0.1",
         "tslint": "~5.9.1",

client/src/app/agenda/agenda.component.spec.ts

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

client/src/app/agenda/agenda.component.ts

@@ -1,17 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { TitleService } from '../core/title.service';
-
-@Component({
-  selector: 'app-agenda',
-  templateUrl: './agenda.component.html',
-  styleUrls: ['./agenda.component.css']
-})
-export class AgendaComponent implements OnInit {
-
-  constructor(private titleService: TitleService) { 
-  }
-
-  ngOnInit() {
-    this.titleService.setTitle("Agenda");
-  }
-}

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

@@ -1,37 +1,35 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { ProjectorComponent } from "./projector/projector.component";
+import { LoginComponent } from './site/login/login.component';
-import { ProjectorContainerComponent } from "./projector/projector-container.component";
+import { ProjectorComponent } from './projector/projector.component';
-import { StartComponent } from "./site/start.component";
+import { ProjectorContainerComponent } from './projector/projector-container/projector-container.component';
-import { AgendaComponent } from "./agenda/agenda.component";
+import { SiteComponent } from './site/site.component';
-import { MotionsComponent } from "./motions/motions.component";
+import { StartComponent } from './site/start/start.component';
-import { SiteComponent } from "./site/site.component";
+import { AgendaComponent } from './site/agenda/agenda.component';
-import { LoginComponent } from './users/login.component';
+import { MotionsComponent } from './site/motions/motions.component';
 
-import { RouterAuthGuard } from "./core/router-auth-guard.service";
+import { AuthGuard } from './core/services/auth-guard.service';
 
 const routes: Routes = [
     { path: 'projector/:id', component: ProjectorComponent },
-    //{ path: 'projector', redirect: 'projector/1' }, // Test this
     { path: 'real-projector/:id', component: ProjectorContainerComponent },
-    //{ path: 'real-projector', redirect: 'real-projector/1' }, // this too
+    { path: 'login', component: LoginComponent },
     {
         path: '',
         component: SiteComponent,
-        canActivate: [RouterAuthGuard],
+        canActivate: [AuthGuard],
         children: [
             { path: '', component: StartComponent },
-            { path: 'login', component: LoginComponent },
             { path: 'agenda', component: AgendaComponent },
-            { path: 'motions', component: MotionsComponent },
+            { path: 'motions', component: MotionsComponent }
         ]
     },
-    { path: '**', redirectTo: '' },
+    { path: '**', redirectTo: '' }
 ];
 
 @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

client/src/app/app.component.spec.ts

@@ -3,9 +3,7 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-      declarations: [
+            declarations: [AppComponent]
-        AppComponent
-      ],
         }).compileComponents();
     }));
     it('should create the app', async(() => {

client/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { OpenSlidesService } from './core/openslides.service';
+import { OpenslidesService } from './core/services/openslides.service';
 
 @Component({
     selector: 'app-root',
@@ -7,7 +7,7 @@ import { OpenSlidesService } from './core/openslides.service';
     styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
-    constructor(private openSlides: OpenSlidesService) { }
+    constructor(private openSlides: OpenslidesService) {}
 
     ngOnInit() {
         this.openSlides.bootup();

client/src/app/app.module.ts

@@ -2,22 +2,22 @@ import { BrowserModule, Title } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
 import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core'
+import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 
 import { AppComponent } from './app.component';
-import { LoginComponent } from './users/login.component';
+import { LoginComponent } from './site/login/login.component';
-import { UsersComponent } from './users/users.component';
 import { AppRoutingModule } from './app-routing.module';
 import { ProjectorComponent } from './projector/projector.component';
-import { ProjectorContainerComponent } from './projector/projector-container.component';
+import { MotionsComponent } from './site/motions/motions.component';
-import { MotionsComponent } from './motions/motions.component';
+import { AgendaComponent } from './site/agenda/agenda.component';
-import { AgendaComponent } from './agenda/agenda.component';
 import { SiteComponent } from './site/site.component';
-import { StartComponent } from './site/start.component';
+import { StartComponent } from './site/start/start.component';
-import { AlertComponent } from './site/alert.component';
+import { ToastComponent } from './core/directives/toast/toast.component';
-import { AlertService } from './site/alert.service';
+import { ToastService } from './core/services/toast.service';
+import { ProjectorContainerComponent } from './projector/projector-container/projector-container.component';
+import { AlertComponent } from './core/directives/alert/alert.component';
 
 //add font-awesome icons to library.
 //will blow up the code.
@@ -27,13 +27,13 @@ library.add(fas);
     declarations: [
         AppComponent,
         LoginComponent,
-    UsersComponent,
         ProjectorComponent,
-    ProjectorContainerComponent,
         MotionsComponent,
         AgendaComponent,
         SiteComponent,
         StartComponent,
+        ToastComponent,
+        ProjectorContainerComponent,
         AlertComponent
     ],
     imports: [
@@ -41,18 +41,13 @@ library.add(fas);
         HttpClientModule,
         HttpClientXsrfModule.withOptions({
             cookieName: 'OpenSlidesCsrfToken',
-      headerName: 'X-CSRFToken',
+            headerName: 'X-CSRFToken'
         }),
         FormsModule,
         FontAwesomeModule,
         AppRoutingModule
     ],
-  providers: [
+    providers: [Title, ToastService],
-    Title,
+    bootstrap: [AppComponent]
-    AlertService,
-  ],
-  bootstrap: [
-    AppComponent
-  ]
 })
-export class AppModule { }
+export class AppModule {}

client/src/app/base.component.ts

@@ -0,0 +1,12 @@
+import { Title } from '@angular/platform-browser';
+
+//provides functions that might be used by a lot of components
+export abstract class BaseComponent {
+    private titleSuffix = ' - OpenSlides 3';
+
+    constructor(protected titleService: Title) {}
+
+    setTitle(prefix: string) {
+        this.titleService.setTitle(prefix + this.titleSuffix);
+    }
+}

client/src/app/core/auth.service.spec.ts

@@ -1,15 +0,0 @@
-import { TestBed, inject } from '@angular/core/testing';
-
-import { AuthenticationService } from './authentication.service';
-
-describe('ConfigService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [AuthenticationService]
-    });
-  });
-
-  it('should be created', inject([AuthenticationService], (service: AuthenticationService) => {
-    expect(service).toBeTruthy();
-  }));
-});

client/src/app/core/auth.service.ts

@@ -1,81 +0,0 @@
-import { Injectable } from '@angular/core';
-import {
-    HttpClient,
-    HttpResponse,
-    HttpErrorResponse,
-    HttpHeaders
-} from '@angular/common/http';
-import { Observable, of, throwError } from 'rxjs';
-import { catchError, map, tap, delay } from 'rxjs/operators';
-
-import { User } from '../users/user';
-
-const httpOptions = {
-    withCredentials: true,
-    headers: new HttpHeaders({
-        'Content-Type': 'application/json'
-    })
-};
-
-export interface LoginResponse {
-    user_id: number;
-    user: User;
-}
-
-export interface WhoAmIResponse extends LoginResponse {
-    guest_enabled: boolean;
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class AuthService {
-    isLoggedIn: boolean = false;
-
-    // store the URL so we can redirect after logging in
-    redirectUrl: string;
-
-    constructor(private http: HttpClient) { }
-
-    // Initialize the service by querying the server
-    init(): Observable<WhoAmIResponse | {}> {
-        return this.http.get<WhoAmIResponse>('users/whoami', httpOptions)
-            .pipe(
-                catchError(this.handleError())
-            );
-    }
-
-    loginUser(user: User): Observable<LoginResponse | {}> {
-        return this.http.post<LoginResponse>('users/login', user, httpOptions)
-            .pipe(
-                tap(val => {
-                    console.log(val)
-                }),
-                catchError(this.handleError())
-            );
-    }
-
-    //logout the user
-    //TODO reboot openslides
-    logout(): any {
-        console.log("logout");
-        // TODO Why isn't the request send??
-        let t = this.http.post('users/logout', undefined, httpOptions);
-        /*.pipe(
-                tap(val => {
-                    console.log(val)
-                }),
-                catchError(this.handleError())
-            );*/
-        console.log(t);
-    }
-
-    //very generic error handling function.
-    //implicitly returns an observable that will display an error message
-    private handleError<T>() {
-        return (error: any): Observable<T> => {
-            console.error(error);
-            return of(error);
-        }
-    };
-}

client/src/app/core/directives/alert/alert.component.html

@@ -0,0 +1,4 @@
+<div *ngIf="alert" [ngClass]="cssClass(alert)" class="alert-dismissable">
+  {{alert.message}}
+  <a class="close" (click)="removeAlert(alert)">&times;</a>
+</div>

client/src/app/core/directives/alert/alert.component.spec.ts

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

client/src/app/core/directives/alert/alert.component.ts

@@ -1,18 +1,18 @@
 import { Component, OnInit, Input } from '@angular/core';
 
-import { Alert, AlertType } from './alert';
+import { Alert, AlertType } from 'app/core/models/alert';
 
 @Component({
-    selector: 'alert',
+    selector: 'app-alert',
     templateUrl: './alert.component.html',
     styleUrls: ['./alert.component.css']
 })
 export class AlertComponent implements OnInit {
     @Input() alert: Alert;
 
-    constructor() { }
+    constructor() {}
 
-    ngOnInit() { }
+    ngOnInit() {}
 
     removeAlert(alert: Alert) {
         this.alert = undefined;

client/src/app/core/directives/toast/toast.component.html

@@ -0,0 +1,4 @@
+<div *ngFor="let toast of toasts" class="{{ cssClass(toast) }} alert-dismissable">
+    {{toast.message}}
+    <a class="close" (click)="removeAlert(toast)">&times;</a>
+</div>

client/src/app/core/directives/toast/toast.component.spec.ts

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

client/src/app/core/directives/toast/toast.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Alert, AlertType } from 'app/core/models/alert';
+import { ToastService } from 'app/core/services/toast.service';
+
+@Component({
+    selector: 'app-toast',
+    templateUrl: './toast.component.html',
+    styleUrls: ['./toast.component.css']
+})
+export class ToastComponent implements OnInit {
+    toasts: Alert[] = [];
+
+    constructor(private toastService: ToastService) {}
+
+    ngOnInit() {
+        this.toastService.getToast().subscribe((alert: Alert) => {
+            if (!alert) {
+                // clear alerts when an empty alert is received
+                this.toasts = [];
+                return;
+            }
+
+            // add alert to array
+            this.toasts.push(alert);
+        });
+    }
+
+    removeAlert(alert: Alert) {
+        this.toasts = this.toasts.filter(x => x !== alert);
+    }
+
+    cssClass(alert: Alert) {
+        if (!alert) {
+            return;
+        }
+
+        // return css class based on alert type
+        switch (alert.type) {
+            case AlertType.Success:
+                return 'alert alert-success';
+            case AlertType.Error:
+                return 'alert alert-danger';
+            case AlertType.Info:
+                return 'alert alert-info';
+            case AlertType.Warning:
+                return 'alert alert-warning';
+        }
+    }
+}

client/src/app/core/models/user.ts

@@ -0,0 +1,4 @@
+export class User {
+    username: string;
+    password: string;
+}

client/src/app/core/router-auth-guard.service.ts

@@ -1,40 +0,0 @@
-import { Injectable } from '@angular/core';
-import {
-    CanActivate,
-    Router,
-    ActivatedRouteSnapshot,
-    RouterStateSnapshot
-} from '@angular/router';
-
-import { AuthService } from './auth.service';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class RouterAuthGuard implements CanActivate {
-
-    constructor(private authService: AuthService, private router: Router) { }
-
-    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
-        return this.checkAccess(state.url);
-    }
-
-    checkAccess(url: string): boolean {
-        if (url === '/login') {
-            return true;
-        }
-
-        // Check base permission for the current state
-        let hasBasePermission = true; // TODO: get this from the current state...
-
-        if (!hasBasePermission) {
-            // Store the attempted URL for redirecting
-            this.authService.redirectUrl = url;
-
-            // Navigate to the login page with extras
-            this.router.navigate(['/login']);
-            return false;
-        }
-        return true;
-    }
-}

client/src/app/core/services/alert.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { AlertService } from './alert.service';
+
+describe('AlertService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [AlertService]
+        });
+    });
+
+    it('should be created', inject([AlertService], (service: AlertService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/services/alert.service.ts

@@ -1,19 +1,20 @@
 import { Injectable } from '@angular/core';
 
-import { Alert, AlertType } from './alert';
+import { Alert, AlertType } from 'app/core/models/alert';
-
 
 @Injectable({
     providedIn: 'root'
 })
 export class AlertService {
-    constructor() { }
+    constructor() {}
 
     success(message: string): Alert {
         return this.alert(AlertType.Success, message);
     }
 
     error(message: string): Alert {
+        // console.log('this.alert : ', this.alert());
+        // this.alert(AlertType.Error, message);
         return this.alert(AlertType.Error, message);
     }
 

client/src/app/core/services/auth-guard.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+import { AuthService } from './auth.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+    constructor(private authService: AuthService, private router: Router) {}
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+        const url: string = state.url;
+        return this.checkLogin(url);
+    }
+
+    checkLogin(url: string): boolean {
+        //check if the user is already logged in.
+        //TODO: This is faked
+        if (this.authService.isLoggedIn) {
+            return true;
+        }
+
+        // Store the attempted URL for redirecting
+        this.authService.redirectUrl = url;
+
+        // Navigate to the login page with extras
+        this.router.navigate(['/login']);
+        return false;
+    }
+}

client/src/app/core/services/auth.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('ConfigService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [AuthService]
+        });
+    });
+
+    it('should be created', inject([AuthService], (service: AuthService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/services/auth.service.ts

@@ -0,0 +1,74 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpResponse, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
+import { Observable, of, throwError } from 'rxjs';
+import { catchError, map, tap } from 'rxjs/operators';
+
+import { User } from 'app/core/models/user';
+
+const httpOptions = {
+    withCredentials: true,
+    headers: new HttpHeaders({
+        'Content-Type': 'application/json'
+    })
+};
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthService {
+    isLoggedIn: boolean;
+
+    // store the URL so we can redirect after logging in
+    redirectUrl: string;
+
+    constructor(private http: HttpClient) {
+        //check for the cookie in local storrage
+        //TODO checks for username now since django does not seem to return a cookie
+        if (localStorage.getItem('username')) {
+            this.isLoggedIn = true;
+        } else {
+            this.isLoggedIn = false;
+        }
+    }
+
+    // Initialize the service by querying the server
+    // Not sure if this makes sense, since a service is not supposed to init()
+    init(): Observable<any> {
+        return this.http.get('/users/whoami/', httpOptions).pipe(
+            tap(val => {
+                console.log('auth-init-whami : ', val);
+            }),
+            catchError(this.handleError())
+        );
+    }
+
+    //loggins a users. expects a user model
+    login(user: User): Observable<any> {
+        return this.http.post('/users/login/', user, httpOptions).pipe(
+            tap(val => {
+                this.isLoggedIn = true;
+                //Set the session cookie in local storrage.
+                //TODO needs validation
+            }),
+            catchError(this.handleError())
+        );
+    }
+
+    //logout the user
+    //TODO not yet used
+    logout(): Observable<any> {
+        this.isLoggedIn = false;
+        localStorage.removeItem('username');
+
+        return this.http.post('/users/logout/', {}, httpOptions);
+    }
+
+    //very generic error handling function.
+    //implicitly returns an observable that will display an error message
+    private handleError<T>() {
+        return (error: any): Observable<T> => {
+            console.error(error);
+            return of(error);
+        };
+    }
+}

client/src/app/core/services/openslides.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { OpenslidesService } from './openslides.service';
+
+describe('OpenslidesService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [OpenslidesService]
+        });
+    });
+
+    it('should be created', inject([OpenslidesService], (service: OpenslidesService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/services/openslides.service.ts

@@ -1,18 +1,18 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { AuthService, WhoAmIResponse } from './auth.service';
+import { AuthService } from './auth.service';
 
+//it seems that this service is useless
 @Injectable({
     providedIn: 'root'
 })
-export class OpenSlidesService {
+export class OpenslidesService {
+    constructor(private auth: AuthService, private router: Router) {}
 
-    constructor(private auth: AuthService, private router: Router) { }
+    bootup() {
-
-    bootup () {
         // TODO Lock the interface..
-        this.auth.init().subscribe((whoami: WhoAmIResponse) => {
+        this.auth.init().subscribe(whoami => {
             console.log(whoami);
             if (!whoami.user && !whoami.guest_enabled) {
                 this.router.navigate(['/login']);

client/src/app/core/services/toast.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ToastService } from './toast.service';
+
+describe('ToastService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [ToastService]
+        });
+    });
+
+    it('should be created', inject([ToastService], (service: ToastService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/services/toast.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+import { Alert, AlertType } from 'app/core/models/alert';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ToastService {
+    private subject = new Subject<Alert>();
+
+    constructor() {}
+
+    getToast(): Observable<any> {
+        return this.subject.asObservable();
+    }
+
+    success(message: string) {
+        this.alert(AlertType.Success, message);
+    }
+
+    error(message: string) {
+        this.alert(AlertType.Error, message);
+    }
+
+    info(message: string) {
+        this.alert(AlertType.Info, message);
+    }
+
+    warn(message: string) {
+        this.alert(AlertType.Warning, message);
+    }
+
+    alert(type: AlertType, message: string) {
+        this.subject.next(<Alert>{ type: type, message: message });
+    }
+
+    clear() {
+        // clear alerts
+        this.subject.next();
+    }
+}

client/src/app/core/title.service.ts

@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Title } from '@angular/platform-browser';
-
-// Provides functionallity to set the webpage title
-@Injectable({
-    providedIn: 'root'
-})
-export class TitleService {
-    private titleSuffix: string = " - OpenSlides 3";
-
-    constructor(protected titleService: Title) { }
-
-    setTitle(prefix: string) {
-        this.titleService.setTitle(prefix + this.titleSuffix);
-    }
-}

client/src/app/motions/motions.component.spec.ts

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

client/src/app/motions/motions.component.ts

@@ -1,18 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { TitleService } from '../core/title.service';
-
-@Component({
-    selector: 'app-motions',
-    templateUrl: './motions.component.html',
-    styleUrls: ['./motions.component.css']
-})
-export class MotionsComponent implements OnInit {
-
-    constructor(private titleService: TitleService) { 
-    }
-
-    ngOnInit() {
-        this.titleService.setTitle("Motions");
-    }
-
-}

client/src/app/projector/projector-container/projector-container.component.html

@@ -1,4 +1,4 @@
 <p>
-  projector container works!
+  projector-container works!
   Here an iframe with the real-projector is needed
 </p>

client/src/app/projector/projector-container/projector-container.component.spec.ts

@@ -8,9 +8,8 @@ describe('ProjectorContainerComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [ ProjectorContainerComponent ]
+            declarations: [ProjectorContainerComponent]
-        })
+        }).compileComponents();
-        .compileComponents();
     }));
 
     beforeEach(() => {

client/src/app/projector/projector-container/projector-container.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { TitleService } from '../core/title.service';
 
 @Component({
     selector: 'app-projector-container',
@@ -7,12 +6,7 @@ import { TitleService } from '../core/title.service';
     styleUrls: ['./projector-container.component.css']
 })
 export class ProjectorContainerComponent implements OnInit {
+    constructor() {}
 
-    constructor(protected titleService: TitleService) { 
+    ngOnInit() {}
-    }
-
-    ngOnInit() {
-        this.titleService.setTitle('Projector');
-    }
-
 }

client/src/app/projector/projector.component.spec.ts

@@ -8,9 +8,8 @@ describe('ProjectorComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [ ProjectorComponent ]
+            declarations: [ProjectorComponent]
-        })
+        }).compileComponents();
-        .compileComponents();
     }));
 
     beforeEach(() => {

client/src/app/projector/projector.component.ts

@@ -1,15 +1,18 @@
 import { Component, OnInit } from '@angular/core';
+import { BaseComponent } from 'app/base.component';
+import { Title } from '@angular/platform-browser';
 
 @Component({
     selector: 'app-projector',
     templateUrl: './projector.component.html',
     styleUrls: ['./projector.component.css']
 })
-export class ProjectorComponent implements OnInit {
+export class ProjectorComponent extends BaseComponent implements OnInit {
-
+    constructor(protected titleService: Title) {
-    constructor() {
+        super(titleService);
     }
 
     ngOnInit() {
+        super.setTitle('Projector');
     }
 }

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

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

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

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { BaseComponent } from 'app/base.component';
+
+@Component({
+    selector: 'app-agenda',
+    templateUrl: './agenda.component.html',
+    styleUrls: ['./agenda.component.css']
+})
+export class AgendaComponent extends BaseComponent implements OnInit {
+    constructor(titleService: Title) {
+        super(titleService);
+    }
+
+    ngOnInit() {
+        //TODO translate
+        super.setTitle('Agenda');
+    }
+}

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

@@ -1,4 +0,0 @@
-<div *ngIf="alert" [ngClass]="cssClass(alert)" class="alert-dismissable">
-    {{alert.message}}
-    <a class="close" (click)="removeAlert(alert)">&times;</a>
-</div>

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

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

client/src/app/site/alert.service.spec.ts

@@ -1,15 +0,0 @@
-import { TestBed, inject } from '@angular/core/testing';
-
-import { AlertService } from './alert.service';
-
-describe('AlertService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [AlertService]
-    });
-  });
-
-  it('should be created', inject([AlertService], (service: AlertService) => {
-    expect(service).toBeTruthy();
-  }));
-});

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

@@ -4,15 +4,15 @@
       <img src="/assets/img/openslides-logo.png" alt="OpenSlides" class="login-logo center-block">
     </div>
     <div class="modal-body loginForm">
+      {{info}}
       <!-- Instead of the original approach, user alert component -->
-      <alert [alert]="alert"></alert>
+      <app-alert [alert]="alert"></app-alert>
 
       <div class="input-group form-group">
         <div class="input-group-addon">
           <fa-icon icon="user"></fa-icon>
         </div>
-        <input [(ngModel)]="user.username" os-focus-me="" type="text"
+        <input [(ngModel)]="user.username" os-focus-me="" type="text" class="form-control input-lg ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched"
-          class="form-control input-lg ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched"
           placeholder="Username" name="username">
       </div>
       <div class="input-group form-group">

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

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

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

@@ -0,0 +1,68 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+
+import { BaseComponent } from 'app/base.component';
+import { User } from 'app/core/models/user';
+import { AuthService } from 'app/core/services/auth.service';
+import { AlertService } from 'app/core/services/alert.service';
+
+@Component({
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.css']
+})
+export class LoginComponent extends BaseComponent implements OnInit {
+    user: User = {
+        username: '',
+        password: ''
+    };
+    info: string;
+
+    constructor(
+        titleService: Title,
+        private authService: AuthService,
+        private alertService: AlertService,
+        private router: Router
+    ) {
+        super(titleService);
+        this.setInfo();
+    }
+
+    ngOnInit() {
+        //TODO translate
+        super.setTitle('Anmelden');
+    }
+
+    setInfo() {
+        this.info = 'Logged in? ' + (this.authService.isLoggedIn ? 'in' : 'out');
+    }
+
+    //Todo: This serves as a prototype and need enhancement,
+    //like saving a "logged in state" and real checking the server
+    //if logIn was fine
+    onSubmit() {
+        this.authService.login(this.user).subscribe(res => {
+            if (res.status === 400) {
+                //TODO, add more errors here, use
+                console.log('error in login');
+
+                //todo alert seems to work differently than toast
+                this.alertService.error('Benutzername oder Passwort war nicht korrekt.');
+            } else {
+                this.alertService.success('Logged in! :)');
+                this.setInfo();
+                if (this.authService.isLoggedIn) {
+                    localStorage.setItem('username', res.user.username);
+
+                    // Get the redirect URL from our auth service
+                    // If no redirect has been set, use the default
+                    const redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/';
+
+                    // Redirect the user
+                    this.router.navigate([redirect]);
+                }
+            }
+        });
+    }
+}

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

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

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

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { BaseComponent } from 'app/base.component';
+
+@Component({
+    selector: 'app-motions',
+    templateUrl: './motions.component.html',
+    styleUrls: ['./motions.component.css']
+})
+export class MotionsComponent extends BaseComponent implements OnInit {
+    constructor(titleService: Title) {
+        super(titleService);
+    }
+
+    ngOnInit() {
+        super.setTitle('Motions');
+    }
+}

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

@@ -1,4 +1,11 @@
-<h1>The actual OpenSldies Content!</h1>
+<h1> The actual OpenSlides Content! </h1>
-<nav>A nav will be here</nav>
+<nav>
+  <a routerLink="/" routerLinkActive="active"> Home </a>
+  <a routerLink="/agenda" routerLinkActive="active"> Agenda </a>
+  <a routerLink="/motions" routerLinkActive="active"> Motions </a>
+</nav>
 <router-outlet></router-outlet>
-<footer>Footer</footer>
+<footer>
+  Footer
+  <button (click)="logOutButton()">LogOut</button>
+</footer>

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

@@ -8,9 +8,8 @@ describe('SiteComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-      declarations: [ SiteComponent ]
+            declarations: [SiteComponent]
-    })
+        }).compileComponents();
-    .compileComponents();
     }));
 
     beforeEach(() => {

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

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { AuthService } from 'app/core/services/auth.service';
 
 @Component({
     selector: 'app-site',
@@ -6,8 +9,13 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./site.component.css']
 })
 export class SiteComponent implements OnInit {
+    constructor(private authService: AuthService, private router: Router) {}
 
-  constructor() { }
+    ngOnInit() {}
 
-  ngOnInit() { }
+    logOutButton() {
+        console.log('logout');
+        this.authService.logout().subscribe();
+        this.router.navigate(['/login']);
+    }
 }

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

@@ -1,7 +0,0 @@
-<p>
-  start works!
-  Here the welcome text is displayed
-</p>
-<button type="button" (click)="logout()" class="btn btn-primary">
-  Logoff test!
-</button>

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

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

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

@@ -1,22 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { TitleService } from '../core/title.service';
-import {AuthService } from '../core/auth.service';
-
-@Component({
-    selector: 'app-start',
-    templateUrl: './start.component.html',
-    styleUrls: ['./start.component.css']
-})
-export class StartComponent implements OnInit {
-
-    constructor(private titleService: TitleService, private auth: AuthService) { }
-
-    ngOnInit() {
-        this.titleService.setTitle('Start page');
-    }
-
-    logout() {
-        this.auth.logout();
-    }
-}

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

@@ -0,0 +1,3 @@
+<p>
+  start works!
+</p>

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

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

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

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { BaseComponent } from 'app/base.component';
+
+@Component({
+    selector: 'app-start',
+    templateUrl: './start.component.html',
+    styleUrls: ['./start.component.css']
+})
+export class StartComponent extends BaseComponent implements OnInit {
+    constructor(titleService: Title) {
+        super(titleService);
+    }
+
+    ngOnInit() {
+        super.setTitle('Start page');
+    }
+}

client/src/app/users/login.component.spec.ts

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

client/src/app/users/login.component.ts

@@ -1,58 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { User } from '../users/user';
-import { AuthService } from '../core/auth.service';
-import { AlertService } from '../site/alert.service';
-import { TitleService } from '../core/title.service';
-
-@Component({
-    selector: 'app-login',
-    templateUrl: './login.component.html',
-    styleUrls: ['./login.component.css']
-})
-export class LoginComponent implements OnInit {
-    user: User = {
-        username: '',
-        password: ''
-    };
-
-    constructor(
-        private titleService: TitleService,
-        private authService: AuthService,
-        private alertService: AlertService,
-        private router: Router,
-    ) { }
-
-    ngOnInit() {
-        //TODO translate
-        this.titleService.setTitle('Anmelden');
-    }
-
-    //Todo: This serves as a prototype and need enhancement,
-    //like saving a "logged in state" and real checking the server
-    //if logIn was fine
-    onSubmit() {
-        this.authService.loginUser(this.user).subscribe(
-            res => {
-                // TODO an error is thrown here. Also all this stuff should the the auth service..
-                /*if (res.status === 400) {
-                    // TODO Use the error that comes from the server
-                    //this.alertService.error("Benutzername oder Passwort war nicht korrekt.");
-                } else {
-                    if (this.authService.isLoggedIn) {
-                        // Get the redirect URL from our auth service
-                        // If no redirect has been set, use the default
-                        let redirect = this.authService.redirectUrl ?
-                          this.authService.redirectUrl : '/';
-
-                        // TODO check, if there is a redirect url. Else redirect to /
-
-                        // Redirect the user
-                        this.router.navigate([redirect]);
-                    }
-                }*/
-            }
-        );
-    }
-}

client/src/app/users/user.ts

@@ -1,4 +0,0 @@
-export class User {
-  username: string;
-  password: string;
-}

client/src/app/users/users.component.html

@@ -1,3 +0,0 @@
-<p>
-  users works!
-</p>

client/src/app/users/users.component.spec.ts

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

client/src/app/users/users.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-users',
-  templateUrl: './users.component.html',
-  styleUrls: ['./users.component.css']
-})
-export class UsersComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

client/src/index.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>OpenSlides 3</title>
@@ -8,7 +9,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
 </head>
+
 <body>
   <app-root></app-root>
 </body>
+
 </html>

client/src/karma.conf.js

@@ -1,7 +1,7 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-module.exports = function (config) {
+module.exports = function(config) {
     config.set({
         basePath: '',
         frameworks: ['jasmine', '@angular-devkit/build-angular'],

client/src/main.ts

@@ -8,5 +8,6 @@ if (environment.production) {
     enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic()
+    .bootstrapModule(AppModule)
     .catch(err => console.log(err));

client/src/polyfills.ts

@@ -40,12 +40,10 @@
 /** IE10 and IE11 requires the following for the Reflect API. */
 // import 'core-js/es6/reflect';
 
-
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 import 'core-js/es7/reflect';
 
-
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
@@ -58,11 +56,11 @@ import 'core-js/es7/reflect';
  * user can disable parts of macroTask/DomEvents patch by setting following flags
  */
 
- // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 
- /*
+/*
  * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  * with the following flag, it will bypass `zone.js` patch for IE/Edge
  */
@@ -73,8 +71,6 @@ import 'core-js/es7/reflect';
  */
 import 'zone.js/dist/zone'; // Included with Angular CLI.
 
-
-
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */

client/src/test.ts

@@ -2,18 +2,12 @@
 
 import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
-import {
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
 
 declare const require: any;
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.

client/src/tsconfig.app.json

@@ -5,8 +5,5 @@
         "module": "es2015",
         "types": []
     },
-  "exclude": [
+    "exclude": ["src/test.ts", "**/*.spec.ts"]
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
 }

client/src/tsconfig.spec.json

@@ -3,17 +3,8 @@
     "compilerOptions": {
         "outDir": "../out-tsc/spec",
         "module": "commonjs",
-    "types": [
+        "types": ["jasmine", "node"]
-      "jasmine",
-      "node"
-    ]
     },
-  "files": [
+    "files": ["test.ts", "polyfills.ts"],
-    "test.ts",
+    "include": ["**/*.spec.ts", "**/*.d.ts"]
-    "polyfills.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
 }

client/src/tslint.json

@@ -1,17 +1,7 @@
 {
     "extends": "../tslint.json",
     "rules": {
-        "directive-selector": [
+        "directive-selector": [true, "attribute", "app", "camelCase"],
-            true,
+        "component-selector": [true, "element", "app", "kebab-case"]
-            "attribute",
-            "app",
-            "camelCase"
-        ],
-        "component-selector": [
-            true,
-            "element",
-            "app",
-            "kebab-case"
-        ]
     }
 }

client/tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compileOnSave": false,
     "compilerOptions": {
-    "baseUrl": "./",
+        "baseUrl": "./src",
         "outDir": "./dist/out-tsc",
         "sourceMap": true,
         "declaration": false,
@@ -9,12 +9,7 @@
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
         "target": "es5",
-    "typeRoots": [
+        "typeRoots": ["node_modules/@types"],
-      "node_modules/@types"
+        "lib": ["es2017", "dom"]
-    ],
-    "lib": [
-      "es2017",
-      "dom"
-    ]
     }
 }

client/tslint.json

@@ -1,121 +1,50 @@
 {
-  "rulesDirectory": [
+    "rulesDirectory": ["node_modules/codelyzer"],
-    "node_modules/codelyzer"
-  ],
     "rules": {
         "arrow-return-shorthand": true,
         "callable-types": true,
         "class-name": true,
-    "comment-format": [
-      true,
-      "check-space"
-    ],
-    "curly": true,
         "deprecation": {
             "severity": "warn"
         },
-    "eofline": true,
         "forin": true,
-    "import-blacklist": [
+        "import-blacklist": [true, "rxjs/Rx"],
-      true,
-      "rxjs/Rx"
-    ],
-    "import-spacing": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
         "interface-over-type-literal": true,
         "label-position": true,
-    "max-line-length": [
-      true,
-      140
-    ],
         "member-access": false,
         "member-ordering": [
             true,
             {
-        "order": [
+                "order": ["static-field", "instance-field", "static-method", "instance-method"]
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
-        ]
             }
         ],
         "no-arg": true,
         "no-bitwise": true,
-    "no-console": [
+        "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
         "no-construct": true,
         "no-debugger": true,
         "no-duplicate-super": true,
         "no-empty": false,
         "no-empty-interface": true,
         "no-eval": true,
-    "no-inferrable-types": [
+        "no-inferrable-types": [true, "ignore-params"],
-      true,
-      "ignore-params"
-    ],
         "no-misused-new": true,
         "no-non-null-assertion": true,
         "no-shadowed-variable": true,
         "no-string-literal": false,
         "no-string-throw": true,
         "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
         "no-unnecessary-initializer": true,
         "no-unused-expression": true,
         "no-use-before-declare": true,
         "no-var-keyword": true,
         "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
         "prefer-const": true,
-    "quotemark": [
-      true,
-      "single"
-    ],
         "radix": true,
-    "semicolon": [
+        "triple-equals": [true, "allow-null-check"],
-      true,
-      "always"
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
         "unified-signatures": true,
         "variable-name": false,
-    "whitespace": [
+        "whitespace": [true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type"],
-      true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator",
-      "check-type"
-    ],
         "no-output-on-prefix": true,
         "use-input-property-decorator": true,
         "use-output-property-decorator": true,