Settings > Organization Settings: Code revamp (#3580)

frontend/components/forms/fields/InputField/InputField.jsx

@@ -17,6 +17,7 @@ class InputField extends Component {
     inputOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     name: PropTypes.string,
     onChange: PropTypes.func,
+    onBlur: PropTypes.func,
     onFocus: PropTypes.func,
     placeholder: PropTypes.string,
     type: PropTypes.string,
@@ -26,6 +27,7 @@ class InputField extends Component {
       PropTypes.string,
       PropTypes.number,
     ]).isRequired,
+    parseTarget: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -35,9 +37,11 @@ class InputField extends Component {
     label: null,
     labelClassName: "",
     onFocus: noop,
+    onBlur: noop,
     type: "text",
     blockAutoComplete: false,
     value: "",
+    parseTarget: false,
   };
 
   componentDidMount() {
@@ -54,8 +58,13 @@ class InputField extends Component {
   onInputChange = (evt) => {
     evt.preventDefault();
 
-    const { value } = evt.target;
-    const { onChange } = this.props;
+    const { value, name } = evt.target;
+    const { onChange, parseTarget } = this.props;
+
+    if (parseTarget) {
+      // Returns both name and value
+      return onChange({ value, name });
+    }
 
     return onChange(value);
   };
@@ -69,6 +78,7 @@ class InputField extends Component {
       inputWrapperClass,
       name,
       onFocus,
+      onBlur,
       placeholder,
       type,
       blockAutoComplete,
@@ -118,6 +128,7 @@ class InputField extends Component {
           id={name}
           onChange={onInputChange}
           onFocus={onFocus}
+          onBlur={onBlur}
           className={inputClasses}
           placeholder={placeholder}
           ref={(r) => {

frontend/components/forms/fields/InputField/_styles.scss

@@ -51,6 +51,7 @@
 
     &--error {
       font-weight: $bold;
+      color: $ui-error;
     }
   }