2 page REACTJS interacting with webapi.

I need two pages created in ReactJS
UI - I use a free AdminLTE template
Will provide WebAPI end URL
1) Login Page:
Basic mandatory validation
When submitting the for-call web API
- If it returns an empty object OR not found error they show the error message - invalid username and password
- If it returns an object and if is email confirmation flag is true - show the error message email not validated
- If it returns an object and if is password rest flag is true - show the error message password is under reset
- If it passed the above validation take it to some page and store the object in session or cache.

2) Portfolio Page: this page has a grid with the below functionality (There will be 5-7 fields with basic validation)
View - On clicking the record or view button details from the grid should be shown on the sliding screen right side.
Edit - On clicking the edit button details from the grid should be shown on the sliding screen right side and the field should be editable and saved.
Delete- On clicking the delete button details from the grid, popup with are you sure to delete with ok and cancel.
Add - On clicking Add button fields should be shown on the sliding screen right side and the field should be editable and saved.