fix: add input form feedback

src/Form.tsx

@@ -1,4 +1,5 @@
 import React, {useEffect, useState} from 'react';
+import {Props as FormProps} from 'react-hook-form/dist/types';
 import useForm from 'react-hook-form';
 import {useTranslation} from 'react-i18next';
 import {Col, Form, Row} from 'reactstrap';
@@ -10,14 +11,12 @@ import SelectForm from './components/SingleSelect';
 import SubmitBtn from './components/SubmitBtn';
 import ToggleForm from './components/Toggle';
 
-interface Props {
+interface Props extends FormProps<any> {
   form: FormConfig[];
-  defaultValues?: {
-    [key: string]: any;
-  };
   csrfUrl?: string;
   getForm?: (formHooks: FormHooks) => any;
   onSubmit: <T>(...args: any) => Promise<T | void> | T | void;
+  valid?: {[key: string]: any};
 }
 
 const dependencies = [
@@ -28,7 +27,14 @@ const dependencies = [
 ];
 
 /** Form generator */
-export default ({csrfUrl, defaultValues, form, getForm, onSubmit}: Props) => {
+export default ({
+  csrfUrl,
+  defaultValues,
+  form,
+  getForm,
+  onSubmit,
+  valid,
+}: Props) => {
   const formHooks = useForm({defaultValues});
   const [csrf, setCsrf] = useState();
   const {t} = useTranslation();
@@ -59,6 +65,7 @@ export default ({csrfUrl, defaultValues, form, getForm, onSubmit}: Props) => {
       <dep.component
         key={`${dep.name}-${elementConfig.name}-${elementConfig.type}`}
         elementConfig={elementConfig}
+        valid={valid}
         {...formHooks}
       />
     );

src/components/Input.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {FormProps} from 'react-hook-form/dist/types';
 import {useTranslation} from 'react-i18next';
 import {
+  FormFeedback,
   FormGroup,
   Input,
   InputGroup,
@@ -20,6 +21,7 @@ export default ({
   getValues,
   register,
   triggerValidation,
+  valid,
 }: DefaultInputProps) => {
   const {t} = useTranslation();
   const values = getValues();
@@ -52,7 +54,7 @@ export default ({
 
   return (
     <FormGroup className="rbf-group">
-      <InputGroup>
+      <InputGroup className={`${className || ''}`}>
         {addon && (
           <InputGroupAddon addonType={addon.type as 'prepend' | 'append'}>
             <InputGroupText>
@@ -64,9 +66,13 @@ export default ({
         <Input
           name={name}
           innerRef={register({...getInputRegisters(elementConfig)})}
+          valid={
+            valid
+              ? !!valid[name]
+              : !errors[name] && !!(values[name] ? values[name].trim() : false)
+          }
           invalid={!!errors[name]}
           placeholder={t(placeholder)}
-          className={`${className || ''}`}
           onBlur={() => triggerValidation([{name}])}
         />
         <Label
@@ -79,6 +85,12 @@ export default ({
           touched={`${(touched as any).includes(name)}`}>
           <span>{t(placeholder)}</span>
         </Label>
+        {errors[name] && (
+          <FormFeedback
+            className={`rfb-feedback ${!!errors[name] ? 'rfb-invalid' : ''}`}>
+            <span>{errors[name].message}</span>
+          </FormFeedback>
+        )}
       </InputGroup>
     </FormGroup>
   );

src/interfaces/FormConfig.ts

@@ -43,6 +43,7 @@ export interface DefaultInputProps
   extends Omit<Partial<FormProps>, 'formState'> {
   elementConfig: FormConfig;
   formState: FormProps['formState'] | unknown[] | unknown;
+  valid?: {[key: string]: any};
 }
 
 export interface FormHooks extends Omit<DefaultInputProps, 'elementConfig'> {

src/styles/_input.scss

@@ -1,7 +1,24 @@
+@import '~compass-mixins/lib/compass';
+@import './custom_colors';
+@import './flat_ui_colors';
+
 .rbf-label-index {
   z-index: 100;
 }
 
 .rbf-m-40 {
   margin: 0 0 0 40px;
 }
+
+.rfb-feedback {
+  @include border-bottom-radius(3px);
+
+  background-color: rgba($flat-pomegranate, 0.8);
+  color: $rbf-white;
+  font-size: 14px;
+  margin: -2px 0 0 0;
+
+  > span {
+    margin: 0 0 0 15px;
+  }
+}