Fixed error message position in edit profile screen (#7483)

* added last viewed feature

* added constants

* storing data in global table and added server col

* fixed stack screen"

* fixed values for crt

* fixed threadid store logic

* added status on profile in bottom tabs

* fixed error for profile edit

* refactored and removed rule from eslint

* fixed variable in username field

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<FloatingTextInputRef>;
     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}

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<FloatingTextInputRef>(null);
     const lastNameRef = useRef<FloatingTextInputRef>(null);
     const usernameRef = useRef<FloatingTextInputRef>(null);
@@ -83,6 +85,9 @@ const ProfileForm = ({
     const nicknameRef = useRef<FloatingTextInputRef>(null);
     const positionRef = useRef<FloatingTextInputRef>(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 = ({
             <Field
                 fieldKey='username'
                 fieldRef={usernameRef}
+                error={errorMessage}
                 isDisabled={userProfileFields.username.isDisabled}
                 label={formatMessage(FIELDS.username)}
                 maxLength={22}

app/screens/edit_profile/edit_profile.tsx

@@ -62,6 +62,7 @@ const EditProfile = ({
     });
     const [canSave, setCanSave] = useState(false);
     const [error, setError] = useState<unknown>();
+    const [usernameError, setUsernameError] = useState<unknown>();
     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}