chore: display error messages for PIN screens inline mode

packages/legacy/core/App/components/inputs/InlineErrorText.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { View, StyleSheet, Text } from 'react-native'
+
+import { useTheme } from '../../contexts/theme'
+import { SvgProps } from 'react-native-svg'
+import { InlineErrorConfig } from '../../container-api'
+
+export enum InlineErrorType {
+  error,
+  warning,
+}
+
+export interface InlineMessageProps {
+  message: string
+  inlineType: InlineErrorType
+  config: InlineErrorConfig
+}
+
+const InlineErrorText: React.FC<InlineMessageProps> = ({ message, inlineType, config }) => {
+  const { InputInlineMessage } = useTheme()
+  const style = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignContent: 'center',
+      marginVertical: 5,
+      paddingRight: 20,
+    },
+    icon: { marginRight: 4 },
+  })
+
+  const color =
+    inlineType === InlineErrorType.warning
+      ? InputInlineMessage.inlineWarningText.color
+      : InputInlineMessage.inlineErrorText.color
+
+  const props: SvgProps = { height: 16, width: 16, color: color, style: style.icon }
+
+  return (
+    <View style={[style.container, config.style]}>
+      {inlineType === InlineErrorType.warning ? (
+        <InputInlineMessage.InlineWarningIcon {...props} />
+      ) : (
+        <InputInlineMessage.InlineErrorIcon {...props} />
+      )}
+      <Text style={[InputInlineMessage.inlineErrorText]}>{message}</Text>
+    </View>
+  )
+}
+
+export default InlineErrorText

packages/legacy/core/App/components/inputs/PINInput.tsx

@@ -7,17 +7,20 @@ import Icon from 'react-native-vector-icons/MaterialIcons'
 import { hitSlop, minPINLength } from '../../constants'
 import { useTheme } from '../../contexts/theme'
 import { testIdWithKey } from '../../utils/testable'
+import InlineErrorText, { InlineMessageProps } from './InlineErrorText'
+import { InlineErrorPosition } from '../../container-api'
 
 interface PINInputProps {
   label?: string
   onPINChanged?: (PIN: string) => void
   testID?: string
   accessibilityLabel?: string
   autoFocus?: boolean
+  inlineMessage?: InlineMessageProps
 }
 
 const PINInputComponent = (
-  { label, onPINChanged, testID, accessibilityLabel, autoFocus = false }: PINInputProps,
+  { label, onPINChanged, testID, accessibilityLabel, autoFocus = false, inlineMessage }: PINInputProps,
   ref: Ref<TextInput>
 ) => {
   // const accessible = accessibilityLabel && accessibilityLabel !== '' ? true : false
@@ -58,53 +61,70 @@ const PINInputComponent = (
       paddingHorizontal: 10,
     },
   })
+  const content = () => (
+    <View style={PINInputTheme.labelAndFieldContainer}>
+        <View style={style.codeFieldContainer}>
+          <CodeField
+            {...props}
+            testID={testID}
+            accessibilityLabel={accessibilityLabel}
+            accessible
+            value={PIN}
+            rootStyle={PINInputTheme.codeFieldRoot}
+            onChangeText={onChangeText}
+            cellCount={minPINLength}
+            keyboardType="numeric"
+            textContentType="password"
+            renderCell={({ index, symbol, isFocused }) => {
+              let child: React.ReactNode | string = ''
+              if (symbol) {
+                child = showPIN ? symbol : '●' // Show or hide PIN
+              } else if (isFocused) {
+                child = <Cursor />
+              }
+              return (
+                <View key={index} style={style.cell} onLayout={getCellOnLayoutHandler(index)}>
+                  <Text style={style.cellText} maxFontSizeMultiplier={1}>
+                    {child}
+                  </Text>
+                </View>
+              )
+            }}
+            autoFocus={autoFocus}
+            ref={ref}
+          />
+        </View>
+        <TouchableOpacity
+          style={style.hideIcon}
+          accessibilityLabel={showPIN ? t('PINCreate.Hide') : t('PINCreate.Show')}
+          accessibilityRole={'button'}
+          testID={showPIN ? testIdWithKey('Hide') : testIdWithKey('Show')}
+          onPress={() => setShowPIN(!showPIN)}
+          hitSlop={hitSlop}
+        >
+          <Icon color={PINInputTheme.icon.color} name={showPIN ? 'visibility-off' : 'visibility'} size={30} />
+        </TouchableOpacity>
+    </View>
+  )
 
