ForgotPasswordForm Section | Shogun Frontend Documentation

Customers can reset their password via the account dashboard, but they need to be logged in for that to happen. If they forgot their password, they can request a reset password link. To handle this use case, let's create a new section:

On your local environment, create a new folder inside src/sections and name it as ForgotPasswordForm.
Create an index.js file inside the ForgotPasswordForm folder.
Create a styles.module.css file inside the ForgotPasswordForm folder.

import React from 'react'
import { useCustomerActions } from 'frontend-customer'
import Link from 'frontend-link'
import AuthGuard from 'Components/AuthGuard'

const ForgotPasswordForm = () => {
  const [inputValue, setInputValue] = React.useState('')
  const [submitSuccess, setSubmitSuccess] = React.useState(false)
  const [submitErrors, setSubmitErrors] = React.useState()
  const [submitInProgress, setSubmitInProgress] = React.useState(false)
  
  const { recoverPassword } = useCustomerActions()

  const handleSubmit = async event => {
    event.preventDefault()

    setSubmitErrors(null)
    setSubmitInProgress(true)

    const { errors } = await recoverPassword(inputValue)

    if (errors) {
      setSubmitInProgress(false)
      setSubmitErrors(errors)
      console.error('Something went wrong', errors)

      return
    }

    setSubmitSuccess(true)
  }

  const disableLoginButton = !inputValue || submitInProgress

  return (
    <section>
      {submitSuccess ? (
        <React.Fragment>
          <h1>Check your inbox!</h1>
          <p>We've just sent you an email - follow the reset instructions to change your password.</p>
        </React.Fragment>
      ) : (
        <section>
          <h1>Forgot password</h1>

          <AuthGuard allowedAuthStatus="unauthenticated" redirectUrl="/account">
            <p>Enter your email and we will send you a password reset link.</p>
            <form onSubmit={handleSubmit}>
              <label>
                Email
                <Input
                  placeholder="email@example.com"
                  type="email"
                  value={inputValue}
                  onChange={(event) => setInputValue(event.target.value)}
                  required
                />
              </label>
              <div>
                <button type="submit" disabled={disableLoginButton}>
                  Send
                </button>
                <Link href="/account/login">Go back to login</Link>
              </div>
              {submitErrors && (
                <div>
                  {submitErrors.map((error, index) => (
                    <strong key='error-message- + 'index'}>
                      {error.message}
                    </strong>
                  ))}
                </div>
              )}
            </form>
          </AuthGuard>
        </section>
      )}
    </section>
  )
}

export default ForgotPasswordForm

Forgot password page

Create the /account/forgot-password page:

Click on the Pages icon from the sidebar.
Click ADD PAGE on the top right corner.
Enter the PAGE NAME: Forgot password.
Enter the PAGE PATH: account/forgot-password.
If you want, you can select a Frame from the Frame dropdown.
Click ADD PAGE.

Now, add the ForgotPasswordForm Section to the Forgot password page (if you are already on the Orders page, skip to step 4):

Click on the Pages icon from the sidebar.
Search for "Forgot password".
Open the "Forgot 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 ForgotPasswordForm.
Click SAVE.

LoginForm Section

Account Section

AccountAddress Section

AccountOrders Section

ResetPasswordForm Section