diff --git a/src/AppRouters.jsx b/src/AppRouters.jsx index 268a456..0304ec2 100644 --- a/src/AppRouters.jsx +++ b/src/AppRouters.jsx @@ -2,6 +2,7 @@ import { Routes, Route } from 'react-router-dom'; import UserExist from './component/authorization/UserExist'; import AuthLayout from './component/auth/AuthLayout'; +import BearerToken from './component/authorization/BearerToken'; import siteLinks from './links/siteLinks'; import LoginPage from './views/LoginPage'; @@ -22,27 +23,29 @@ function AppRouters() { return (
- {/* auth routes wrapper */} - }> - } /> - } /> - } /> - } /> - } /> - } /> - + }> + {/* auth routes wrapper */} + }> + } /> + } /> + } /> + } /> + } /> + } /> + - {/* protected routes */} - }> - }> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + {/* protected routes */} + }> + }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + diff --git a/src/component/auth/Login2.jsx b/src/component/auth/Login2.jsx index 58bbbc8..d1f2034 100644 --- a/src/component/auth/Login2.jsx +++ b/src/component/auth/Login2.jsx @@ -19,9 +19,9 @@ export default function Login() { const navigate = useNavigate() const [fields, setFields] = useState({ - username: localStorage.getItem('username') || '', + username: '', password: '', - remember: localStorage.getItem('username') ? true : false + remember: false }) const handleChange = ({target:{name, value}}) => { @@ -37,20 +37,25 @@ export default function Login() { throw new Error('Please provide all fields marked *') } rememberMe(fields.remember) // FUNCTION TO SAVE USERNAME OF THE USER TO LOCAL STORAGE + delete fields.remember // REMOVING REMEMBER FROM THE PAYLOAD return loginUser(fields) }, onError: (error) => { console.log(error) }, onSuccess: (res) => { - const {token, room} = res?.data?.data - if(token){ - localStorage.setItem('token', token) - localStorage.setItem('room', room) - // const data = {token} - // dispatch(updateUserDetails({ ...data })); - navigate('/dash') // later add redux to dispatch state + if(res?.data?.error_message){ + throw({message: res?.data?.error_message}) } + const {token, room, uid} = res?.data + if(!token || !room){ + throw({message: 'something went wrong, try again!'}) + } + localStorage.setItem('token', token) + localStorage.setItem('room', room) + localStorage.setItem('uid', uid) + dispatch(updateUserDetails({ ...res?.data })); + navigate('/dash') // later add redux to dispatch state } }) @@ -85,13 +90,13 @@ export default function Login() {
- +
- + diff --git a/src/component/authorization/BearerToken.jsx b/src/component/authorization/BearerToken.jsx new file mode 100644 index 0000000..6d1ac85 --- /dev/null +++ b/src/component/authorization/BearerToken.jsx @@ -0,0 +1,46 @@ +import {useEffect} from 'react' +import { useMutation } from '@tanstack/react-query' +import { Outlet } from 'react-router-dom' +import MainLoaderBS from '../loaders/MainLoaderBS' + +import { userToken } from '../../services/services' + +export default function BearerToken() { + const bearerToken = useMutation({ + mutationFn: (fields) => { + return userToken(fields) + }, + onError: (error) => { + location.reload(); + }, + onSuccess: (res) => { + if(res?.data?.resultCode != '0'){ + throw({message: 'Something went wrong'}) + } + const {access_token, refresh_token} = res?.data?.data + if(access_token){ + localStorage.setItem('access_token', access_token) + }else{ + throw({message: 'Something went wrong'}) + } + } + }) + + useEffect(()=>{ + let reqData = { + "username": "user", + "password": "password" + } + bearerToken.mutate(reqData) + },[]) + + return ( + <> + {bearerToken.isPending ? + + : + + } + + ) +} diff --git a/src/component/authorization/UserExist.jsx b/src/component/authorization/UserExist.jsx index b4f4cb5..f1c318b 100644 --- a/src/component/authorization/UserExist.jsx +++ b/src/component/authorization/UserExist.jsx @@ -1,13 +1,15 @@ import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from "react-redux"; import { Outlet, useNavigate } from 'react-router-dom' +import { useMutation } from '@tanstack/react-query' + import { updateUserDetails } from "../../store/UserDetails"; +import { userInfo } from '../../services/services' import MainLoaderBS from '../loaders/MainLoaderBS' import Layout from '../layout/Layout' import siteLinks from '../../links/siteLinks' import debounceFunction from '../../utils/debounceFunction' -import { accountDashboard } from '../../services/services'; import { SocketContextValues } from '../context/SocketIOContext'; @@ -23,9 +25,9 @@ export default function UserExist() { const [lastActivityTime, setLastActivityTime] = useState(Date.now()); // HOLDS THE INITIAL TIME USER LOGS IN - const { userDetails: { lastname }} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active + const { userDetails: { token, room }} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active - let loggedIn = lastname ? true : false; // variable to determine if user is logged in + let loggedIn = token && room ? true : false; // variable to determine if user is logged in // console.log('loggedIn', loggedIn) // Function to log the user out @@ -40,6 +42,31 @@ export default function UserExist() { debounceFunction(setLastActivityTime(Date.now()), 1000) }; + + + const getUser = useMutation({ + mutationFn: (fields) => { + return userInfo(fields) + }, + onError: (error) => { + navigate(siteLinks.login) + setLoading(false) + }, + onSuccess: (res) => { + const {token, room, uid} = res?.data + if(!token || !room){ + navigate(siteLinks.login) + setLoading(false) + return + } + localStorage.setItem('token', token) + localStorage.setItem('room', room) + localStorage.setItem('uid', uid) + dispatch(updateUserDetails({ ...res?.data })); + setLoading(false) + } + }) + useEffect(()=>{ const timer = setTimeout(()=>{ if(Date.now() - Number(lastActivityTime) >= Number(process.env.REACT_APP_TIMEOUT)){ @@ -61,37 +88,21 @@ export default function UserExist() { window.removeEventListener(event, resetTimer); }) } - },[lastActivityTime]) - + },[lastActivityTime]) + useEffect(()=>{ - accountDashboard().then(res => { - const {dash_data} = res?.data + let token = localStorage.getItem('token') // USER TOKEN + let uid = localStorage.getItem('uid') // USER UID + if(token && loggedIn){ setLoading(false) - dispatch(updateUserDetails({ ...dash_data })); - }).catch(err => { + }else if(token && uid && !loggedIn){ + const reqData = {token, uid} + getUser.mutate(reqData) + }else{ navigate(siteLinks.login) setLoading(false) - }) + } },[]) - - - // useEffect(()=>{ - // let token = localStorage.getItem('token') - // const timer = setTimeout(()=>{ - // if(token && loggedIn){ - // setLoading(false) - // }else if(token && !loggedIn){ - // const data = {token} - // dispatch(updateUserDetails({ ...data })); - // setLoading(false) - // // dispatch(updateUserDetails({ ...res.data })); - // }else{ - // navigate('auth/login') - // } - // },1000) - - // return () => clearTimeout(timer) - // },[]) useEffect(()=>{ if(localStorage.getItem('room')){ diff --git a/src/component/home/TopBar.jsx b/src/component/home/TopBar.jsx index 7d2b83c..8d81040 100644 --- a/src/component/home/TopBar.jsx +++ b/src/component/home/TopBar.jsx @@ -1,5 +1,5 @@ -import { useQuery } from '@tanstack/react-query' import React from 'react' +import { useQuery } from '@tanstack/react-query' import { topBar } from '../../services/services' import queryKeys from '../../services/queryKeys' diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js index 9ebcce1..8067416 100644 --- a/src/services/queryKeys.js +++ b/src/services/queryKeys.js @@ -1,4 +1,6 @@ const queryKeys = { + user_details: ['user_details'], + dashboard: ['dashboard'], topBar: ['top-bar'], recentAction: ['recent-action'], diff --git a/src/services/services.js b/src/services/services.js index bc03d86..bc2be2d 100644 --- a/src/services/services.js +++ b/src/services/services.js @@ -4,12 +4,12 @@ import axios from "axios" axios.interceptors.request.use( config => { config.headers = { - // Accept: "application/json", + Accept: "application/json", "Access-Control-Allow-Origin": "*", // "Access-Control-Expose-Headers": "Access-Control-Allow-Origin", // "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token", // "Content-Type": "application/json;charset=UTF-8", - 'Authorization': `Bearer ${localStorage.getItem('token')}` + 'Authorization': (localStorage && localStorage.getItem('access_token')) ? `Bearer ${localStorage.getItem('access_token')}` : '' }; // config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`; // config.baseURL = process.env.REACT_APP_MAIN_API @@ -25,7 +25,7 @@ const postAuxEnd = (path, postData, media=false) => { return axios.post(`${basePath}${path}`, postData).then(res => { return res }).catch(err => { - throw new Error(err.response.data.message); + throw new Error(err.response.data.msg); }) } @@ -42,14 +42,36 @@ const getAuxEnd = (path, reqData= null) => { }) } +// FUNCTION TO LOGIN USER IN +export const userToken = (reqData) => { + let postData = { + ...reqData + } + return postAuxEnd('/Authorize', postData, false) +} + // FUNCTION TO LOGIN USER IN export const loginUser = (reqData) => { let postData = { ...reqData } - return postAuxEnd('/panel/auth/login', postData, false) + return postAuxEnd('/panel/Login', postData, false) } +// FUNCTION TO GET USER INFO DATA +export const userInfo = (reqData) => { + let postData = { + ...reqData + } + return postAuxEnd('/panel/Account', postData, false) +} +// export const getUserDetails = (reqData) => { +// return getAuxEnd(`/panel/Account`, reqData) +// } + + + + // FUNCTION TO REGISTER USER export const signUpUser = (reqData) => { let postData = { @@ -91,11 +113,6 @@ export const recoverPWD = (reqData) => { return postAuxEnd('/panel/auth/reset', postData, false) } -// FUNCTION TO GET DASHBOARD DATA -export const accountDashboard = () => { - return getAuxEnd(`/panel/account/dash`) -} - // FUNCTION TO GET DASHBOARD TOP BAR SECTION export const topBar = () => { return getAuxEnd(`/panel/account/bar`)