Some bitchin animations

src/app/animations.ts

@@ -8,8 +8,8 @@ import {
 
 export const expandDown = trigger('expandDown', [
     transition('void => *', [
-        style({transform: 'translateY(-100%)'}),
-        animate('0.5s ease-in-out', style({transform: 'translateY(0%)'}))
+        style({opacity: 0, transform: 'translateY(-100%)'}),
+        animate('0.5s ease-in-out', style({opacity: 1, transform: 'translateY(0%)'}))
     ])
 ]);
 

src/app/app-routing.module.ts

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

src/app/app.component.html

@@ -20,10 +20,12 @@
             <mat-divider></mat-divider>
             <a mat-list-item routerLink="settings" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">settings</mat-icon> Settings</span></a>
             <mat-divider></mat-divider>
+            <a mat-list-item (click)="logout()"><span class="p-3 pl-0 mr-5" style="color: darkred"><mat-icon class="mr-2">logout</mat-icon> Logout</span></a>
+            <mat-divider></mat-divider>
         </mat-nav-list>
     </mat-drawer>
-    <mat-drawer-content class="bg-secondary text-white p-4" (click)="open = (mobile && open) ? false : open">
-        <main [@routerTransition]="o.isActivated ? o.activatedRoute : ''">
+    <mat-drawer-content class="bg-secondary text-white" [ngClass]="{'p-4': !hide}" (click)="open = (mobile && open) ? false : open" style="position: relative">
+        <main class="d-flex flex-column justify-content-center h-100" [@routerTransition]="getState(o)">
             <router-outlet #o="outlet"></router-outlet>
         </main>
     </mat-drawer-content>

src/app/app.component.ts

@@ -6,6 +6,7 @@ import {expandDown, routerTransition} from './animations';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 import {filter} from 'rxjs/operators';
 import {WeatherService} from './weather/weather.service';
+import {firebaseApp} from './app.module';
 
 @Component({
     selector: 'app-root',
@@ -18,7 +19,7 @@ export class AppComponent {
     open = false;
     environment = environment;
 
-    constructor(public batteryService: BatteryService, public weatherService: WeatherService, router: Router, route: ActivatedRoute, breakpointObserver: BreakpointObserver) {
+    constructor(private router: Router, public batteryService: BatteryService, public weatherService: WeatherService, route: ActivatedRoute, breakpointObserver: BreakpointObserver) {
         router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
             this.hide = !!route.root.firstChild.snapshot.data.hide;
             this.open = !this.hide && !this.mobile;
@@ -29,4 +30,14 @@ export class AppComponent {
             this.open = !this.mobile;
         })
     }
+
+    async logout() {
+        await firebaseApp.auth().signOut();
+        return this.router.navigate(['/login'])
+    }
+
+    getState(outlet) {
+        if(!outlet.isActivated) return '';
+        return outlet.activatedRouteData.noAnimation ? '' : outlet.activatedRoute;
+    }
 }

src/app/app.module.ts

@@ -10,7 +10,7 @@ import {
     MatCardModule,
     MatDividerModule, MatFormFieldModule,
     MatIconModule, MatInputModule,
-    MatListModule,
+    MatListModule, MatProgressBarModule,
     MatSidenavModule,
     MatToolbarModule
 } from '@angular/material';
@@ -50,6 +50,7 @@ export const firebaseApp = firebase.initializeApp(environment.firebase);
         MatIconModule,
         MatInputModule,
         MatListModule,
+        MatProgressBarModule,
         MatSidenavModule,
         MatToolbarModule,
         ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),

src/app/login/login.component.html

@@ -1,10 +1,27 @@
-<div class="my-5 text-center">
+<!--
+<div class="align-self-center">
+    <div class="text-center">
         <div>
-        <h1 class="d-inline mr-2">Home Front</h1>
-        <span style="color: #b7b7b7">v{{environment.version}}</span>
+            <h1 class="d-inline text-white">Home Front</h1>
+            <div [@growX]="true" class="d-inline">
+                <span class="pl-2" style="color: #b7b7b7">v{{environment.version}}</span>
             </div>
-    <img src="assets/icon-white.png" class="mt-4" width="275px" height="auto">
+        </div>
+    </div>
+    <div class="mt-5 text-center">
+        <img src="assets/icon-white.png" width="275px" height="auto">
+    </div>
+    <button mat-stroked-button class="mt-5" (click)="login()" [disabled]="loading">Login With Google</button>
 </div>
-<div class="text-center pt-5">
-    <button mat-stroked-button class="mt-5" (click)="login()">Login With Google</button>
+-->
+<div class="center">
+    <div class="text-center">
+        <h1 class="d-inline text-white">Home Front</h1>
+    </div>
+    <div class="mt-5">
+        <img src="assets/icon-white.png" width="275px" height="auto">
+    </div>
+</div>
+<div class="off-center" [@expandDown]="animate">
+    <button mat-stroked-button class="mt-5" style="width: 150px" (click)="login()" [disabled]="loading">Login With Google</button>
 </div>

src/app/login/login.component.ts

@@ -3,12 +3,15 @@ import {environment} from '../../environments/environment';
 import {firebaseApp} from '../app.module';
 import {Router} from '@angular/router';
 import * as firebase from 'firebase';
+import {expandDown} from '../animations';
 
 @Component({
     selector: 'app-login',
-    templateUrl: './login.component.html'
+    templateUrl: './login.component.html',
+    animations: [expandDown]
 })
 export class LoginComponent implements OnInit {
+    animate = false;
     environment = environment;
 
     constructor(private router: Router, private ngZone: NgZone) { }
@@ -16,12 +19,16 @@ export class LoginComponent implements OnInit {
     ngOnInit() {
         firebaseApp.auth().onAuthStateChanged(user => {
             if(!!user) this.ngZone.run(() => this.router.navigate(['/dashboard']));
-        })
+        });
+
+        setTimeout(this.ngZone.run(() => this.animate = true), 1000);
     }
 
     async login() {
         await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL);
         await firebaseApp.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
+        this.ngZone.run(() => {
             return this.router.navigate(['/dashboard']);
+        });
     }
 }

