Forms

ForgotPasswordScreen Component

Component is used in situations where users need to reset their password by providing their email address. It handles email validation, shows error messages for invalid input, and submits the email to the password reset handler. This component is a functional, interactive, and user-friendly part of the password recovery process in a web application.



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;

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 Statements:

- React, useState : Imports React and the useState hook for managing state within the component.
- useForgotPassword: Imports a custom hook from the 'albatroz' library to manage the forgot password logic.

Component:ForgotPasswordScreen:

- loading and submitHandler : Destructured from useForgotPassword hook, where loading indicates the loading state, and submitHandler is the function to handle form submission.
- loading indicates the loading state, and submitHandler is the function to handle form submission.
- email (state): Holds the email input value.
- errors (state): Holds validation error messages.

validateEmail Function

- Takes an email as input and validates it against a regex pattern..
- Returns an error message if the email is invalid or an empty string if valid.

handleSubmit Function

- Prevents the default form submission behavior.
- Validates the email input using validateEmail.
- Sets error messages if validation fails.
- Calls submitHandler with the email if validation passes.

JSX Structure

- Renders a form with a title "Forgot password?".
- The form includes:
- An input field for the email with controlled state.
- Conditional rendering for error messages if email validation fails.
- A submit button that is disabled based on the loading state.

ForgotPasswordScreen Component with react-hook-form


