add guard and stuff

package.json

@@ -22,7 +22,7 @@
     "@angular/router": "~7.0.0",
     "apollo-angular": "^1.5.0",
     "core-js": "^2.5.4",
-    "rxjs": "~6.3.3",
+    "rxjs": "6.2.2",
     "zone.js": "~0.8.26",
     "apollo-angular-link-http": "^1.3.1",
     "apollo-link": "^1.2.0",

src/commons/components/cat-teaser/cat-teaser.component.scss

@@ -2,6 +2,7 @@
 
 @import '../../commons';
 @import '../supporter-area/supporter-area.component';
+@import '../oops-component/oops-component.component';
 
 // teaser styles
 .teaser {

src/commons/components/cat-teaser/cat-teaser.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy, AfterViewInit, ViewChildren, ElementRef,
 import { Apollo } from 'apollo-angular';
 import { Subscription } from 'rxjs';
 import gql from 'graphql-tag';
-import { AuthenticationService } from '../../services/authentication/authentication.service';
+
 // We use the gql tag to parse our query string into a query document
 const AllKitten = gql`
   query AllKitten {
@@ -20,7 +20,7 @@ const AllKitten = gql`
 export class CatTeaserComponent implements OnInit, OnDestroy, AfterViewInit {
   @ViewChildren('lazyKitten') cats: QueryList<ElementRef<HTMLUListElement>>;
   loading: boolean;
-  kittens: any[];
+  kittens: Kitty[];
   config: any = {
     // Root margin determines distance from viewport in the Y axis
     rootMargin: '20px 0px',
@@ -33,9 +33,7 @@ export class CatTeaserComponent implements OnInit, OnDestroy, AfterViewInit {
   private catsSubscription: Subscription;
   constructor(
     private apollo: Apollo,
-    private renderer: Renderer2,
-    private auth: AuthenticationService
-
+    private renderer: Renderer2
   ) {}
 
   lazyLoadCats(): void {
@@ -53,7 +51,7 @@ export class CatTeaserComponent implements OnInit, OnDestroy, AfterViewInit {
 
   preloadCats(entry): void {
     const srcValue = entry.getAttribute('data-attr');
-    console.log(srcValue);
+    console.log(srcValue + ' pic of cat');
     const image = entry.firstChild as HTMLImageElement;
     image.src = srcValue;
   }
@@ -67,7 +65,6 @@ export class CatTeaserComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngOnInit(): void {
-    this.auth.setToken();
     this.querySubscription = this.apollo.watchQuery<any>({
       query: AllKitten
     })
@@ -77,7 +74,6 @@ export class CatTeaserComponent implements OnInit, OnDestroy, AfterViewInit {
       this.kittens = data.kittens;
     });
   }
-
   ngAfterViewInit(): void {
     this.watchCats();
     this.catsSubscription = this.cats.changes.subscribe(_ =>

src/commons/components/oops-component/oops-component.component.html

@@ -1,3 +1,6 @@
-<p>
-  Ooops, you're not a supporter! Come back after you've shared your cat coin!
-</p>
+<div class="notification__base">
+    <p class="notification__txt notification__txt--oops">
+        Ooops, you're not a supporter! Come back after you've shared your cat coin!
+    </p>
+    <img src="../../../assets/notification/sadcat.gif" class="notification__img" alt="sad cat"/>
+</div>

src/commons/components/oops-component/oops-component.component.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+
+// notification styles
+.notification {
+  &__base {
+    text-align: center;
+    width: 600px;
+    margin: 0 auto;
+  }
+  &__txt {
+    font-size: 30px;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+
+    &--supporter {
+      color: #33cc33;
+    }
+
+    &--oops {
+      color: #cc0000;
+    }
+  }
+}

src/commons/components/supporter-area/supporter-area.component.html

@@ -1,3 +1,6 @@
-<p>
-  Yay! Welcome back, dear cat supporter!
-</p>
+<div class="notification__base">
+    <p class="notification__txt notification__txt--supporter">
+        Yay! Welcome back, dear cat supporter!
+    </p>
+    <img src="../../../assets/notification/tenor.gif" class="notification__img" alt="sad cat"/>
+</div>

src/commons/components/supporter-area/supporter-area.component.scss

@@ -9,5 +9,29 @@
   &__link {
     display: block;
     padding-top: 30px;
+    font-size: 30px;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    color: #cc0000;
   }
-}
+}
+
+// notification styles
+.notification {
+  &__base {
+    text-align: center;
+    width: 600px;
+    margin: 0 auto;
+  }
+  &__txt {
+    font-size: 30px;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+
+    &--supporter {
+      color: #33cc33;
+    }
+
+    &--oops {
+      color: #cc0000;
+    }
+  }
+}

src/commons/guards/authentication.guard.ts

@@ -11,13 +11,13 @@ export class AuthenticationGuard implements CanActivate {
         private router: Router
     ) { }
 
-    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>|Promise<boolean>|boolean {
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
       const canIt: boolean = this.authenticationService.isAuthenticated();
-      console.log(canIt + ' this is the value of canit');
-      // is actually authenticated?
-      if (canIt === true) {
-        this.router.navigate(['/supporter-area']);
-        return ;
+
+      console.log(canIt + ' this is the value of canIt - can it access the supporters zone?');
+
+      if (canIt) {
+        return true;
       } 
       this.router.navigate(['/oops']);
       return false;

src/commons/interceptors/commonReq.interceptor.ts

@@ -32,7 +32,6 @@ export class CommonReqInterceptor implements HttpInterceptor {
               }
           }
           return event;
-      }));
-
+      }));   
   }
-}
+}

src/commons/models/cats.model.ts

@@ -0,0 +1,4 @@
+interface Kitty {
+  id: string;
+  name: string;
+}