@bifold/core 2.0.1 → 2.1.0

package/src/hooks/lockout.ts

@@ -0,0 +1,77 @@
+import { useCallback } from 'react'
+import { useNavigation, CommonActions } from '@react-navigation/native'
+import { useStore } from '../contexts/store'
+import { DispatchAction } from '../contexts/reducers/store'
+import { Screens } from '../types/navigators'
+import { TOKENS, useServices } from '../container-api'
+import { attemptLockoutConfig } from '../constants'
+
+export const useAttemptLockout = () => {
+  const [store, dispatch] = useStore()
+  const navigation = useNavigation()
+  // set the attempt lockout time
+  return useCallback(
+    async (penalty: number) => {
+      dispatch({
+        type: DispatchAction.ATTEMPT_UPDATED,
+        payload: [
+          {
+            loginAttempts: store.loginAttempt.loginAttempts + 1,
+            lockoutDate: Date.now() + penalty,
+            servedPenalty: false,
+          },
+        ],
+      })
+      navigation.dispatch(
+        CommonActions.reset({
+          index: 0,
+          routes: [{ name: Screens.AttemptLockout }],
+        })
+      )
+    },
+    [store, dispatch, navigation]
+  )
+}
+
+export const useGetLockoutPenalty = () => {
+  const [{ attemptLockoutConfig: { baseRules, thresholdRules } = attemptLockoutConfig }] = useServices([TOKENS.CONFIG])
+  return useCallback(
+    (attempts: number) => {
+      let penalty = baseRules[attempts]
+      if (!penalty && attempts >= thresholdRules.threshold && !(attempts % thresholdRules.increment)) {
+        penalty = thresholdRules.thresholdPenaltyDuration
+      }
+      return penalty
+    },
+    [baseRules, thresholdRules]
+  )
+}
+
+// This method is used to notify the app that the user is able to receive
+// another lockout penalty
+export const useUnMarkServedPenalty = () => {
+  const [store, dispatch] = useStore()
+  return useCallback(() => {
+    dispatch({
+      type: DispatchAction.ATTEMPT_UPDATED,
+      payload: [
+        {
+          loginAttempts: store.loginAttempt.loginAttempts,
+          lockoutDate: undefined,
+          servedPenalty: undefined,
+        },
+      ],
+    })
+  }, [dispatch, store.loginAttempt.loginAttempts])
+}
+
+export const useLockout = () => {
+  const getLockoutPenalty = useGetLockoutPenalty()
+  const attemptLockout = useAttemptLockout()
+  const unMarkServedPenalty = useUnMarkServedPenalty()
+  return {
+    getLockoutPenalty,
+    attemptLockout,
+    unMarkServedPenalty,
+  }
+}

package/src/hooks/onboarding.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react'
+import { useNavigation } from '@react-navigation/core'
+import { useStore } from '../contexts/store'
+
+export const useGotoPostAuthScreens = () => {
+  const [store] = useStore()
+  const navigation = useNavigation()
+  return useCallback(() => {
+    if (store.onboarding.postAuthScreens.length) {
+      const screen = store.onboarding.postAuthScreens[0]
+      if (screen) {
+        navigation.navigate(screen as never)
+      }
+    }
+  }, [store.onboarding.postAuthScreens, navigation])
+}

package/src/hooks/usePINValidation.ts

@@ -28,7 +28,7 @@ export const usePINValidation = (PIN: string, PINTwo: string) => {
   const clearModal = useCallback(() => {
     setModalState(initialModalState)
   }, [])
-  
+
   const [PINValidations, setPINValidations] = useState<PINValidationsType[]>(
     createPINValidations(PIN, PINSecurity.rules)
   )
@@ -57,7 +57,7 @@ export const usePINValidation = (PIN: string, PINTwo: string) => {
           visible: true,
           title: title,
           message: message,
-          onModalDismiss: clearModal
+          onModalDismiss: clearModal,
         })
       }
     },
