From 66406f8643379a51c300040de1b5d70358bd0713 Mon Sep 17 00:00:00 2001
From: Max Makaluk <70341920+FussuChalice@users.noreply.github.com>
Date: Mon, 13 Jan 2025 19:34:52 +0200
Subject: [PATCH] chore(app): add console warning

---
 src/hooks/index.ts                      |  1 +
 src/hooks/useConsoleWarning.tsx         | 31 +++++++++++++++++++++++++
 src/layouts/root_layout/index.tsx       |  3 +++
 src/locales/en/general.json             |  4 +++-
 src/pages/persons/all_persons/index.tsx |  3 ++-
 5 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 src/hooks/useConsoleWarning.tsx

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 91ea00db17..f81cd7da5d 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -6,3 +6,4 @@ export { default as useInternetChecker } from './useInternetChecker';
 export { default as useUserAutoLogin } from './useUserAutoLogin';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useCurrentUser } from './useCurrentUser';
+export { default as useConsoleWarning } from './useConsoleWarning';
diff --git a/src/hooks/useConsoleWarning.tsx b/src/hooks/useConsoleWarning.tsx
new file mode 100644
index 0000000000..6aa97e099f
--- /dev/null
+++ b/src/hooks/useConsoleWarning.tsx
@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+import useAppTranslation from './useAppTranslation';
+
+const useConsoleWarning = () => {
+  const { t } = useAppTranslation();
+
+  const warningShownRef = useRef(false);
+
+  useEffect(() => {
+    const consoleWarningTitleStyle = ` 
+        background: #DD8C2C; 
+        color: #FFFFFF; 
+        font-size: 48px; 
+        font-weight: 700;
+    `;
+
+    const consoleWarningDescStyle = `
+        font-weight: 500; 
+        font-size: 32px;
+    `;
+
+    if (!warningShownRef.current) {
+      console.log(`%c${t('tr_consoleWarningTitle')}`, consoleWarningTitleStyle);
+      console.log(`%c${t('tr_consoleWarningDesc')}`, consoleWarningDescStyle);
+
+      warningShownRef.current = true;
+    }
+  }, [t]);
+};
+
+export default useConsoleWarning;
diff --git a/src/layouts/root_layout/index.tsx b/src/layouts/root_layout/index.tsx
index 7ad05c3f72..78880cd31e 100644
--- a/src/layouts/root_layout/index.tsx
+++ b/src/layouts/root_layout/index.tsx
@@ -29,10 +29,13 @@ import WhatsNew from '@features/whats_new';
 import Typography from '@components/typography';
 import NetlifyLight from '@assets/img/netlify_lightmode.png';
 import NetlifyDark from '@assets/img/netlify_darkmode.png';
+import useConsoleWarning from '@hooks/useConsoleWarning';
 
 const RootLayout = ({ updatePwa }: { updatePwa: VoidFunction }) => {
   const { isSupported } = useGlobal();
 
+  useConsoleWarning();
+
   const {
     isAppLoad,
     isOpenAbout,
diff --git a/src/locales/en/general.json b/src/locales/en/general.json
index 4a6057bea0..c22bfdada3 100644
--- a/src/locales/en/general.json
+++ b/src/locales/en/general.json
@@ -137,5 +137,7 @@
   "tr_manageUserProfileSettings": "Manage user account settings",
   "tr_createUserProfile": "Create user account",
   "tr_download": "Download",
-  "tr_import": "Import"
+  "tr_import": "Import",
+  "tr_consoleWarningTitle": "!WARNING!",
+  "tr_consoleWarningDesc": "This console is a powerful tool intended for developers. If you're not a developer, please avoid entering or pasting commands here – even if someone asks you to. This ensures your Organized app data always stay safe."
 }
diff --git a/src/pages/persons/all_persons/index.tsx b/src/pages/persons/all_persons/index.tsx
index 85aa41abfb..633c99268b 100644
--- a/src/pages/persons/all_persons/index.tsx
+++ b/src/pages/persons/all_persons/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { Box, Slide } from '@mui/material';
 import { Button, PageTitle } from '@components/index';
 import {
@@ -18,7 +19,7 @@ import PersonsSearch from '@features/persons/search';
 const PersonsAll = () => {
   const { t } = useAppTranslation();
 
-  const { desktopUp } = useBreakpoints();
+  const { desktopUp, tablet500Down } = useBreakpoints();
 
   const { isPersonEditor } = useCurrentUser();