@campxdev/shared 1.11.14 → 1.11.16

package/src/assets/images/notifications.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.125" height="20" viewBox="0 0 18.125 20">
+  <path id="bell_10_" data-name="bell (10)" d="M18.958,11.384l-1.583-5.7a7.767,7.767,0,0,0-15.064.395L1.085,11.595a4.166,4.166,0,0,0,4.067,5.07H6.08a4.166,4.166,0,0,0,8.166,0h.7a4.166,4.166,0,0,0,4.015-5.281Zm-8.795,6.948a2.5,2.5,0,0,1-2.346-1.666H12.51A2.5,2.5,0,0,1,10.163,18.332Zm6.771-4.32A2.481,2.481,0,0,1,14.944,15H5.152a2.5,2.5,0,0,1-2.44-3.042L3.937,6.444a6.1,6.1,0,0,1,11.832-.31l1.583,5.7a2.481,2.481,0,0,1-.418,2.181Z" transform="translate(-0.986 -0.002)" fill="#121212"/>
+</svg>

package/src/assets/images/profile.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17.049" height="22.632" viewBox="0 0 17.049 22.632">
+  <g id="user" transform="translate(-2.85 0.15)">
+    <path id="Path_38566" data-name="Path 38566" d="M11.583,11.166A5.583,5.583,0,1,0,6,5.583a5.583,5.583,0,0,0,5.583,5.583Zm0-9.305A3.722,3.722,0,1,1,7.861,5.583,3.722,3.722,0,0,1,11.583,1.861Z" transform="translate(-0.208 0)" stroke="#fff" stroke-width="0.3"/>
+    <path id="Path_38567" data-name="Path 38567" d="M11.375,14A8.384,8.384,0,0,0,3,22.375a.931.931,0,1,0,1.861,0,6.514,6.514,0,1,1,13.027,0,.931.931,0,0,0,1.861,0A8.384,8.384,0,0,0,11.375,14Z" transform="translate(0 -0.973)" stroke="#fff" stroke-width="0.3"/>
+  </g>
+</svg>

package/src/assets/images/web.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="Group_5289" data-name="Group 5289" transform="translate(-5577 -13602)">
+    <g id="Group_5288" data-name="Group 5288">
+      <g id="Group_5287" data-name="Group 5287">
+        <path id="Vector" d="M4.44,0H15.55C19.11,0,20,.89,20,4.44v6.33c0,3.56-.89,4.44-4.44,4.44H4.44C.89,15.22,0,14.33,0,10.78V4.44C0,.89.89,0,4.44,0Z" transform="translate(5579 13604)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-2" data-name="Vector" d="M0,0V4.78" transform="translate(5589 13619.22)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-3" data-name="Vector" d="M0,0H20" transform="translate(5579 13615)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-4" data-name="Vector" d="M0,0H9" transform="translate(5584.5 13624)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-5" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(5577 13602)" fill="none" opacity="0"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/components/ActiveDevices/ActiveDevices.tsx

@@ -0,0 +1,60 @@
+import { Button, Stack } from '@mui/material'
+
+import { useMutation, useQuery } from 'react-query'
+import { NoDataIllustration } from '..'
+import { noDevices } from '../../assets/images'
+import axios from '../../config/axios'
+import useConfirm from '../PopupConfirm/useConfirm'
+import Spinner from '../Spinner'
+import { DeviceInformationCard } from './DeviceInformationCard'
+
+const ActiveDevices = ({ close }) => {
+  const { isConfirmed } = useConfirm()
+  const {
+    data: activeSessions,
+    isLoading,
+    isRefetching,
+    refetch,
+  } = useQuery('activeDevices', () =>
+    axios.get('/auth-server/auth/active-sessions').then((res) => res?.data),
+  )
+
+  const { mutate: logoutAllOtherDevices } = useMutation(
+    () => axios.post('/auth-server/auth/logout-active-sessions'),
+    {
+      onSuccess: () => {
+        close()
+      },
+    },
+  )
+
+  const handleLogoutAllOtherDevices = async () => {
+    const confirm = await isConfirmed(
+      'Are you sure you want to logout from all other devices?',
+    )
+    if (confirm) {
+      logoutAllOtherDevices()
+    }
+  }
+  if (isLoading || isRefetching) return <Spinner />
+  if (activeSessions?.length == 0)
+    return (
+      <NoDataIllustration
+        height="60vh"
+        message="No active devices found"
+        imageSrc={noDevices.default}
+      />
+    )
+  return (
+    <Stack height="60vh" padding="10px 50px" gap={3} alignItems="flex-end">
+      <Button onClick={handleLogoutAllOtherDevices} sx={{ width: '300px' }}>
+        Logout from All Other Devices
+      </Button>
+      {activeSessions?.map((sessionData) => (
+        <DeviceInformationCard sessionData={sessionData} refetch={refetch} />
+      ))}
+    </Stack>
+  )
+}
+
+export default ActiveDevices

