Create a SignInForm component that can be used to render consistent, configurable Sign In forms accordign to the visual design in Figma.
The SignInForm component should have the following props:
| prop |
type |
default |
|
title |
string || bool |
"Sign In" |
The title above the form. When the user passes nothing, we render the default "Sign In". When the user explicitly sets the prop to false, we don't render a title at all. |
error |
string || bool |
false |
The error message when the user could not be authenticated. When the user passes true instead of a custom message string, we display our standard message "Authentication failed". |
resetPwUrl |
string/url |
"" |
The url to reset the password. does not render the link when the url is an empty string(default) |
children |
React node |
null |
The children to render (usually TextInput for username, TextIinput type=„password“ for password, optional checkbox „Remember me“, or any additional inputs a platform may require. These should be renderd in the sequence passed using a Stack component with a gap as defined per Figma |
Visual Design / Figma
Figma
Tests/QA
Write tests for all props, consider edge cases.
Storybook
In Storybook, create the following stories:
Default
Not the default behaviour of the SignIn form, but a typical configuration:
- default title
- username/email field
- password input
- password forgot link
Additional Inputs
- custom title
- additional select to choose from a variety of options, such as regions
Acceptance Criteria
Create a SignInForm component that can be used to render consistent, configurable Sign In forms accordign to the visual design in Figma.
The
SignInFormcomponent should have the following props:title"Sign In"false, we don't render a title at all.errorfalsetrueinstead of a custom messagestring, we display our standard message "Authentication failed".resetPwUrl""childrennullStackcomponent with agapas defined per FigmaVisual Design / Figma
Figma
Tests/QA
Write tests for all props, consider edge cases.
Storybook
In Storybook, create the following stories:
Default
Not the default behaviour of the SignIn form, but a typical configuration:
Additional Inputs
Acceptance Criteria