Added new background & login

src/app/app.module.ts

@@ -9,7 +9,6 @@ import {CalibrateComponent} from "./components/calibrate/calibrate.component";
 import {PermissionsComponent} from "./components/permissions/permissions.component";
 import {ToolbarComponent} from "./components/toolbar/toolbar.component";
 import {PaletteComponent} from "./components/palette/palette.component"
-import {AnimatedBackgroundComponent} from "./components/animatedBackground/animatedBackground.component";
 import {ColorPickerDialogComponent} from "./components/colorPickerDialog/colorPickerDialog.component";
 import {DimensionsDialogComponent} from "./components/dimensionsDialog/dimensionsDialog.component";
 import {EditSymbolComponent} from "./components/editSymbol/editSymbol.component";
@@ -21,10 +20,11 @@ import {ClickOutsideModule} from "ng-click-outside";
 import {ColorPickerModule} from "ngx-color-picker";
 import {FormsModule} from "@angular/forms";
 import {ServiceWorkerModule} from "@angular/service-worker";
+import {StarrySkyComponent} from "./components/starrySky/starrySky.component";
+import {AngularFireAuthModule} from "@angular/fire/auth";
 
 @NgModule({
     declarations: [
-        AnimatedBackgroundComponent,
         AppComponent,
         CalibrateComponent,
         ColorPickerDialogComponent,
@@ -34,11 +34,13 @@ import {ServiceWorkerModule} from "@angular/service-worker";
         MapComponent,
         PaletteComponent,
         PermissionsComponent,
+        StarrySkyComponent,
         ToolbarComponent
     ],
     imports: [
         AngularFireModule.initializeApp(environment.firebaseConfig),
         AngularFirestoreModule.enablePersistence(),
+        AngularFireAuthModule,
         AppRouting,
         BrowserAnimationsModule,
         BrowserModule,

src/app/components/animatedBackground/animatedBackground.component.ts

@@ -1,16 +0,0 @@
-import {Component} from "@angular/core";
-import {fadeOut} from "../../animations";
-
-@Component({
-    selector: 'animated-background',
-    templateUrl: 'animatedBackground.component.html',
-    styleUrls: ['animatedBackground.component.scss'],
-    animations: [fadeOut]
-})
-export class AnimatedBackgroundComponent {
-    splash = true;
-
-    constructor() {
-        setTimeout(() => this.splash = false, 1000);
-    }
-}

src/app/components/starrySky/starrySky.component.html

@@ -0,0 +1,6 @@
+<div class="sky">
+    <div class="shooting-star"></div>
+    <div class="stars foreground"></div>
+    <div class="stars midground"></div>
+    <div class="stars background"></div>
+</div>

src/app/components/starrySky/starrySky.component.scss

@@ -0,0 +1,75 @@
+@function stars ($n) {
+  $value: '#{random(2000)}px #{random(2000)}px #FFF';
+  @for $i from 2 through $n {
+    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF';
+  }
+  @return unquote($value)
+}
+
+.sky {
+  height: 100%;
+  width: 100%;
+  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
+  overflow: hidden
+}
+
+.shooting-star {
+  position: absolute;
+  top: 110%;
+  width: 30px;
+  height: 3px;
+  border-radius: 50%;
+  background-color: white;
+  animation: shoot 20s linear infinite;
+  animation-delay: 1s;
+  transform: rotate(-30deg);
+}
+
+.stars {
+  background: transparent;
+  border-radius: 50%;
+
+  &.foreground {
+    width: 1px;
+    height: 1px;
+    box-shadow: stars(1000);
+    animation: spin 200s linear infinite;
+  }
+
+  &.midground {
+    width: 2px;
+    height: 2px;
+    box-shadow: stars(750);
+    animation: spin 300s linear infinite;
+  }
+
+  &.background {
+    width: 4px;
+    height: 4px;
+    box-shadow: stars(500);
+    animation: spin 350s linear infinite;
+  }
+}
+
+@keyframes shoot{
+  0%{
+    top: -10%;
+    left: 80%;
+  }
+  5%{
+    top: 110%;
+    left: 20%;
+  }
+  100% {
+    top: 110%;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-2000px);
+  }
+}

src/app/components/starrySky/starrySky.component.ts

@@ -0,0 +1,8 @@
+import {Component} from "@angular/core";
+
+@Component({
+    selector: 'stary-sky',
+    templateUrl: 'starrySky.component.html',
+    styleUrls: ['starrySky.component.scss'],
+})
+export class StarrySkyComponent { }

src/app/models/user.ts

@@ -0,0 +1,6 @@
+import {User as FirebaseUser} from "firebase"
+import {AngularFirestoreDocument} from '@angular/fire/firestore';
+
+export interface User extends FirebaseUser {
+    ref?: AngularFirestoreDocument;
+}

src/app/services/auth.service.ts

@@ -0,0 +1,47 @@
+import {Injectable} from "@angular/core";
+import {BehaviorSubject, from} from "rxjs";
+import {AngularFirestore} from "@angular/fire/firestore";
+import {AngularFireAuth} from "@angular/fire/auth";
+import {auth} from 'firebase';
+import {Router} from "@angular/router";
+import {flatMap, map, skip} from 'rxjs/operators';
+import {User} from '../models/user';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthService {
+    readonly collection = 'Users';
+
+    authenticated = false;
+    user = new BehaviorSubject<User>(null);
+
+    constructor(private afAuth: AngularFireAuth, private router: Router, private db: AngularFirestore) {
+        this.user.subscribe(user => {
+            console.log(user, user instanceof Object);
+            this.authenticated = user instanceof Object
+        });
+        this.afAuth.user.pipe(
+            flatMap((user: any) => {
+                if(!user) return from([false]);
+                let ref = this.db.collection(this.collection).doc(user.uid);
+                return ref.valueChanges().pipe(map(dbUser => Object.assign({ref: ref}, user, dbUser)))
+            })
+        ).subscribe(user => this.user.next(<User>user));
+    }
+
+    async loginWithGoogle() {
+        this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
+        return this.user.pipe(skip(1));
+    }
+
+    async loginWithFacebook() {
+        this.afAuth.auth.signInWithPopup(new auth.FacebookAuthProvider());
+        return this.user.pipe(skip(1));
+    }
+
+    async logout() {
+        await this.afAuth.auth.signOut();
+        return this.router.navigate(['/']);
+    }
+}

src/app/views/home/home.component.html

@@ -1,8 +1,23 @@
-<animated-background></animated-background>
+<stary-sky></stary-sky>
 <div class="badge">
     <img src="assets/images/logo.png" width="200px" height="auto">
 </div>
 <div class="controls">
+    <div *ngIf="!authService.authenticated">
+        <!--<button mat-flat-button class="w-100 text-white mb-3" style="background-color: #3b5998" (click)="authService.loginWithFacebook()">
+            <img class="mr-2" src="/assets/images/facebook.png" height="18px" width="auto"> Facebook
+        </button>-->
+        <button mat-flat-button class="w-100 mb-1" style="background-color: #efe8e8" (click)="authService.loginWithGoogle()">
+            <img class="mr-2" src="/assets/images/google.png" height="18px" width="auto"> Google
+        </button>
+    </div>
+    <button *ngIf="authService.authenticated" mat-flat-button class="w-100 mb-1" style="background-color: #efe8e8" (click)="authService.logout()">
+        <mat-icon>logout</mat-icon> Logout
+    </button>
+    <hr style="background-color: #FFFFFF90">
+    <button *ngIf="authService.authenticated" mat-flat-button class="w-100 text-white mb-3" style="background-color: #dd0330" (click)="new()">
+        <mat-icon>history</mat-icon> Recent
+    </button>
     <button mat-flat-button class="w-100 text-white" style="background-color: #dd0330" (click)="new()">
         <mat-icon>add</mat-icon> New Map
     </button>
@@ -16,4 +31,6 @@
         </form>
     </div>
 </div>
-<span class="credits text-white">Created By <a href="https://zakscode.com" target="_blank">Zak Timson</a></span>
+<span class="credits text-white">
+    Created By <a href="https://zakscode.com" target="_blank">Zak Timson</a>
+</span>

src/app/views/home/home.component.ts

@@ -1,6 +1,7 @@
 import {Component} from "@angular/core";
 import {Router} from "@angular/router";
 import {SyncService} from "../../services/sync.service";
+import {AuthService} from "../../services/auth.service";
 
 const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 
@@ -13,7 +14,7 @@ export class HomeComponent {
     code: string = '';
     valid = false;
 
-    constructor(private syncService: SyncService, private router: Router) { }
+    constructor(public authService: AuthService, private syncService: SyncService, private router: Router) { }
 
     async new() {
         let mapCode: string;