ResetPasswordForm Section | Shogun Frontend Documentation

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 as ResetPasswordForm.
Create an index.js file inside the ResetPasswordForm folder.
Create a styles.module.css file inside the ResetPasswordForm 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's account/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 select ResetPasswordForm.
Click SAVE.

RegisterForm Section

LoginForm Section

AccountAddress Section

AccountOrders Section

ForgotPasswordForm Section