add upload profile image

README.md

@@ -2,10 +2,16 @@
 
 **:a: real-time chat ionic application with firebase**.
 
-Our chat application will show a login page withe _e-mail_ and _password_ fields. The user will be able to log in or create a new account, when a user logs in, it will go to a tabs interface where we have a list of all users of the application, 
+Our chat application will show a login page withe _e-mail_ and _password_ fields. The user will be able to log in or create a new account, when a user logs in, it will go to a tabs interface where we have a list of all users of the application, the Account tab will allow the user to upload a profile image and log out of the app.
 
 ## Overview 
 
+
+![account](/img/account.png)
+
 ![register](/img/register.png)
 
-![login](/img/login.png)
+![login](/img/login.png)
+
+
+![users](/img/users.png)

config.xml

@@ -1,6 +1,6 @@
 <?xml version='1.0' encoding='utf-8'?>
 <widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
-    <name>MyApp</name>
+    <name>chat-app</name>
     <description>An awesome Ionic/Cordova app.</description>
     <author email="[email protected]" href="http://ionicframework.com/">Ionic Framework Team</author>
     <content src="index.html" />

package.json

@@ -20,12 +20,14 @@
     "@angular/platform-browser": "~8.1.2",
     "@angular/platform-browser-dynamic": "~8.1.2",
     "@angular/router": "~8.1.2",
+    "@ionic-native/camera": "^5.18.0",
     "@ionic-native/core": "^5.0.0",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.7.1",
     "@ionic/storage": "^2.2.0",
     "cordova-android": "^8.1.0",
+    "cordova-plugin-camera": "^4.1.0",
     "cordova-sqlite-storage": "^4.0.0",
     "core-js": "^2.5.4",
     "firebase": "^7.5.2",
@@ -76,7 +78,10 @@
       "cordova-plugin-ionic-webview": {
         "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
       },
-      "cordova-plugin-ionic-keyboard": {}
+      "cordova-plugin-ionic-keyboard": {},
+      "cordova-plugin-camera": {
+        "ANDROID_SUPPORT_V4_VERSION": "27.+"
+      }
     },
     "platforms": [
       "android"

src/app/app.module.ts

@@ -16,6 +16,8 @@ import { AngularFireAuthModule } from "@angular/fire/auth";
 import { IonicStorageModule } from "@ionic/storage"; 
 import { ServicesModule } from './services/services.module';
 
+import { Camera } from '@ionic-native/camera/ngx';
+
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
@@ -30,6 +32,7 @@ import { ServicesModule } from './services/services.module';
   providers: [
     StatusBar,
     SplashScreen,
+    Camera,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
   ],
   bootstrap: [AppComponent]

src/app/models/user.ts

@@ -1,9 +1,9 @@
 export class User {
 
     key: string;
-    role: string;
     email : string;
-    password: string; 
+    password: string;
+    picture: string;
     name : string;
 
 }

src/app/services/camera/camera.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CameraService } from './camera.service';
+
+describe('CameraService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: CameraService = TestBed.get(CameraService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/camera/camera.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { Camera, CameraOptions} from "@ionic-native/camera/ngx";
+import { UserService } from '../user/user.service';
+import { AngularFireDatabase } from '@angular/fire/database';
+
+@Injectable()
+
+export class CameraService {
+
+  constructor(private userSevice: UserService, private db: AngularFireDatabase, private camera: Camera) {
+
+   }
+
+   getPicture() {
+
+    let options: CameraOptions = {
+
+     // quality: 100,  // quality  of the image 
+      allowEdit: true,  // alow simple editing of the image before selection 
+      saveToPhotoAlbum: true,
+      destinationType : this.camera.DestinationType.DATA_URL,
+      sourceType : this.camera.PictureSourceType.PHOTOLIBRARY,
+      encodingType: this.camera.EncodingType.JPEG,
+      mediaType: this.camera.MediaType.PICTURE,
+
+    };
+     // select the user object
+     let pictureRef = this.db.object(`/users/${this.userSevice.getUID()}`);
+     // get the picture 
+     this.camera.getPicture(options).then((imageData) => {
+     let base64Image ='data:image/jpeg;base64,' + imageData;
+     // save the image data:image on that db 
+     pictureRef.update({picture: base64Image});
+   },(err) => {
+     console.log("Error ", err);
+   });
+
+   }
+
+
+
+
+
+
+
+
+
+}

src/app/services/services.module.ts

@@ -3,12 +3,13 @@ import { CommonModule } from '@angular/common';
 import { AuthService } from './auth/auth.service';
 import { UserService } from './user/user.service';
 import { UtilService } from './util/util.service';
+import { CameraService } from './camera/camera.service';
 
 @NgModule({
   declarations: [],
   imports: [
     CommonModule
   ],
-  providers: [AuthService, UserService, UtilService]
+  providers: [AuthService, UserService, UtilService, CameraService]
 })
 export class ServicesModule { }

src/app/tabs/account/account.page.html

@@ -14,7 +14,8 @@
              <em>Account</em>
             </ion-card-title>
 
-            <img src="assets/img/user-default.png" width="100px" height="200px">
+            <img *ngIf="!user.picture" src="assets/img/user-default.png"  width="100px" height="200px">
+            <img *ngIf="user.picture" src="{{user.picture}}">
 
           </ion-card-header>
 

src/app/tabs/account/account.page.ts

@@ -4,6 +4,7 @@ import { Storage } from '@ionic/storage';
 import { UserService } from 'src/app/services/user/user.service';
 import { Router } from '@angular/router';
 import { User } from 'src/app/models/user';
+import { CameraService } from 'src/app/services/camera/camera.service';
 
 @Component({
   selector: 'app-account',
@@ -13,11 +14,12 @@ import { User } from 'src/app/models/user';
 export class AccountPage implements OnInit {
 
   user : User = new User;
+  Currentimage: any; 
 
-  constructor(private auth : AuthService, private storage: Storage, private userService: UserService, private router: Router) {
+  constructor(private auth : AuthService, private storage: Storage, private userService: UserService, private router: Router, private camera: CameraService) {
    this.userService.getUser().valueChanges().subscribe(data => { 
      console.log('current user: ', data);
-     console.log(data.password, data.email, data.key, data.name); 
+     console.log('pwd: ', data.password, ' email: ', data.email,' key: ', data.key,' name: ',  data.name, data.picture); 
      this.user = data 
 
     });
@@ -32,7 +34,7 @@ export class AccountPage implements OnInit {
 
   //update profile image
   update() {
-    alert('update image');
+    this.camera.getPicture();
   }
 
   ngOnInit() {

src/app/tabs/users/users.page.html

@@ -2,7 +2,7 @@
   <ion-toolbar color="primary">
     <ion-title>chat-app</ion-title>
     <ion-buttons slot="end">
-      <ion-spinner *ngIf="!users"></ion-spinner>
+      <ion-spinner name="bubbles" color="danger" *ngIf="!users"></ion-spinner>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
@@ -23,9 +23,12 @@
   <!-- users.key !== uid: exculeed the logging in  user  -->
   <div *ngFor="let user of users">
     <ion-item (click)="openChat(user.key)" *ngIf="user.key !== uid">
-      <ion-avatar slot="start">
+      <ion-avatar *ngIf="!user.picture" slot="start">
         <img src="/assets/img/user-default.png">
       </ion-avatar>
+      <ion-avatar *ngIf="user.picture" slot="start">
+        <img src="{{user.picture}}">
+      </ion-avatar>
       <ion-label>
         <h2>{{user.name}}</h2>
         <p>{{user.email}}</p>