From db2ada926ea7351683ed3ffe507309ac9db83ee2 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Fri, 11 Jun 2021 09:16:04 +0500
Subject: [PATCH] add better applock management

---
 apps/mobile/App.js                            |  25 ++--
 apps/mobile/src/components/AppLoader/index.js | 133 +++++++++++++++---
 apps/mobile/src/provider/interfaces.ts        |   2 +
 apps/mobile/src/provider/stores.ts            |   2 +
 4 files changed, 131 insertions(+), 31 deletions(-)

diff --git a/apps/mobile/App.js b/apps/mobile/App.js
index 62f4fdcc7..62c83fd43 100644
--- a/apps/mobile/App.js
+++ b/apps/mobile/App.js
@@ -9,7 +9,13 @@ import {RootView} from './initializer.root';
 import AppLoader from './src/components/AppLoader';
 import {useTracked} from './src/provider';
 import {Actions} from './src/provider/Actions';
-import {initialize, useMessageStore, useNoteStore, useSettingStore} from './src/provider/stores';
+import {
+  initialize,
+  useMessageStore,
+  useNoteStore,
+  useSettingStore,
+  useUserStore,
+} from './src/provider/stores';
 import BiometricService from './src/services/BiometricService';
 import {DDS} from './src/services/DeviceDetection';
 import {
@@ -27,8 +33,9 @@ let initStatus = false;
 const App = () => {
   const [, dispatch] = useTracked();
   const setDeviceMode = useSettingStore(state => state.setDeviceMode);
-  useEffect(() => {
+  const setVerifyUser = useUserStore(state => state.setVerifyUser);
 
+  useEffect(() => {
     useMessageStore.getState().setAnnouncement();
     (async () => {
       try {
@@ -66,19 +73,9 @@ const App = () => {
           SettingsService.get().appLockMode &&
           SettingsService.get().appLockMode !== 'none'
         ) {
-          let result = await BiometricService.validateUser(
-            'Unlock to access your notes',
-            '',
-          );
-          if (result) {
-            await func();
-          } else {
-            RNExitApp.exitApp();
-            return;
-          }
-        } else {
-          await func();
+          setVerifyUser(true);
         }
+        await func();
       } catch (e) {
       } finally {
         initStatus = true;
diff --git a/apps/mobile/src/components/AppLoader/index.js b/apps/mobile/src/components/AppLoader/index.js
index 93e1fb079..f5be4ff57 100644
--- a/apps/mobile/src/components/AppLoader/index.js
+++ b/apps/mobile/src/components/AppLoader/index.js
@@ -1,9 +1,14 @@
 import React, {useEffect, useState} from 'react';
-import {View} from 'react-native';
+import {SafeAreaView, View} from 'react-native';
 import Animated, {Easing} from 'react-native-reanimated';
 import AnimatedProgress from 'react-native-reanimated-progress-bar';
 import {useTracked} from '../../provider';
-import {useFavoriteStore, useNoteStore} from '../../provider/stores';
+import {
+  useFavoriteStore,
+  useNoteStore,
+  useUserStore,
+} from '../../provider/stores';
+import BiometricService from '../../services/BiometricService';
 import {DDS} from '../../services/DeviceDetection';
 import {
   eSendEvent,
@@ -11,13 +16,19 @@ import {
   eUnSubscribeEvent,
 } from '../../services/EventManager';
 import {editing} from '../../utils';
-import {changeContainerScale, ContainerScale} from '../../utils/Animations';
 import {db} from '../../utils/DB';
 import {eOpenRateDialog, eOpenSideMenu} from '../../utils/Events';
 import {MMKV} from '../../utils/mmkv';
 import {tabBarRef} from '../../utils/Refs';
+import {SIZE} from '../../utils/SizeUtils';
+import {Button} from '../Button';
+import Input from '../Input';
+import Seperator from '../Seperator';
 import SplashScreen from '../SplashScreen';
+import Heading from '../Typography/Heading';
+import Paragraph from '../Typography/Paragraph';
 
+let passwordValue = null;
 const opacityV = new Animated.Value(1);
 const AppLoader = ({onLoad}) => {
   const [state, dispatch] = useTracked();
@@ -26,7 +37,12 @@ const AppLoader = ({onLoad}) => {
   const setNotes = useNoteStore(state => state.setNotes);
   const setFavorites = useFavoriteStore(state => state.setFavorites);
   const _setLoading = useNoteStore(state => state.setLoading);
+  const [user, setUser] = useState();
+  const verifyUser = useUserStore(state => state.verifyUser);
+  const setVerifyUser = useUserStore(state => state.setVerifyUser);
+
   const load = async value => {
+    if (verifyUser) return;
     if (value === 'hide') {
       setLoading(true);
       opacityV.setValue(1);
@@ -45,7 +61,6 @@ const AppLoader = ({onLoad}) => {
         if (!DDS.isTab) {
           tabBarRef.current?.goToPage(1);
         }
-
         eSendEvent('loadingNote', appState.note);
       }
     }
@@ -76,13 +91,47 @@ const AppLoader = ({onLoad}) => {
     }
   };
 
+  useEffect(() => {
+    if (!verifyUser) {
+      load();
+    } else {
+      db.user.getUser().then(u => {
+        if (u) {
+          setUser(u);
+        }
+      });
+    }
+  }, [verifyUser]);
+
   useEffect(() => {
     eSubscribeEvent('load_overlay', load);
-    onLoad();
+    if (verifyUser) {
+      onUnlockBiometrics();
+    }
     return () => {
       eUnSubscribeEvent('load_overlay', load);
     };
-  }, []);
+  }, [verifyUser]);
+
+  const onUnlockBiometrics = async () => {
+    let result = await BiometricService.validateUser(
+      'Unlock to access your notes',
+      '',
+    );
+    if (result) {
+      setVerifyUser(false);
+    }
+  };
+
+  const onSubmit = async () => {
+    if (!passwordValue) return;
+    try {
+      let verified = await db.user.verifyPassword(passwordValue);
+      if (verified) {
+        setVerifyUser(false);
+      }
+    } catch (e) {}
+  };
 
   return loading ? (
     <Animated.View
@@ -95,9 +144,6 @@ const AppLoader = ({onLoad}) => {
         borderRadius: 10,
       }}>
       <Animated.View
-        onTouchStart={() => {
-          setLoading(false);
-        }}
         style={{
           backgroundColor: colors.bg,
           width: '100%',
@@ -107,14 +153,67 @@ const AppLoader = ({onLoad}) => {
           borderRadius: 10,
           opacity: opacityV,
         }}>
-        <View
-          style={{
-            height: 10,
-            flexDirection: 'row',
-            width: 100,
-          }}>
-          <AnimatedProgress fill={colors.accent} current={4} total={4} />
-        </View>
+        {verifyUser ? (
+          <SafeAreaView
+            style={{
+              flex: 1,
+              justifyContent: 'center',
+              width: '100%',
+              paddingHorizontal: 12,
+            }}>
+            <Heading>Verify your identity</Heading>
+            {user ? (
+              <>
+                <Paragraph>
+                  To keep your notes secure, please enter password of the
+                  account you are logged in to.
+                </Paragraph>
+                <Input
+                  secureTextEntry
+                  placeholder="Enter account password"
+                  onChangeText={v => (passwordValue = v)}
+                  onSubmit={onSubmit}
+                />
+                <Button
+                  title="Unlock"
+                  type="accent"
+                  onPress={onSubmit}
+                  width="100%"
+                  height={50}
+                  fontSize={SIZE.md}
+                />
+                <Seperator />
+              </>
+            ) : (
+              <>
+                <Paragraph>
+                  To keep your notes secure, please unlock app the with
+                  biometrics.
+                </Paragraph>
+                <Seperator />
+              </>
+            )}
+
+            <Button
+              title="Unlock with Biometrics"
+              width="100%"
+              height={50}
+              onPress={onUnlockBiometrics}
+              icon={'fingerprint'}
+              type={!user ? 'accent' : 'transparent'}
+              fontSize={SIZE.md}
+            />
+          </SafeAreaView>
+        ) : (
+          <View
+            style={{
+              height: 10,
+              flexDirection: 'row',
+              width: 100,
+            }}>
+            <AnimatedProgress fill={colors.accent} current={4} total={4} />
+          </View>
+        )}
       </Animated.View>
     </Animated.View>
   ) : (
diff --git a/apps/mobile/src/provider/interfaces.ts b/apps/mobile/src/provider/interfaces.ts
index 6935a91e1..3e2ab56d8 100644
--- a/apps/mobile/src/provider/interfaces.ts
+++ b/apps/mobile/src/provider/interfaces.ts
@@ -53,6 +53,8 @@ export interface UserStore extends State {
     setPremium: (premium: boolean) => void,
     setSyncing: (syncing: boolean) => void,
     setLastSynced: (lastSynced: string) => void,
+    verifyUser:boolean,
+    setVerifyUser:(verified:boolean) => void
 }
 
 
diff --git a/apps/mobile/src/provider/stores.ts b/apps/mobile/src/provider/stores.ts
index b1ec16405..e7bb0acc5 100644
--- a/apps/mobile/src/provider/stores.ts
+++ b/apps/mobile/src/provider/stores.ts
@@ -141,10 +141,12 @@ export const useUserStore = create<UserStore>((set, get) => ({
   premium: false,
   lastSynced: 'Never',
   syncing: false,
+  verifyUser:false,
   setUser: user => set({ user: user }),
   setPremium: premium => set({ premium: premium }),
   setSyncing: syncing => set({ syncing: syncing }),
   setLastSynced: lastSynced => set({ lastSynced: lastSynced }),
+  setVerifyUser:(verified) => set({verifyUser:verified})
 }));
 
 let { width, height } = Dimensions.get('window');