Send reset password link with Ionic and Django

August 2019

Display a forgotten password link in Ionic

In previous tutorial, we learn how to login or register a user. But we didn't see how to send a reset password link, which is the goal of this article.
In previous tutorial code, with define a method to be call when the user clicks the link Password forgotten.

 <a (click)="forgotPassword()">Password forgotten</a>

Please notice i have corrected the html because there was an error in the previous tutorial. We must not specify an href to the a link otherwise ionic will fail.

 public forgotPassword(): void {
    this.router.navigateByUrl("/forgot-password")
  }

We will modify the method and instead of going to another page, we will display an alert controller to ask the email to which the new password link should be sent.

import { Component, OnInit } from '@angular/core';
import { Platform,AlertController } from '@ionic/angular';
import { ApiDjangoService } from '../../services/api-django.service';
import { Router } from '@angular/router';
import CryptoJS from 'crypto-js';
@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.page.html',
  styleUrls: ['./login-page.page.scss'],
})
export class LoginPagePage implements OnInit {
  registerCredentials = { email: '', password: '' };
  constructor(
    public apiService: ApiDjangoService,
    public alertController:AlertController,
    public router: Router) {
  }
  async  forgotPassword()  { 
     const alert = await this.alertController.create({
      header:"Please enter your email",
      message:"We will send you a password reset link",
      inputs: [
        {
          name: 'email',
          type: 'text'
        }],    
       buttons: [
            {
              text: 'Cancel',
              role: 'cancel',
              cssClass: 'secondary',
              handler: () => {
                console.log('Confirm Cancel');
              }
            }, {
              text: 'Ok',
              handler: (alertData) => { //takes the data 
                console.log(alertData.email);
                if (alertData.email){
                  this.apiService.sendResetPasswordLink(alertData.email)
                }
                else{
                  //Display error message
                }
            }
            }
          ]
  });
  await alert.present();
  } 

Ok after importing the AlerController component and inject it in our constructor method, we can use it to display a popup asking the email, and when the user clicks ok, we get the results in the handler. In this handler, we call a new method in our APIDjangoService to ask the backend to send the password reset link. Here is the method:

sendResetPasswordLink(email) {
    let httpOptions = {
     headers: new HttpHeaders({
       'content-type': "application/x-www-form-urlencoded",
       'Authorization': 'Bearer '+this.tokenSSO
       })
     }; 
    let postParams = 'email_or_username='+email;
    let url = this.urlPwdOublie;
    return this.http.post(url,postParams,httpOptions) 
 }

And we also add a new url in our APIDjangoService:

 urlPwdOublie = this.virtualHostName + "/account/reset_password";

It's finish for our ionic implementation. Now we need to write the django code to manage this new API and send the link by email.