After clicking the reset password link, your customers will land at the /account/reset-password
(on some stores it's account/reset
) page. On this page, they will be able to enter their new password. Let's start by creating a new section.
On your local environment, create a new folder inside
src/sections
and name it asResetPasswordForm
.Create an
index.js
file inside theResetPasswordForm
folder.Create a
styles.module.css
file inside theResetPasswordForm
folder.
import * as React from 'react'
import { useCustomerActions } from 'frontend-customer'
import { useRouter } from 'frontend-router'
const ResetPasswordForm = () => {
const [disabled, setDisabled] = React.useState(false)
const [isLoading, setIsLoading] = React.useState(false)
const [formErrors, setFormErrors] = React.useState()
const [formData, setFormData] = React.useState({
password: '',
confirmPassword: '',
})
const router = useRouter()
const { resetPassword } = useCustomerActions()
React.useEffect(() => {
setDisabled(formData.password === '' || formData.confirmPassword === '')
}, [formData])
const handleSubmit = async event => {
event.preventDefault()
setFormErrors(null)
setIsLoading(true)
const { errors } = await resetPassword({
resetUrl: window.location.href,
password: formData.password,
})
setIsLoading(false)
if (errors) {
setFormErrors(errors)
return
}
router.push('/account/login')
}
return (
<section>
<h1>Reset password</h1>
<form onSubmit={handleSubmit}>
<label>
New password
<Input
placeholder="******"
type="password"
onChange={(event) =>
setFormData(previousData => ({
...previousData,
password: event.target.value,
}))
}
required
/>
</label>
<label>
Confirm new password
<Input
placeholder="******"
type="password"
onChange={(event) =>
setFormData(previousData => ({
...previousData,
confirmPassword: event.target.value,
}))
}
required
/>
</label>
<button disabled={disabled} type="submit">Reset password</button>
<p>
Already have an account?{' '}
<Link href="/account/login">Login</Link>
</p>
</form>
</section>
)
}
export default ResetPasswordForm
Reset password page
Finally, create the account/reset-password
(on some stores it's account/reset
) page.
Click on the Pages icon from the sidebar.
Click ADD PAGE on the top right corner.
Enter the PAGE NAME: Reset password.
Enter the PAGE PATH:
account/reset-password
(on some stores it'saccount/reset
).If you want, you can select a Frame from the Frame dropdown.
Click ADD PAGE.
Now, add the ResetPasswordForm
section to the Reset password page (if you are already on the Reset password page, skip to step 4):
Click on the Pages icon from the sidebar.
Search for "Reset password".
Open the "Reset password" page by clicking on its title.
On the sidebar, click on the + (plus sign) where it says "Add sections to start building your page".
A list with all our
Sections
will appear; search for and selectResetPasswordForm
.Click
SAVE
.