Ep.4-Profile tab

Author: rajayogan

package.json

@@ -36,8 +36,8 @@
   },
   "devDependencies": {
     "@ionic/app-scripts": "1.3.7",
-    "@ionic/cli-plugin-cordova": "1.3.0",
-    "@ionic/cli-plugin-ionic-angular": "1.3.0",
+    "@ionic/cli-plugin-cordova": "1.4.0",
+    "@ionic/cli-plugin-ionic-angular": "1.3.1",
     "typescript": "2.3.3"
   },
   "description": "An Ionic project"

src/app/app.firebaseconfig.ts

@@ -1,8 +1,8 @@
 export var config = {
-    apiKey: <apiKey>,
-    authDomain: <yourauthDomain>,
-    databaseURL: <yourdatabaseURL>,
-    projectId: <yourprojectId>,
-    storageBucket: <yourstoragebucket>,
-    messagingSenderId: <yoursenderIdhere>
+    apiKey: "AIzaSyA9_FQFy-4eF31iznvfadBeR2Y3xJ4SfJ0",
+    authDomain: "ionic3chat-5e5cc.firebaseapp.com",
+    databaseURL: "https://ionic3chat-5e5cc.firebaseio.com",
+    projectId: "ionic3chat-5e5cc",
+    storageBucket: "ionic3chat-5e5cc.appspot.com",
+    messagingSenderId: "480109185305"
   };

src/pages/passwordreset/passwordreset.ts

@@ -31,9 +31,9 @@ export class PasswordresetPage {
         alert.setTitle('Email Sent');
         alert.setSubTitle('Please follow the instructions in the email to reset your password');
       }
-      else {
-        alert.setTitle('Failed');
-      }
+    }).catch((err) => {
+      alert.setTitle('Failed');
+      alert.setSubTitle(err);
     })
   }
 

src/pages/profile/profile.html

@@ -13,6 +13,18 @@
 </ion-header>
 
 
-<ion-content padding>
-
+<ion-content>
+<div class="profile-image" (click)="editimage()">
+  <img src="{{avatar}}">
+</div>
+<div>
+  <h2 (click)="editname()">{{displayName}}</h2>
+</div>
+<div>
+  Tap on your pic or nick name to change it.
+</div>
+<div class="spacer" style="height: 10px;"></div>
+<div>
+  <button ion-button round outline color="danger" (click)="logout()">Logout</button>
+</div>
 </ion-content>

src/pages/profile/profile.scss

@@ -1,3 +1,20 @@
 page-profile {
-
+.profile-image{
+    img{
+        height: 200px;
+        width: 200px;
+        border-radius:50%;
+        border: 4px solid rgba(255,255,255,0.4);
+        -webkit-box-shadow: 0px 0px 142px -37px rgba(0,0,0,0.75);
+        -moz-box-shadow: 0px 0px 142px -37px rgba(0,0,0,0.75);
+        box-shadow: 0px 0px 142px -37px rgba(0,0,0,0.75);
+    }
+}
+.scroll-content {
+    align-content: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
 }

src/pages/profile/profile.ts

@@ -1,6 +1,8 @@
-import { Component } from '@angular/core';
-import { IonicPage, NavController, NavParams } from 'ionic-angular';
-
+import { Component, NgZone } from '@angular/core';
+import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
+import { ImghandlerProvider } from '../../providers/imghandler/imghandler';
+import { UserProvider } from '../../providers/user/user';
+import firebase from 'firebase';
 /**
  * Generated class for the ProfilePage page.
  *
@@ -13,12 +15,99 @@ import { IonicPage, NavController, NavParams } from 'ionic-angular';
   templateUrl: 'profile.html',
 })
 export class ProfilePage {
+  avatar: string;
+  displayName: string;
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+    public userservice: UserProvider, public zone: NgZone, public alertCtrl: AlertController,
+    public imghandler: ImghandlerProvider) {
+  }
+
+  ionViewWillEnter() {
+    this.loaduserdetails();
+  }
 
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  loaduserdetails() {
+    this.userservice.getuserdetails().then((res: any) => {
+      this.displayName = res.displayName;
+      this.zone.run(() => {
+        this.avatar = res.photoURL;
+      })
+    })
   }
 
-  ionViewDidLoad() {
-    console.log('ionViewDidLoad ProfilePage');
+  editimage() {
+    let statusalert = this.alertCtrl.create({
+      buttons: ['okay']
+    });
+    this.imghandler.uploadimage().then((url: any) => {
+      this.userservice.updateimage(url).then((res: any) => {
+        if (res.success) {
+          statusalert.setTitle('Updated');
+          statusalert.setSubTitle('Your profile pic has been changed successfully!!');
+          statusalert.present();
+          this.zone.run(() => {
+          this.avatar = url;
+        })  
+        }  
+      }).catch((err) => {
+          statusalert.setTitle('Failed');
+          statusalert.setSubTitle('Your profile pic was not changed');
+          statusalert.present();
+      })
+      })
   }
 
+  editname() {
+    let statusalert = this.alertCtrl.create({
+      buttons: ['okay']
+    });
+    let alert = this.alertCtrl.create({
+      title: 'Edit Nickname',
+      inputs: [{
+        name: 'nickname',
+        placeholder: 'Nickname'
+      }],
+      buttons: [{
+        text: 'Cancel',
+        role: 'cancel',
+        handler: data => {
+
+        }
+      },
+      {
+        text: 'Edit',
+        handler: data => {
+          if (data.nickname) {
+            this.userservice.updatedisplayname(data.nickname).then((res: any) => {
+              if (res.success) {
+                statusalert.setTitle('Updated');
+                statusalert.setSubTitle('Your nickname has been changed successfully!!');
+                statusalert.present();
+                this.zone.run(() => {
+                  this.displayName = data.nickname;
+                })
+              }
+
+              else {
+                statusalert.setTitle('Failed');
+                statusalert.setSubTitle('Your nickname was not changed');
+                statusalert.present();
+              }
+                             
+            })
+          }
+        }
+        
+      }]
+    });
+    alert.present();
+  }
+
+  logout() {
+    firebase.auth().signOut().then(() => {
+      this.navCtrl.parent.parent.setRoot('LoginPage');
+    })
+  }
+
+
 }

src/providers/user/user.ts

@@ -103,4 +103,37 @@ export class UserProvider {
       return promise;
   }
 
+  getuserdetails() {
+    var promise = new Promise((resolve, reject) => {
+    this.firedata.child(firebase.auth().currentUser.uid).once('value', (snapshot) => {
+      resolve(snapshot.val());
+    }).catch((err) => {
+      reject(err);
+      })
+    })
+    return promise;
+  }
+
+  updatedisplayname(newname) {
+    var promise = new Promise((resolve, reject) => {
+      this.afireauth.auth.currentUser.updateProfile({
+      displayName: newname,
+      photoURL: this.afireauth.auth.currentUser.photoURL
+    }).then(() => {
+      this.firedata.child(firebase.auth().currentUser.uid).update({
+        displayName: newname,
+        photoURL: this.afireauth.auth.currentUser.photoURL,
+        uid: this.afireauth.auth.currentUser.uid
+      }).then(() => {
+        resolve({ success: true });
+      }).catch((err) => {
+        reject(err);
+      })
+      }).catch((err) => {
+        reject(err);
+    })
+    })
+    return promise;
+  }
+
 }