A quick description outlining the context of this pull request.
An update to the client-side validation system for the login widget.
An overview of "avenues" that are influenced/affected by this work.
- This resolves issue
#123and#456.- The login widget can be found on the core
/loginscreen.- Leverages the
redux-formimplementation from pull request#789.- This validation enhancement will hide behind feature flag
[LOGIN.VALIDATION].
Dispel any ambiguity around why this bug/feature/enhancement was required.
Although the current validation system worked from a technical perspective, there were concerns round user accessibility (specifically message location and content) which would impact our WCAG 2 AA compliance rating.
Background on the changes/choices made to fulfill this pull request.
redux-formhas a built in validation system that fits our needs.- The integration requires that our form
<input />elements conform to the<Field />abstraction (which I created a simple HOC to achieve).redux-formcreates its own entry (and format) in theredux"store" so there were several references in the application that needed to be updated to the new state schema.
Any information that does not fit into the above categories giving extra context to the pull request.
We endeavor to move this validation pattern into our stand alone component architecture next sprint. The login widget is our initial test pilot (to validate our validation enhancements).
Bring clarity to the code with visual aids:
- Screenshots:
cmd+shift+4(MacOS). - Gifs: GIPHY Capture (free/MacOS).
- Code Snippets: Carbon (free).
If applicable, a before and after representation of your work is preferred.
Global invalidation message at the bottom of the form is visually discrete and uninformative.
Individual invalid messages on a per/input basis. Message plus the
<input />itself has an error aesthetic.
