Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: change login form to react hook form #333

Merged
merged 6 commits into from
Dec 19, 2024
Merged

Conversation

gab-gil
Copy link
Collaborator

@gab-gil gab-gil commented Dec 18, 2024

  • The project passes automated tests locally (build, linting, etc.).
  • You updated the project's documentation with new changes.
  • You've linked any issue this PR closes
  • You reviewed your own PR and made sure there's no test/debug code or any obvious mistakes.

Make sure that the code wasn't copied from elsewhere (check one):

  • This is your own original code
  • You have made sure that we have permission to use the copied code and that we follow its licensing

Add a description of your changes, including visual aid and useful links

Copy link
Contributor

@Samuel-Therrien-Beslogic Samuel-Therrien-Beslogic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding missing translation and improving this form as well!
I left a few comments, namely around semantic HTML.

canopeum_frontend/src/pages/Login.tsx Outdated Show resolved Hide resolved
canopeum_frontend/src/pages/Login.tsx Outdated Show resolved Hide resolved
Comment on lines 97 to 100
id='email-input'
onBlur={() => validateEmail()}
onChange={event => setEmail(event.target.value)}
type='email'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See above comment for the id linked to the label

You should keep at the very least the name or type to email. type is even better.

This will tell screen readers (including form autocompletion browser plugins and mobile apps) that this is an email field. It'll also update the keyboard on mobile device to their email mode (where symbols like @ are shown in quick selection)

canopeum_frontend/src/pages/Login.tsx Outdated Show resolved Hide resolved
Comment on lines +95 to +96
{/* TODO: Make a component, this is extracted from the Checkbox */}
{/* component until everything uses React Hook Forms */}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this is planned as the immediate follow-up PR to update the Checkbox component, I'm fine with that being done separately.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not immediate but I saw that the only other place we used was the SiteSummaryAction. I was planning on probably doing a refactoring of that next so that I can refactor the component. Is that ok with you?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah ok that sounds good. I just didn't want to end up with two ways of handling checkboxes for too long. Or forgetting about them.

@gab-gil gab-gil merged commit 01f22a2 into main Dec 19, 2024
2 checks passed
@gab-gil gab-gil deleted the refactor/login-form branch December 19, 2024 16:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants