fix: enhance error handling and validation in profile form fields

Author: bra-i-am

src/profile/forms/ExtendedProfileFields.jsx

@@ -52,6 +52,7 @@ const ExtendedProfileFields = (props) => {
 
         const commonProps = {
           ...field,
+          errorMessage: field.error_message,
           formId: `${formId}/${field.name}`,
           changeHandler: handleChangeExtendedField,
           submitHandler: handleSubmitExtendedField,
@@ -92,10 +93,10 @@ ExtendedProfileFields.propTypes = {
     })),
     error_message: PropTypes.shape({
       required: PropTypes.string,
-      invalid: PropTypes.string,
     }),
     restrictions: PropTypes.shape({
       max_length: PropTypes.number,
+      min_length: PropTypes.number,
     }),
     type: PropTypes.string.isRequired,
   })).isRequired,

src/profile/forms/elements/FormControls.jsx

@@ -8,7 +8,7 @@ import messages from './FormControls.messages';
 import { VisibilitySelect } from './Visibility';
 
 const FormControls = ({
-  cancelHandler, changeHandler, visibility, visibilityId, saveState, intl, showVisibilitySelect,
+  cancelHandler, changeHandler, visibility, visibilityId, saveState, intl, showVisibilitySelect, disabled,
 }) => {
   // Eliminate error/failed state for save button
   const buttonState = saveState === 'error' ? null : saveState;
@@ -52,6 +52,7 @@ const FormControls = ({
             }
           }}
           disabledStates={[]}
+          disabled={disabled}
         />
         <Button variant="link" onClick={cancelHandler}>
           {intl.formatMessage(messages['profile.formcontrols.button.cancel'])}
@@ -70,6 +71,7 @@ FormControls.propTypes = {
   cancelHandler: PropTypes.func.isRequired,
   changeHandler: PropTypes.func.isRequired,
   showVisibilitySelect: PropTypes.bool,
+  disabled: PropTypes.bool,
 
   // i18n
   intl: intlShape.isRequired,
@@ -79,4 +81,5 @@ FormControls.defaultProps = {
   visibility: 'private',
   saveState: null,
   showVisibilitySelect: true,
+  disabled: false,
 };

src/profile/forms/elements/TextField.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 // Components
@@ -16,15 +16,37 @@ const TextField = ({
   visibility,
   editMode,
   saveState,
-  error,
   label,
   placeholder,
   instructions,
+  restrictions,
+  errorMessage,
   changeHandler,
   submitHandler,
   closeHandler,
   openHandler,
 }) => {
+  const [displayedMessage, setErrorMessage] = useState('');
+
+  useEffect(() => {
+    if (!value && errorMessage?.required) {
+      setErrorMessage(errorMessage.required);
+    } else if (restrictions.max_length && value.length > restrictions.max_length) {
+      setErrorMessage(errorMessage.max_length);
+    } else if (restrictions.min_length && value.length < restrictions.min_length) {
+      setErrorMessage(errorMessage.min_length);
+    } else {
+      setErrorMessage(null);
+    }
+  }, [
+    errorMessage.max_length,
+    errorMessage.min_length,
+    errorMessage.required,
+    restrictions.max_length,
+    restrictions.min_length,
+    value,
+  ]);
+
   const handleChange = (e) => {
     const { name, value: newValue } = e.target;
     changeHandler(name, newValue);
@@ -52,7 +74,7 @@ const TextField = ({
             <form data-testid="test-form" onSubmit={handleSubmit}>
               <Form.Group
                 controlId={formId}
-                isInvalid={error !== null}
+                isInvalid={displayedMessage !== null}
               >
                 <label className="edit-section-header" htmlFor={formId}>
                   {label}
@@ -63,10 +85,12 @@ const TextField = ({
                   name={formId}
                   value={value}
                   onChange={handleChange}
+                  minLength={restrictions.min_length}
+                  maxLength={restrictions.max_length}
                 />
-                {error !== null && (
+                {displayedMessage !== null && (
                 <Form.Control.Feedback hasIcon={false}>
-                  {error}
+                  {displayedMessage}
                 </Form.Control.Feedback>
                 )}
               </Form.Group>
@@ -77,6 +101,7 @@ const TextField = ({
                 saveState={saveState}
                 cancelHandler={handleClose}
                 changeHandler={handleChange}
+                disabled={displayedMessage !== null}
               />
             </form>
           </div>
@@ -121,7 +146,15 @@ TextField.propTypes = {
   visibility: PropTypes.oneOf(['private', 'all_users']),
   editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
   saveState: PropTypes.string,
-  error: PropTypes.string,
+  errorMessage: PropTypes.shape({
+    required: PropTypes.string,
+    max_length: PropTypes.string,
+    min_length: PropTypes.string,
+  }),
+  restrictions: PropTypes.shape({
+    max_length: PropTypes.number,
+    min_length: PropTypes.number,
+  }),
   placeholder: PropTypes.string,
   instructions: PropTypes.string,
   label: PropTypes.string.isRequired,
@@ -138,7 +171,6 @@ TextField.defaultProps = {
   placeholder: '',
   instructions: '',
   visibility: 'private',
-  error: null,
 };
 
 export default connect(editableFormSelector, {})(TextField);