diff --git a/src/App.test.tsx b/src/App.test.tsx index e70a43f08..488f4fc8b 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -47,11 +47,11 @@ describe(' ', () => { const tokenExpiryDate = new Date(); tokenExpiryDate.setDate(new Date().getDate() + 1); - setAuthSession( - '{"access_token":"access","renewal_token":"renew", "token_expiry_time":"' + - tokenExpiryDate + - '"}' - ); + setAuthSession({ + access_token: 'access', + renewal_token: 'renew', + token_expiry_time: tokenExpiryDate, + }); setUserSession(JSON.stringify({ organization: { id: '1' }, roles: ['Staff'] })); diff --git a/src/components/UI/Layout/Navigation/SideDrawer/SideDrawer.tsx b/src/components/UI/Layout/Navigation/SideDrawer/SideDrawer.tsx index 3ff5a6c02..5300dc44f 100644 --- a/src/components/UI/Layout/Navigation/SideDrawer/SideDrawer.tsx +++ b/src/components/UI/Layout/Navigation/SideDrawer/SideDrawer.tsx @@ -16,6 +16,7 @@ import GlificLogo from 'assets/images/logo/Logo.svg'; import { getUserRolePermissions, getUserAccountMenus, getStaffManagementMenus } from 'context/role'; import { Tooltip } from 'components/UI/Tooltip/Tooltip'; import { WalletBalance } from 'containers/WalletBalance/WalletBalance'; +import { LastLogin } from 'containers/LastLogin/LastLogin'; import { isGreaterThanLgBreakpoint } from 'common/utils'; import SideMenus from '../SideMenus/SideMenus'; @@ -183,6 +184,7 @@ export const SideDrawer = () => { {drawer} + diff --git a/src/config/apolloclient.ts b/src/config/apolloclient.ts index 6999bb476..4b0540d11 100644 --- a/src/config/apolloclient.ts +++ b/src/config/apolloclient.ts @@ -53,7 +53,7 @@ const gqlClient = (navigate: any) => { // in case of successful token renewal if (response.data) { // lets set the session - setAuthSession(JSON.stringify(response.data.data)); + setAuthSession(response.data.data); // we need to return below as handleFetch expects it tokenResponse[accessTokenField] = response.data.data.access_token; diff --git a/src/containers/Auth/Login/Login.tsx b/src/containers/Auth/Login/Login.tsx index 318d92dd7..788ec5ba3 100644 --- a/src/containers/Auth/Login/Login.tsx +++ b/src/containers/Auth/Login/Login.tsx @@ -122,10 +122,9 @@ export const Login = () => { }, }) .then((response: any) => { - const responseString = JSON.stringify(response.data.data); getCurrentUser(); getOrganizationServices(); - setAuthSession(responseString); + setAuthSession(response.data.data); }) .catch((error) => { setAuthError(t('Invalid phone or password.')); diff --git a/src/containers/LastLogin/LastLogin.module.css b/src/containers/LastLogin/LastLogin.module.css new file mode 100644 index 000000000..cb8d5c168 --- /dev/null +++ b/src/containers/LastLogin/LastLogin.module.css @@ -0,0 +1,8 @@ +.lastLogin { + position: absolute; + bottom: 26px; + font-size: 12px; + padding-left: 22px; + color: #073f24; + font-weight: 500; +} diff --git a/src/containers/LastLogin/LastLogin.tsx b/src/containers/LastLogin/LastLogin.tsx new file mode 100644 index 000000000..0a96bac95 --- /dev/null +++ b/src/containers/LastLogin/LastLogin.tsx @@ -0,0 +1,21 @@ +import moment from 'moment'; +import { useTranslation } from 'react-i18next'; + +import { getAuthSession } from 'services/AuthService'; +import { DATE_TIME_FORMAT } from 'common/constants'; + +import styles from './LastLogin.module.css'; + +interface LastLoginProps { + drawerOpen: boolean; +} + +export const LastLogin = ({ drawerOpen }: LastLoginProps) => { + const { t } = useTranslation(); + const lastLogin = getAuthSession('last_login_time'); + return drawerOpen ? ( +
+ {t('Last login')}: {moment(lastLogin).format(DATE_TIME_FORMAT)} +
+ ) : null; +}; diff --git a/src/i18n/en/en.json b/src/i18n/en/en.json index eaad5da6b..68aaf4240 100644 --- a/src/i18n/en/en.json +++ b/src/i18n/en/en.json @@ -221,6 +221,7 @@ "Add New": "Add New", "Add another list": "Add another list", "Add another list item": "Add another list item", + "Last login": "Last login", "Delete": "Delete", "Sorry, no results found! Please try a different search.": "Sorry, no results found! Please try a different search.", "Please create one.": "Please create one.", diff --git a/src/services/AuthService.test.ts b/src/services/AuthService.test.ts index b37203d69..58db14e8f 100644 --- a/src/services/AuthService.test.ts +++ b/src/services/AuthService.test.ts @@ -26,10 +26,11 @@ describe('AuthService', () => { // let's create token expiry date for tomorrow const tokenExpiryDate = new Date(); tokenExpiryDate.setDate(new Date().getDate() + 1); - const session = - '{"access_token":"access","renewal_token":"renew", "token_expiry_time":"' + - tokenExpiryDate + - '"}'; + const session = { + access_token: 'access', + renewal_token: 'renew', + token_expiry_time: tokenExpiryDate, + }; test('testing renewAuthToken', async () => { // set the session @@ -69,11 +70,11 @@ describe('AuthService', () => { // set the session const expiredTokenDate = new Date(); expiredTokenDate.setDate(new Date().getDate() - 1); - setAuthSession( - '{"access_token":"access","renewal_token":"renew", "token_expiry_time":"' + - expiredTokenDate + - '"}' - ); + setAuthSession({ + access_token: 'access', + renewal_token: 'renew', + token_expiry_time: expiredTokenDate, + }); const response = checkAuthStatusService(); expect(response).toBeFalsy(); }); diff --git a/src/services/AuthService.tsx b/src/services/AuthService.tsx index 7cf550ba4..f1f1b5af6 100644 --- a/src/services/AuthService.tsx +++ b/src/services/AuthService.tsx @@ -28,6 +28,9 @@ export const getAuthSession = (element?: string) => { case 'access_token': returnValue = JSON.parse(session).access_token; break; + case 'last_login_time': + returnValue = JSON.parse(session).last_login_time; + break; default: returnValue = session; } @@ -77,8 +80,14 @@ export const checkAuthStatusService = () => { }; // set authentication session -export const setAuthSession = (session: string) => { - localStorage.setItem('glific_session', session); +export const setAuthSession = (session: object) => { + const lastLoginTime = getAuthSession('last_login_time'); + if (lastLoginTime) { + const existingSession = { ...session, last_login_time: lastLoginTime }; + localStorage.setItem('glific_session', JSON.stringify(existingSession)); + } else { + localStorage.setItem('glific_session', JSON.stringify(session)); + } }; // clear the authentication session @@ -171,7 +180,7 @@ export const getOrganizationServices = (service: string) => { }; export const setAuthHeaders = () => { - // // add authorization header in all calls + // add authorization header in all calls let renewTokenCalled = false; let renewCallInProgress = false; @@ -193,7 +202,7 @@ export const setAuthHeaders = () => { const authToken = await renewAuthToken(); if (authToken.data) { // update localstore - setAuthSession(JSON.stringify(authToken.data.data)); + setAuthSession(authToken.data.data); renewTokenCalled = false; } if (parametersCopy[1]) { @@ -255,7 +264,7 @@ export const setAuthHeaders = () => { const authToken = await renewAuthToken(); if (authToken.data) { // update localstore - setAuthSession(JSON.stringify(authToken.data.data)); + setAuthSession(authToken.data.data); renewTokenCalled = false; } this.setRequestHeader('authorization', getAuthSession('access_token'));