+  const inlineMessageView = ({message, inlineType, config}: InlineMessageProps) => (
+    <InlineErrorText message={message} inlineType={inlineType} config={config} />
+  )
+  const inlineMessagePlaceholder = (placment: InlineErrorPosition) => {
+    if (inlineMessage && inlineMessage.config.position === placment) {
+      return inlineMessageView(inlineMessage)
+    }
+    //This is a fallback in case no position provided
+    if (inlineMessage && placment === InlineErrorPosition.Above && !inlineMessage.config.position) {
+      return inlineMessageView(inlineMessage)
+    }
+  }
   return (
     <View style={style.container}>
       {label && <Text style={[TextTheme.label, { marginBottom: 8 }]}>{label}</Text>}
-      <View style={PINInputTheme.labelAndFieldContainer}>
-          <View style={style.codeFieldContainer}>
-            <CodeField
-              {...props}
-              testID={testID}
-              accessibilityLabel={accessibilityLabel}
-              accessible
-              value={PIN}
-              rootStyle={PINInputTheme.codeFieldRoot}
-              onChangeText={onChangeText}
-              cellCount={minPINLength}
-              keyboardType="numeric"
-              textContentType="password"
-              renderCell={({ index, symbol, isFocused }) => {
-                let child: React.ReactNode | string = ''
-                if (symbol) {
-                  child = showPIN ? symbol : '●' // Show or hide PIN
-                } else if (isFocused) {
-                  child = <Cursor />
-                }
-                return (
-                  <View key={index} style={style.cell} onLayout={getCellOnLayoutHandler(index)}>
-                    <Text style={style.cellText} maxFontSizeMultiplier={1}>
-                      {child}
-                    </Text>
-                  </View>
-                )
-              }}
-              autoFocus={autoFocus}
-              ref={ref}
-            />
-          </View>
-          <TouchableOpacity
-            style={style.hideIcon}
-            accessibilityLabel={showPIN ? t('PINCreate.Hide') : t('PINCreate.Show')}
-            accessibilityRole={'button'}
-            testID={showPIN ? testIdWithKey('Hide') : testIdWithKey('Show')}
-            onPress={() => setShowPIN(!showPIN)}
-            hitSlop={hitSlop}
-          >
-            <Icon color={PINInputTheme.icon.color} name={showPIN ? 'visibility-off' : 'visibility'} size={30} />
-          </TouchableOpacity>
-      </View>
+      {inlineMessagePlaceholder(InlineErrorPosition.Above)}
+      {content()}
+      {inlineMessagePlaceholder(InlineErrorPosition.Below)}
     </View>
   )
 }

packages/legacy/core/App/container-api.ts

@@ -19,12 +19,24 @@ import { NotificationReturnType, NotificationsInputProps } from './hooks/notific
 import { NotificationListItemProps } from './components/listItems/NotificationListItem'
 import { PINCreateHeaderProps } from './components/misc/PINCreateHeader'
 import { CredentialListFooterProps } from './types/credential-list-footer'
+import { ViewStyle } from 'react-native'
 
 export type FN_ONBOARDING_DONE = (
   dispatch: React.Dispatch<ReducerAction<unknown>>,
   navigation: StackNavigationProp<AuthenticateStackParams>
 ) => GenericFn
 
+export enum InlineErrorPosition {
+  Above,
+  Below,
+}
+
+export type InlineErrorConfig = {
+  enabled: boolean
+  position?: InlineErrorPosition
+  style?: ViewStyle
+}
+
 type LoadStateFn = (dispatch: React.Dispatch<ReducerAction<unknown>>) => Promise<void>
 
 type ProofRequestTemplateFn = (useDevTemplates: boolean) => Array<ProofRequestTemplate>
@@ -111,6 +123,7 @@ export const UTILITY_TOKENS = {
 
 export const CONFIG_TOKENS = {
   CONFIG: 'config',
+  INLINE_ERRORS: 'errors.inline',
 } as const
 
 export const TOKENS = {
@@ -177,6 +190,7 @@ export type TokenMapping = {
   [TOKENS.COMPONENT_HOME_FOOTER]: React.FC
   [TOKENS.COMPONENT_CRED_EMPTY_LIST]: React.FC
   [TOKENS.COMPONENT_RECORD]: React.FC
+  [TOKENS.INLINE_ERRORS]: InlineErrorConfig
   [TOKENS.CUSTOM_NAV_STACK_1]: React.FC
 }
 

packages/legacy/core/App/container-impl.ts

@@ -115,6 +115,7 @@ export class MainContainer implements Container {
     this._container.registerInstance(TOKENS.COMPONENT_RECORD, Record)
     this._container.registerInstance(TOKENS.CACHE_CRED_DEFS, [])
     this._container.registerInstance(TOKENS.CACHE_SCHEMAS, [])
+    this._container.registerInstance(TOKENS.INLINE_ERRORS, { enabled: false })
     this._container.registerInstance(
       TOKENS.FN_ONBOARDING_DONE,
       (dispatch: React.Dispatch<ReducerAction<unknown>>, navigation: StackNavigationProp<AuthenticateStackParams>) => {

packages/legacy/core/App/index.ts

@@ -108,6 +108,9 @@ export type {
   Migration as MigrationState,
   Tours as ToursState,
 } from './types/state'
+
+export type { InlineMessageProps } from './components/inputs/InlineErrorText'
+
 export type { CredentialListFooterProps }
 export * from './container-api'
 export { MainContainer } from './container-impl'