Added login/logout system

src/app/app.component.html

@@ -22,7 +22,13 @@
                     <a class="nav-link text-dark" [routerLink]="['/formulaManager']">Formula Manager</a>
                 </li>
             </ul>
-            <button mat-stroked-button class="ml-auto" color="primary" data-toggle="modal" data-target="#loginModal">Login</button>
+            <div class="ml-auto">
+                <button *ngIf="!user" mat-stroked-button color="primary" (click)="login()">Login</button>
+                <div *ngIf="user">
+                    <span class="text-muted mr-3">{{user.email}}</span>
+                    <button mat-stroked-button color="accent" (click)="afAuth.auth.signOut()">Logout</button>
+                </div>
+            </div>
         </div>
     </div>
 </nav>
@@ -79,26 +85,3 @@
         </div>
     </div>
 </footer>
-
-<!-- Login Modal -->
-<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">Login</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <div id="incorrectAlert" class="alert alert-danger collapse" role="alert">Username or password is incorrect.</div>
-                <input id="username" class="form-control mb-3" placeholder="Username">
-                <input id="password" class="form-control" type="password" placeholder="Password">
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                <button id="loginBtn" type="button" class="btn btn-primary">Login</button>
-            </div>
-        </div>
-    </div>
-</div>

src/app/app.component.ts

@@ -3,6 +3,9 @@ import {Router, NavigationEnd} from '@angular/router';
 import {ElectronService} from 'ngx-electron';
 import {AngularFirestore} from 'angularfire2/firestore';
 import {filter} from 'rxjs/operators';
+import {MatDialog} from '../../node_modules/@angular/material';
+import {LoginComponent} from './login/login.component';
+import {AngularFireAuth} from '../../node_modules/angularfire2/auth';
 
 @Component({
   selector: 'app-root',
@@ -10,8 +13,15 @@ import {filter} from 'rxjs/operators';
 })
 export class AppComponent implements OnInit {
   categories;
+  user;
 
-  constructor(private router: Router, private db: AngularFirestore, public electron: ElectronService) {
+  constructor(
+    private router: Router,
+    private db: AngularFirestore,
+    private dialog: MatDialog,
+    public afAuth: AngularFireAuth,
+    public electron: ElectronService
+  ) {
     this.categories = this.db.collection('categories').valueChanges();
   }
 
@@ -29,5 +39,13 @@ export class AppComponent implements OnInit {
     if (this.electron.isElectronApp) {
       this.router.navigate(['/formulaManager']);
     }
+
+    this.afAuth.user.subscribe(user => {
+      this.user = user;
+    });
+  }
+
+  login() {
+    this.dialog.open(LoginComponent);
   }
 }

src/app/app.module.ts

@@ -18,6 +18,8 @@ import {AboutComponent} from './about/about.component';
 import {CategoriesComponent} from './store/categories.component';
 import {AngularFireStorageModule} from 'angularfire2/storage';
 import {BreadcrumbService} from './store/breadcrumb.service';
+import {LoginComponent} from './login/login.component';
+import {AngularFireAuthModule} from 'angularfire2/auth';
 
 @NgModule({
   declarations: [
@@ -27,11 +29,13 @@ import {BreadcrumbService} from './store/breadcrumb.service';
     ConvertToGPipe,
     FormulaManagerComponent,
     HomeComponent,
+    LoginComponent,
     ScalePipe,
     AboutComponent
   ],
   imports: [
     AngularMaterialModule,
+    AngularFireAuthModule,
     AngularFireModule.initializeApp(environment.firebase),
     AngularFirestoreModule,
     AngularFireStorageModule,
@@ -50,6 +54,7 @@ import {BreadcrumbService} from './store/breadcrumb.service';
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
   ],
   providers: [BreadcrumbService],
+  entryComponents: [LoginComponent],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/login/login.component.html

@@ -0,0 +1,14 @@
+<mat-dialog-content>
+    <h3 mat-dialog-title>Login</h3>
+    <form id="loginForm">
+        <mat-form-field class="w-100">
+            <input matInput placeholder="Email" name="email" [(ngModel)]="email">
+        </mat-form-field>
+        <mat-form-field class="w-100">
+            <input matInput placeholder="Password" name="password" type="password" [(ngModel)]="password">
+        </mat-form-field>
+    </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-raised-button type="submit" form="loginForm" color="primary" (click)="login()">Login</button>
+</mat-dialog-actions>

src/app/login/login.component.ts

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {AngularFireAuth} from 'angularfire2/auth';
+import {MatDialog} from '../../../node_modules/@angular/material';
+
+@Component({
+  selector: 'login',
+  templateUrl: 'login.component.html'
+})
+export class LoginComponent {
+  email: string;
+  password: string;
+
+  constructor(private dialog: MatDialog, private afAuth: AngularFireAuth) {}
+
+  login() {
+    this.afAuth.auth.signInWithEmailAndPassword(this.email, this.password).then(user => {
+      if (user) this.dialog.closeAll();
+    });
+  }
+}