package/src/components/ActiveDevices/DeviceInformationCard.tsx

@@ -0,0 +1,97 @@
+import { Box, Button, Stack, Typography, styled } from '@mui/material'
+import { format } from 'date-fns-tz'
+import { useMutation } from 'react-query'
+import { toast } from 'react-toastify'
+import { location, mobile, web } from '../../assets/images'
+import axios from '../../config/axios'
+import useConfirm from '../PopupConfirm/useConfirm'
+
+const StyledIconContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: '#ED90350F',
+  borderRadius: '10px',
+  border: '1px solid #ED903580',
+  width: '60px',
+  height: '60px',
+  padding: '17px 0px 0px 17px',
+}))
+
+const StyledTrustedContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: '#F4A101',
+  borderRadius: '15px',
+  padding: '3px 15px',
+}))
+
+export const DeviceInformationCard = ({ sessionData, refetch }) => {
+  const { isConfirmed } = useConfirm()
+
+  const { mutate: logout } = useMutation(
+    () =>
+      axios.post('/auth-server/auth/logout-active-sessions', {
+        deviceInformationId: sessionData?.deviceInformation?._id,
+      }),
+    {
+      onSuccess: () => {
+        refetch()
+      },
+      onError: (error: any) => {
+        toast.error(error?.response?.data?.message)
+      },
+    },
+  )
+  const handleLogout = async () => {
+    const confirmed = await isConfirmed(
+      'Are you sure you want to logout from this device?',
+    )
+    if (confirmed) logout()
+  }
+  return (
+    <Box
+      width="100%"
+      border="1px solid #1212121A"
+      borderRadius="10px"
+      padding="20px 0px 20px 0px"
+    >
+      <Stack
+        direction="row"
+        gap={2}
+        alignItems="center"
+        justifyContent="space-around"
+      >
+        <Stack direction="row" alignItems="center" gap={2}>
+          <StyledIconContainer>
+            <img
+              src={(sessionData.type = 'WEB' ? web.default : mobile.default)}
+            />
+          </StyledIconContainer>
+          <Stack>
+            <Stack direction="row" alignItems="center" gap={1}>
+              <Typography variant="h1" fontSize="15px">
+                {`${sessionData?.deviceInformation?.clientName} (${sessionData?.deviceInformation?.os})`}
+              </Typography>
+              {sessionData?.deviceInformation?.trusted && (
+                <StyledTrustedContainer>
+                  <Typography variant="subtitle1" color="white" fontSize="12px">
+                    Trusted
+                  </Typography>
+                </StyledTrustedContainer>
+              )}
+            </Stack>
+            <Typography variant="caption">{`Last Active on ${format(
+              new Date(sessionData?.lastAccessedAt),
+              'dd MMM, yyyy hh:mm a',
+            )}`}</Typography>
+          </Stack>
+        </Stack>
+        <Stack direction="row" alignItems="center" gap={1}>
+          <img src={location.default} />
+          <Typography variant="caption">
+            {sessionData?.deviceInformation?.locationName}
+          </Typography>
+        </Stack>
+        <Button onClick={handleLogout} variant="outlined">
+          Logout
+        </Button>
+      </Stack>
+    </Box>
+  )
+}

