Multi-Purpose Username/Password Container Component with Error Display and space for third option

[CarolineHoang]

Component Description and Screenshot

Include a brief description of the component here, including what page(s) it will be on, along with a screenshot of the component from Figma.
Description:

Screenshot:

(each of the above fields should use the same component just adjusted each time)

Props and State

Note what props will be coming into the component, and what state it will have. Remember to reference React's instructions on how to figure out what state/props should be. Aim to make the component as flexible as possible-- we probably should not be hardcoding in content and instead pass it in as props.

Props: Field type (to change the kind of error displayed accordingly)
State:

• Editable (this is an enabled/disabled state toggled by a third option)
• hasError (if true, set string value of errorType and show error message, else hide error message)
• errorType (error message or code to disambiguate with a function to decide what the value is)

Parents and Children

Parents: Login/Signup/Account Management Container
Children: Username/Password field, error message, change/other option

Styling Notes

While looking at the component in Figma, note any pieces of styling that you might need here by checking out the CSS preview:

/* fonts */
font-family: Roboto;
font-style: normal;
font-weight: 500;

/* colors */
color: #9A9A9A;
background: #FFFFFF;

/* borders and shadows */
border: 2px solid #EC6C52;
border-radius: 5px;
box-shadow: 2px 10px 30px rgba(0, 0, 0, 0.05);

Remember not to copy any hardcoded positioning and size values.

Additional Notes

Are there any icons you will need? Images? Written content? Note that here so that we can get it from Product Design before we start!