diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx index e6be6a3..d62af35 100644 --- a/src/components/InputField.tsx +++ b/src/components/InputField.tsx @@ -11,10 +11,12 @@ function InputField({ placeholder, onChangeText, keyboardType, + secureTextEntry, }: { - placeholder: string; - onChangeText: (text: string) => void; - keyboardType?: KeyboardTypeOptions; + readonly placeholder: string; + readonly onChangeText: (text: string) => void; + readonly keyboardType?: KeyboardTypeOptions; + readonly secureTextEntry?: boolean; }) { const colorScheme = useColorScheme(); const styles = colorScheme === 'dark' ? darkStyle : lightStyle; @@ -23,9 +25,10 @@ function InputField({ ); diff --git a/src/screens/AuthCloudApiRegistrationScreen.tsx b/src/screens/AuthCloudApiRegistrationScreen.tsx index 0501fad..ffa0e51 100644 --- a/src/screens/AuthCloudApiRegistrationScreen.tsx +++ b/src/screens/AuthCloudApiRegistrationScreen.tsx @@ -3,7 +3,15 @@ */ import { useCallback } from 'react'; -import { BackHandler, ScrollView, Text, useColorScheme, View } from 'react-native'; +import { + BackHandler, + KeyboardAvoidingView, + Platform, + ScrollView, + Text, + useColorScheme, + View, +} from 'react-native'; import { useFocusEffect } from '@react-navigation/native'; import { useTranslation } from 'react-i18next'; @@ -52,36 +60,41 @@ const AuthCloudApiRegistrationScreen = () => { }, ]} > - - - - {t('authCloudApiRegistration.title')} - - - - - {t('authCloudApiRegistration.enrollResponse')} - - - - {t('authCloudApiRegistration.appLinkUri')} - - - - - - - - + + + + {t('authCloudApiRegistration.title')} + + + + + {t('authCloudApiRegistration.enrollResponse')} + + + + {t('authCloudApiRegistration.appLinkUri')} + + + + + + + + + ); }; diff --git a/src/screens/DeviceInformationChangeScreen.tsx b/src/screens/DeviceInformationChangeScreen.tsx index ef4bf50..7a890c1 100644 --- a/src/screens/DeviceInformationChangeScreen.tsx +++ b/src/screens/DeviceInformationChangeScreen.tsx @@ -3,7 +3,15 @@ */ import { useCallback } from 'react'; -import { BackHandler, ScrollView, Text, useColorScheme, View } from 'react-native'; +import { + BackHandler, + KeyboardAvoidingView, + Platform, + ScrollView, + Text, + useColorScheme, + View, +} from 'react-native'; import { useFocusEffect } from '@react-navigation/native'; import { type NativeStackScreenProps } from '@react-navigation/native-stack'; @@ -55,29 +63,34 @@ const DeviceInformationChangeScreen = ({ route }: Props) => { }, ]} > - - - - {t('deviceInformationChange.title')} - - - - - {route.params.name} - - - - - - - - + + + + {t('deviceInformationChange.title')} + + + + + {route.params.name} + + + + + + + + + ); }; diff --git a/src/screens/PinScreen.tsx b/src/screens/PinScreen.tsx index 20eb7b0..51bb4f6 100644 --- a/src/screens/PinScreen.tsx +++ b/src/screens/PinScreen.tsx @@ -3,13 +3,22 @@ */ import { useCallback } from 'react'; -import { BackHandler, ScrollView, Text, useColorScheme, View } from 'react-native'; +import { + BackHandler, + KeyboardAvoidingView, + Platform, + ScrollView, + Text, + useColorScheme, + View, +} from 'react-native'; import { PinAuthenticatorProtectionStatus, PinProtectionStatusLastAttemptFailed, PinProtectionStatusLockedOut, PinProtectionStatusUnlocked, + RecoverableError, } from '@nevis-security/nevis-mobile-authentication-sdk-react'; import { useFocusEffect } from '@react-navigation/native'; import { type NativeStackScreenProps } from '@react-navigation/native-stack'; @@ -68,6 +77,15 @@ const PinScreen = ({ route }: Props) => { } } + function errorText(recoverableError: RecoverableError): string { + let text = recoverableError.description; + if (recoverableError.cause) { + text += ` ${recoverableError.cause}`; + } + + return text; + } + function authenticatorProtectionText(status?: PinAuthenticatorProtectionStatus): string { if (status instanceof PinProtectionStatusLastAttemptFailed) { const remainingRetries = status.remainingRetries; @@ -106,48 +124,59 @@ const PinScreen = ({ route }: Props) => { }, ]} > - - - - {title(route.params.mode)} - - - - - {description(route.params.mode)} - - {isChange && ( + + + + {title(route.params.mode)} + + + + + {description(route.params.mode)} + + {isChange && ( + + )} - )} - - {lastRecoverableError && ( - - {lastRecoverableError.description} - - )} - {authenticatorProtectionStatus && - !(authenticatorProtectionStatus instanceof PinProtectionStatusUnlocked) && ( + {lastRecoverableError && ( - {authenticatorProtectionText(authenticatorProtectionStatus)} + {errorText(lastRecoverableError)} )} - - - - - - + {authenticatorProtectionStatus && + !( + authenticatorProtectionStatus instanceof PinProtectionStatusUnlocked + ) && ( + + {authenticatorProtectionText(authenticatorProtectionStatus)} + + )} + + + + + + + ); }; diff --git a/src/screens/UsernamePasswordLoginScreen.tsx b/src/screens/UsernamePasswordLoginScreen.tsx index f991bc4..e994dd4 100644 --- a/src/screens/UsernamePasswordLoginScreen.tsx +++ b/src/screens/UsernamePasswordLoginScreen.tsx @@ -3,7 +3,15 @@ */ import { useCallback } from 'react'; -import { BackHandler, ScrollView, Text, useColorScheme, View } from 'react-native'; +import { + BackHandler, + KeyboardAvoidingView, + Platform, + ScrollView, + Text, + useColorScheme, + View, +} from 'react-native'; import { useFocusEffect } from '@react-navigation/native'; import { useTranslation } from 'react-i18next'; @@ -51,36 +59,41 @@ const UsernamePasswordLoginScreen = () => { }, ]} > - - - - {t('usernamePasswordLogin.title')} - - - - - {t('usernamePasswordLogin.username')} - - - - {t('usernamePasswordLogin.password')} - - - - - - - - + + + + {t('usernamePasswordLogin.title')} + + + + + {t('usernamePasswordLogin.username')} + + + + {t('usernamePasswordLogin.password')} + + + + + + + + + ); };