login and db change

src/app/app.module.ts

@@ -16,9 +16,12 @@ import { AppComponent } from './app.component';
 import { AngularFireModule } from '@angular/fire';
 import { AngularFirestore } from '@angular/fire/firestore';
 import { AngularFirestoreModule } from '@angular/fire/firestore';
+import { AngularFireAuthModule } from '@angular/fire/auth';
 
 import { environment } from '../environments/environment';
 import { ServiceService } from './../config/service.service';
+import { AuthService } from './../config/auth.service';
+import { from } from 'rxjs';
 
 
 
@@ -33,13 +36,15 @@ import { ServiceService } from './../config/service.service';
       AppRoutingModule,
       BrowserAnimationsModule,
       AngularFireModule.initializeApp(environment.firebase),
+      AngularFireAuthModule,
       AngularFirestoreModule
   ],
   providers: [
     StatusBar,
     SplashScreen,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
-    ServiceService
+    ServiceService,
+    AuthService
   ],
   bootstrap: [AppComponent]
 })

src/app/catagory/catagory.page.html

 <div class="nav_header">
-    <button class="nav_btn nav_back floatLeft">
+    <button class="nav_btn nav_back floatLeft" (click)="goBack()">
     <img src="../assets/Group22_2.png">
   </button>
     <div class="nav_title floatLeft">

src/app/catagory/catagory.page.ts

 import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-catagory',
@@ -7,9 +9,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CatagoryPage implements OnInit {
 
-  constructor() { }
+  constructor(
+    public router: Router,
+    public location: Location
+  ) { }
 
   ngOnInit() {
   }
 
+  goToPage(path, data = null) {
+    this.router.navigateByUrl(path, { queryParams: data });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
 }

src/app/home/home.page.html

@@ -24,21 +24,21 @@
             </div>
             <ion-slides pager="true">
                 <ion-slide>
-                    <div class="banner_slide" (click)="goToPage('productlist')">
+                    <div class="banner_slide" (click)="goToPage('storelist')">
                         <h5>Lulu Fashion</h5>
                         <p>Women Fashion</p>
                     </div>
                     <img src="../assets/portrait-smiling-woman-with-shopping-bags-smartphone_1262-14313_2.png">
                 </ion-slide>
                 <ion-slide>
-                    <div class="banner_slide" (click)="goToPage('productlist')">
+                    <div class="banner_slide" (click)="goToPage('storelist')">
                         <h5>Lulu Fashion</h5>
                         <p>Women Fashion</p>
                     </div>
                     <img src="../assets/portrait-smiling-woman-with-shopping-bags-smartphone_1262-14313_2.png">
                 </ion-slide>
                 <ion-slide>
-                    <div class="banner_slide" (click)="goToPage('productlist')">
+                    <div class="banner_slide" (click)="goToPage('storelist')">
                         <h5>Lulu Fashion</h5>
                         <p>Women Fashion</p>
                     </div>

src/app/home/home.page.ts

@@ -23,8 +23,9 @@ export class HomePage implements OnInit {
   isShow = false;
 
   slideOpts = {
-    slidesPerView:1.5
-  }
+    slidesPerView: 1.5
+  };
+
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -47,5 +48,4 @@ export class HomePage implements OnInit {
     this.isShow = !this.isShow;
   }
 
- 
 }

src/app/login/login.page.html

@@ -15,13 +15,13 @@
         </div>
         <div class="form_div">
             <div class="row">
-                <input class="" type="text" placeholder="User Name/ Email">
+                <input class="" type="text" placeholder="User Name/ Email" #userName required>
             </div>
             <div class="row">
-                <input class="" type="password" placeholder="Password">
+                <input class="" type="password" placeholder="Password" #userPassword required>
             </div>
             <div class="row">
-                <button class="login_btn" (click)="goToPage('home')">LOGIN</button>
+                <button class="login_btn" (click)="authService.SignIn(userName.value, userPassword.value)">LOGIN</button>
             </div>
             <div class="row">
                 <hr>

src/app/login/login.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { async } from "q";
+import { AuthService } from './../../config/auth.service';
+import { async } from 'q';
 
 @Component({
   selector: 'app-login',
@@ -9,7 +10,11 @@ import { async } from "q";
 })
 export class LoginPage implements OnInit {
 
-  constructor(private router: Router, private route: ActivatedRoute) { }
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    public authService: AuthService
+    ) { }
 
   ngOnInit() {
   }

src/app/productlist/productlist.page.ts

