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 LoginErrors = {
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 Login page if needed here.
ACs
Create the app/components/Login 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 Login page if needed here.
ACs
app/components/Loginfolder with the relevant files (including test + story)