Updata auth

Author: tduyng

json-server.json

@@ -37,7 +37,7 @@
     "prettier": "^2.1.2"
   },
   "scripts": {
-    "json-server": "json-server --watch server/db.json",
+    "json-server": "json-server --watch server/db/db.json --routes server/routes.json --port 5000",
     "dev": "react-scripts start",
     "start": "concurrently \"yarn json-server\" \"yarn dev\"",
     "build": "react-scripts build",
@@ -63,4 +63,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

package.json

@@ -13,3 +13,16 @@ export const loginFailed = payload => ({
   type: types.LOGIN_FAILED,
   payload,
 });
+
+export const userLoaded = payload => ({
+  type: types.USER_LOADED,
+  payload,
+});
+
+export const authError = () => ({
+  type: types.AUTH_ERROR,
+});
+
+export const logout = () => ({
+  type: types.LOGOUT,
+});

src/components/Auth/Login/Login.actions.ts

@@ -1,3 +1,6 @@
-export const LOGIN_REQUESTED = 'views/login/LOGIN_REQUESTED';
-export const LOGIN_SUCCESS = 'views/login/LOGIN_SUCCESS';
-export const LOGIN_FAILED = 'views/login/LOGIN_FAILED';
+export const LOGIN_SUCCESS = 'views/auth/LOGIN_SUCCESS';
+export const LOGIN_FAILED = 'views/auth/LOGIN_FAILED';
+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';

src/components/Auth/Login/Login.constants.ts

@@ -2,23 +2,38 @@ import * as types from './Login.constants';
 import produce from 'immer';
 
 const initialState = {
-  loading: false,
+  loading: true,
   isAuthenticated: false,
+  token: localStorage.getItem('token'),
+  user: null,
 };
 
 export const loginReducer = (state = initialState, action) =>
   produce(state, draft => {
     switch (action.type) {
+      case types.USER_LOADED:
+        draft.isAuthenticated = true;
+        draft.loading = false;
+        draft.user = action.payload;
+        break;
       case types.LOGIN_REQUESTED:
         draft.loading = true;
+        draft.isAuthenticated = false;
+        draft.user = action.payload;
         break;
       case types.LOGIN_SUCCESS:
         draft.loading = false;
         draft.isAuthenticated = true;
         break;
       case types.LOGIN_FAILED:
+      case types.AUTH_ERROR:
+      case types.LOGOUT:
+        localStorage.removeItem('token');
         draft.loading = false;
+        draft.isAuthenticated = false;
+        draft.token = null;
         break;
+
       default:
         return state;
     }

src/components/Auth/Login/Login.reducers.ts

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Form, Input, Button, Checkbox } from 'antd';
+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';
@@ -28,11 +28,11 @@ const _Login = (props: Props) => {
       const payload = { username, password };
       try {
         const res = await login(payload);
+        message.success('Login successfully');
         history.push(PATH.HOME);
-        console.log('Success', res);
       } catch (error) {
+        message.error(error.message);
         setError(error.payload.message);
-        console.log('Error', error.message);
       }
     }
   };
@@ -86,6 +86,7 @@ const _Login = (props: Props) => {
               type="primary"
               htmlType="submit"
               className="login-form-button"
+              loading={loading}
             >
               Log in
             </Button>

src/components/Auth/Login/index.tsx

@@ -0,0 +1,11 @@
+import * as types from './Register.constants';
+
+export const registerSuccess = payload => ({
+  type: types.REGISTER_SUCCESS,
+  payload,
+});
+
+export const registerFailed = payload => ({
+  type: types.REGISTER_FAILED,
+  payload,
+});

src/components/Auth/Register/Register.actions.ts

@@ -0,0 +1,2 @@
+export const REGISTER_SUCCESS = 'views/auth/REGISTER_SUCCESS';
+export const REGISTER_FAILED = 'views/auth/REGISTER_FAIL';

src/components/Auth/Register/Register.constants.ts

@@ -0,0 +1,26 @@
+import * as types from './Register.constants';
+import produce from 'immer';
+
+const initialState = {
+  loading: true,
+  isAuthenticated: false,
+  token: localStorage.getItem('token'),
+};
+
+export const loginReducer = (state = initialState, action) =>
+  produce(state, draft => {
+    switch (action.type) {
+      case types.REGISTER_SUCCESS:
+        draft.loading = false;
+        draft.isAuthenticated = true;
+        break;
+      case types.REGISTER_FAILED:
+        localStorage.removeItem('token');
+        draft.token = null;
+        draft.loading = false;
+        draft.isAuthenticated = false;
+        break;
+      default:
+        return state;
+    }
+  });