;
+ searchValue = '';
+ phoneBookLocal: Record[] = [];
+ phoneBookObserver = {
+ next: (x: Record[]) => {
+ this.phoneBookLocal = x;
+ },
+ error: (err: String) => console.error('Observer got an error: ' + err),
+ complete: () => console.log('Observer got a complete notification'),
+ };
+
+ constructor(private dialog: MatDialog, private store: AngularFirestore) {
+ this.phoneBook.subscribe(this.phoneBookObserver);
+ }
+
+ newRecord(): void {
+ const dialogRef = this.dialog.open(RecordDialogComponent, {
+ width: '270px',
+ data: {
+ record: {},
+ },
+ });
+ dialogRef
+ .afterClosed()
+ .subscribe((result: RecordDialogResult | undefined) => {
+ if (!result) {
+ return;
+ }
+ this.store.collection('phoneBook').add(result.record);
+ });
+ }
+
+ editRecord(record: Record): void {
+ const dialogRef = this.dialog.open(RecordDialogComponent, {
+ width: '270px',
+ data: {
+ record: {
+ name: record.name,
+ phoneNumber: record.phoneNumber,
+ },
+ },
+ });
+ dialogRef
+ .afterClosed()
+ .subscribe((result: RecordDialogResult | undefined) => {
+ if (!result) {
+ return;
+ }
+ this.store.collection('phoneBook').doc(record.id).update(result.record);
+ });
+ }
+
+ deleteRecord(record: Record): void {
+ this.store.collection('phoneBook').doc(record.id).delete();
+ }
+
+ search(event: Event): void {
+ this.searchValue = (event.target as HTMLInputElement).value;
+ }
+
+ filteredPhoneBook(): Record[] {
+ if (this.searchValue == '') return this.phoneBookLocal;
+
+ return this.phoneBookLocal.filter(
+ (p) =>
+ p.name.includes(this.searchValue) ||
+ p.phoneNumber.includes(this.searchValue)
+ );
+ }
+}
diff --git a/src/app/record-dialog/record-dialog.component.html b/src/app/components/record-dialog/record-dialog.component.html
similarity index 100%
rename from src/app/record-dialog/record-dialog.component.html
rename to src/app/components/record-dialog/record-dialog.component.html
diff --git a/src/app/record-dialog/record-dialog.component.less b/src/app/components/record-dialog/record-dialog.component.less
similarity index 100%
rename from src/app/record-dialog/record-dialog.component.less
rename to src/app/components/record-dialog/record-dialog.component.less
diff --git a/src/app/record-dialog/record-dialog.component.spec.ts b/src/app/components/record-dialog/record-dialog.component.spec.ts
similarity index 100%
rename from src/app/record-dialog/record-dialog.component.spec.ts
rename to src/app/components/record-dialog/record-dialog.component.spec.ts
diff --git a/src/app/record-dialog/record-dialog.component.ts b/src/app/components/record-dialog/record-dialog.component.ts
similarity index 100%
rename from src/app/record-dialog/record-dialog.component.ts
rename to src/app/components/record-dialog/record-dialog.component.ts
diff --git a/src/app/record/record.component.html b/src/app/components/record/record.component.html
similarity index 100%
rename from src/app/record/record.component.html
rename to src/app/components/record/record.component.html
diff --git a/src/app/record/record.component.less b/src/app/components/record/record.component.less
similarity index 100%
rename from src/app/record/record.component.less
rename to src/app/components/record/record.component.less
diff --git a/src/app/record/record.component.spec.ts b/src/app/components/record/record.component.spec.ts
similarity index 100%
rename from src/app/record/record.component.spec.ts
rename to src/app/components/record/record.component.spec.ts
diff --git a/src/app/record/record.component.ts b/src/app/components/record/record.component.ts
similarity index 100%
rename from src/app/record/record.component.ts
rename to src/app/components/record/record.component.ts
diff --git a/src/app/record/record.ts b/src/app/components/record/record.ts
similarity index 100%
rename from src/app/record/record.ts
rename to src/app/components/record/record.ts
diff --git a/src/app/components/sign-in/formData.ts b/src/app/components/sign-in/formData.ts
new file mode 100644
index 0000000..a1327b6
--- /dev/null
+++ b/src/app/components/sign-in/formData.ts
@@ -0,0 +1,4 @@
+export interface formData{
+ email: string;
+ password: string;
+}
\ No newline at end of file
diff --git a/src/app/components/sign-in/sign-in.component.html b/src/app/components/sign-in/sign-in.component.html
new file mode 100644
index 0000000..be9b98b
--- /dev/null
+++ b/src/app/components/sign-in/sign-in.component.html
@@ -0,0 +1,15 @@
+
+
+
+ Email
+
+
+
+
+ Password
+
+
+
+
+
+
diff --git a/src/app/components/sign-in/sign-in.component.less b/src/app/components/sign-in/sign-in.component.less
new file mode 100644
index 0000000..b527626
--- /dev/null
+++ b/src/app/components/sign-in/sign-in.component.less
@@ -0,0 +1,9 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ mat-card > *{
+ display: block;
+ }
\ No newline at end of file
diff --git a/src/app/components/sign-in/sign-in.component.spec.ts b/src/app/components/sign-in/sign-in.component.spec.ts
new file mode 100644
index 0000000..e0d4c2f
--- /dev/null
+++ b/src/app/components/sign-in/sign-in.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignInComponent } from './sign-in.component';
+
+describe('SignInComponent', () => {
+ let component: SignInComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ SignInComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SignInComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/sign-in/sign-in.component.ts b/src/app/components/sign-in/sign-in.component.ts
new file mode 100644
index 0000000..fa4b60e
--- /dev/null
+++ b/src/app/components/sign-in/sign-in.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { AuthService } from '../../shared/services/auth.service';
+import { formData } from './formData';
+
+@Component({
+ selector: 'app-sign-in',
+ templateUrl: './sign-in.component.html',
+ styleUrls: ['./sign-in.component.less']
+})
+export class SignInComponent implements OnInit {
+
+ data: formData = {
+ email: "",
+ password: ""
+ };
+
+
+ constructor(private authService: AuthService) {}
+
+ ngOnInit(): void {
+ }
+
+ login() {
+ this.authService.login(
+ this.data.email,
+ this.data.password
+ );
+ }
+
+}
diff --git a/src/app/shared/guard/auth.guard.spec.ts b/src/app/shared/guard/auth.guard.spec.ts
new file mode 100644
index 0000000..68889d2
--- /dev/null
+++ b/src/app/shared/guard/auth.guard.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+ let guard: AuthGuard;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ guard = TestBed.inject(AuthGuard);
+ });
+
+ it('should be created', () => {
+ expect(guard).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/guard/auth.guard.ts b/src/app/shared/guard/auth.guard.ts
new file mode 100644
index 0000000..448e52e
--- /dev/null
+++ b/src/app/shared/guard/auth.guard.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthService } from '../services/auth.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+
+ constructor(
+ public authService: AuthService,
+ public router: Router
+ ){ }
+
+
+ canActivate(
+ next: ActivatedRouteSnapshot,
+ state: RouterStateSnapshot): Observable | Promise | boolean {
+ if(this.authService.isLoggedIn !== true) {
+ this.router.navigate(['sign-in'])
+ }
+ return true;
+ }
+
+}
diff --git a/src/app/shared/services/auth.service.spec.ts b/src/app/shared/services/auth.service.spec.ts
new file mode 100644
index 0000000..f1251ca
--- /dev/null
+++ b/src/app/shared/services/auth.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+ let service: AuthService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(AuthService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/services/auth.service.ts b/src/app/shared/services/auth.service.ts
new file mode 100644
index 0000000..8acb76a
--- /dev/null
+++ b/src/app/shared/services/auth.service.ts
@@ -0,0 +1,69 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/compat/firestore';
+import { AngularFireAuth } from '@angular/fire/compat/auth';
+import * as firebase from 'firebase/app';
+import { User } from './user';
+
+@Injectable()
+export class AuthService {
+
+ userData: any;
+
+ constructor(
+ public afs: AngularFirestore, // Inject Firestore service
+ public afAuth: AngularFireAuth, // Inject Firebase auth service
+ public router: Router
+ ) {
+ /* Saving user data in localstorage when
+ logged in and setting up null when logged out */
+ this.afAuth.authState.subscribe(user => {
+ if (user) {
+ this.userData = user;
+ localStorage.setItem('user', JSON.stringify(this.userData));
+ JSON.parse(localStorage.getItem('user') as string);
+ } else {
+ localStorage.setItem('user', null as any);
+ JSON.parse(localStorage.getItem('user') as string);
+ }
+ })
+ }
+
+ login(email : string, password : string) {
+ return this.afAuth.signInWithEmailAndPassword(email, password)
+ .then((result) => {
+ this.SetUserData(result.user as User);
+ localStorage.setItem('user', JSON.stringify(result.user));
+ JSON.parse(localStorage.getItem('user') as string);
+ this.router.navigate(['']);
+ }).catch((error) => {
+ window.alert(error.message)
+ })
+ }
+
+ get isLoggedIn(): boolean {
+ const user = JSON.parse(localStorage.getItem('user') as string);
+ return user !== null;
+ }
+
+ SetUserData(user: User) {
+ const userRef: AngularFirestoreDocument = this.afs.doc(`users/${user.uid}`);
+ const userData: User = {
+ uid: user.uid,
+ email: user.email,
+ displayName: user.displayName,
+ photoURL: user.photoURL,
+ emailVerified: user.emailVerified
+ }
+ return userRef.set(userData, {
+ merge: true
+ })
+ }
+
+ logout() {
+ return this.afAuth.signOut().then(() => {
+ localStorage.removeItem('user');
+ this.router.navigate(['sign-in']);
+ })
+ }
+}
\ No newline at end of file
diff --git a/src/app/shared/services/user.ts b/src/app/shared/services/user.ts
new file mode 100644
index 0000000..9c27966
--- /dev/null
+++ b/src/app/shared/services/user.ts
@@ -0,0 +1,7 @@
+export interface User {
+ uid: string;
+ email: string;
+ displayName: string;
+ photoURL: string;
+ emailVerified: boolean;
+ }
\ No newline at end of file