import React from 'react';
import { useForm } from 'react-hook-form';
import { useForgotPassword } from 'albatroz';

  const ForgotPasswordScreen: React.FC = () => {
  const { loading, submitHandler } = useForgotPassword();
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
      <div >
        <h1>Forgot password ?</h1>
         <form onSubmit={handleSubmit(submitHandler)}>
          <div>
            <label htmlFor="email">Email</label>
            <input
              type="email
              placeholder="exemplo@email.com"
              id="email"
              autoFocus
              {...register('email', {
                required: 'Please enter a valid email ',
                pattern: {
                  value: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/i,
                  message: 'Please use a valid email format ',
                },
              })}
            />
            {errors.email && (
              <div >{errors.email.message}</div>
            )}
          </div>
          <div >
            <button
              disabled={loading}
            >
              {loading ? 'Processing' : 'Send'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default ForgotPasswordScreen;

This React component, ForgotPasswordScreen, is designed to handle the "Forgot Password" functionality in a user interface. It utilizes the react-hook-form library for form handling and validation, and a custom hook useForgotPassword from the 'albatroz' library to manage the password reset process.

Import Statements

- React: Imports the core React library.
- useForm: Imports the useForm hook from react-hook-form to manage form state and validation.
- useForgotPassword: Imports a custom hook from the 'albatroz' library to manage the forgot password logic.

Component: ForgotPasswordScreen

- loading and submitHandler: Destructured from useForgotPassword hook. loading indicates the loading state, and submitHandler is the function to handle form submission.
- register, handleSubmit, and formState: errors : Destructured from the useForm hook to handle form registration, submission, and error state management.

JSX Structure

- Renders a form with a title "Forgot password?".
- The form includes:
- An input field for the email with validation rules and controlled state via react-hook-form.
- Conditional rendering for error messages if email validation fails.
- A submit button that is disabled based on the loading state.

ResetPasswordScreen Component


    import * as React from "react";
    import { useState } from "react";
    import { useResetPassword } from 'albatroz';
    
      const ResetPassword: React.FC = () => {
      const [password, setPassword] = useState("");
      const [confirmPassword, setConfirmPassword] = useState("");
      const [passwordError, setPasswordError] = useState("");
      const [confirmPasswordError, setConfirmPasswordError] = useState("");
      const { loading, submit } = useResetPassword();
      const handleSubmit = (event: React.FormEvent) => {
        event.preventDefault();
        submit({ password, confirmPassword });
      };
    
      return (
        <>
          <div>
            <div>
              <h1>Change password?</h1>
              <form onSubmit={handleSubmit}>
                <div>
                  <label>Password</label>
                  <input
                    type="password"
                    value={password}
                    placeholder="Enter the new password"
                    onChange={(e) => setPassword(e.target.value)}
                  />
                  <span style={{ color: "red" }}>{passwordError}</span>
                </div>
                <div>
                  <label>Confirm password</label>
                  <input
                    type="password"
                    value={confirmPassword}
                    placeholder="Confirm the new password"
                    onChange={(e) => setConfirmPassword(e.target.value)}
                  />
                  <span style={{ color: "red" }}>{confirmPasswordError}</span>
                </div>
                <div className="mt-5">
                  <button
                    className="w-full bg-black p-2 rounded-lg text-white"
                    disabled={loading}
                  >
                    {loading ? "Process.." : "Confirm"}
                  </button>
                </div>
                <div>
                  <a href="/login">
                    {" "}
                    Back
                  </a>
                </div>
              </form>
            </div>
          </div>
        </>
      );
    };
    
    export default ResetPassword;

This React component, ResetPassword, is designed to handle the password reset functionality in a user interface. It uses React state to manage form inputs and validation errors and a custom hook useResetPassword from the 'albatroz' library to manage the password reset process.

Import Statements

- React: Imports the core React library.
- useState: Imports the useState hook from React to manage state within the component.
- useResetPassword: Imports a custom hook from the 'albatroz' library to handle the reset password logic.

Component: ResetPassword

- password and confirmPassword: States to store the values of the password and confirm password fields.
- passwordError and confirmPasswordError,States to store error messages related to password validation.
- loading and submit: Destructured from useResetPassword hook. loading indicates the loading state, and submit is the function to handle form submission.

JSX Structure

- Renders a form with a title "Change password?"
- The form includes:
- Input fields for password and confirm password with controlled state and error message display.
- A submit button that is disabled based on the loading state.
- A link to navigate back to the login page.

ForgotPasswordEmail

This React component, ForgotPasswordEmail, is designed to generate an HTML email template for password recovery. It accepts a params object containing the recipient's name, the URL for password reset, and their email address. The template includes a personalized greeting, instructions for resetting the password, and a link to perform the reset.


 import * as React from 'react';

 export type TParams = {
  name: string;
  url: string;
  email:string;
 }

 const ForgotPasswordEmail = ({
    params
  }:{
    params: TParams;
    
  }) => {
  return (
    <div>
    <div></div>
    <table>
      <tbody>
        <tr>
          <td >
            <table>
              <tbody>
                <tr>
                  <td>
                    <table >
                      <tbody>
                        <tr>
                          <td >
                            <h2>Password recovery</h2>
                            <p >Olá, {params.name}</p>
                            <p >
                             We received a request to redefine your account password.If you have not requested this change, please ignore this email.Otherwise, click the button below to redefine your password:
                            </p>
                            <a href={params.url>
                             Redefine password
                            </a>
                            <p >
                             If the above button does not work, copy and paste the following link to your browser:
                              <p>{params.url}</p>
                            </p>
                            <p></p>
                            <p>
                            Best regards<br />
                              
                            </p>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  );
};

export default ForgotPasswordEmail;

Props

- Params: Type definition for the params prop.
- name: The recipient's name.
- url: The password reset URL.
- email: The recipient's email address.

JSX Structure

- Outer Container:
- A div wrapping the entire email content..
- Table Structure:
- Uses HTML table elements to structure the email layout for better cross-email client compatibility.
- Content:
- Header
- An h2 element for the title "Password recovery".
- Greeting
- A personalized greeting using the recipient's name from params.name.
- Instructions
- A paragraph explaining the purpose of the email and instructions to ignore if the request wasn't made by the recipient.
- Reset Link
- An anchor a tag with an href attribute set to params.url, allowing the recipient to click and reset their password.
- Alternative Link
- Instructions for what to do if the button doesn't work, including copying and pasting the URL.
- Closing
- A friendly closing message.

Auth

API