Chat app with Ionic 3 & Firebase – Ep. 3 – Profile pic & Password reset

Hi Friends,

Hope you are all well. This is episode 3 of my chat app with Ionic 3 and firebase series. In this post let’s see how to choose a profile picture for our account from the phone’s file system and also how to code a password reset provision in our app.

Let’s begin.

Since the screencast was too lengthy this time, I decided to cut it into two parts.

Part 1 of the screencast

Part 2 of the screencast

 

The code for this post is available – here.

The complete code for this app is available here. (This is a work in progress and new commits will be added as the app is being built).

Password reset:

Generate a new page using the below command.

Get into login.ts and add the below code.

Now get into passwordreset.scss and add the below code.

As you can see it’s the exact same code that we are using in login.scss and signup.scss to design our page.

Open up passwordreset.html and add the below code.

We just have a single input field and a couple of buttons.

Open up passwordreset.ts and add the below code.

We are simply calling the passwordreset() function in the user provider and sending the email there. But wait, do we have a passwordreset() function in the user.ts file ? Let’s go ahead and add that.

Open up user.ts file and add the below code.

I guess the above function is self-explanatory and there isn’t much to explain here. We are simply making use of the sendPasswordResetEmail() that ships with firebase to send an email with password reset instructions. If the entered email is not registered then it will throw an error back.

Choosing a profile picture:

This is a bit lengthy process. Let me first explain what we are trying to achieve here.

  1. We are going to be choosing a picture from our file system using the cordova-file-chooser plugin.
  2. Then we will be resolving the native path of that file using our cordova-filepath plugin and then storing it as a blob in firebase-storage.
  3. Then we would get the download url of the stored file and then make use of it in our app to show the image.

I have already discussed this entire process in detail in one my previous posts.

I would highly recommend that you read it once by clicking here.

If you remember, we have already created the profilepic page in our last post. We’ll simply be making use of it here.

Open up profilepic.scss and add the below code.

This is just to style the profile picture and center the content.

Now open up profilepic.html and add the below code.

We just have a couple of buttons. One of them is to choose an image. The other is displayed based on a value called moveon. Let’s see how that works.

Open up profilepic.ts file and add the below code.

Whoa, Too much code..?

Most of it is just eye-candy stuff..

It’s actually pretty simple. First let’s go ahead and create a new provider called imghandler which we will be using to manipulate and play around with images in our app.

Open up imghandler.ts and add the below code.

Too much code again..?

First things first.

Let’s go ahead and install the 3 cordova plugins that we have used.

Install the ionic-native wrappers for these plugins as well.

Open up app.module.ts and add the below code.

We are simply importing our plugins. Don’t forget to add them in the providers as well.

Now let’s break down the code in the imghandler.ts file. Rather than describing in detail (as I did in my post on serving images with firebase storage), I will make short concise points on what I have done.

  1. We are making use of the file-chooser plugin to choose a file from the phone’s filesystem.
  2. We are making use of the filepath plugin to resolve the native path of the file.
  3. This is then fed into a reader.
  4. Once the reader finishes reading, a blob is created.
  5. The blob is stored in firebase storage.
  6. Once it is successfully stored, the download url of that file is got using getDownloadURL() method and then sent to the calling statement in the profilepic.ts file.

Now I am using zones to update the imgurl with this url so that it would change the image in real-time thereby providing the user a preview of his account picture. Also the moveon variable is changed to false, which indirectly means that the upload & proceed button will be displayed now.

Let’s go ahead and create a updateimage() function in the user.ts file now.

Open up user.ts and add the below code.

This is pretty much self-explanatory. I am simply updating the users collection with the new image url and also updating the firebase users list.

Whoo.. That’s it guys, Once this is successfully done, we can simply direct the user to the Tabs page.

If everything goes fine you would see the below screen.

Screenshot_2017-06-13-18-11-38 Screenshot_2017-06-13-18-11-53

 

Notice that the first image shows skip this step button, whereas the second image shows the upload & proceed button denoting the stored image in firebase storage.

In our next post we’ll see how to design the profile tab inside our app.

Hope this helped you guys. If you felt that this was helpful, kindly consider supporting me through this link www.patreon.com/rajayogan. It would help me keep providing quality content for free.

Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!