In this chapter we are going to implement the reset password feature.
If you didn’t do the previous chapters, then from GitHub you can download the starter project for this chapter.
Step 1 – Set the email template
For the reset of the password we need the email of the registered account, because Firebase will send a message to this email address , which will contain a reset link. When the user clicks on it, a window will popup, where they can change the password. After the change we can login again with the new password.
So open your Firebase account, where you have the registered project for this app and open your app there.
In Firebase click in the left sidebar menu on the “Authentication” menu, then “Templates”. Here you will see some templates. In our case we will change the “Password reset” template.
In this window at the top right corner will be a pen. If you click on it, then you can change the template.
After this section we can modify the email template. We won’t make huge changes, only the “Sender name” and the “Reply to” part. The rest can stay the default one.
Note the tags inside of the “Subject” and “Message”.
- %APP_NAME%: This is the “Project public-facing name”
- %EMAIL%: It is the “Reply to” email
- %LINK%: Clicking on this link we can change the password for this app.
If you are done, then click on the “Save” button at the bottom and you can close Firebase. We won’t need it anymore in this chapter.
Step 2 – The UI of the dialog
We will start first by creating the user interface of the dialog. When the user clicks in the LoginActivity::class on the “Forgot Password?” text, then this dialog will ask them for the email of the account.
Create new layout xml file
To implement the UI, we have to create a layout xml file. So click on the layout folder with the right mouse button, select “New” then “Layout ressource file”.
In the popup window name the layout as “dialog_forgotpassword”. We will leave the rest as they are. So just click on the “OK” button.
Android Studio will create for us the file, and when it is finished, then it will be opened. We will use the default ConstraintLayout as the parent ViewGroup, but we will change it a little bit. So set the layout_height parameter to “wrap_content”.
Then we are going to add to the ConstraintLayout a rounded background.
Rounded background shape
This background will be also an xml file, but in this case it will be in the “drawable” folder. So click on it again using the right button of you mouse, select “New” then “Drawable ressource file”. The name of the file will be “rounded_dialog_background”. The rest can stay again the default selected. Click “Ok” if you are done.
Here is the source code:
rounded_dialog_background source code
- solid: With this we can specify the background color of the shape.
- corners: The radius of the shape will be 15dp.
- stroke: This is the width and the color of the thin line for the border.
In the dialog_forgotpassword.xml file we can now add this background to the ConstraintLayout.
If you check in the preview or in the design mode our layout, then there should be already a rounded border.
The child views
So now we can start to add some views to the layout. This dialog will contain an icon as ImageView, a field for the email as TextInputLayout and 2 Buttons to cancel the dialog and to execute the sending action, so a “Cancel” and a “Send” Buttons.
First we will add the icon of the dialog. Here we are going to use a new icon. You can download it using this link.
Extract the downloaded file and copy all of the drawables folder to the “res” folder of your project.
Now we can add the ImageView to the layout.
xml code for the icon of the dialog
The field of the email
Under of the icon will be the TextInputLayout and inside of it the TextInputEditText. This field as almost the same what we have used in the activity_login.xml and activity_register.xml.
xml code for the email of the dialog
To position of the 2 Buttons we are going to use here again a Guideline.
This Guideline will be vertically positioned and for that we will use percent, which value will be 0.5.
The 2 Buttons
Both of the Buttons will be under the TextInputLayout of the email vertically.
Horizontally they will be centered between the parent ViewGroup and the vertical Guideline. The “Cancel” Button from the left side, the “Send” Button from the right side of the Guideline.
Here is the source code of the 2 Buttons under the field of the email.
The 2 action Buttons
Hmm… 🤔 These Buttons are very ugly with this grey color. Let’s make for them also some shapes. 😎
Rounded background shape for the Buttons
The shape of the “Cancel” Button
Create again a new xml ressource file in the “drawable” folder, as we have done before. Click on it with the right mouse button, select “New” then “Drawable ressource file”.
The color for this shape comes also from the colors.xml file. Because before we have’t have this color, we are going to add it to our colors collection. So open the colors.xml file, what is located in the “res”, then in the “values” folder.
Add this line to colors.xml file.
Then we can add the shape as the background to the “Cancel” Button also.
The shape of the “Send” Button
Following, the logic of the background for the “Cancel” Button is the same. Create a new ressource file inside of the “drawable” folder and name as “rounded_blue_button”.
Then add again this shape as the background to the “Send” Button.
… and change the color of the font to white.
Step 3 – Add the “Forgot Password? TextView
Still we don’t have any TextView to open the AlertDialog. We will solve this, and we will add it to the activity_login.xml file. So open the xml file.
The “Forgot password?” TextView will be under the TextInputLayout of the password and above of the “Login” Button.
The "Forgot password?" TextView
Modify the “Login” Button and align the top of it to the bottom of this TextView.
Step 4 – Open the dialog
After the implementation of the dialog’s user interface, we will open it from the LoginActivity::class. Here we are going to add the code for the open method. After that we will implement the methods for Firebase’s sendPasswordResetEmail() function as well.
So open the LoginActivity::class and create a new method there called startForgotPasswordDialog(). Inside of this method we are going to use an AlertDialog.
Copy and past the below method to the LoginActivity::class. The description comes after that.
- To open the dialog first we have to inflate it. Here we can specify which layout should be shown.
- The Builder will create for us the AlertDialog, which needs the inflated view as parameter.
- Here we are going to show the dialog for the user. The method of show() will provide the dialog.
- We can set listeners for the Buttons. In this case we will have a click listener lambda, which will call later on the password reset methods.
- To be sure that the user entered a formally correct email address, first we gonna call the validation method what we have already defined in the previous chapters.
- After that it will close the dialog.
- When the user has changed his/her mind, than clicking on the “Cancel” Button the dialog will be closed. The user can close it also by clicking outside of the dialog.
- Inside of the click listener of the “Cancel” Button we gonna have only the dismiss() method.
- This line of code will provide for us a transparent background. If we won’t set this, then the dialog won’t look like as we have made it.
Try to comment out this line and check what happens. 😉
Now we can add this method to the click listener of the “tv_login_forgotPassword” TextView inside of the LoginActivity::class. It will be inside of the “onCreate()” method.
setOnClickListener of the TextView
Run the app
Now we can run the app and test if the dialog pops up correctly. If something is wrong, then check back the chapter or leave a comment.
Step 5 – The reset password methods
We are closer and closer to the end. In the last step we are going to add the needed methods for the classes which will be fired when the user taps on the “Send” Button on the reset password dialog.
First we are going to add the sendPasswordResetEmail() suspended function to the UserRepository::interface. This function will have one argument. This will be a string of the user’s email address. It is needed for the Firebase query.
So add this line of code to the UserRepository::interface.
Next is the implementation of this method. So open the UserRepositoryImpl::class also.
Push on your keyboard control+o and implement in the class the needed sendPasswordResetEmail() method.
Delete the TODO line and add there this.
Note again, that on the method of sendPasswordResetEmail(email) we are going to call the await() extension function. Do you remember what does it do? If you don’t… this means that before the execution goes forward, it will wait until the result of the query.
In case of exception we will send it to the caller function, which is located in the FirebaseViewModel::class.
Now open the FirebaseViewModel::class also. First we are going to use again the CoroutineScope of ViewModel. So we gonna call the launch method on the viewModelScope variable.
Inside of this lambda, as before, we gonna have a when expression, which will check the result of the query.
- success: we will show for the user a message, which will tell for him/her that the email of the reset password was sent out.
- error: we will show for the user the message of the exception.
- cancel: we show a Toast message that the request was canceled.
After the implementation of the needed classes we can go back to the LoginActivity::class. Here we are going to add the FirebaseViewModel’s method to the “Send” Button’s onClickListener method.
So just repleace the TODO line with this call.
The click listener of the "Send" Button
Step 6 – The Toast observer
Realy, this will be the last step before the finish, I promise. 😎
To notify the user about the reset of the password, we should implement in the LoginActivity::class an observer for the toast’s LiveData from the FirebaseViewModel::class, which will run when it has a new value.
So add this observer to the “onCreate()” method.
Run again the app
Finally run again the app. Now when you click on the “Send” Button after you provided a valid and registered email, then you should get this email.
The source code is available on GitHub
I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉
Have a nice a day! 🙂