Move deploy blur logic to parent component

src/app/dashboard/dashboard.component.html

@@ -1,7 +1,9 @@
 <div class="tfw-grid-main-components">
   <div class="tfw-header"><app-header></app-header></div>
   <div class="tfw-messages"><app-messages></app-messages></div>
-  <div class="tfw-web tao-grid-top-left"><app-login></app-login></div>
+  <div class="tfw-web tao-grid-top-left" [ngClass]="{ 'deploy-blur': deploying }">
+    <app-login></app-login>
+  </div>
   <div class="tfw-webide"><app-webide></app-webide></div>
   <div class="tfw-terminal"><app-terminal></app-terminal></div>
 </div>

src/app/dashboard/dashboard.component.scss

@@ -107,3 +107,8 @@ $layout: (
 
   }
 }
+
+.deploy-blur {
+  filter: blur(3px);
+}
+

src/app/dashboard/dashboard.component.ts

@@ -1,10 +1,28 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {DeploymentNotificationService} from '../services/deployment-notification.service';
+import {Subscription} from 'rxjs/Subscription';
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
-export class DashboardComponent {
-  constructor() {}
+export class DashboardComponent implements OnInit, OnDestroy {
+
+  deploying = false;
+  deploymentNotificationSubscription: Subscription;
+
+  constructor(private deploymentNotificationService: DeploymentNotificationService) {}
+
+  ngOnInit() {
+    this.deploymentNotificationSubscription = this.deploymentNotificationService.deploying.subscribe(
+      (deploying) => this.deploying = deploying
+    );
+  }
+
+  ngOnDestroy() {
+    if (this.deploymentNotificationSubscription) {
+      this.deploymentNotificationSubscription.unsubscribe();
+    }
+  }
 }

src/app/login/login.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="{ 'deploy-blur': deploying }">
+<div>
   <h1>Login page</h1>
   <form #loginForm="ngForm" (submit)="onSubmit()" [hidden]="submitted">
     <div class="form-group">
@@ -31,6 +31,4 @@
       You <em><span *ngIf="!is_admin">don't </span>have</em> admin privileges.
     </p>
   </div>
-
 </div>
-

src/app/login/login.component.scss

@@ -1,3 +0,0 @@
-.deploy-blur {
-  filter: blur(3px);
-}

src/app/login/login.component.ts

@@ -10,17 +10,14 @@ import {Subscription} from 'rxjs/Subscription';
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
-export class LoginComponent implements OnInit, OnDestroy {
+export class LoginComponent {
   model = new Login('', '');
   submitted = false;
   is_admin: boolean;
   logged_in_email: string;
-  deploying = false;
-  deploymentNotificationSubscription: Subscription;
 
   constructor(
-    private http: HttpClient,
-    private deploymentNotificationService: DeploymentNotificationService
+    private http: HttpClient
   ) {}
 
   onSubmit() {
@@ -36,16 +33,4 @@ export class LoginComponent implements OnInit, OnDestroy {
   postLogin(login: Login): Observable<any> {
     return this.http.post<Login>('/login', login);
   }
-
-  ngOnInit() {
-    this.deploymentNotificationSubscription = this.deploymentNotificationService.deploying.subscribe(
-      (deploying) => this.deploying = deploying
-    );
-  }
-
-  ngOnDestroy() {
-    if (this.deploymentNotificationSubscription) {
-      this.deploymentNotificationSubscription.unsubscribe();
-    }
-  }
 }