From b1309282d34fc768be8da169601bfff33c918de2 Mon Sep 17 00:00:00 2001
From: Jack Greenlee <greenljk@mail.uc.edu>
Date: Fri, 25 Oct 2024 15:11:19 -0400
Subject: [PATCH 1/2] prevent onboarding initiation if already logged in

Bug:
If already logged in and an nrelopenpath:// link is launched (either via "JOIN" button or external QR scan), onboarding will re-initiate.
Storage from the first login is not cleared before attempting a second login and that could cause major issues.

Fix:
Prevent onboarding if onboarding has already been initiated. When handling an external URL launch we first check the onboarding state to see if the user has already initiated onboarding (i.e. gotten past "WELCOME"). If so, we'll popup with a message.

I also renamed `handleOpenURL` in the AppContext. cordova-plugin-customurlscheme requires a function with this name on the window object, which is why I named it that before. However we use that function to handle raw tokens too; not just URLs, so it is a misnomer.
Renamed it to `handleTokenOrUrl`; then defined window.handleOpenURL as a function that calls `handleTokenOrUrl` with a joinMethod of 'external'. This allows customurlscheme to work while keeping our code descriptive + readable.
---
 www/i18n/en.json                  |  3 ++-
 www/js/App.tsx                    | 28 +++++++++++++++++++++-------
 www/js/onboarding/WelcomePage.tsx |  8 ++++----
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/www/i18n/en.json b/www/i18n/en.json
index ec432d89e..6be5a0dac 100644
--- a/www/i18n/en.json
+++ b/www/i18n/en.json
@@ -405,7 +405,8 @@
     "dont-force-kill": "Do not force kill the app",
     "background-restrictions": "On Samsung and Huwaei phones, make sure that background restrictions are turned off",
     "close": "Close",
