From 5cfc25595f4ff4d612b171f6dd7e95a9e76e0543 Mon Sep 17 00:00:00 2001
From: rhahao <26148770+rhahao@users.noreply.github.com>
Date: Sun, 5 May 2024 09:01:20 +0300
Subject: [PATCH] feat(app): update library for fingerprinting
---
package-lock.json | 15 +-
package.json | 2 +-
src/current/App.jsx | 551 ++++++++++++++++++++++----------------------
3 files changed, 281 insertions(+), 287 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index b80985bb3f..606a4a0662 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,6 @@
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
- "@fingerprintjs/fingerprintjs": "^4.3.0",
"@fontsource/roboto": "^5.0.13",
"@mui/icons-material": "^5.15.16",
"@mui/material": "^5.15.16",
@@ -20,6 +19,7 @@
"@react-pdf/renderer": "^3.4.4",
"@sws2apps/react-sw-helper": "^1.23.0",
"@tanstack/react-query": "^5.32.1",
+ "@thumbmarkjs/thumbmarkjs": "^0.14.7",
"comlink": "^4.4.1",
"date-fns": "^2.30.0",
"dateformat": "^5.0.3",
@@ -2649,14 +2649,6 @@
"node": ">=14"
}
},
- "node_modules/@fingerprintjs/fingerprintjs": {
- "version": "4.3.0",
- "resolved": "https://registry.npmjs.org/@fingerprintjs/fingerprintjs/-/fingerprintjs-4.3.0.tgz",
- "integrity": "sha512-eZYh6XVvMp5iyoT9y+/llGxqoACr01JeBTfy6NAMaQ6K2a3nZmyPKoYv5V89QNN8jUqzgXeTOICClEUtktLdtw==",
- "dependencies": {
- "tslib": "^2.4.1"
- }
- },
"node_modules/@firebase/analytics": {
"version": "0.10.2",
"resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.2.tgz",
@@ -5042,6 +5034,11 @@
"react": "^18.0.0"
}
},
+ "node_modules/@thumbmarkjs/thumbmarkjs": {
+ "version": "0.14.7",
+ "resolved": "https://registry.npmjs.org/@thumbmarkjs/thumbmarkjs/-/thumbmarkjs-0.14.7.tgz",
+ "integrity": "sha512-yChG1awnGyotoowq8ouMXpCWoke00p6c/RkTwEnZXz7nPK8F+8+I0eTVAwoEB+caPTz8Z/RCV3L3BLZmmT+jSQ=="
+ },
"node_modules/@types/babel__core": {
"version": "7.20.5",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
diff --git a/package.json b/package.json
index ea9b0eb99b..8fc89513f6 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
- "@fingerprintjs/fingerprintjs": "^4.3.0",
"@fontsource/roboto": "^5.0.13",
"@mui/icons-material": "^5.15.16",
"@mui/material": "^5.15.16",
@@ -35,6 +34,7 @@
"@react-pdf/renderer": "^3.4.4",
"@sws2apps/react-sw-helper": "^1.23.0",
"@tanstack/react-query": "^5.32.1",
+ "@thumbmarkjs/thumbmarkjs": "^0.14.7",
"comlink": "^4.4.1",
"date-fns": "^2.30.0",
"dateformat": "^5.0.3",
diff --git a/src/current/App.jsx b/src/current/App.jsx
index 05ac72215f..58ea024861 100644
--- a/src/current/App.jsx
+++ b/src/current/App.jsx
@@ -3,7 +3,7 @@ import { RouterProvider, createHashRouter } from 'react-router-dom';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useRecoilValue, useSetRecoilState } from 'recoil';
-import FingerprintJS from '@fingerprintjs/fingerprintjs';
+import { getFingerprint } from '@thumbmarkjs/thumbmarkjs';
import CssBaseline from '@mui/material/CssBaseline';
import PrivateVipConnectedRoute from './components/PrivateVipConnectedRoute';
import PrivateElderRoute from './components/PrivateElderRoute';
@@ -54,308 +54,305 @@ const queryClient = new QueryClient();
// creating theme
const lightTheme = createTheme({
- palette: {
- mode: 'light',
- },
+ palette: {
+ mode: 'light',
+ },
});
const darkTheme = createTheme({
- palette: {
- mode: 'dark',
- },
+ palette: {
+ mode: 'dark',
+ },
});
const App = ({ updatePwa }) => {
- const setVisitorID = useSetRecoilState(visitorIDState);
- const setApiHost = useSetRecoilState(apiHostState);
+ const setVisitorID = useSetRecoilState(visitorIDState);
+ const setApiHost = useSetRecoilState(apiHostState);
- const isOnline = useRecoilValue(isOnlineState);
- const isLight = useRecoilValue(isLightThemeState);
- const appSnackOpen = useRecoilValue(appSnackOpenState);
- const isCongAccountConnected = useRecoilValue(congAccountConnectedState);
- const congRole = useRecoilValue(congRoleState);
+ const isOnline = useRecoilValue(isOnlineState);
+ const isLight = useRecoilValue(isLightThemeState);
+ const appSnackOpen = useRecoilValue(appSnackOpenState);
+ const isCongAccountConnected = useRecoilValue(congAccountConnectedState);
+ const congRole = useRecoilValue(congRoleState);
- const [activeTheme, setActiveTheme] = useState(darkTheme);
- const [isLoading, setIsLoading] = useState(true);
- const [isSupported, setIsSupported] = useState(true);
+ const [activeTheme, setActiveTheme] = useState(darkTheme);
+ const [isLoading, setIsLoading] = useState(true);
+ const [isSupported, setIsSupported] = useState(true);
- const secretaryRole = congRole.includes('secretary');
- const lmmoRole = congRole.includes('lmmo') || congRole.includes('lmmo-backup');
- const publicTalkCoordinatorRole = congRole.includes('public_talk_coordinator');
- const coordinatorRole = congRole.includes('coordinator');
- const adminRole = congRole.includes('admin');
- const elderRole =
- congRole.includes('elder') || secretaryRole || lmmoRole || coordinatorRole || publicTalkCoordinatorRole;
- const msRole = congRole.includes('ms');
- const publisherRole = congRole.includes('publisher') || msRole || elderRole;
+ const secretaryRole = congRole.includes('secretary');
+ const lmmoRole = congRole.includes('lmmo') || congRole.includes('lmmo-backup');
+ const publicTalkCoordinatorRole = congRole.includes('public_talk_coordinator');
+ const coordinatorRole = congRole.includes('coordinator');
+ const adminRole = congRole.includes('admin');
+ const elderRole =
+ congRole.includes('elder') || secretaryRole || lmmoRole || coordinatorRole || publicTalkCoordinatorRole;
+ const msRole = congRole.includes('ms');
+ const publisherRole = congRole.includes('publisher') || msRole || elderRole;
- const router = createHashRouter([
- {
- element: ,
- errorElement: ,
- children: [
- { path: '/', element: },
- {
- path: '/schedules/view/:weekToFormat',
- element: ,
- },
- {
- path: '/user-settings',
- element: ,
- },
- {
- element: ,
- children: [
- { path: '/user-field-service-reports', element: },
- { path: '/user-bible-studies', element: },
- ],
- },
- {
- element: ,
- children: [
- {
- path: '/persons',
- element: ,
- },
- {
- path: '/persons/:id',
- element: ,
- },
- {
- element: (
-
- ),
- children: [
- {
- path: '/persons/new',
- element: ,
- },
- {
- element: ,
- children: [
- {
- path: '/schedules',
- element: ,
- },
- {
- path: '/schedules/:schedule',
- element: ,
- },
- {
- path: '/schedules/:schedule/:weekToFormat',
- element: ,
- },
- {
- path: '/assignment-form',
- element: ,
- },
- ],
- },
- {
- element: (
-
- ),
- children: [
- {
- path: '/source-materials',
- element: ,
- },
- {
- path: '/source-materials/:weekToFormat',
- element: ,
- },
- ],
- },
- {
- element: ,
- children: [
- {
- path: '/field-service-group',
- element: ,
- },
- {
- path: '/meeting-attendance-record',
- element: ,
- },
- {
- path: '/field-service-report',
- element: ,
- },
- {
- path: '/branch-office-reports',
- element: ,
- },
- {
- path: '/pending-field-service-reports',
- element: ,
- },
- ],
- },
- {
- element: ,
- children: [
- {
- path: '/public-talks',
- element: ,
- },
- {
- path: '/visiting-speakers',
- element: ,
- },
- ],
- },
- {
- element: (
-
- ),
- children: [
- {
- path: '/weekend-schedules',
- element: ,
- },
- ],
- },
- ],
- },
- {
- path: '/congregation-settings',
- element: ,
- },
- {
- element: ,
- children: [
- {
- path: '/administration',
- element: ,
- },
- {
- path: '/administration/members/:id',
- element: ,
- },
- ],
- },
- ],
- },
- { path: '*', element: },
- ],
- },
- ]);
+ const router = createHashRouter([
+ {
+ element: ,
+ errorElement: ,
+ children: [
+ { path: '/', element: },
+ {
+ path: '/schedules/view/:weekToFormat',
+ element: ,
+ },
+ {
+ path: '/user-settings',
+ element: ,
+ },
+ {
+ element: ,
+ children: [
+ { path: '/user-field-service-reports', element: },
+ { path: '/user-bible-studies', element: },
+ ],
+ },
+ {
+ element: ,
+ children: [
+ {
+ path: '/persons',
+ element: ,
+ },
+ {
+ path: '/persons/:id',
+ element: ,
+ },
+ {
+ element: (
+
+ ),
+ children: [
+ {
+ path: '/persons/new',
+ element: ,
+ },
+ {
+ element: ,
+ children: [
+ {
+ path: '/schedules',
+ element: ,
+ },
+ {
+ path: '/schedules/:schedule',
+ element: ,
+ },
+ {
+ path: '/schedules/:schedule/:weekToFormat',
+ element: ,
+ },
+ {
+ path: '/assignment-form',
+ element: ,
+ },
+ ],
+ },
+ {
+ element: (
+
+ ),
+ children: [
+ {
+ path: '/source-materials',
+ element: ,
+ },
+ {
+ path: '/source-materials/:weekToFormat',
+ element: ,
+ },
+ ],
+ },
+ {
+ element: ,
+ children: [
+ {
+ path: '/field-service-group',
+ element: ,
+ },
+ {
+ path: '/meeting-attendance-record',
+ element: ,
+ },
+ {
+ path: '/field-service-report',
+ element: ,
+ },
+ {
+ path: '/branch-office-reports',
+ element: ,
+ },
+ {
+ path: '/pending-field-service-reports',
+ element: ,
+ },
+ ],
+ },
+ {
+ element: ,
+ children: [
+ {
+ path: '/public-talks',
+ element: ,
+ },
+ {
+ path: '/visiting-speakers',
+ element: ,
+ },
+ ],
+ },
+ {
+ element: (
+
+ ),
+ children: [
+ {
+ path: '/weekend-schedules',
+ element: ,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ path: '/congregation-settings',
+ element: ,
+ },
+ {
+ element: ,
+ children: [
+ {
+ path: '/administration',
+ element: ,
+ },
+ {
+ path: '/administration/members/:id',
+ element: ,
+ },
+ ],
+ },
+ ],
+ },
+ { path: '*', element: },
+ ],
+ },
+ ]);
- useEffect(() => {
- if (isLight) {
- setActiveTheme(lightTheme);
- } else {
- setActiveTheme(darkTheme);
- }
- }, [isLight]);
+ useEffect(() => {
+ if (isLight) {
+ setActiveTheme(lightTheme);
+ } else {
+ setActiveTheme(darkTheme);
+ }
+ }, [isLight]);
- useEffect(() => {
- const getUserID = async () => {
- try {
- const fp = await FingerprintJS.load();
- const result = await fp.get();
+ useEffect(() => {
+ const getUserID = async () => {
+ try {
+ const visitorId = await getFingerprint();
+ setVisitorID(visitorId);
+ backupWorkerInstance.setVisitorID(visitorId);
- const visitorId = result.visitorId;
- setVisitorID(visitorId);
- backupWorkerInstance.setVisitorID(visitorId);
+ console.info('CPE: Fingerprint: Device visitor id has been set');
+ } catch (error) {
+ console.error(`CPE: Fingerprint: ${error}`);
+ }
+ };
- console.info('CPE: Fingerprint: Device visitor id has been set');
- } catch (error) {
- console.error(`CPE: Fingerprint: ${error}`);
- }
- };
+ if (isOnline) getUserID();
+ }, [setVisitorID, isOnline]);
- if (isOnline) getUserID();
- }, [setVisitorID, isOnline]);
+ useEffect(() => {
+ let apiHost;
- useEffect(() => {
- let apiHost;
+ if (import.meta.env.VITE_BACKEND_API) {
+ apiHost = import.meta.env.VITE_BACKEND_API;
+ } else {
+ if (import.meta.env.DEV || window.location.host.indexOf('localhost') !== -1) {
+ apiHost = 'http://localhost:8000/';
+ } else {
+ apiHost = 'https://api.sws2apps.com/';
+ }
+ }
- if (import.meta.env.VITE_BACKEND_API) {
- apiHost = import.meta.env.VITE_BACKEND_API;
- } else {
- if (import.meta.env.DEV || window.location.host.indexOf('localhost') !== -1) {
- apiHost = 'http://localhost:8000/';
- } else {
- apiHost = 'https://api.sws2apps.com/';
- }
- }
+ setApiHost(apiHost);
+ backupWorkerInstance.setApiHost(apiHost);
- setApiHost(apiHost);
- backupWorkerInstance.setApiHost(apiHost);
+ console.info(`CPE: API: The client API is set to: ${apiHost}`);
+ }, [setApiHost]);
- console.info(`CPE: API: The client API is set to: ${apiHost}`);
- }, [setApiHost]);
+ useEffect(() => {
+ const checkBrowser = () => {
+ if (!('Worker' in window)) {
+ setIsSupported(false);
+ console.error(`CPE: Browser Not Supported: Web Worker is not supported in this device`);
+ return;
+ }
- useEffect(() => {
- const checkBrowser = () => {
- if (!('Worker' in window)) {
- setIsSupported(false);
- console.error(`CPE: Browser Not Supported: Web Worker is not supported in this device`);
- return;
- }
+ if (!('crypto' in window)) {
+ setIsSupported(false);
+ console.error(`CPE: Browser Not Supported: Web Crypto is not supported in this device`);
+ return;
+ }
- if (!('crypto' in window)) {
- setIsSupported(false);
- console.error(`CPE: Browser Not Supported: Web Crypto is not supported in this device`);
- return;
- }
+ if (!crypto.randomUUID || typeof crypto.randomUUID !== 'function') {
+ setIsSupported(false);
+ console.error(`CPE: Browser Not Supported: Web Crypto RandomUUID is not supported in this device`);
+ return;
+ }
- if (!crypto.randomUUID || typeof crypto.randomUUID !== 'function') {
- setIsSupported(false);
- console.error(`CPE: Browser Not Supported: Web Crypto RandomUUID is not supported in this device`);
- return;
- }
+ if (!indexedDB) {
+ setIsSupported(false);
+ console.error(`CPE: Browser Not Supported: IndexedDb is not supported in this device`);
+ return;
+ }
- if (!indexedDB) {
- setIsSupported(false);
- console.error(`CPE: Browser Not Supported: IndexedDb is not supported in this device`);
- return;
- }
+ if (!('serviceWorker' in navigator)) {
+ setIsSupported(false);
+ console.error(`CPE: Browser Not Supported: Service Worker is not supported in this device`);
+ }
+ };
- if (!('serviceWorker' in navigator)) {
- setIsSupported(false);
- console.error(`CPE: Browser Not Supported: Service Worker is not supported in this device`);
- }
- };
+ checkBrowser();
+ setIsLoading(false);
+ }, []);
- checkBrowser();
- setIsLoading(false);
- }, []);
+ if (isLoading) {
+ return ;
+ }
- if (isLoading) {
- return ;
- }
-
- return (
- <>
- {!isSupported && (
-
- You are using unsupported browser for the Congregation Program for Everyone app. Make sure that your browser
- is up to date, or try to use another browser.
-
- )}
- {isSupported && (
-
-
-
-
- {appSnackOpen && }
- }>
-
-
-
-
- )}
-
- );
+ return (
+ <>
+ {!isSupported && (
+
+ You are using unsupported browser for the Congregation Program for Everyone app. Make sure that your browser
+ is up to date, or try to use another browser.
+
+ )}
+ {isSupported && (
+
+
+
+
+ {appSnackOpen && }
+ }>
+
+
+
+
+ )}
+
+ );
};
export default App;