refactor(views/SignIn): split component and hooks

[sbolel]

Summary

This PR focuses on improving the accessibility and best practices of the existing sign-in view. It splits the SignIn view into multiple files, and pulls out hooks into a custom hook instead of implementing them inside the component itself. It also includes changes related to the file structure, moving all sign-in related files into a single directory.

The main changes are:

• The form input fields now have associated labels that are correctly linked using the "for" attribute for better accessibility.
• The usage of react-hook-form library for managing form state and validation is now consistent throughout the entire form.
• Error messages are now tied to the corresponding input field with aria-describedby attribute, improving accessibility.
• Created a new form component FormControlInput that is a reusable form input with react-hook-form controls.
• Created a new helper component PasswordVisibilityToggle to manage the show/hide password functionality, enhancing code reusability.
• Extracted custom styled components into a separate module to keep the main component code cleaner.
• The form's submit handler now checks the form validity before proceeding with the login logic.
• The sign-in hook now uses the Auth module from AWS Amplify for handling the federated sign in.
• Introduced Jest tests for the useSignIn hook, increasing the code's reliability.

Other:

• moved SignInGraphic into SignIn.components.tsx

Related Issues

• Closes Add Autocomplete and ARIA Attributes to Form Fields in SignIn View #82

How to test

• yarn start - start the application and log in to verify that the sign in page behaves as expected.

Coverage:

-------------------------------------|---------|----------|---------|---------|---------------------------
File                                 | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-------------------------------------|---------|----------|---------|---------|---------------------------
 src/components                      |         |          |         |         |
  PasswordVisibilityToggle.tsx       |     100 |      100 |     100 |     100 |
 src/components/forms                |     100 |    81.81 |     100 |     100 |
  InputFormControl.tsx               |     100 |       80 |     100 |     100 | 31-52
  SubmitButton.tsx                   |     100 |      100 |     100 |     100 |
 src/views/SignIn                    |    97.5 |      100 |    92.3 |    98.5 |
  SignIn.components.tsx              |      92 |      100 |    87.5 |   92.85 | 61
  SignIn.tsx                         |     100 |    57.14 |     100 |     100 | 133,149
  useSignIn.ts                       |   75.75 |      100 |   66.66 |      75 | 82-92

[qtpeters]

I'm having a hard time correctly configuring this application. I have a file named: .env.development.local I have been using to configure it, however I'm still getting:

because UserPoolId is not undefined. I tried having that config file at the root of the application, then I put exports on the variables in the file and imported the variables into the environment. Neither worked. Do me a monster favor and put detailed configuration instructions into the README or the PR instructions (README is better because it will stay there for future reference) and I'll review it again.

[sbolel]

@qtpeters all you need to do is

cp .env.test .env.development.local

and then enter in the right values for the dev environment. I sent you these values on Slack.

[DerekStrickland]

All tests passing

[qtpeters]

Testing it worked. LGTM

[qtpeters]

👍

[github-actions]

🎉 This PR is included in version 1.4.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