App: [$500] IdentityForm

Coming from the New Expensify Forms design doc, we should refactor the inputs within the IdentityForm to be compatible with the new Form component, following the guidelines below:

Here’s an example of a Form refactor: https://github.com/Expensify/App/pull/9056 Here is a component that had its inputs refactored to be compatible with Form.js.

Guidelines

Contributors should first read FORMS.md. The refactored inputs should be functional when wrapped by Form.js and when not.

1. Add an optional inputID prop.
2. Add an optional shouldSaveDraft prop that defaults to false.
3. Make the value prop optional.
4. Change any onChange prop, e.g. onTextChange to onChange.
5. In the input’s onBlur method, call props.onBlur().
6. In the input’s onChange method, call props.onChange() .
7. Remove the hasError prop.
8. Update the error message to display if errorText is truthy.
9. Make sure that props.ref is attached to the appropriate DOM node. This could involve forwarding the ref to a child component.
10. Make sure the ref is exposing both value and focus().
11. Add an optional maxLength prop to text inputs and UI to display the current character count out of the limit.
12. Add a hint prop and display the text under the input if there is no existing error.
13. Remove any unused code.

Testing

Verify that:

• UI looks as it did before the refactor
• Values can be added and edited
• Errors are highlighted correctly (input border)
• Error messages show up correctly
• Draft values are saved properly
• Form alerts are displayed correctly
• Clicking the fix the errors link focuses the first input with error
• No duplicate submission of the form occurs (when it’s already submitting)