AngularFireAuth

Accessing user login

import { Component, Input } from '@angular/core';
import { App, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { TabsPage } from '../../tabs/tabs';
import { LoginPage } from '../../login/login';
import { RegisterPage } from '../../register/register';
import { EditPage } from '../edit/edit';
import { ReviewsPage } from '../reviews/reviews';
import { AdditionalDetailsPage } from '../additional-details/additional-details';
import { auditTrail } from 'angularfire2/database';
import { ProfileRef } from '../../../models/profile';
import { PhotoIdentity } from '../../../models/photoIdentity';
import { ProfilePhoto } from '../../../models/profilePhoto';
import {} from '../pages/register/reigister';
import * as firebase from 'firebase';

@Component({
  selector: 'page-view',
  templateUrl: 'view.html',
})

export class ViewPage {

  displayName;
  id: string;
  userCheck: boolean;
  email;
  photoURL;
  profileRef = {} as ProfileRef;
  selectedFile: File;
  photoIdentity = {} as PhotoIdentity;
  profilePhoto = {} as ProfilePhoto;

  // private baseProfilePath: string = '/profileImages';
  private basePath: string = '/photoIdentities';

  constructor(public auth: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams, private app: App, private db: AngularFireDatabase) {
    

    if (auth.auth.currentUser !== null) {
      this.userCheck = true;
      this.id = auth.auth.currentUser.uid;
      this.displayName = auth.auth.currentUser.displayName;
      this.email = auth.auth.currentUser.email;
      this.photoURL = auth.auth.currentUser.photoURL || 'assets/images/no-photo.jpg';
    }else{
      this.userCheck =false;
    }
    console.log("userCheck", this.userCheck);
  }

  ionViewDidLoad() {
    if (this.auth.auth.currentUser !== null) {
      this.db.object('/profiles/' + this.auth.auth.currentUser.uid).valueChanges().subscribe(data => {
        this.profileRef = <ProfileRef>data;

      },
      err => console.log("error in retrieving user from profile : " + err),
        () => console.log("user profile key retrieve successful"));
    }
  }

  login() {
    this.app.getRootNav().setRoot(LoginPage);
  }

  register() {
    this.app.getRootNav().setRoot(RegisterPage);
  }

  logout() {
    this.auth.auth.signOut();
    this.app.getRootNav().setRoot(TabsPage);
  }

  editProfile(id) {
    this.navCtrl.push(EditPage, { userId: id });
  }

  addAdditionalInfo(id) {
    this.navCtrl.push(AdditionalDetailsPage, { userId: id });
  }

  //Edit Profile Picture
  detectProfileFile(event) {
    this.selectedFile = event.target.files[0];
    let file = this.selectedFile;
    this.profilePhoto = new ProfilePhoto(file);

    let storageRef = firebase.storage().ref();

    let profilePhotoTask = storageRef.child(`/profileImages/${this.id}`).put(this.profilePhoto.file);

    profilePhotoTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot) => {
        // documentId in progress
        //   documentId.progress = (documentIdTask.snapshot.bytesTransferred / documentIdTask.snapshot.totalBytes) * 100;
      },
      (error) => {
        // documentId failed
        console.log(error)
      },
      () => {
        // documentId success
        this.auth.auth.currentUser.updateProfile({
          displayName: this.auth.auth.currentUser.displayName,
          photoURL: profilePhotoTask.snapshot.downloadURL
        });
        //this.saveFileData(this.photoIdentity);
        console.log(" Profile Upload");
      }
    );


  }

  detectGovernmentIdFile(event) {
    this.selectedFile = event.target.files[0];
    let file = this.selectedFile;
    this.photoIdentity = new PhotoIdentity(file);

    let storageRef = firebase.storage().ref();

    let photoIdentityTask = storageRef.child(`${this.basePath}/${this.id}`).put(this.photoIdentity.file);

    photoIdentityTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot) => {
        // documentId in progress
        //   documentId.progress = (documentIdTask.snapshot.bytesTransferred / documentIdTask.snapshot.totalBytes) * 100;
      },
      (error) => {
        // documentId failed
        console.log(error)
      },
      () => {
        // documentId success
        this.db.object(`/profiles/` + this.id).update({ photoIdentity: photoIdentityTask.snapshot.downloadURL });
        //this.saveFileData(this.photoIdentity);
        console.log("Document Upload");
      }
    );
  }

  gotoReviews() {
    this.navCtrl.push(ReviewsPage, { userId: this.id });
  }

}

 

