Forgot Password Component

[rdotjain]

Server endpoint to request for new password email is /api/users/forgot_password/
and to set new password is /api/users/new_password/

Create frontend component for the same.

[tchestnut85]

Hi @rdotjain, I'd like to work on this. Could you assign it to me?

[rdotjain]

Yeah, go ahead!

[tchestnut85]

Hi @rdotjain , I'm still working on this but I'm a little confused and have some questions about the endpoint /api/users/forgot_password/.
Is this to be used for a user entering their email in an input then they would be sent an email with link to the forgot password component to set their password?
I have a component to set a new password using the /api/users/new_password/ endpoint done, just not sure about how to implement the other endpoint.

[rdotjain]

@tchestnut85 yeah, so forgot password button would route to something like FRONTEND_URL/forgot-password where user will be entering their email, and it will, in turn, send a request to API at /api/users/forgot_password/ with the email. Once the email is found in the database, a password reset mail will be sent.

[tchestnut85]

@rdotjain Got it, thanks!

[tchestnut85]

Hi @rdotjain , I opened a PR for this but I think for checking if the email verification was successful I need some suggestion on how to check for that correctly. If you're able to take a look when you have time and give some guidance, that would be awesome.
Thank you!

[rdotjain]

Reviewed your PR @tchestnut85 !
There's already a check on the backend for email verification, I suppose you want this data to be available at the frontend as well? If that's the case, we can pass an email_verified field in the response at /api/users/forgot_password/ endpoint.

[tchestnut85]

@rdotjain Yes that's what I was thinking, to be able to check that it's verified. Thank you!

[rdotjain]

@rdotjain Yes that's what I was thinking, to be able to check that it's verified. Thank you!

Added an is_verified field in response at /api/users/forgot_password/ (dev branch). Hope it'll do the work.

[tchestnut85]

So I keep getting 404 errors when making the request to /api/users/forgot_password/.
I tried fetch(URL + '/api/users/forgot_password/' + email) and also tried fetch(URL + '/api/users/forgot_password/', {method: 'POST', body: email }) to send the submitted email in the body, but still no luck. Any tips on how I should make the request?
Sorry for the hassle ☹️

Edit: When using 'POST' I'm getting this message from the response, although I'm sending JSON.
detail: "Unsupported media type \"text/plain;charset=UTF-8\" in request."

const submitEmail = email => fetch(`${URL}${FORGOT_PW_ENDPOINT}`, {
  method: 'POST',
  body: JSON.stringify(email),
  'Content-Type': 'application/json',
})	

[yash22arora]

Hey @tchestnut85 , You could try something like this:

const submitEmail=(email)=>
{
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    
    var raw = JSON.stringify({
          "email": email
    });
    
    var requestOptions = {
          method: 'POST',
          headers: myHeaders,
          body: raw,
          redirect: 'follow'
    };
    
    return fetch(`${URL}/api/users/forgot_password/`, requestOptions)

}

This is giving the response.status === 200 and a 400 status code if the email is wrong. But the alert is still not being shown. Try this and let us know if it helped!

Let us know if you still face an issues.

[yash22arora]

So I keep getting 404 errors when making the request to /api/users/forgot_password/. I tried fetch(URL + '/api/users/forgot_password/' + email) and also tried fetch(URL + '/api/users/forgot_password/', {method: 'POST', body: email }) to send the submitted email in the body, but still no luck. Any tips on how I should make the request? Sorry for the hassle ☹️

Edit: When using 'POST' I'm getting this message from the response, although I'm sending JSON. detail: "Unsupported media type \"text/plain;charset=UTF-8\" in request."

const submitEmail = email => fetch(`${URL}${FORGOT_PW_ENDPOINT}`, {
  method: 'POST',
  body: JSON.stringify(email),
  'Content-Type': 'application/json',
})	

I think you not passing the key-value pair in the body and directly passing email as value to the body attribute is making the difference. The rest of the code is almost the same. Also, the Content-type shall be passed in the header. Try the above code snippet and let us know if it worked ;)

[tchestnut85]

Thanks @yash22arora ! Adding the headers object and fixing the email key/value pair made it work.

[yash22arora]

Great @tchestnut85! If everything's working now, can you generate a PR to be merged in the dev branch and not the main branch? we would need to test it for production before we merge it in the main branch 😃.
Thanks.

[tchestnut85]

@yash22arora Sure thing, opened PR #141 to be merged to the dev branch. If anything need to be fixed or changed please let me know. Thank you!

[yash22arora]

@yash22arora Sure thing, opened PR #141 to be merged to the dev branch. If anything need to be fixed or changed please let me know. Thank you!

Sure! We'll test it and let you know.