src/app/weather/weather.component.html

@@ -1,5 +1,5 @@
 <div>
-    <div class="d-flex flex-column flex-md-row justify-content-center align-items-center" style="flex-grow: 1;">
+    <div class="d-flex flex-column flex-md-row justify-content-center align-items-center flex-grow-1">
         <i [class]="'wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i>
         <div class="ml-0 ml-md-3">
             <h1 class="my-4 my-md-0 font-weight-bold text-center text-md-left">{{weatherService.temp}} °C</h1>
@@ -7,19 +7,19 @@
         </div>
     </div>
     <div class="my-4 d-flex mx-auto" style="max-width: 450px">
-        <div class="text-center" style="flex-grow: 1">
+        <div class="text-center flex-grow-1">
             <i class="wi wi-fw wi-humidity"></i> {{weatherService.humidity}} %
         </div>
-        <div class="text-center" style="flex-grow: 1">
+        <div class="text-center flex-grow-1">
             <i class="wi wi-fw wi-cloud"></i> {{weatherService.cloudCover}} %
         </div>
-        <div class="text-center" style="flex-grow: 1">
+        <div class="text-center flex-grow-1">
             <i class="wi wi-fw wi-strong-wind"></i> {{weatherService.wind[1]}} KM/H
         </div>
     </div>
     <mat-divider></mat-divider>
     <div class="my-4 d-flex justify-content-center">
-        <div *ngFor="let w of weatherService.forecast" class="d-flex flex-column align-items-center" style="max-width: 75px; flex-grow: 1">
+        <div *ngFor="let w of weatherService.forecast" class="d-flex flex-column align-items-center flex-grow-1" style="max-width: 75px;">
             {{w.day}}
             <i [class]="'my-2 wi wi-fw ' + w.icon" style="font-size: 2rem"></i>
             {{w.temp}} °C

src/index.html

@@ -13,7 +13,16 @@
     <link rel="manifest" href="manifest.json">
 </head>
 <body>
-<app-root></app-root>
-  <noscript>Please enable JavaScript to continue using this application.</noscript>
+<app-root>
+    <div class="center">
+        <div class="text-center">
+            <h1 class="d-inline text-white">Home Front</h1>
+        </div>
+        <div class="mt-5">
+            <img src="assets/icon-white.png" width="275px" height="auto">
+        </div>
+    </div>
+</app-root>
+<noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>

src/main.ts

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

src/styles.scss

@@ -29,6 +29,19 @@ html, body {
     background-color: #2F323A;
 }
 
+.center {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.off-center {
+    position: fixed;
+    left: calc(50% - 75px);
+    top: 75%;
+}
+
 .mat-list-item {
     height: auto !important;
     color: #9CA4B6 !important;
@@ -74,10 +87,26 @@ html, body {
     vertical-align: middle;
 }
 
-.mat-stroked-button {
+.mat-stroked-button:not([disabled]) {
     border-color: #ffffff !important;
 }
 
 .mat-form-field label {
     color: #ffffff !important;
 }
+
+.flex-grow-0 {
+    flex-grow: 0;
+}
+
+.flex-grow-1 {
+    flex-grow: 1;
+}
+
+.flex-grow-2 {
+    flex-grow: 2;
+}
+
+.flex-grow-3 {
+    flex-grow: 3;
+}