Feat: Page Recover Your Password

by ADMIN 33 views

Introduction

In this feature, we will implement a "Recover your password" page UI as per the provided design. The page should include a centered card with a heading, a short helper text, an email input, a navy "Continue" button, and a teal "Back" button. We will also hook this page up to the /password-recovery route so it renders when users navigate there.

Design Requirements

The design requirements for the "Recover your password" page are as follows:

  • A centered card with the heading "Recover your password"
  • A short helper text: "Enter the email address or username associated with your OfferHub admin account."
  • An email input with placeholder text
  • A navy "Continue" button
  • A teal "Back" button

Acceptance Criteria

To ensure that the "Recover your password" page is implemented correctly, we have the following acceptance criteria:

  • New route (e.g. /password-recovery) is registered and renders a <PasswordRecoveryPage /> component
  • Card header reads "Recover your password" and helper text matches design
  • Email input renders with placeholder and associated label for accessibility
  • "Continue" button uses navy background, white text, spans full width on mobile / fixed width on desktop
  • "Back" button uses teal background, white text, matches width of "Continue" button
  • Clicking "Back" navigates to the previous page (e.g. /login)
  • All elements use design-system tokens for typography, spacing, and colors
  • Form cannot submit unless a non-empty, valid email is entered

Implementation

To implement the "Recover your password" page, we will follow these steps:

Step 1: Create the PasswordRecoveryPage Component

We will create a new component called PasswordRecoveryPage that will render the password recovery page UI.

import React from 'react';
import { Card, HelperText, EmailInput, Button } from './components';

const PasswordRecoveryPage = () => {
  return (
    <div>
      <Card>
        <h2>Recover your password</h2>
        <HelperText>
          Enter the email address or username associated with your OfferHub admin account.
        </HelperText>
        <EmailInput placeholder="Email address or username" />
        <Button type="primary" onClick={() => console.log('Continue button clicked')}>
          Continue
        </Button>
        <Button type="secondary" onClick={() => console.log('Back button clicked')}>
          Back
        </Button>
      </Card>
    </div>
  );
};

export default PasswordRecoveryPage;

Step 2: Register the PasswordRecoveryPage Route

We will register the PasswordRecoveryPage component as a new route called /password-recovery.

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import PasswordRecoveryPage from './PasswordRecoveryPage';

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/password-recovery" component={PasswordRecoveryPage} />
        <Route path="/login" component={LoginPage} />
      </Switch>
    </BrowserRouter>
  );
};

Step 3: Implement the Email Input and Button Components

We will implement the EmailInput and Button components using the design-system tokens for typography, spacing, and colors.

import React from 'react';
import { Input, Button } from './components';

const EmailInput = () => {
  return (
    <Input
      type="email"
      placeholder="Email address or username"
      label="Email address or username"
      aria-label="Email address or username"
    />
  );
};

const Button = ({ type, children, onClick }) => {
  const buttonStyles = {
    primary: {
      backgroundColor: '#1A1D23',
      color: '#FFFFFF',
      width: '100%',
      padding: '12px 24px',
      border: 'none',
      borderRadius: '4px',
      cursor: 'pointer',
    },
    secondary: {
      backgroundColor: '#0097A7',
      color: '#FFFFFF',
      width: '100%',
      padding: '12px 24px',
      border: 'none',
      borderRadius: '4px',
      cursor: 'pointer',
    },
  };

  return (
    <button
      style={buttonStyles[type]}
      onClick={onClick}
      aria-label={children}
    >
      {children}
    </button>
  );
};

Step 4: Implement the Form Validation

We will implement the form validation to ensure that the email input is not empty and is a valid email address.

import React, { useState } from 'react';
import { EmailInput, Button } from './components';

const PasswordRecoveryPage = () => {
  const [email, setEmail] = useState('');
  const [error, setError] = useState(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!email || !validateEmail(email)) {
      setError('Please enter a valid email address');
    } else {
      // Submit the form
    }
  };

  const validateEmail = (email) => {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return emailRegex.test(email);
  };

  return (
    <div>
      <Card>
        <h2>Recover your password</h2>
        <HelperText>
          Enter the email address or username associated with your OfferHub admin account.
        </HelperText>
        <EmailInput
          value={email}
          onChange={(event) => setEmail(event.target.value)}
          placeholder="Email address or username"
        />
        <Button type="primary" onClick={handleSubmit}>
          Continue
        </Button>
        <Button type="secondary" onClick={() => console.log('Back button clicked')}>
          Back
        </Button>
        {error && <p style={{ color: 'red' }}>{error}</p>}
      </Card>
    </div>
  );
};

Conclusion

Introduction

In our previous article, we implemented a "Recover your password" page UI as per the provided design. In this article, we will answer some frequently asked questions related to the implementation of the password recovery page UI.

Q: What is the purpose of the password recovery page UI?

A: The password recovery page UI is designed to help users recover their password if they have forgotten it. The page provides a simple and intuitive way for users to enter their email address or username associated with their account, and then submit a request to recover their password.

Q: What are the key features of the password recovery page UI?

A: The key features of the password recovery page UI include:

  • A centered card with the heading "Recover your password"
  • A short helper text: "Enter the email address or username associated with your OfferHub admin account."
  • An email input with placeholder text
  • A navy "Continue" button
  • A teal "Back" button

Q: How do I implement the password recovery page UI?

A: To implement the password recovery page UI, you will need to create a new component called PasswordRecoveryPage that renders the password recovery page UI. You will also need to register the PasswordRecoveryPage component as a new route called /password-recovery. Additionally, you will need to implement the EmailInput and Button components using the design-system tokens for typography, spacing, and colors.

Q: How do I validate the email input on the password recovery page UI?

A: To validate the email input on the password recovery page UI, you can use a regular expression to check if the email address is valid. You can also add a check to ensure that the email input is not empty.

Q: What are the benefits of implementing the password recovery page UI?

A: The benefits of implementing the password recovery page UI include:

  • Improved user experience: The password recovery page UI provides a simple and intuitive way for users to recover their password.
  • Increased security: The password recovery page UI helps to prevent unauthorized access to user accounts by requiring users to enter their email address or username associated with their account.
  • Reduced support requests: The password recovery page UI can help to reduce the number of support requests related to password recovery.

Q: How do I troubleshoot issues with the password recovery page UI?

A: To troubleshoot issues with the password recovery page UI, you can use the following steps:

  • Check the console logs for any errors or warnings.
  • Verify that the PasswordRecoveryPage component is registered correctly as a new route.
  • Check that the EmailInput and Button components are implemented correctly using the design-system tokens for typography, spacing, and colors.
  • Test the password recovery page UI with different email addresses and usernames to ensure that it is working correctly.

Conclusion

In this article, we answered some frequently asked questions related to the implementation of the password recovery page UI. We hope that this article has provided you with a better understanding of the password recovery page UI and how to implement it. If you have any further questions or need additional assistance, please don't hesitate to contact us.