Update Auth

Author: tduyng

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.3.0",
+    "@types/axios": "^0.14.0",
     "antd": "^4.8.6",
     "concurrently": "^5.3.0",
     "immer": "^8.0.0",
@@ -16,7 +17,8 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "styled-components": "^5.2.1",
-    "typescript": "~4.0.5"
+    "typescript": "~4.0.5",
+    "uuid": "^8.3.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.5",

server/db/db.json

@@ -1,4 +1,9 @@
 {
-  "users": [],
+  "users": [{
+    "id": "dfdmsqjfmsd",
+    "username": "usertest",
+    "email": "emailusertest@gmail.com",
+    "password": "123"
+  }],
   "products": []
 }

src/@types/user.d.ts

@@ -2,8 +2,23 @@ interface ReqLogin {
   username: string;
   password: string;
 }
+interface ReqRegister {
+  username: string;
+  email: string;
+  password: string;
+}
 interface ResLoginApi extends Res {
   data: {
-    access_token: string;
+    id: string;
+    username: string;
+    email: string;
+    password: string;
   };
 }
+
+interface IUser {
+  id: string;
+  username: string;
+  email?: string;
+  password: string;
+}

src/App/App.reducer.ts

@@ -1,5 +1,5 @@
 import * as types from './App.constants';
-import { LOGIN_SUCCESS } from 'src/components/Auth/Login/Login.constants';
+import { LOGIN_SUCCESS } from 'src/components/Auth/Login/Auth.constants';
 import produce from 'immer';
 
 const initialState = {

…c/components/Auth/Login/Login.actions.ts src/components/Auth/Auth.actions.tssrc/components/Auth/Login/Login.actions.ts renamed to src/components/Auth/Auth.actions.ts src/components/Auth/Login/Login.actions.ts renamed to src/components/Auth/Auth.actions.ts

@@ -1,4 +1,4 @@
-import * as types from './Login.constants';
+import * as types from './Auth.constants';
 
 export const loginRequested = () => ({
   type: types.LOGIN_REQUESTED,
@@ -26,3 +26,13 @@ export const authError = () => ({
 export const logout = () => ({
   type: types.LOGOUT,
 });
+
+export const registerSuccess = payload => ({
+  type: types.REGISTER_SUCCESS,
+  payload,
+});
+
+export const registerFailed = payload => ({
+  type: types.REGISTER_FAILED,
+  payload,
+});

…components/Auth/Login/Login.constants.ts src/components/Auth/Auth.constants.tssrc/components/Auth/Login/Login.constants.ts renamed to src/components/Auth/Auth.constants.ts src/components/Auth/Login/Login.constants.ts renamed to src/components/Auth/Auth.constants.ts

@@ -4,3 +4,5 @@ export const LOGIN_REQUESTED = 'views/auth/LOGIN_REQUESTED';
 export const USER_LOADED = 'views/auth/USER_LOADED';
 export const AUTH_ERROR = 'views/auth/AUTH_ERROR';
 export const LOGOUT = 'views/auth/LOGOUT';
+export const REGISTER_SUCCESS = 'views/auth/REGISTER_SUCCESS';
+export const REGISTER_FAILED = 'views/auth/REGISTER_FAIL';

…/components/Auth/Login/Login.reducers.ts src/components/Auth/Auth.reducers.tssrc/components/Auth/Login/Login.reducers.ts renamed to src/components/Auth/Auth.reducers.ts src/components/Auth/Login/Login.reducers.ts renamed to src/components/Auth/Auth.reducers.ts

@@ -1,4 +1,4 @@
-import * as types from './Login.constants';
+import * as types from './Auth.constants';
 import produce from 'immer';
 
 const initialState = {
@@ -22,12 +22,14 @@ export const loginReducer = (state = initialState, action) =>
         draft.user = action.payload;
         break;
       case types.LOGIN_SUCCESS:
+      case types.REGISTER_SUCCESS:
         draft.loading = false;
         draft.isAuthenticated = true;
         break;
       case types.LOGIN_FAILED:
       case types.AUTH_ERROR:
       case types.LOGOUT:
+      case types.REGISTER_FAILED:
         localStorage.removeItem('token');
         draft.loading = false;
         draft.isAuthenticated = false;

src/components/Auth/Auth.thunks.ts

@@ -0,0 +1,53 @@
+import axios from 'axios';
+import { URL } from 'src/constants/urls';
+import * as actions from './Auth.actions';
+import { v4 as uuid } from 'uuid';
+
+export const loadUser = () => async dispatch => {
+  const tokenId = localStorage.getItem('token');
+  if (!tokenId) {
+    return dispatch(actions.authError);
+  }
+  try {
+    const res = await axios.get(`${URL.baseAPIUrl}/api/users/${tokenId}`);
+    if (res) {
+      return dispatch(actions.userLoaded(res));
+    }
+    dispatch(actions.authError);
+  } catch (error) {
+    return dispatch(actions.authError);
+  }
+};
+
+export const login = (payload: ReqLogin) => async dispatch => {
+  const { username, password } = payload;
+  try {
+    let allUsers: IUser[] = [];
+    allUsers = await axios.get(`${URL.baseAPIUrl}/api/users`);
+    let user = allUsers.filter(x => x.username === username)[0];
+    if (user && user.password === password) {
+      localStorage.setItem('token', user.id);
+      dispatch(actions.loginSuccess(user));
+      loadUser();
+    }
+    dispatch(actions.loginFailed);
+  } catch (error) {
+    return dispatch(actions.loginFailed);
+  }
+};
+
+export const register = (payload: ReqRegister) => async dispatch => {
+  try {
+    const id = uuid();
+    const newUser = { id, ...payload };
+    await axios.post(`${URL.baseAPIUrl}/api/users`, newUser);
+    localStorage.setItem('token', id);
+    dispatch(actions.registerSuccess(newUser));
+    loadUser();
+  } catch (error) {
+    return dispatch(actions.registerFailed);
+  }
+};
+export const logout = () => async dispatch => {
+  return dispatch(actions.logout);
+};

src/components/Auth/Login/index.tsx src/components/Auth/Login.tsxsrc/components/Auth/Login/index.tsx renamed to src/components/Auth/Login.tsx

@@ -3,7 +3,7 @@ import { Form, Input, Button, Checkbox, message } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 import { connect, ConnectedProps } from 'react-redux';
 import { useHistory, Link } from 'react-router-dom';
-import { login } from './Login.thunks';
+import { login } from './Auth.thunks';
 import { PATH } from 'src/constants/paths';
 
 const mapStateToProps = state => ({