[FEAT] EMAIL TEMPLATES > Implement reset password page WITHOUT image

[crystal4000]

Description

Develop a clean and functional Reset Password Email Template. This email is designed to allow users to safely reset their password when requested, providing clear instructions and a secure method to do so.

Acceptance Criteria

• The email template is implemented according to the provided design, WITHOUT an image.
• The template is responsive and displays correctly across various email clients.
• Should be created with React Email or pure HTML/CSS

Requirements

The email template should include the following elements:

• Main heading: "Reset Your Password"
• Personalized greeting (e.g., "Hi John Doe,")
• Brief explanation of why they're receiving this email
• Instructions on how to reset the password
• Call-to-action button for password reset
• Security note (if user didn't request reset)
• Sign-off and company name

Tasks:

• Develop the Reset Password Email Template based on the provided design and requirements.
• Implement a responsive layout that works well across different email clients.
• Set up personalization fields for the recipient's name.
• Implement the Reset Password button with proper styling and linking.
• Ensure all text content is editable for easy customization.
• Implement tracking parameters for the Reset Password button (if applicable).
• Add a security note for users who didn't request a password reset.

  Timeframe

  Deadline: Saturday @ 10pm

Links

| FIGMA LINK

Images

[Maticmania]

Update: Implemented Reset Password Email Template

I have implemented the Reset Password Email template using React Email. Below are the details of the changes:

• Created ResetPasswordEmail Component: The component accepts recipientName and resetLink as props and renders a styled email template.

• Responsive Layout: Ensured the email template is responsive and displays correctly across various email clients.

• Loader Function: Added a loader function in the/reset-password-email route to fetch and provide the necessary data (recipient name and reset link) to the email component.

• Route for Testing: Set up a new route /reset-password-emailto serve the email template, allowing for easy testing and validation.

[Maticmania]

Here is a Screenshot of what i did