Merge pull request #2583 from glific/last-login

added last login time

src/App.test.tsx

@@ -47,11 +47,11 @@ describe('<App /> ', () => {
     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'] }));
 

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 = () => {
           </div>
         </div>
         {drawer}
+        <LastLogin drawerOpen={drawerOpen} />
         <WalletBalance fullOpen={drawerOpen} />
       </Drawer>
     </nav>

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;

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.'));

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;
+}

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 ? (
+    <div className={styles.lastLogin}>
+      {t('Last login')}: {moment(lastLogin).format(DATE_TIME_FORMAT)}
+    </div>
+  ) : null;
+};

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.",

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();
   });

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'));