Accessing login template

<ion-header>
  <ion-navbar>
    <ion-title>Profile</ion-title>
    <ion-buttons left>
      <button ion-button menuToggle="profileMenu">
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <div *ngIf=userCheck>
    <ion-card padding>
      <ion-card-content>
        <img src={{photoURL}}/>
        <br/>
        <label for="file">Edit Profile Photo</label>
        <input type="file" (change)="detectProfileFile($event)">
      </ion-card-content>
      <ion-item>
        <ion-icon ion-icon ios="ios-mail" md="md-mail" color="primary" item-left></ion-icon>
        <p>{{email}}</p>
      </ion-item>
    </ion-card>
    <ion-card>
      <ion-item color="primary">Profile Information
        <button ion-button outline (click)="editProfile(id)" class="editProfileBtn" right>Edit Profile</button>
      </ion-item>
      <ion-item>
        <p>
          <b>User Name : </b>{{profileRef.firstName}} {{profileRef.lastName}}</p>
      </ion-item>
      <ion-item>
        <p>
          <b>DOB : </b> {{profileRef.dob}}</p>
      </ion-item>
      <ion-item>
        <p>
          <b>Gender : </b>{{profileRef.gender}}</p>
      </ion-item>
      <ion-item>
        <p>
          <b>Location : </b>{{profileRef.location}}</p>
      </ion-item>
      <ion-item>
        <p>
          <b>School : </b>{{profileRef.school}}</p>
      </ion-item>
      <ion-item>
        <p>
          <b>Language : </b>{{profileRef.language}}</p>
      </ion-item>
    </ion-card>
    <ion-card>
      <ion-item color="primary">Company Details
        <button ion-button outline (click)="addAdditionalInfo(id)" class="editProfileBtn" right>Edit Additional Details</button>
      </ion-item>
      <ion-item>
        <p>
          <b>Company Name : </b> {{profileRef.Company}}</p>
      </ion-item>
      <ion-item>
        <p>
          <b>Job Nature : </b>{{profileRef.jobNature}}</p>
      </ion-item>
      <ion-item>
        <p>
          <b>Company Email : </b>{{profileRef.workEmail}}</p>
      </ion-item>
      <ion-item>
        <p>
          <b>Company Address : </b>{{profileRef.workAddress}}</p>
      </ion-item>
      <ion-item>
        <p>
          <b>Company Phone : </b>{{profileRef.workPhone}}</p>
      </ion-item>
      <div>
        <div *ngIf="profileRef.photoIdentity; then govId else newGovId" class="govID"></div>
        <ng-template #govId>
          <ion-item>
            <h2>Government Identity Card </h2>
            <img src={{profileRef.photoIdentity}}>
          </ion-item>
        </ng-template>
        <ng-template #newGovId>
          <ion-item>
            <h2>Upload Government Id </h2>
            <label>
              <input type="file" (change)="detectGovernmentIdFile($event)">
            </label>
          </ion-item>
        </ng-template>
      </div>
    </ion-card>
    <ion-card>
      <ion-item>
        <button block ion-button (click)="gotoReviews()">Recent reviews</button>
      </ion-item>
      <ion-item>
        <button block ion-button (click)="logout()">Logout</button>
      </ion-item>
    </ion-card>
  </div>
  <div padding *ngIf=!userCheck>
    <ion-card>
      <ion-item>
        <h2>Welcome, Guest</h2>
      </ion-item>
      <ion-item>
        <h2>Already registered?</h2>
        <button block ion-button (click)="login()">Login</button>
      </ion-item>
      <ion-item>
        <h2>Don't have an account?</h2>
        <button block ion-button (click)="register()">Register</button>
      </ion-item>
    </ion-card>
  </div>
</ion-content>