Added login

src/app/animations.ts

@@ -6,6 +6,13 @@ import {
     query, group
 } from '@angular/animations';
 
+export const expandDown = trigger('expandDown', [
+    transition('void => *', [
+        style({transform: 'translateY(-100%)'}),
+        animate('0.5s ease-in-out', style({transform: 'translateY(0%)'}))
+    ])
+]);
+
 export const routerTransition = trigger('routerTransition', [
     transition('* <=> *', [
         /* order */
@@ -22,4 +29,4 @@ export const routerTransition = trigger('routerTransition', [
             ], { optional: true }),
         ])
     ])
-])
+]);

src/app/app-routing.module.ts

@@ -5,13 +5,16 @@ import {WeatherComponent} from './weather/weather.component';
 import {SecurityComponent} from './security/security.component';
 import {SettingsComponent} from './settings/settings.component';
 import {BatteryComponent} from './battery/battery.component';
+import {LoginComponent} from './login/login.component';
+import {LoginGuard} from './login/login.guard';
 
 const routes: Routes = [
-    {path: 'dashboard', component: DashboardComponent},
-    {path: 'battery', component: BatteryComponent},
-    {path: 'weather', component: WeatherComponent},
-    {path: 'security', component: SecurityComponent},
-    {path: 'settings', component: SettingsComponent},
+    {path: 'battery', component: BatteryComponent, canActivate: [LoginGuard]},
+    {path: 'dashboard', component: DashboardComponent, canActivate: [LoginGuard]},
+    {path: 'login', component: LoginComponent, data: {hide: true}},
+    {path: 'security', component: SecurityComponent, canActivate: [LoginGuard]},
+    {path: 'settings', component: SettingsComponent, canActivate: [LoginGuard]},
+    {path: 'weather', component: WeatherComponent, canActivate: [LoginGuard]},
     {path: '**', redirectTo: '/dashboard'}
 ];
 

src/app/app.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar class="bg-primary">
+<mat-toolbar *ngIf="!hide" [@expandDown]="!hide" class="bg-primary">
     <mat-icon *ngIf="mobile" class="mr-2" (click)="open = !open">menu</mat-icon>
     <img src="assets/icon.png" class="mr-2" height="24px" width="auto">
     <span style="font-weight: 500;">Home Front</span>

src/app/app.component.ts

@@ -2,22 +2,30 @@ import {Component} from '@angular/core';
 import {BatteryService} from './battery/battery.service';
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 import {environment} from '../environments/environment';
-import {routerTransition} from './animations';
+import {expandDown, routerTransition} from './animations';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
+import {filter} from 'rxjs/operators';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
-    animations: [routerTransition]
+    animations: [expandDown, routerTransition]
 })
 export class AppComponent {
+    hide = false;
     mobile = true;
     open = false;
     environment = environment;
 
-    constructor(public batteryService: BatteryService, breakpointObserver: BreakpointObserver) {
+    constructor(public batteryService: BatteryService, router: Router, route: ActivatedRoute, breakpointObserver: BreakpointObserver) {
+        router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+            this.hide = !!route.root.firstChild.snapshot.data.hide;
+            if(this.hide) this.open = false;
+        });
+
         breakpointObserver.observe([Breakpoints.Handset]).subscribe(result => {
             this.mobile = result.matches;
-            this.open = !this.mobile;
+            this.open = !this.hide && !this.mobile;
         })
     }
 }

src/app/app.module.ts

@@ -6,9 +6,10 @@ import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {FormsModule} from '@angular/forms';
 import {
+    MatButtonModule,
     MatCardModule,
-    MatDividerModule,
-    MatIconModule,
+    MatDividerModule, MatFormFieldModule,
+    MatIconModule, MatInputModule,
     MatListModule,
     MatSidenavModule,
     MatToolbarModule
@@ -19,6 +20,12 @@ import { WeatherComponent } from './weather/weather.component';
 import { SecurityComponent } from './security/security.component';
 import { SettingsComponent } from './settings/settings.component';
 import {HttpClientModule} from '@angular/common/http';
+import { LoginComponent } from './login/login.component';
+import {environment} from '../environments/environment';
+import * as firebase from 'firebase';
+import {LoginGuard} from './login/login.guard';
+
+export const firebaseApp = firebase.initializeApp(environment.firebase);
 
 @NgModule({
     declarations: [
@@ -27,7 +34,8 @@ import {HttpClientModule} from '@angular/common/http';
         BatteryComponent,
         WeatherComponent,
         SecurityComponent,
-        SettingsComponent
+        SettingsComponent,
+        LoginComponent
     ],
     imports: [
         AppRoutingModule,
@@ -35,14 +43,17 @@ import {HttpClientModule} from '@angular/common/http';
         BrowserAnimationsModule,
         FormsModule,
         HttpClientModule,
+        MatButtonModule,
         MatCardModule,
         MatDividerModule,
+        MatFormFieldModule,
         MatIconModule,
+        MatInputModule,
         MatListModule,
         MatSidenavModule,
         MatToolbarModule,
     ],
-    providers: [],
+    providers: [LoginGuard],
     bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/login/login.component.html

@@ -0,0 +1,10 @@
+<div class="my-5 text-center">
+    <div>
+        <h1 class="d-inline mr-2">Home Front</h1>
+        <span style="color: #b7b7b7">v{{environment.version}}</span>
+    </div>
+    <img src="assets/icon-white.png" class="mt-4" width="275px" height="auto">
+</div>
+<div class="text-center pt-5">
+    <button mat-stroked-button class="mt-5" (click)="login()">Login With Google</button>
+</div>

src/app/login/login.component.ts

@@ -0,0 +1,23 @@
+import {Component, OnInit} from '@angular/core';
+import {environment} from '../../environments/environment';
+import {firebaseApp} from '../app.module';
+import {Router} from '@angular/router';
+import * as firebase from 'firebase';
+
+@Component({
+    selector: 'app-login',
+    templateUrl: './login.component.html'
+})
+export class LoginComponent implements OnInit {
+    environment = environment;
+
+    constructor(private router: Router) { }
+
+    ngOnInit() { }
+
+    async login() {
+        await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL);
+        await firebaseApp.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider());
+        return this.router.navigate(['/dashboard']);
+    }
+}

src/app/login/login.guard.ts

@@ -0,0 +1,15 @@
+import {CanActivate, Router} from '@angular/router';
+import {firebaseApp} from '../app.module';
+import {Injectable} from '@angular/core';
+
+@Injectable()
+export class LoginGuard implements CanActivate {
+
+    constructor(private router: Router) {}
+
+    canActivate() {
+        let valid = !!firebaseApp.auth().currentUser;
+        if(!valid) this.router.navigate(['/login']);
+        return valid;
+    }
+}

src/styles.scss

@@ -10,6 +10,7 @@ html, body {
     width: 100%;
 
     font-family: 'Archivo', sans-serif;
+    background-color: #2F323A;
 }
 
 .mat-list-item {
@@ -56,3 +57,11 @@ html, body {
     justify-content: center;
     vertical-align: middle;
 }
+
+.mat-stroked-button {
+    border-color: #ffffff !important;
+}
+
+.mat-form-field label {
+    color: #ffffff !important;
+}