Add device UUID support

package.json

@@ -20,6 +20,7 @@
     "node-sass": "^5.0.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
+    "react-device-detect": "^1.17.0",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",

src/contexts/common/DeviceInfoContext.js

@@ -2,12 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { LoadingScreen } from 'components/index';
 import { validate, v4 } from 'uuid';
-
+import { deviceDetect } from 'react-device-detect';
 
 export const DeviceInfoContext = React.createContext();
 
 export const DeviceInfoProvider = (props) => {
   const [deviceUUID, setDeviceUUID] = React.useState();
+  const [deviceInfo, setDeviceInfo] = React.useState();
   React.useEffect(() => {
     const string = window.localStorage.getItem('uuid');
     if (!validate(string)) {
@@ -16,11 +17,12 @@ export const DeviceInfoProvider = (props) => {
       setDeviceUUID(newUUID);
     }
     else setDeviceUUID(string);
+    setDeviceInfo(deviceDetect());
   }, []);
 
-  if (deviceUUID === undefined) return <LoadingScreen loadingText='loading device info' />;
+  if (deviceUUID === undefined || deviceInfo === undefined) return <LoadingScreen loadingText='loading device info' />;
 
-  return <DeviceInfoContext.Provider value={{ deviceUUID }} >{props.children}</DeviceInfoContext.Provider>;
+  return <DeviceInfoContext.Provider value={{ deviceUUID, deviceInfo, deviceName: `${deviceInfo.browserName} ${deviceInfo.browserMajorVersion} on ${deviceInfo.osName} ${deviceInfo.osVersion}` }} >{props.children}</DeviceInfoContext.Provider>;
 };
 
 DeviceInfoProvider.propTypes = {

src/views/common/Login/Login.js

@@ -4,12 +4,11 @@
 import React, { useState, useContext, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { TextField, Paper, makeStyles, Typography, Button, Box, Grid } from '@material-ui/core';
-import { LoginContext } from 'contexts';
+import { LoginContext, DeviceInfoContext } from 'contexts';
 import { notify } from 'components';
 import { DevModeConfig } from 'configurations';
 import { API, useKeyPress, TextHelper } from 'helpers';
 
-
 const useStyles = makeStyles(theme => ({
   '@global': {
     body: {
@@ -49,21 +48,27 @@ export const Login = () => {
   const [emailId, setEmailId] = useState('');
   const [password, setPassword] = useState('');
   const { devMode, loginStatus, setAccessToken } = useContext(LoginContext);
+  const { deviceUUID, deviceName } = useContext(DeviceInfoContext);
 
-  const performLogin = useCallback(() => {
+  const performLogin = useCallback(async () => {
     if (DevModeConfig.bypassBackend) {
       setAccessToken('dummyToken');
     } else {
       let details = {
-        username: (devMode ? (DevModeConfig.devDetails !== undefined ? DevModeConfig.devDetails.user : '') : emailId),
-        password: (devMode ? (DevModeConfig.devDetails !== undefined ? DevModeConfig.devDetails.password : '') : password)
+        emailId: (devMode ? (DevModeConfig.devDetails !== undefined ? DevModeConfig.devDetails.user : '') : emailId),
+        password: (devMode ? (DevModeConfig.devDetails !== undefined ? DevModeConfig.devDetails.password : '') : password),
+        deviceData: {
+          deviceType: 'WEB',
+          deviceName: deviceName,
+          deviceUUID: deviceUUID
+        }
       };
-      let apiResponse = API.login(details);
+      let apiResponse = await API.login(details);
       if (apiResponse.success) {
         setAccessToken(apiResponse.data);
       }
     }
-  }, [devMode, emailId, password, setAccessToken]);
+  }, [devMode, emailId, password, setAccessToken, deviceUUID, deviceName]);
 
   const validationCheck = useCallback(() => {
     if (devMode) {