Implement the ResetPasswordUsingTokenTheme

[rishabhpoddar]

• import { ResetPasswordUsingTokenTheme } from "supertokens-auth-react/recipe/emailpassword"
• Themes should use a ThemeProvider which can be used to overwrite the default theme based on the passed props.

[mufassirkazi]

Reset password UI

Reset password UI (524 px width of white container)

• Default reset password screen: https://zpl.io/b6LpEQN
• Email Id error: https://zpl.io/bLeXMRY
• Change your password screen: https://zpl.io/bovleYG
• Password error screen: https://zpl.io/amoJN1Q
• Confirm password error screen: https://zpl.io/aBLnDjA
• Resend/ Change email screen: https://zpl.io/beQmp1N
• Resent screen: https://zpl.io/VQkz8W9
• Success screen: https://zpl.io/VYeDOQw

Reset password UI (420 px width of white container)

• Default reset password screen: https://zpl.io/bl9BEPk
• Email Id error: https://zpl.io/bLeXMRY
• Change your password screen: https://zpl.io/b6LpEvq
• Password error screen: https://zpl.io/2GLMvO3
• Confirm password error screen: https://zpl.io/VKeJ8oE
• Resend/ Change email screen: https://zpl.io/bLeX0xd
• Resent screen: https://zpl.io/V07ADJQ
• Success screen: https://zpl.io/VYeDOQw

Password Rest Email

• Design with context of email: https://zpl.io/bovy50m
• Design without context of email: https://zpl.io/2GLYxn9

Notes

• Rules about 524 px and 420 px white container given in sign up / sign in form apply here too.
• Rules about brand orange color and red color given in sign up / sign in form apply here too.
• Error states changeability given in sign up /sign in form apply here too.
• Clicking on 'Change email' inside 'Resend/ Change email screen' takes you to 'Default reset password screen'
• The resent confirmation message inside 'Resent screen' should be visible for 2.5 seconds only. After that it should disappear.
• In 'Password Reset Email', the logo size has a max height of 52px and a max width of 250 px. I am okay if we don't have a max width also because logo's width can vary largely.
• In 'Password Reset Email', the subject can be "Reset password instructions" or "Password reset request".

[rishabhpoddar]

@mufassirkazi We also need the password reset link email. It will contain:

• The app Name
• The password reset link
• The company logo URL (optional)

[mufassirkazi]

Updated comment above

[kant01ne]

Changes from the above:

• On https://app.zeplin.io/project/5aaa0de98d835c7b25637f2e/screen/5f89e087aa30b9bd20ad8bba

"Done" button becomes "Login" as Done doesn't really mean much. On successful reset password you want to get redirected to login page, so Login makes more sense.

• Replace all mentions of "email id" with "email" only, an Id is something that developers know about and end users shouldn't have to care about or even see.

• https://app.zeplin.io/project/5aaa0de98d835c7b25637f2e/screen/5f89b3ca25fa152f04a264d9

"Resend" button will not resend the email directly but will actually go back to email form. That way we make sure that the email is correct, and that the user doesn't use our system to spam email inboxes.