-    "proceeding-with-token": "Proceeding with OPcode: {{token}}"
+    "proceeding-with-token": "Proceeding with OPcode: {{token}}",
+    "already-logged-in": "You are already logged in with OPcode {{token}}. If you wish to use a different OPcode, please log out first."
   },
   "config": {
     "unable-read-saved-config": "Unable to read saved config",
diff --git a/www/js/App.tsx b/www/js/App.tsx
index 328e7ab29..2f7850d15 100644
--- a/www/js/App.tsx
+++ b/www/js/App.tsx
@@ -18,6 +18,8 @@ import AlertBar from './components/AlertBar';
 import Main from './Main';
 import { joinWithTokenOrUrl } from './config/dynamicConfig';
 import { addStatReading } from './plugin/clientStats';
+import { displayErrorMsg, logDebug } from './plugin/logger';
+import i18next from 'i18next';
 
 export const AppContext = createContext<any>({});
 const CUSTOM_LABEL_KEYS_IN_DATABASE = ['mode', 'purpose'];
@@ -34,21 +36,33 @@ const App = () => {
   const appConfig = useAppConfig();
   const permissionStatus = usePermissionStatus();
 
-  const refreshOnboardingState = () => getPendingOnboardingState().then(setOnboardingState);
+  const refreshOnboardingState = () =>
+    getPendingOnboardingState().then((state) => {
+      setOnboardingState(state);
+      return state;
+    });
+
   useEffect(() => {
     refreshOnboardingState();
   }, []);
 
-  // handleOpenURL function must be provided globally for cordova-plugin-customurlscheme
-  // https://www.npmjs.com/package/cordova-plugin-customurlscheme
-  window['handleOpenURL'] = async (url: string, joinMethod: OnboardingJoinMethod = 'external') => {
-    const configUpdated = await joinWithTokenOrUrl(url);
+  async function handleTokenOrUrl(tokenOrUrl: string, joinMethod: OnboardingJoinMethod) {
+    const onboardingState = await refreshOnboardingState();
+    logDebug(`handleTokenOrUrl: onboardingState = ${JSON.stringify(onboardingState)}`);
+    if (onboardingState.route > OnboardingRoute.WELCOME) {
+      displayErrorMsg(i18next.t('join.already-logged-in', { token: onboardingState.opcode }));
+      return;
+    }
+    const configUpdated = await joinWithTokenOrUrl(tokenOrUrl);
     addStatReading('onboard', { configUpdated, joinMethod });
     if (configUpdated) {
       refreshOnboardingState();
     }
     return configUpdated;
-  };
+  }
+  // handleOpenURL function must be provided globally for cordova-plugin-customurlscheme
+  // https://www.npmjs.com/package/cordova-plugin-customurlscheme
+  window['handleOpenURL'] = (url: string) => handleTokenOrUrl(url, 'external');
 
   useEffect(() => {
     if (!appConfig) return;
@@ -63,7 +77,7 @@ const App = () => {
 
   const appContextValue = {
     appConfig,
-    handleOpenURL: window['handleOpenURL'],
+    handleTokenOrUrl,
     onboardingState,
     setOnboardingState,
     refreshOnboardingState,
diff --git a/www/js/onboarding/WelcomePage.tsx b/www/js/onboarding/WelcomePage.tsx
index 2698df5d4..ff8214578 100644
--- a/www/js/onboarding/WelcomePage.tsx
+++ b/www/js/onboarding/WelcomePage.tsx
@@ -34,7 +34,7 @@ const WelcomePage = () => {
   const { t } = useTranslation();
   const { colors } = useTheme();
   const { width: windowWidth } = useWindowDimensions();
-  const { handleOpenURL } = useContext(AppContext);
+  const { handleTokenOrUrl } = useContext(AppContext);
   const [pasteModalVis, setPasteModalVis] = useState(false);
   const [infoPopupVis, setInfoPopupVis] = useState(false);
   const [existingToken, setExistingToken] = useState('');
@@ -52,7 +52,7 @@ const WelcomePage = () => {
           AlertManager.addMessage({ text: 'No QR code found in scan. Please try again.' });
           return;
         }
-        handleOpenURL(result.text, 'scan');
+        handleTokenOrUrl(result.text, 'scan');
       },
       (error) => {
         barcodeScannerIsOpen = false;
@@ -68,7 +68,7 @@ const WelcomePage = () => {
         if (!clipboardContent?.startsWith('nrelop_') && !clipboardContent?.includes('://')) {
           throw new Error('Clipboard content is not a valid token or URL');
         }
-        handleOpenURL(clipboardContent, 'paste');
+        handleTokenOrUrl(clipboardContent, 'paste');
       } catch (e) {
         logWarn(`Tried using clipboard content ${clipboardContent}: ${e}`);
         setPasteModalVis(true);
@@ -141,7 +141,7 @@ const WelcomePage = () => {
             <Button onPress={() => setPasteModalVis(false)}>{t('login.button-decline')}</Button>
             <Button
               onPress={() =>
-                handleOpenURL(existingToken, 'textbox').catch((e) =>
+                handleTokenOrUrl(existingToken, 'textbox').catch((e) =>
                   displayError(e, `Tried using token ${existingToken}`),
                 )
               }>

From 8971f057545b34e482074c9bc506909360b6c97c Mon Sep 17 00:00:00 2001
From: Jack Greenlee <greenljk@mail.uc.edu>
Date: Fri, 25 Oct 2024 15:12:00 -0400
Subject: [PATCH 2/2] prevent UI loading in background; refactor useAppState

```
    // On iOS, the UI can run if the app is launched by the OS in response to a notification,
    // in which case the appState will be 'background'. In this case, we definitely do not want
    // to load the UI because it is not visible.
```

`useAppStateChange` only accepted a callback for onResume. Refactored this into a more versatile hook `useAppState`, which still allows optional onResume or onChange callbacks and also returns the underlying appState.

This allows App.tsx to useAppState and return null if appState is not 'active'. in this case the App.tsx itself will still initialize but it will not have any children

TimelineContext will no longer be rendered while the app is in the background so it no longer needs to listen for app state changes.
usePermissionStatus will still listen for onResume via the new interface, since it is invoked in App.tsx.
---
 www/js/App.tsx                                | 16 +++++++++++++
 www/js/TimelineContext.ts                     |  2 --
 .../{useAppStateChange.ts => useAppState.ts}  | 24 +++++++++++--------
 www/js/usePermissionStatus.ts                 | 10 ++++----
 4 files changed, 36 insertions(+), 16 deletions(-)
 rename www/js/{useAppStateChange.ts => useAppState.ts} (52%)

diff --git a/www/js/App.tsx b/www/js/App.tsx
index 2f7850d15..a311ce482 100644
--- a/www/js/App.tsx
+++ b/www/js/App.tsx
@@ -18,6 +18,7 @@ import AlertBar from './components/AlertBar';
 import Main from './Main';
 import { joinWithTokenOrUrl } from './config/dynamicConfig';
 import { addStatReading } from './plugin/clientStats';
+import useAppState from './useAppState';
 import { displayErrorMsg, logDebug } from './plugin/logger';
 import i18next from 'i18next';
 
@@ -75,6 +76,21 @@ const App = () => {
     // getUserCustomLabels(CUSTOM_LABEL_KEYS_IN_DATABASE).then((res) => setCustomLabelMap(res));
   }, [appConfig]);
 
+  const appState = useAppState({});
+  if (appState != 'active') {
+    // Render nothing if the app state is not 'active'.
+    // On iOS, the UI can run if the app is launched by the OS in response to a notification,
+    // in which case the appState will be 'background'. In this case, we definitely do not want
+    // to load the UI because it is not visible.
+    // On Android, the UI can only be initiated by the user - but even so, the user can send it to
+    // the background and we don't need the UI to stay active.
+    // In the future, we may want to persist some UI states when the app is sent to the background;
+    // i.e. the user opens the app, navigates away, and back again.
+    // But currently, we're relying on a 'fresh' UI every time the app goes to 'active' state.
+    logDebug(`App: appState = ${appState}; returning null`);
+    return null;
+  }
+
   const appContextValue = {
     appConfig,
     handleTokenOrUrl,
diff --git a/www/js/TimelineContext.ts b/www/js/TimelineContext.ts
index 63a43f1ce..fc463bbee 100644
--- a/www/js/TimelineContext.ts
+++ b/www/js/TimelineContext.ts
@@ -21,7 +21,6 @@ import { getPipelineRangeTs } from './services/commHelper';
 import { getNotDeletedCandidates, mapInputsToTimelineEntries } from './survey/inputMatcher';
 import { EnketoUserInputEntry } from './survey/enketo/enketoHelper';
 import { primarySectionForTrip } from './diary/diaryHelper';
-import useAppStateChange from './useAppStateChange';
 import { isoDateRangeToTsRange, isoDateWithOffset } from './datetimeUtil';
 import { base_modes } from 'e-mission-common';
 
@@ -55,7 +54,6 @@ type ContextProps = {
 export const useTimelineContext = (): ContextProps => {
   const { t } = useTranslation();
   const appConfig = useAppConfig();
-  useAppStateChange(() => refreshTimeline());
 
   const [labelOptions, setLabelOptions] = useState<LabelOptions | null>(null);
   // timestamp range that has been processed by the pipeline on the server
diff --git a/www/js/useAppStateChange.ts b/www/js/useAppState.ts
similarity index 52%
rename from www/js/useAppStateChange.ts
rename to www/js/useAppState.ts
index 760cbd8fa..4248045af 100644
--- a/www/js/useAppStateChange.ts
+++ b/www/js/useAppState.ts
@@ -3,26 +3,30 @@
 //the executes "onResume" function that is passed in
 //https://reactnative.dev/docs/appstate based on react's example of detecting becoming active
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import { AppState } from 'react-native';
 import { addStatReading } from './plugin/clientStats';
 
-const useAppStateChange = (onResume) => {
-  const appState = useRef(AppState.currentState);
+type Props = {
+  onResume?: () => void;
+  onChange?: (nextAppState: string) => void;
+};
+const useAppState = ({ onResume, onChange }: Props) => {
+  const [appState, setAppState] = useState(AppState.currentState);
 
   useEffect(() => {
     const subscription = AppState.addEventListener('change', (nextAppState) => {
-      if (appState.current != 'active' && nextAppState === 'active') {
-        onResume();
+      addStatReading('app_state_change', nextAppState);
+      onChange?.(nextAppState);
+      if (nextAppState == 'active' && appState != 'active') {
+        onResume?.();
       }
-
-      appState.current = nextAppState;
-      addStatReading('app_state_change', appState.current);
+      setAppState(nextAppState);
     });
     return () => subscription.remove();
   }, []);
 
-  return {};
+  return appState;
 };
 
-export default useAppStateChange;
+export default useAppState;
diff --git a/www/js/usePermissionStatus.ts b/www/js/usePermissionStatus.ts
index 5781738fd..3af18750b 100644
--- a/www/js/usePermissionStatus.ts
+++ b/www/js/usePermissionStatus.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState, useMemo } from 'react';
-import useAppStateChange from './useAppStateChange';
+import useAppState from './useAppState';
 import useAppConfig from './useAppConfig';
 import { useTranslation } from 'react-i18next';
 import { useAppTheme } from './appTheme';
@@ -358,9 +358,11 @@ const usePermissionStatus = () => {
     refreshAllChecks(checkList);
   }
 
-  useAppStateChange(() => {
-    logDebug('PERMISSION CHECK: app has resumed, should refresh');
-    refreshAllChecks(checkList);
+  useAppState({
+    onResume: () => {
+      logDebug('PERMISSION CHECK: app has resumed, should refresh');
+      refreshAllChecks(checkList);
+    },
   });
 
   //load when ready