@@ -44,8 +44,7 @@ export class ProductlistPage implements OnInit {
   }
 
   goBack() {
-    // this.location.back();
-    window.history.back();
+    this.location.back();
   }
 
   gridToggle(){

src/app/storelist/storelist.page.html

 <div class="nav_header">
-    <button class="nav_btn nav_back floatLeft">
+    <button class="nav_btn nav_back floatLeft" (click)="goBack()">
     </button>
     <div class="nav_title floatLeft">
         <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..."> </div>
@@ -15,7 +15,7 @@
         <div class="featured_slider">
             <ion-slides pager="false" [options]="slideOpts">
                 <ion-slide>
-                    <div class="feature_product" (click)="goToPage('productlist')">
+                    <div class="feature_product" (click)="goToPage('catagory')">
                         <img src="../assets/videoblocks-woman-using-phone-purchase-in-cool-sunglasses-and-black-dress-holding-black-shopping-bag-isolated-on-dark-background-in-black-friday-holid@3x.png">
                         <div class="feature_overlay">
                             <h5>Flames Fashion</h5>
@@ -24,7 +24,7 @@
                     </div>
                 </ion-slide>
                 <ion-slide>
-                    <div class="feature_product" (click)="goToPage('productlist')">
+                    <div class="feature_product" (click)="goToPage('catagory')">
                         <img src="../assets/[email protected]">
                         <div class="feature_overlay">
                             <h5>Flames Fashion</h5>
@@ -33,7 +33,7 @@
                     </div>
                 </ion-slide>
                 <ion-slide>
-                    <div class="feature_product" (click)="goToPage('productlist')">
+                    <div class="feature_product" (click)="goToPage('catagory')">
                         <img src="../assets/videoblocks-woman-using-phone-purchase-in-cool-sunglasses-and-black-dress-holding-black-shopping-bag-isolated-on-dark-background-in-black-friday-holid@3x.png">
                         <div class="feature_overlay">
                             <h5>Flames Fashion</h5>
@@ -48,7 +48,7 @@
         </div>
         <div class="nearby_shop_list">
             <ul>
-                <li (click)="goToPage('productlist')">
+                <li (click)="goToPage('catagory')">
                     <div class="nearby_image">
                         <img src="../assets/[email protected]">
                     </div>
@@ -64,7 +64,7 @@
                     </div>
                     <div class="clear"></div>
                 </li>
-                <li (click)="goToPage('productlist')">
+                <li (click)="goToPage('catagory')">
                     <div class="nearby_image">
                         <img src="../assets/[email protected]">
                     </div>
@@ -80,7 +80,7 @@
                     </div>
                     <div class="clear"></div>
                 </li>
-                <li (click)="goToPage('productlist')">
+                <li (click)="goToPage('catagory')">
                     <div class="nearby_image">
                         <img src="../assets/[email protected]">
                     </div>
@@ -97,7 +97,7 @@
                     <div class="clear"></div>
                 </li>
 
-                <li (click)="goToPage('productlist')">
+                <li (click)="goToPage('catagory')">
                     <div class="nearby_image">
                         <img src="../assets/2193bb91-3be9-4de9-96f4-4ce7aab8547e1558436499234-RARE-Women-Black-Printed-A-Line-Dress-6731558436495088-1@3x.png">
                     </div>

src/app/storelist/storelist.page.ts

 import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-storelist',
@@ -9,11 +11,23 @@ export class StorelistPage implements OnInit {
 
   slideOpts = {
     slidesPerView: 1.5
-  }
+  };
 
-  constructor() { }
+  constructor(
+    public router: Router,
+    public location: Location
+  ) { }
 
   ngOnInit() {
   }
 
+  goToPage(path, data = null) {
+    this.router.navigateByUrl(path, { queryParams: data });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
 }

src/config/auth.service.ts

+import { Injectable } from '@angular/core';
+import { User } from './services/user';
+import { auth } from 'firebase/app';
+import { Router, ActivatedRoute } from '@angular/router';
+import { AngularFireAuth } from '@angular/fire/auth';
+import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
+import { ServiceService } from './../config/service.service';
+import { from } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  userData: any;
+
+  constructor(
+    public afs: AngularFirestore,
+    public afAuth: AngularFireAuth,
+    private router: Router,
+    private service: ServiceService
+  ) {
+      this.afAuth.authState.subscribe(user => {
+        if (user) {
+          this.userData = user;
+          this.service.set('user', JSON.stringify(this.userData));
+        } else {
+          this.service.set('user', null);
+          JSON.parse(localStorage.getItem('user'));
+        }
+      });
+  }
+
+  public async SignIn(email: string, password: string) {
+    return this.afAuth.auth.signInWithEmailAndPassword(email, password).then((result) => {
+      console.log('success');
+      this.router.navigateByUrl('home');
+      document.body.scrollTop = document.documentElement.scrollTop = 0;
+      this.SetUserData(result.user);
+    }).catch((error) => {
+      window.alert(error.message);
+    });
+  }
+
+  get isLoggedIn(): boolean {
+    const user = JSON.parse(localStorage.getItem('user'));
+    return (user !== null && user.emailVerified !== false) ? true : false;
+  }
+
+  SetUserData(user: any) {
+
+    const userRef: AngularFirestoreDocument<any> = this.afs.doc(`customers/${user.uid}`);
+    userRef.valueChanges().subscribe((value) => {
+      const userData: User = {
+        uid: value.uid,
+        emailId: value.emailId,
+        name: value.name,
+        profilePhoto: value.profilePhoto,
+        emailVerified: value.emailVerified,
+        phone: value.phone,
+        phoneVerified: value.phoneVerified,
+        status: value.status,
+        currency: value.currency
+        };
+      console.log(userData);
+    });
+  }
+
+  public async SignOut() {
+    return this.afAuth.auth.signOut().then(() => {
+      this.service.remove('user');
+      console.log('logout');
+    });
+  }
+
+
+}

src/config/services/user.ts

+export interface User {
+    uid: string;
+    emailId: string;
+    name: string;
+    phone: string;
+    phoneVerified: boolean;
+    profilePhoto: string;
+    emailVerified: boolean;
+    status: boolean;
+    currency: {
+        currId: string;
+        currName: string;
+        symbol: string
+    };
+}