package/src/components/ActiveDevices/index.ts

@@ -0,0 +1 @@
+export { default } from './ActiveDevices'

package/src/components/Layout/Header/HeaderActions/CogWheelMenu.tsx

@@ -1,6 +1,6 @@
-import { SettingsOutlined } from '@mui/icons-material'
 import { IconButton } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
+import { clogWheel } from '../../../../assets/images'
 import DropDownButton from '../../../DropDownButton/DropDownButton'
 
 const CogWheelMenu = ({ menu }) => {
@@ -10,7 +10,7 @@ const CogWheelMenu = ({ menu }) => {
     <DropDownButton
       anchor={({ open }) => (
         <IconButton color="secondary" onClick={open}>
-          <SettingsOutlined />
+          <img src={clogWheel.default} alt="Settings" />
         </IconButton>
       )}
       menu={menu?.map((item) => ({

package/src/components/Layout/Header/HeaderActions/HeaderActions.tsx

@@ -1,10 +1,8 @@
-import { Box, IconButton, styled } from '@mui/material'
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
+import { IconButton, Stack } from '@mui/material'
 import InstitutionsDropDown from '../../../Institutions/InstitutionsDropdown'
 import CogWheelMenu from './CogWheelMenu'
 import UserBox from './UserBox'
-const StyledBeamedBox = styled(Box)(() => ({
-  width: '60px',
-}))
 
 export default function HeaderActions({
   cogWheelMenu,
@@ -13,24 +11,25 @@ export default function HeaderActions({
   profileUrl = '',
 }) {
   return (
-    <>
+    <Stack direction="row" gap={6}>
       <InstitutionsDropDown />
       {/* <SearchButton /> */}
       {/* <FreshDeskHelpButton /> */}
-      <StyledBeamedBox></StyledBeamedBox>
-      <IconButton
-        href={'https://campx.atlassian.net/servicedesk/customer/portal/2'}
-        target="_blank"
-        sx={{ color: 'black', padding: '0px' }}
-      >
-        Help ?
-      </IconButton>
-      {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
-      <UserBox
-        fullName={fullName}
-        actions={userBoxActions}
-        profileUrl={profileUrl}
-      />
-    </>
+      <Stack direction="row" gap={2}>
+        <IconButton
+          href={'https://campx.atlassian.net/servicedesk/customer/portal/2'}
+          target="_blank"
+          sx={{ color: 'black', padding: '0px' }}
+        >
+          <HelpOutlineIcon />
+        </IconButton>
+        {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
+        <UserBox
+          fullName={fullName}
+          actions={userBoxActions}
+          profileUrl={profileUrl}
+        />
+      </Stack>
+    </Stack>
   )
 }

package/src/components/Layout/Header/HeaderActions/UserBox.tsx

@@ -1,6 +1,13 @@
-import { ExitToAppOutlined, HttpsOutlined, Person } from '@mui/icons-material'
 import { useNavigate } from 'react-router-dom'
+import {
+  activeDevices,
+  changePassword,
+  logoutIcon,
+  profile,
+} from '../../../../assets/images'
+
 import logout from '../../../../utils/logout'
+import ActiveDevices from '../../../ActiveDevices'
 import ChangePassword from '../../../ChangePassword'
 import DropDownButton from '../../../DropDownButton/DropDownButton'
 import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
@@ -42,7 +49,9 @@ export default function UserBox({
               {
                 label: 'My Profile',
                 actionType: 'dialog',
-                icon: <Person />,
+                icon: (
+                  <img style={{ marginRight: '10px' }} src={profile.default} />
+                ),
                 content: ({ close }) => <MyProfile close={close} />,
                 dialogProps: {
                   maxWidth: 'xl',
@@ -53,17 +62,46 @@ export default function UserBox({
                   },
                 },
               },
-
+              {
+                label: 'Active Devices',
+                actionType: 'dialog',
+                icon: (
+                  <img
+                    style={{ marginRight: '10px' }}
+                    src={activeDevices.default}
+                  />
+                ),
+                content: ({ close }) => <ActiveDevices close={close} />,
+                contentTitle: 'Active Devices',
+                dialogProps: {
+                  maxWidth: 'lg',
+                  PaperProps: {
+                    sx: {
+                      padding: 0,
+                    },
+                  },
+                },
+              },
               {
                 label: 'Change Password',
                 actionType: 'dialog',
-                icon: <HttpsOutlined />,
+                icon: (
+                  <img
+                    style={{ marginRight: '10px' }}
+                    src={changePassword.default}
+                  />
+                ),
                 content: ({ close }) => <ChangePassword close={close} />,
                 contentTitle: 'Change Password',
               },
               {
                 label: 'Logout',
-                icon: <ExitToAppOutlined />,
+                icon: (
+                  <img
+                    style={{ marginRight: '10px' }}
+                    src={logoutIcon.default}
+                  />
+                ),
                 onClick: logout,
               },
             ]

package/src/components/LoginForm.tsx

@@ -11,6 +11,7 @@ import {
   styled,
 } from '@mui/material'
 import axiosBase from 'axios'
+import DeviceDetector from 'device-detector-js'
 import Cookies from 'js-cookie'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -36,6 +37,18 @@ export function LoginForm({
   const [resetPassword, setResetPassword] = useState(false)
   const { handleSubmit, control } = useForm()
   const [error, setError] = useState('')
+  const [deviceState, setDeviceState] = useState({
+    deviceInformation: {
+      deviceType: 'browser',
+      clientName: 'unknown',
+      os: 'unknown',
+      osVersion: 'unknown',
+      latitude: null,
+      longitude: null,
+      tokenType: 'WEB',
+    },
+    isLocationAllowed: true,
+  })
 
   const onSubmit = async (values) => {
     try {
@@ -45,7 +58,7 @@ export function LoginForm({
         url: loginUrl ? loginUrl : `/auth-server/auth/login`,
         data: {
           ...values,
-          type: 'WEB',
+          ...deviceState.deviceInformation,
         },
       })
       Cookies.set('campx_tenant', res?.data?.subDomain)
@@ -83,6 +96,39 @@ export function LoginForm({
   }
 
   useEffect(() => {
+    navigator.geolocation.getCurrentPosition((position) => {
+      setDeviceState((s) => ({
+        ...s,
+        deviceInformation: {
+          ...s.deviceInformation,
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        },
+      }))
+    })
+    navigator.permissions
+      .query({ name: 'geolocation' })
+      .then((permissionStatus) => {
+        if (permissionStatus.state === 'denied') {
+          setDeviceState((s) => ({
+            ...s,
+            isLocationAllowed: false,
+          }))
+        }
+      })
+
+    const detector = new DeviceDetector()
+    const deviceInfo = detector.parse(navigator.userAgent)
+    setDeviceState((s) => ({
+      ...s,
+      deviceInformation: {
+        ...s.deviceInformation,
+        clientName: deviceInfo.client?.name || s.deviceInformation.clientName,
+        os: deviceInfo.os?.name || s.deviceInformation.os,
+        osVersion: deviceInfo.os?.version || s.deviceInformation.osVersion,
+      },
+    }))
+
     const restLink = window.location.pathname.split('/')[1]
     if (restLink == 'reset-password') {
       setResetPassword(true)
@@ -138,6 +184,11 @@ export function LoginForm({
                 ),
               }}
             />
+            {!deviceState.isLocationAllowed && (
+              <Alert severity="warning" sx={{ marginTop: '20px' }}>
+                Please Enable Location Services
+              </Alert>
+            )}
             <ActionButton type="submit">Login</ActionButton>
             <Typography
               variant="h6"

package/src/components/Selectors/ProgramSelector.tsx

@@ -6,7 +6,7 @@ import { SingleSelect } from '../Input'
 type ProgramSelectorProps = {
   name?: string
   label: string
-  filters?: { courseId: number }
+  filters?: { courseId: number| string }
   required?: boolean
   onChange?: (value: any) => void
   allowAll?: boolean