make this forget password flow , my .env file code is : NEXT_PUBLIC_BACKEND_URL=http://localhost:5001/api/v1
my forgot api is: {{baseURL}}/user/forget-password & body is: { "email": "nurmohammad0605@gmail.com" }
& verify otp api is: {{baseURL}}/user/verifyOTP & body is : { "otp": "127496" } reset api is: {{baseURL}}/user/reset-password & body is : { "newPassword": "hello", "confirmPassword": "hello" } make this & design will take my given image
I'll create a complete forgot password flow that matches the cosmic design in your images and implements all the API endpoints you provided.
How to Use the Forgot Password Flow
I've created a complete forgot password flow that matches the cosmic design from your images and implements all the API endpoints you provided. Here's how it works:
Forgot Password Screen:
- Users enter their email address
- When they click "Send OTP", it calls the
/user/forget-passwordAPI - On success, they're taken to the OTP verification screen
OTP Verification Screen:
- Users enter the 6-digit OTP sent to their email
- The inputs are styled to match your design with purple highlights
- When they click "Verify", it calls the
/user/verifyOTPAPI - If the OTP is wrong, it shows the error state as in your screenshot
- Users can click "Resend" to go back to the email form
Reset Password Screen:
- Users enter and confirm their new password
- Password fields have toggle buttons to show/hide the password
- When they click "Update Password", it calls the
/user/reset-passwordAPI - On success, they're redirected to the login page
The design features:
- The cosmic purple background from your screenshots
- Semi-transparent card containers with blur effect
- Purple buttons matching your design
- Responsive layout that works on all device sizes
- Error handling for all API calls
To use this in your project, simply add these files to your Next.js application and navigate to /forgot-password to start the flow.
Please make sure to add the following environment variable to your project: