Overview

The ForgotPasswordTemplate component provides a sample UI forgot password screen using MYDS components. It includes:

• ForgotPasswordTemplate – A clean, centered form where users enter their email to request a password reset, with a “Back to Login” link.
• ResetEmailTemplate – A confirmation screen telling the user to check their email, with options to open their email app or resend the link.
• SetNewPasswordTemplate – A secure form for creating a new password, including password strength guidance.
• SetNewPasswordSuccessTemplate – A success screen confirming the password reset and prompting the user to log in.

This forgot password pages template is built for rapid development and easy integration. It is designed to help teams get started faster by providing a layout that adheres to the MYDS design system, eliminating the need to piece together individual components manually.

⚠️ Note: This is a design-only template. It does not include any functional logic such as:

• Form field validation
• API requests for sending reset links

You are expected to implement such logic based on your own system needs.

Anatomy

<ForgotPasswordTemplate />
└── PageContainer (full-screen background)
    └── CenteredCard
        ├── Title ("Forgot password?")
        ├── Subtitle ("Don't worry, we'll send you reset instructions.")
        ├── Form
        │   ├── Label (Email)
        │   ├── Input (Email)
        │   └── Reset Password Button
        └── Back to Login Link


<ResetEmailTemplate />
└── PageContainer (full-screen background)
    └── CenteredCard (text-centered)
        ├── Title ("Check your email")
        ├── Subtitle (includes recipient email address)
        ├── Button ("Open email app")
        ├── Resend Link Text + Link
        └── Back to Login Link


<SetNewPasswordTemplate />
└── PageContainer (full-screen background)
    └── CenteredCard (text-centered)
        ├── Title ("Set new password")
        ├── Subtitle ("Your new password must be different...")
        ├── Form
        │   ├── Label + Input (New Password)
        │   ├── Label + Input (Confirm New Password)
        │   └── Password Requirements List (with icons)
        └── Reset Password Button
        └── Back to Login Link


<SetNewPasswordSuccessTemplate />
└── PageContainer (full-screen background)
    └── CenteredCard (small, shadowed)
        ├── Success Icon
        ├── Title ("Password reset")
        ├── Subtitle ("Your password has been successfully reset...")
        └── Login Button

Features

• Uses MYDS styling system and components.
• Fully responsive with adaptive UIs for small screens.
• Basic Template screens to get started

Customization

You can edit anything inside the code, its fully customizable! It’s built to help you get started quickly with a login UI and is meant to be adapted however you like. Think of this as a flexible UI starting point, where you can change anything, add anything, and make it your own!

Previously, using just MYDS components meant you still had to design and style entire pages from scratch. Now, with the new templates, you don’t have to worry about CSS or layout design. They come with ready-made, mobile-friendly UIs to speed up your development!