Validate Last Name and User ID (Username)

Purpose: Validate user record to ensure required fields are populated and data is of appropriate format. Real time feedback will be provided to the user per UX designs (supported by Stripes components).

CB Note: This story was written assuming the validation component would be working according to UX's specifications. If that's not the case, we can proceed with the standard React component that already exists in Stripes. Please indicate in the comments if any scenarios couldn't be met and I'll create a separate story for those.

Scenarios

1. Scenario
   • Given "Last name" field on User Details (this is currently labeled "Username" but we want to change it to "User ID")
   • When field has been touched and left empty
   • Then:
     • Error input is shown by outlining field with red and a red attention icon at the end of the input field
     • The following error message is displayed: “Please fill this in to continue”
       Scenarios
2. Scenario
   • Given "User ID" field on User Details
   • When field has been touched and left empty
   • Then:
     • Error input is shown by outlining field with red and a red attention icon at the end of the input field
     • The following error message is displayed: “Please fill this in to continue”
3. Scenario
   • Given "User ID" field on User Details
   • When field has been populated with a non-unique User ID and focus has left the field
   • Then:
     • Error input is shown by outlining field with red and a red attention icon at the end of the input field
     • The following error message is displayed: “This User ID has already been taken”
4. Scenario
   • Given any editable field on User Details
   • When field has been populated with a valid entry and focus has left the field
   • Then valid input is shown by outlining field in green and a green checkmark icon at the end of the input field.
5. Scenario
   • Given any editable field on User Details
   • When field has been populated (regardless of whether entry is valid or invalid) and is in focus
   • Then an "x" is shown within the field (just to the left of the checkmark or attention icon
6. Scenario
   • Given a field on User Details is in focus
   • When the "x" is clicked
   • Then:
     • The field value is cleared
     • The field is returned to the neutral state