Finished login component

Did the following:
 - Extract front-end from component;
 - Added localStorage for remembering API details and access key;
 - Added routing to login component;

Todo:
 - Remove getApi*FromDTO;
 - Create ProtectedRoute to prevent unauthorized entry to /dashboard;
This commit is contained in:
2020-02-19 00:48:30 +01:00
parent 60079a1417
commit ae7d63db35
9 changed files with 254 additions and 62 deletions
+18 -7
View File
@@ -1,4 +1,4 @@
[![Netlify Status](https://api.netlify.com/api/v1/badges/9527e4dc-1bb2-40ef-b6eb-8515b91579bf/deploy-status)](https://app.netlify.com/sites/upbeat-agnesi-aad3fb/deploys)
[![Netlify Status](https://api.netlify.com/api/v1/badges/9527e4dc-1bb2-40ef-b6eb-8515b91579bf/deploy-status)](https://upbeat-agnesi-aad3fb.netlify.com/)
## Available Scripts
@@ -9,15 +9,26 @@ In the project directory, you can run:
Runs the app in the development mode.<br />
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br />
You will also see any lint errors in the console.
The page will reload if you make edits, you will also see any lint errors in the console.
### `yarn build`
Builds the app for production to the `build` folder.<br />
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br />
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
### Requirement list
- [X] Create React web app
- [ ] It should have fields for giving start date, end date and access token as arguments to the app.
- [ ] App should make HTTP GET request to the API to fetch chat counts between those two given dates.
- [ ] The dashboard should render three values from the API.
- [ ] The dashboard should render a Paginated List.
### Software used
\# | Software | Reason
--- | --- | ---
1. | React | Requirement.
2. | React Router | To route between different components, a react router is used.
3. | TypeScript | To make use of the strong types, I made use of TypeScript
4. | Bootstrap | To structure the front-end, bootstrap is used.