@@ -93,6 +93,6 @@ export const usePINValidation = (PIN: string, PINTwo: string) => {
     modalState,
     setModalState,
     clearModal,
-    PINSecurity
+    PINSecurity,
   }
 }

package/src/index.ts

@@ -42,6 +42,9 @@ import { useTour } from './contexts/tour/tour-context'
 import { TourProvider } from './contexts/tour/tour-provider'
 import AttemptLockout from './screens/AttemptLockout'
 import Developer from './screens/Developer'
+import DeveloperModal from './components/modals/DeveloperModal'
+import { useDeveloperMode } from './hooks/developer-mode'
+import FauxHeader from './components/misc/FauxHeader'
 import OnboardingPages from './screens/OnboardingPages'
 import Preface from './screens/Preface'
 import Splash from './screens/Splash'
@@ -107,6 +110,7 @@ export type {
   IInlineInputMessage,
   IInputs,
   ITextTheme,
+  ITabTheme,
   IBrandColors,
   ISemanticColors,
   INotificationColors,
@@ -193,6 +197,9 @@ export {
   usePreventScreenCapture,
   Splash,
   Developer,
+  DeveloperModal,
+  useDeveloperMode,
+  FauxHeader,
   Terms,
   Preface,
   UpdateAvailable,

package/src/localization/en/index.ts

@@ -48,6 +48,7 @@ const translation = {
     "Close": "Close",
     "Remove": "Remove",
     "GotIt": "Got it",
+    "Send": "Send",
   },
   "Date": {
     "ShortFormat": "MMM D",

package/src/localization/fr/index.ts

@@ -48,6 +48,7 @@ const translation = {
         "Remove": "Supprimer",
         "Close": "Fermer",
         "GotIt": "Got it (FR)",
+        "Send": "Envoyer",
     },
     "Date": {
         "ShortFormat": "D MMM",

package/src/localization/pt-br/index.ts

@@ -47,6 +47,7 @@ const translation = {
     "Close": "Fechar",
     "Remove": "Remover",
     "GotIt": "Got it (PT-BR)",
+    "Send": "Enviar",
   },
   "Date": {
     "ShortFormat": "D MMM",

package/src/modules/openid/components/OpenIDCredentialCard.tsx

@@ -21,9 +21,8 @@ import { MdocRecord, SdJwtVcRecord, W3cCredentialRecord } from '@credo-ts/core'
 import { getCredentialForDisplay } from '../display'
 import { BifoldError } from '../../../types/error'
 import { EventTypes } from '../../../constants'
-import { getAttributeField } from '../utils/utils'
 import { Attribute } from '@bifold/oca/build/legacy'
-import startCase from 'lodash.startcase'
+import { getAttributeField } from '../../../utils/oca'
 
 interface CredentialCardProps {
   credentialDisplay?: W3cCredentialDisplay
@@ -66,7 +65,7 @@ const OpenIDCredentialCard: React.FC<CredentialCardProps> = ({
 
   const overlayAttributeField = useMemo((): Attribute | undefined => {
     if (!display?.primary_overlay_attribute || !credentialDisplay) return undefined
-    return getAttributeField(credentialDisplay, display.primary_overlay_attribute)
+    return getAttributeField(credentialDisplay, display.primary_overlay_attribute)?.field
   }, [display, credentialDisplay])
 
   const { width } = useWindowDimensions()
@@ -228,7 +227,7 @@ const OpenIDCredentialCard: React.FC<CredentialCardProps> = ({
           testID={testIdWithKey('CredentialIssued')}
           maxFontSizeMultiplier={1}
         >
-          {overlayAttributeField.label ?? startCase(overlayAttributeField.name || '')}: {overlayAttributeField.value}
+          {overlayAttributeField.label ?? overlayAttributeField.name}: {overlayAttributeField.value}
         </Text>
       </View>
     )

package/src/modules/openid/display.tsx

@@ -351,6 +351,7 @@ export function getCredentialForDisplay(
       claimFormat: ClaimFormat.SdJwtVc,
       validUntil: mapped.raw.validUntil,
       validFrom: mapped.raw.validFrom,
+      credentialSubject: openId4VcMetadata?.credential.credential_subject,
     }
   }
 
@@ -383,6 +384,7 @@ export function getCredentialForDisplay(
       claimFormat: ClaimFormat.MsoMdoc,
       validUntil: mdocInstance.validityInfo.validUntil,
       validFrom: mdocInstance.validityInfo.validFrom,
+      credentialSubject: openId4VcMetadata?.credential.credential_subject,
     }
   }
 
@@ -427,6 +429,7 @@ export function getCredentialForDisplay(
     validFrom: credentialRecord.credential.issuanceDate
       ? new Date(credentialRecord.credential.issuanceDate)
       : undefined,
+    credentialSubject: openId4VcMetadata?.credential.credential_subject,
   }
 }
 

package/src/modules/openid/metadata.tsx

@@ -1,11 +1,13 @@
 import type { W3cCredentialRecord, SdJwtVcRecord, MdocRecord } from '@credo-ts/core'
 import type { OpenId4VciCredentialSupported, OpenId4VciIssuerMetadataDisplay } from '@credo-ts/openid4vc'
 import type { MetadataDisplay } from '@sphereon/oid4vci-common'
+import { CredentialSubjectRecord } from './types'
 
 export interface OpenId4VcCredentialMetadata {
   credential: {
     display?: OpenId4VciCredentialSupported['display']
     order?: OpenId4VciCredentialSupported['order']
+    credential_subject?: CredentialSubjectRecord
   }
   issuer: {
     display?: OpenId4VciIssuerMetadataDisplay[]
@@ -13,16 +15,20 @@ export interface OpenId4VcCredentialMetadata {
   }
 }
 
+export type OpenId4VcCredentialMetadataExtended = Partial<
+  OpenId4VciCredentialSupported & { credential_subject: CredentialSubjectRecord }
+>
 const openId4VcCredentialMetadataKey = '_bifold/openId4VcCredentialMetadata'
 
 export function extractOpenId4VcCredentialMetadata(
-  credentialMetadata: OpenId4VciCredentialSupported,
+  credentialMetadata: Partial<OpenId4VciCredentialSupported & { credential_subject: CredentialSubjectRecord }>,
   serverMetadata: { display?: MetadataDisplay[]; id: string }
 ): OpenId4VcCredentialMetadata {
   return {
     credential: {
       display: credentialMetadata.display,
       order: credentialMetadata.order,
+      credential_subject: credentialMetadata.credential_subject,
     },
     issuer: {
       display: serverMetadata.display,

package/src/modules/openid/screens/OpenIDProofChangeCredential.tsx

@@ -0,0 +1,132 @@
+import { StackScreenProps } from '@react-navigation/stack'
+import { DeliveryStackParams, Screens } from '../../../types/navigators'
+import ScreenLayout from '../../../layout/ScreenLayout'
+import { FlatList, StyleSheet, TouchableOpacity, View } from 'react-native'
+import { useTranslation } from 'react-i18next'
+import { useTheme } from '../../../contexts/theme'
+import { useEffect, useState } from 'react'
+import { MdocRecord, SdJwtVcRecord, W3cCredentialRecord } from '@credo-ts/core'
+import { isSdJwtProofRequest, isW3CProofRequest } from '../utils/utils'
+import { useOpenIDCredentials } from '../context/OpenIDCredentialRecordProvider'
+import RecordLoading from '../../../components/animated/RecordLoading'
+import { ThemedText } from '../../../components/texts/ThemedText'
+import { testIdWithKey } from '../../../utils/testable'
+import { CredentialCard } from '../../../components/misc'
+
+type Props = StackScreenProps<DeliveryStackParams, Screens.OpenIDProofCredentialSelect>
+type TypedCred = {
+  credential: W3cCredentialRecord | SdJwtVcRecord | MdocRecord
+  claimFormat: string
+}
+
+const OpenIDProofCredentialSelect: React.FC<Props> = ({ route, navigation }: Props) => {
+  if (!route?.params) {
+    throw new Error('Change credential route params were not set properly')
+  }
+  const selectedCredentialID = route.params.selectedCredID
+  const altCredentials = route.params.altCredIDs
+  const onCredChange = route.params.onCredChange
+  const { ColorPallet, SelectedCredTheme } = useTheme()
+  const { getW3CCredentialById, getSdJwtCredentialById } = useOpenIDCredentials()
+
+  const { t } = useTranslation()
+  const [loading, setLoading] = useState(false)
+
+  const [credentialsRequested, setCredentialsRequested] = useState<Array<TypedCred>>([])
+
+  useEffect(() => {
+    async function fetchCreds() {
+      if (!altCredentials) return
+      setLoading(true)
+
+      const creds: TypedCred[] = []
+
+      for (const { id, claimFormat } of Object.values(altCredentials)) {
+        let credential: W3cCredentialRecord | SdJwtVcRecord | MdocRecord | undefined
+        if (isW3CProofRequest(claimFormat)) {
+          credential = await getW3CCredentialById(id)
+        } else if (isSdJwtProofRequest(claimFormat)) {
+          credential = await getSdJwtCredentialById(id)
+        }
+
+        if (credential) {
+          creds.push({
+            credential,
+            claimFormat,
+          })
+        }
+      }
+      setCredentialsRequested(creds)
+      setLoading(false)
+    }
+    fetchCreds()
+  }, [altCredentials, getW3CCredentialById, getSdJwtCredentialById])
+
+  const styles = StyleSheet.create({
+    pageContainer: {
+      flex: 1,
+    },
+    pageMargin: {
+      marginHorizontal: 20,
+    },
+    cardLoading: {
+      backgroundColor: ColorPallet.brand.secondaryBackground,
+      flex: 1,
+      flexGrow: 1,
+      marginVertical: 35,
+      borderRadius: 15,
+      paddingHorizontal: 10,
+    },
+  })
+
+  const changeCred = (selection: TypedCred) => {
+    onCredChange({
+      inputDescriptorID: route.params.inputDescriptorID,
+      id: selection.credential.id,
+      claimFormat: selection.claimFormat,
+    })
+    navigation.goBack()
+  }
+
+  const listHeader = () => {
+    return (
+      <View style={{ ...styles.pageMargin, marginVertical: 20 }}>
+        {loading ? (
+          <View style={styles.cardLoading}>
+            <RecordLoading />
+          </View>
+        ) : (
+          <ThemedText>{t('ProofRequest.MultipleCredentials')}</ThemedText>
+        )}
+      </View>
+    )
+  }
+
+  return (
+    <ScreenLayout screen={Screens.OpenIDProofCredentialSelect}>
+      <FlatList
+        data={credentialsRequested}
+        ListHeaderComponent={listHeader}
+        renderItem={({ item }) => {
+          return (
+            <View style={styles.pageMargin}>
+              <TouchableOpacity
+                accessibilityRole="button"
+                testID={testIdWithKey(`select:${item.credential.id}`)}
+                onPress={() => changeCred(item)}
+                style={[
+                  item.credential.id === selectedCredentialID ? SelectedCredTheme : undefined,
+                  { marginBottom: 10 },
+                ]}
+              >
+                <CredentialCard credential={item.credential}></CredentialCard>
+              </TouchableOpacity>
+            </View>
+          )
+        }}
+      ></FlatList>
+    </ScreenLayout>
+  )
+}
+
+export default OpenIDProofCredentialSelect