Vue-storefront: Forgot Password Confirmation Page

[juliankoehn]

How do you handle the 'forgot password' confirmation Page?

(Magento)
eq: /customer/account/createpassword/

Is there any implementation?

In VSF Demo you are directed to:
http://demo-magento2.vuestorefront.io/customer/account/createPassword/?id=6922&token=cfa07fe5323386719256d5f829dc199f

[filrak]

Seems like a good idea for a feature request in next release. Can you please make an issue with this?

[pkarw]

We don't. I mean - this is out of the VS scope right now. Not sure if there is an API available to reset the password (for sure it wasn't in place when we implemented this feature).

[pkarw]

In case it's not there in the API we need to extend the https://github.com/DivanteLtd/magento2-vsbridge or create completely new Magento2 module adding this feature to the REST API

[mdesmet]

There is an API available. https://devdocs.magento.com/redoc/2.3/customer-rest-api.html#operation/customerAccountManagementV1ResetPasswordPost

I'll implement it and submit a PR.

[michhy]

Hi @mdesmet may I know how its going please?
Thanks a lot!

[mdesmet]

I have it working already, rest client has been extended a few days ago. Will submit a PR for APi and ui soon

[themreza]

It's crucial to have the UI and API to receive the reset link for platforms that use Vue Storefront as their exclusive front-end.

[benkelly92]

Was any progress made on this?

[jimmy-lion]

@mdesmet do you have working code for this? Thanks

[Fifciu]

I have it working already, rest client has been extended a few days ago. Will submit a PR for APi and ui soon

Could you share code?

[mdesmet]

It's for an older version of vue-storefront. I'm actually planning to move the site to AWS in a few weeks and will update to latest version at that point of time but now I'm working on other projects.

You can see the UI at https://unoco.life/, please review the UI already and let me know what you think.

[mdesmet]

To fully test it, you would have to create an account and then reset your password, then you will receive an email with a reset link which would lead you to the site and using the magento API your password will be reset to your chosen password. You then can log on using the new password. all from the vue storefront website.

To make it work I also had to change the email template in magento for sending out password reset link.

[Fifciu]

It's for an older version of vue-storefront. I'm actually planning to move the site to AWS in a few weeks and will update to latest version at that point of time but now I'm working on other projects.

You can see the UI at https://unoco.life/, please review the UI already and let me know what you think.

It would be still really useful for me because it is still better than starting from scratches. I have to do it anyway in this week. I'd be really thankful if you could share it

[benkelly92]

Yes me too. We're looking to add this in a site that is using an older version of VSF as well so would be really useful.

Also, it looks to me like this functionality is already implemented in VS-API, is this what you used or do you hit the API directly?

[mdesmet]

As far as I remember i only submitted the PRs for the magento API, but not yet for vs-api and front (i remember there were some confusing naming which make you think it's already there).

[Fifciu]

@benkelly92 I've created PRs for both API and PWA.
It adds endpoint for creating new password - support for Magento 2 only: https://github.com/DivanteLtd/vue-storefront-api/pull/366

It adds new route and extending UserService: https://github.com/DivanteLtd/vue-storefront/pull/3833

As you said, you are using older version of VSF. I encourage you modify ResetPassword.vue. You just need to change:

let response = await this.$store.dispatch('user/createPassword', {
  email: this.email,
  newPassword: this.password,
  resetToken: this.$route.query.token
})

To the:

const storeCodePart = storeCode && storeCode.length > 0 ? `?storeCode=${storeCode}` : ''
let response = await (await fetch(
  `${this.$store.state.config.api.url}user/create-password${storeCodePart}`,
  {
    method: 'POST',
    body: JSON.stringify({
    email: this.email,
    newPassword: this.password,
    resetToken: this.$route.query.token
  }),
  headers: {
    'Content-Type': 'application/json',
    mode: 'cors'
  }
}
)).json();