feat: mobile security prefs (#1496)

* feat: move mobile-specific security items to Web when rendered in WebView

* feat: better UI for biometrics section

* feat: move Multitasking Privacy section to WebView (mostly UI)

* feat: move Multitasking Privacy section to WebView (going to understand why in WebView multitasking privacy value is auto-changed after reopening the WebView)

* feat: store MultitaskingPrivacy value as "NonWrapped" so that it's the same both on mobile and WebView

* feat: open WebView correctly when "Storage Encryption" is disabled on mobile

* fix: remove unnecessary changes and comments

* chore: revert ios-related unneeded changes

* fix: let Android to correctly recognize the NativeMobileWeb environment when opening WebView on Android

* fix: correct styles for the selected state of Biometrics/Passcode options

* chore: code cleanup

* fix: store Multitasking/Screenshot Privacy in the `Default` storage value mode

* chore: remove comment

* fix: use application's method instead of directly updating Screenshot Privacy preference

* fix: remove unused variable

* fix: use methods from Application and MobileDeviceInterface in all places, remove duplicate code

* fix: hide Multitasking Privacy and Biometrics Lock in WebView

Co-authored-by: Aman Harwara

packages/mobile/src/Screens/Authenticate/Authenticate.tsx

@@ -197,7 +197,7 @@ export const Authenticate = ({
         state: AuthenticationValueStateType.Pending,
       })
 
-      if (application?.getAppState().screenshotPrivacyEnabled) {
+      if (await application?.getMobileScreenshotPrivacyEnabled()) {
         hide()
       }
 

packages/mobile/src/Screens/InputModal/PasscodeInputModal.tsx

@@ -1,4 +1,4 @@
-import { PasscodeKeyboardType, UnlockTiming } from '@Lib/ApplicationState'
+import { PasscodeKeyboardType } from '@Lib/ApplicationState'
 import { ApplicationContext } from '@Root/ApplicationContext'
 import { ButtonCell } from '@Root/Components/ButtonCell'
 import { Option, SectionedOptionsTableCell } from '@Root/Components/SectionedOptionsTableCell'
@@ -6,6 +6,7 @@ import { SectionedTableCell } from '@Root/Components/SectionedTableCell'
 import { TableSection } from '@Root/Components/TableSection'
 import { ModalStackNavigationProp } from '@Root/ModalStack'
 import { SCREEN_INPUT_MODAL_PASSCODE } from '@Root/Screens/screens'
+import { MobileUnlockTiming } from '@standardnotes/snjs'
 import { ThemeServiceContext } from '@Style/ThemeService'
 import React, { useContext, useMemo, useRef, useState } from 'react'
 import { Keyboard, KeyboardType, Platform, TextInput } from 'react-native'
@@ -50,7 +51,7 @@ export const PasscodeInputModal = (props: Props) => {
     } else {
       await application?.addPasscode(text)
       await application?.getAppState().setPasscodeKeyboardType(keyboardType as PasscodeKeyboardType)
-      await application?.getAppState().setPasscodeTiming(UnlockTiming.OnQuit)
+      await application?.getAppState().setPasscodeTiming(MobileUnlockTiming.OnQuit)
       setSettingPassocode(false)
       props.navigation.goBack()
     }

packages/mobile/src/Screens/Settings/Sections/SecuritySection.tsx

@@ -1,4 +1,3 @@
-import { UnlockTiming } from '@Lib/ApplicationState'
 import { MobileDeviceInterface } from '@Lib/Interface'
 import { useFocusEffect, useNavigation } from '@react-navigation/native'
 import { ApplicationContext } from '@Root/ApplicationContext'
@@ -8,7 +7,7 @@ import { SectionHeader } from '@Root/Components/SectionHeader'
 import { TableSection } from '@Root/Components/TableSection'
 import { ModalStackNavigationProp } from '@Root/ModalStack'
 import { SCREEN_INPUT_MODAL_PASSCODE, SCREEN_SETTINGS } from '@Root/Screens/screens'
-import { StorageEncryptionPolicy } from '@standardnotes/snjs'
+import { MobileUnlockTiming, StorageEncryptionPolicy } from '@standardnotes/snjs'
 import React, { useCallback, useContext, useEffect, useState } from 'react'
 import { Platform } from 'react-native'
 import { Title } from './SecuritySection.styled'
@@ -32,16 +31,14 @@ export const SecuritySection = (props: Props) => {
   const [hasBiometrics, setHasBiometrics] = useState(false)
   const [supportsBiometrics, setSupportsBiometrics] = useState(false)
   const [biometricsTimingOptions, setBiometricsTimingOptions] = useState(() =>
-    application!.getAppState().getBiometricsTimingOptions(),
-  )
-  const [passcodeTimingOptions, setPasscodeTimingOptions] = useState(() =>
-    application!.getAppState().getPasscodeTimingOptions(),
+    application!.getBiometricsTimingOptions(),
   )
+  const [passcodeTimingOptions, setPasscodeTimingOptions] = useState(() => application!.getPasscodeTimingOptions())
 
   useEffect(() => {
     let mounted = true
     const getHasScreenshotPrivacy = async () => {
-      const hasScreenshotPrivacyEnabled = await application?.getAppState().screenshotPrivacyEnabled
+      const hasScreenshotPrivacyEnabled = (await application?.getMobileScreenshotPrivacyEnabled()) ?? true
       if (mounted) {
         setHasScreenshotPrivacy(hasScreenshotPrivacyEnabled)
       }
@@ -71,7 +68,7 @@ export const SecuritySection = (props: Props) => {
   useFocusEffect(
     useCallback(() => {
       if (props.hasPasscode) {
-        setPasscodeTimingOptions(() => application!.getAppState().getPasscodeTimingOptions())
+        setPasscodeTimingOptions(() => application!.getPasscodeTimingOptions())
       }
     }, [application, props.hasPasscode]),
   )
@@ -127,14 +124,14 @@ export const SecuritySection = (props: Props) => {
 
   const biometricTitle = hasBiometrics ? 'Disable Biometrics Lock' : 'Enable Biometrics Lock'
 
-  const setBiometricsTiming = async (timing: UnlockTiming) => {
+  const setBiometricsTiming = async (timing: MobileUnlockTiming) => {
     await application?.getAppState().setBiometricsTiming(timing)
-    setBiometricsTimingOptions(() => application!.getAppState().getBiometricsTimingOptions())
+    setBiometricsTimingOptions(() => application!.getBiometricsTimingOptions())
   }
 
-  const setPasscodeTiming = async (timing: UnlockTiming) => {
+  const setPasscodeTiming = async (timing: MobileUnlockTiming) => {
     await application?.getAppState().setPasscodeTiming(timing)
-    setPasscodeTimingOptions(() => application!.getAppState().getPasscodeTimingOptions())
+    setPasscodeTimingOptions(() => application!.getPasscodeTimingOptions())
   }
 
   const onScreenshotPrivacyPress = async () => {
@@ -157,7 +154,7 @@ export const SecuritySection = (props: Props) => {
     } else {
       setHasBiometrics(true)
       await application?.enableBiometrics()
-      await setBiometricsTiming(UnlockTiming.OnQuit)
+      await setBiometricsTiming(MobileUnlockTiming.OnQuit)
       props.updateProtectionsAvailable()
     }
   }
@@ -231,7 +228,7 @@ export const SecuritySection = (props: Props) => {
           leftAligned
           title={'Require Passcode'}
           options={passcodeTimingOptions}
-          onPress={(option: Option) => setPasscodeTiming(option.key as UnlockTiming)}
+          onPress={(option: Option) => setPasscodeTiming(option.key as MobileUnlockTiming)}
         />
       )}
 
@@ -240,7 +237,7 @@ export const SecuritySection = (props: Props) => {
           leftAligned
           title={'Require Biometrics'}
           options={biometricsTimingOptions}
-          onPress={(option: Option) => setBiometricsTiming(option.key as UnlockTiming)}
+          onPress={(option: Option) => setBiometricsTiming(option.key as MobileUnlockTiming)}
         />
       )}
     </TableSection>