In this assignment, you will build a login form in React that validates user input. The form will include a reset button to clear the input fields and a submit button that checks if any fields are empty. If validation fails, a modal will appear, and if validation passes, the page ONLY shows $$Hello$,$XXX$.$ XXX is the name of this user. This assignment is designed to reinforce your skills in using useRef, portals, useContext, and useReducer in React.

Requirement:

$1.$ The UI and the layout are user friendly.

$2.$ All the input boxes can update and work well.

$3.$ The reset button could reset all the input box empty.

$4.$ The error message modal works and only checks if the input is empty or not.

$5.$ If login successfully, the page ONLY shows $$Hello$,$ XXXX$.$ XXXX is the name of the user input.

$6.$ Add proper CSS style.

$7.$ Create useRef, portals, useContext, and useReducer in your code.

Create your app in codesandbox. $(10$ points$)$ Name

Email

Reset

Submit

Validation Error

All fields are required!