Hooking up a form with server actions and React Hook Form in NextJS comes up with some tradeoffs. The issue has been discussed in detail here.
For this PR I:
[x] Enabled NextJS 13 server actions by enabling the experimentalserverActions flag in next.config.js. - Reference
[x] Installed React Hook Forms to enable the client side form validation
[x] Created a server action for the login form (which will eventually have code to submit the form data to the api for authentication as part of a future issue). As of now, it simply prints the username and password on the server. The server action - loginFormAction as of now is written in a separate file - actions.tsx where all the server actions can co-reside, but we need to agree upon the location of this file.
[x] Added Login Form Component with basic css and hooked up React Hook Form and server action to it.
The form component has proper semantics and attributes
The form has an input field for the username and an input field for the password
The form has a submit button
The form submits when pressing the enter key
The user is not be able to submit an empty form (proper validation will be addressed in a future issue)
On submit, the page is not getting refreshed
On submit, the form inputs are logged to the console for now (this will be addressed in a future issue)
There should be validation of the form:
username: required and minimum length 4 password: required and minimum length 8 Submit button is disabled if form is invalid and empty
[x] Updated admin landing page on /admin route with the new login form component.
Related Issue
Closes #12
Acceptance Criteria
[x] Create a form component with proper semantics and attributes
[x] There should be an input field for the username
[x] There should be an input field for the password
[x] There should be a submit button
[x] The form submits when pressing the enter key
[x] The user should not be able to submit an empty form (proper validation will be addressed in a future issue)
[x] On submit, the page should not refresh
[x] On submit, the form inputs are logged to the console for now (this will be addressed in a future issue)
[x] There should be validation of the form:
[x] username: minimum length 4?
[x] password: minimum length 8?
[x] Submit button should be disabled if form is invalid
Description
Hooking up a form with server actions and React Hook Form in NextJS comes up with some tradeoffs. The issue has been discussed in detail here.
For this PR I:
[x] Enabled NextJS 13 server actions by enabling the experimental
serverActions
flag innext.config.js
. - Reference[x] Installed React Hook Forms to enable the client side form validation
[x] Created a server action for the login form (which will eventually have code to submit the form data to the api for authentication as part of a future issue). As of now, it simply prints the username and password on the server. The server action -
loginFormAction
as of now is written in a separate file -actions.tsx
where all the server actions can co-reside, but we need to agree upon the location of this file.[x] Added Login Form Component with basic css and hooked up React Hook Form and server action to it.
The form component has proper semantics and attributes
The form has an input field for the username and an input field for the password
The form has a submit button
The form submits when pressing the enter key
username
: required and minimum length 4password
: required and minimum length 8Submit button
is disabled if form is invalid and empty[x] Updated admin landing page on
/admin
route with the new login form component.Related Issue
Closes #12
Acceptance Criteria
Type of Changes
Updates
https://github.com/Full-Stack-Collective/connectient/assets/27571141/ba4661e4-532d-450a-8630-12bab2049bef