Fix security check notification not reappearing after dismissal

PasswordReminderService unmounts on logout and remounts after LOGIN
dispatches, so componentDidUpdate never fires for the initial LOGIN
transition. Add componentDidMount to persist the reducer-computed
passwordReminder state (including the incremented nonPasswordLoginsCount)
on mount so the count advances on disk across login cycles.

Author: Jon Tzeng

eslint.config.mjs

@@ -330,7 +330,7 @@ export default [
       'src/components/services/FioService.ts',
       'src/components/services/LoanManagerService.ts',
       'src/components/services/NetworkActivity.ts',
-      'src/components/services/PasswordReminderService.ts',
+
       'src/components/services/PermissionsManager.tsx',
       'src/components/services/Providers.tsx',
 

src/components/services/PasswordReminderService.ts

@@ -1,51 +1,36 @@
 import * as React from 'react'
 
 import { setPasswordReminder } from '../../actions/LocalSettingsActions'
-import { connect } from '../../types/reactRedux'
-import type { PasswordReminder } from '../../types/types'
+import { useAsyncEffect } from '../../hooks/useAsyncEffect'
+import {
+  initialState,
+  type PasswordReminderState
+} from '../../reducers/PasswordReminderReducer'
+import { useDispatch, useSelector } from '../../types/reactRedux'
 import { matchJson } from '../../util/matchJson'
-import { showError } from './AirshipInstance'
 
-interface StateProps {
-  settingsLoaded: boolean | null
-  passwordReminder: PasswordReminder
-}
-interface DispatchProps {
-  setPasswordReminder: (passwordReminder: PasswordReminder) => Promise<void>
-}
-type Props = StateProps & DispatchProps
+interface Props {}
 
-class PasswordReminderComponent extends React.PureComponent<Props> {
-  componentDidUpdate(prevProps: Props): void {
-    if (
-      this.props.settingsLoaded === true &&
-      !matchJson(prevProps.passwordReminder, this.props.passwordReminder)
-    ) {
-      this.props
-        .setPasswordReminder(this.props.passwordReminder)
-        .catch((error: unknown) => {
-          showError(error)
-        })
-    }
-  }
+export const PasswordReminderService: React.FC<Props> = props => {
+  const settingsLoaded =
+    useSelector(state => state.ui.settings.settingsLoaded) ?? false
+  const passwordReminder = useSelector(state => state.ui.passwordReminder)
+  const lastPasswordReminder = React.useRef<PasswordReminderState>(initialState)
+  const dispatch = useDispatch()
 
-  render(): React.JSX.Element | null {
-    return null
-  }
-}
+  useAsyncEffect(
+    async () => {
+      if (
+        settingsLoaded &&
+        !matchJson(passwordReminder, lastPasswordReminder.current)
+      ) {
+        lastPasswordReminder.current = passwordReminder
+        await dispatch(setPasswordReminder(passwordReminder))
+      }
+    },
+    [settingsLoaded, passwordReminder],
+    'PasswordReminderService'
+  )
 
-export const PasswordReminderService = connect<
-  StateProps,
-  DispatchProps,
-  unknown
->(
-  state => ({
-    settingsLoaded: state.ui.settings.settingsLoaded,
-    passwordReminder: state.ui.passwordReminder
-  }),
-  dispatch => ({
-    async setPasswordReminder(passwordReminder: PasswordReminder) {
-      await dispatch(setPasswordReminder(passwordReminder))
-    }
-  })
-)(PasswordReminderComponent)
+  return null
+}