Feat/password

src/components/ConfirmCredentialModal.tsx

@@ -0,0 +1,55 @@
+import { Box } from 'native-base';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import LoginMethod from 'src/models/enums/LoginMethod';
+import { useAppSelector } from 'src/store/hooks';
+import PasscodeVerifyModal from './Modal/PasscodeVerify';
+import PasswordModalContent from 'src/screens/AppSettings/PasswordModalContent';
+
+type Props = {
+  close?: () => void;
+  success?: any;
+  useBiometrics?: boolean;
+  forcedMode?: any;
+  onForceSuccess?: any;
+  primaryText?: string;
+};
+
+const ConfirmCredentialModal = ({
+  success,
+  close,
+  useBiometrics,
+  forcedMode,
+  onForceSuccess,
+  primaryText,
+}: Props) => {
+  const { loginMethod }: { loginMethod: LoginMethod } = useAppSelector((state) => state.settings);
+  const fallbackLoginMethod = useSelector((state) => state.settings.fallbackLoginMethod);
+
+  return (
+    <Box>
+      {(loginMethod === LoginMethod.BIOMETRIC && fallbackLoginMethod === 'PIN') ||
+      (loginMethod !== LoginMethod.BIOMETRIC && loginMethod === LoginMethod.PIN) ? (
+        <PasscodeVerifyModal
+          useBiometrics={useBiometrics}
+          close={() => {
+            close();
+          }}
+          forcedMode={forcedMode}
+          onForceSuccess={onForceSuccess}
+          onSuccess={success}
+          primaryText={primaryText}
+        />
+      ) : (
+        <PasswordModalContent
+          close={() => {
+            close();
+          }}
+          onSuccess={success}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default ConfirmCredentialModal;

src/components/Modal/PasscodeVerify.tsx

@@ -46,7 +46,7 @@ function PasscodeVerifyModal({
   const [errMessage, setErrMessage] = useState(login.Incorrect);
   const { isAuthenticated, authenticationFailed } = useAppSelector((state) => state.login);
   const { loginMethod } = useAppSelector((state) => state.settings);
-  const { appId, failedAttempts, lastLoginFailedAt } = useAppSelector((state) => state.storage);
+  const { appId } = useAppSelector((state) => state.storage);
 
   useEffect(() => {
     if (useBiometrics) {

src/components/RKSignersModal.tsx

@@ -14,7 +14,6 @@ import { CKTapCard } from 'cktap-protocol-react-native';
 import useNfcModal from 'src/hooks/useNfcModal';
 import NfcPrompt from 'src/components/NfcPromptAndroid';
 import KeeperModal from 'src/components/KeeperModal';
-import PasscodeVerifyModal from 'src/components/Modal/PasscodeVerify';
 import { Box, useColorMode } from 'native-base';
 import { SIGNTRANSACTION } from 'src/navigation/contants';
 import { useDispatch } from 'react-redux';
@@ -30,6 +29,7 @@ import { KeeperApp } from 'src/models/interfaces/KeeperApp';
 import { LocalizationContext } from 'src/context/Localization/LocContext';
 import { useAppSelector } from 'src/store/hooks';
 import ShareKeyModalContent from 'src/screens/Vault/components/ShareKeyModalContent';
+import ConfirmCredentialModal from './ConfirmCredentialModal';
 import Text from './KeeperText';
 import WalletOperations from 'src/services/wallets/operations';
 import ActivityIndicatorView from './AppActivityIndicator/ActivityIndicatorView';
@@ -388,12 +388,10 @@ const RKSignersModal = ({ signer, psbt, isMiniscript, vaultId }, ref) => {
         textColor={`${colorMode}.textGreen`}
         subTitleColor={`${colorMode}.modalSubtitleBlack`}
         Content={() => (
-          <PasscodeVerifyModal
+          <ConfirmCredentialModal
+            close={() => setConfirmPassVisible(false)}
+            success={signTransaction}
             useBiometrics={false}
-            close={() => {
-              setConfirmPassVisible(false);
-            }}
-            onSuccess={signTransaction}
           />
         )}
       />

src/models/enums/LoginMethod.ts

@@ -1,5 +1,6 @@
 enum LoginMethod {
   PIN = 'PIN',
   BIOMETRIC = 'BIOMETRIC',
+  PASSWORD = 'PASSWORD',
 }
 export default LoginMethod;

src/screens/AppSettings/AppBackupSettings.tsx

@@ -6,7 +6,6 @@ import { CommonActions, useNavigation } from '@react-navigation/native';
 import OptionCard from 'src/components/OptionCard';
 import KeeperModal from 'src/components/KeeperModal';
 import ScreenWrapper from 'src/components/ScreenWrapper';
-import PasscodeVerifyModal from 'src/components/Modal/PasscodeVerify';
 import { wp } from 'src/constants/responsive';
 import { LocalizationContext } from 'src/context/Localization/LocContext';
 import { RealmSchema } from 'src/storage/realm/enum';
@@ -31,6 +30,7 @@ import { NewVaultInfo } from 'src/store/sagas/wallets';
 import BackupModalContent from './BackupModal';
 import { credsAuthenticated } from 'src/store/reducers/login';
 import WalletHeader from 'src/components/WalletHeader';
+import ConfirmCredentialModal from 'src/components/ConfirmCredentialModal';
 
 function AppBackupSettings() {
   const { colorMode } = useColorMode();
@@ -160,15 +160,15 @@ function AppBackupSettings() {
         textColor={`${colorMode}.textGreen`}
         subTitleColor={`${colorMode}.modalSubtitleBlack`}
         Content={() => (
-          <PasscodeVerifyModal
-            useBiometrics
+          <ConfirmCredentialModal
             close={() => {
               setConfirmPassVisible(false);
             }}
-            onSuccess={() => {
+            success={() => {
               setConfirmPassVisible(false);
               setBackupModalVisible(true);
             }}
+            useBiometrics={true}
           />
         )}
       />