Installation

Inside your project root directory, run the following:

npm i albatroz

Overview

This React component, ForgotPasswordScreen, is designed to handle the "Forgot Password" functionality in a user interface. It uses plain React state management and a custom hook useForgotPassword from the 'albatroz' library for handling the password reset process.


import React, { useState } from 'react';
import { useForgotPassword } from 'albatroz';

  const ForgotPasswordScreen = () => {
   const { loading, submitHandler } = useForgotPassword();
   const [email, setEmail] = useState('');
   const [errors, setErrors] = useState({});

   const validateEmail = (email) => {
   const pattern = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/i;
    if (!email) {
      return 'Please enter a valid email';
    } else if (!pattern.test(email)) {
      return 'Please use a valid email format';
    }
    return null;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const emailError = validateEmail(email);
    if (emailError) {
      setErrors({ email: emailError });
    } else {
      setErrors({});
      submitHandler({ email });
    }
  };

  return (
    <div>
      <h1>Forgot password?</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            placeholder="exemplo@email.com"
            id="email"
            autoFocus
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          {errors.email && (
            <div>{errors.email}</div>
          )}
        </div>
        <div>
          <button disabled={loading}>
            {loading ? 'Processing' : 'Send'}
          </button>
        </div>
      </form>
    </div>
  );
};

export default ForgotPasswordScreen;

Auth