diff --git a/app/screens/edit_profile/components/field.tsx b/app/screens/edit_profile/components/field.tsx index 90a521e09..517952807 100644 --- a/app/screens/edit_profile/components/field.tsx +++ b/app/screens/edit_profile/components/field.tsx @@ -18,6 +18,7 @@ export type FieldProps = TextInputProps & { onTextChange: (fieldKey: string, value: string) => void; isOptional?: boolean; testID: string; + error?: string; value: string; fieldRef: RefObject; onFocusNextField: (fieldKey: string) => void; @@ -49,6 +50,7 @@ const Field = ({ testID, value, fieldRef, + error, onFocusNextField, ...props }: FieldProps) => { @@ -91,6 +93,7 @@ const Field = ({ onChangeText={onChangeText} testID={fieldInputTestId} theme={theme} + error={error} value={value} ref={fieldRef} onSubmitEditing={onSubmitEditing} diff --git a/app/screens/edit_profile/components/form.tsx b/app/screens/edit_profile/components/form.tsx index b58bca90c..5d2c105af 100644 --- a/app/screens/edit_profile/components/form.tsx +++ b/app/screens/edit_profile/components/form.tsx @@ -7,6 +7,7 @@ import {Keyboard, StyleSheet, View} from 'react-native'; import {useTheme} from '@context/theme'; import {t} from '@i18n'; +import {getErrorMessage} from '@utils/errors'; import DisabledFields from './disabled_fields'; import EmailField from './email_field'; @@ -25,6 +26,7 @@ type Props = { lockedNickname: boolean; lockedPosition: boolean; onUpdateField: (fieldKey: string, name: string) => void; + error?: unknown; userInfo: UserInfo; submitUser: () => void; } @@ -72,10 +74,10 @@ const styles = StyleSheet.create({ const ProfileForm = ({ canSave, currentUser, isTablet, lockedFirstName, lockedLastName, lockedNickname, lockedPosition, - onUpdateField, userInfo, submitUser, + onUpdateField, userInfo, submitUser, error, }: Props) => { const theme = useTheme(); - const {formatMessage} = useIntl(); + const intl = useIntl(); const firstNameRef = useRef(null); const lastNameRef = useRef(null); const usernameRef = useRef(null); @@ -83,6 +85,9 @@ const ProfileForm = ({ const nicknameRef = useRef(null); const positionRef = useRef(null); + const {formatMessage} = intl; + const errorMessage = error == null ? undefined : getErrorMessage(error, intl) as string; + const userProfileFields: FieldSequence = useMemo(() => { const service = currentUser.authService; return { @@ -187,6 +192,7 @@ const ProfileForm = ({ (); + const [usernameError, setUsernameError] = useState(); const [updating, setUpdating] = useState(false); const buttonText = intl.formatMessage({id: 'mobile.account.settings.save', defaultMessage: 'Save'}); @@ -149,7 +150,7 @@ const EditProfile = ({ if (hasUpdateUserInfo.current) { const {error: reqError} = await updateMe(serverUrl, newUserInfo); if (reqError) { - resetScreen(reqError); + resetScreenForProfileError(reqError); return; } } @@ -181,6 +182,13 @@ const EditProfile = ({ enableSaveButton(didChange); }, [userInfo, currentUser, enableSaveButton]); + const resetScreenForProfileError = useCallback((resetError: unknown) => { + setUsernameError(resetError); + Keyboard.dismiss(); + setUpdating(false); + enableSaveButton(true); + }, [enableSaveButton]); + const resetScreen = useCallback((resetError: unknown) => { setError(resetError); Keyboard.dismiss(); @@ -220,6 +228,7 @@ const EditProfile = ({ lockedLastName={lockedLastName} lockedNickname={lockedNickname} lockedPosition={lockedPosition} + error={usernameError} onUpdateField={onUpdateField} userInfo={userInfo} submitUser={submitUser}