This component should accept a single property: an error object (for displaying validation errors from the backend).
We do not have the type for this error object yet, but you can expect something like:
type SignUpErrors = {
email: string;
password: string;
};
It should use the Form element with a method post from @remix-run/react(docs here), no need a route/action as it will be included in the action from Remix route in another issue.
It should include basic HTML validation of the inputs and a good use of semantic HTML like <label>.
It should include stylings using Tailwind. Find a nice looking design on Dribble or similar, and build it.
Consider light/dark mode too, using the dark: prefix.
You can take inspiration from Trellix Signup page if needed here.
ACs
Create the app/components/SignUp folder with the relevant files (including test + story)
Description
This component should accept a single property: an error object (for displaying validation errors from the backend).
We do not have the type for this error object yet, but you can expect something like:
It should use the
Formelement with a methodpostfrom@remix-run/react(docs here), no need a route/action as it will be included in theactionfrom Remix route in another issue.It should include basic HTML validation of the inputs and a good use of semantic HTML like
<label>.It should include stylings using Tailwind. Find a nice looking design on Dribble or similar, and build it. Consider light/dark mode too, using the
dark:prefix.You can take inspiration from Trellix Signup page if needed here.
ACs
app/components/SignUpfolder with the relevant files (including test + story)