TCA-468 TCA-466 - fix issues with input error message

Author: vas3a

client/src/assets/icons/warning.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+function Warning(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <svg
+      width='10'
+      height='9'
+      viewBox='0 0 10 9'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <g>
+        <title>{t('icons.fail')}</title>
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d={
+            'M3.95423 0.859306C4.413 0.0437243 5.58725 0.0437239 6.04602 ' +
+            '0.859306L9.3942 6.81163C9.84416 7.61155 9.2661 8.59994 8.34831 ' +
+            '8.59994H1.65194C0.734151 8.59994 0.156094 7.61156 0.606052 ' +
+            '6.81163L3.95423 0.859306ZM5.60007 6.80001C5.60007 7.13138 5.33144 ' +
+            '7.40001 5.00007 7.40001C4.6687 7.40001 4.40007 7.13138 4.40007 ' +
+            '6.80001C4.40007 6.46864 4.6687 6.20001 5.00007 6.20001C5.33144 ' +
+            '6.20001 5.60007 6.46864 5.60007 6.80001ZM5.00007 2.00001C4.6687 ' +
+            '2.00001 4.40007 2.26864 4.40007 2.60001V4.40001C4.40007 4.73138 ' +
+            '4.6687 5.00001 5.00007 5.00001C5.33144 5.00001 5.60007 4.73138 ' +
+            '5.60007 4.40001V2.60001C5.60007 2.26864 5.33144 2.00001 5.00007 ' +
+            '2.00001Z'
+          }
+          fill='currentColor'
+        />
+      </g>
+    </svg>
+  );
+}
+
+Warning.displayName = 'Warning';
+
+export default Warning;

client/src/components/formHelpers/form-field.css

@@ -0,0 +1,26 @@
+.input-help-box {
+  max-width: 320px;
+  margin-top: -11px;
+}
+
+.input-message {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.input-message > svg {
+  margin-right: 7px;
+}
+
+.input-message.is-error {
+  color: var(--tc-red-100);
+}
+
+.input-message.is-warn {
+  color: var(--tc-legacy-120);
+}

client/src/components/formHelpers/form-fields.tsx

@@ -5,11 +5,12 @@ import {
   FormGroup,
   HelpBlock
 } from '@freecodecamp/react-bootstrap';
-import { kebabCase } from 'lodash-es';
+import { kebabCase, set } from 'lodash-es';
 import normalizeUrl from 'normalize-url';
-import React from 'react';
+import React, { Fragment, useState } from 'react';
 import { Field } from 'react-final-form';
 import { useTranslation } from 'react-i18next';
+import Warning from '../../assets/icons/warning';
 import { FormOptions } from './form';
 import {
   editorValidator,
@@ -18,6 +19,7 @@ import {
   fCCValidator,
   httpValidator
 } from './form-validators';
+import './form-field.css';
 
 type FormFieldsProps = {
   formFields: { name: string; label: string }[];
@@ -36,6 +38,10 @@ function FormFields(props: FormFieldsProps): JSX.Element {
     isLocalLinkAllowed = false
   } = options;
 
+  const [blured, setBlured] = useState<boolean[]>([]);
+  const markAsBlured = (index: number) =>
+    setBlured(prevState => set([...prevState], index, true));
+
   const nullOrWarning = (
     value: string,
     error: unknown,
@@ -59,22 +65,29 @@ function FormFields(props: FormFieldsProps): JSX.Element {
     const message: string = (error ||
       validationError ||
       validationWarning) as string;
+
+    const hasError = error || validationError;
+    const classNames = [
+      'input-message',
+      hasError && 'is-error',
+      !hasError && 'is-warn'
+    ]
+      .filter(Boolean)
+      .join(' ');
     return message ? (
-      <HelpBlock>
-        <Alert
-          bsStyle={error || validationError ? 'danger' : 'info'}
-          closeLabel={t('buttons.close')}
-        >
+      <HelpBlock className='input-help-box'>
+        <div className={classNames}>
+          <Warning />
           {message}
-        </Alert>
+        </div>
       </HelpBlock>
     ) : null;
   };
   return (
     <>
       {formFields
         .filter(formField => !ignored.includes(formField.name))
-        .map(({ name, label }) => (
+        .map(({ name, label }, i) => (
           // TODO: verify if the value is always a string
           <Field key={`${kebabCase(name)}-field`} name={name}>
             {({ input: { value, onChange }, meta: { pristine, error } }) => {
@@ -84,33 +97,37 @@ function FormFields(props: FormFieldsProps): JSX.Element {
                 name in placeholders ? placeholders[name] : '';
               const isURL = types[name] === 'url';
               return (
-                <FormGroup key={key} className='embedded'>
-                  {type === 'hidden' ? null : (
-                    <ControlLabel htmlFor={key}>
-                      {label}
-                      {required.includes(name) && (
-                        <span className='required-star'>*</span>
-                      )}
-                    </ControlLabel>
-                  )}
-                  <FormControl
-                    componentClass={type === 'textarea' ? type : 'input'}
-                    id={key}
-                    name={name}
-                    onChange={onChange}
-                    placeholder={placeholder}
-                    required={required.includes(name)}
-                    rows={4}
-                    type={type}
-                    value={value as string}
-                  />
-                  {nullOrWarning(
-                    value as string,
-                    !pristine && error,
-                    isURL,
-                    name
-                  )}
-                </FormGroup>
+                <Fragment key={key}>
+                  <FormGroup className='embedded'>
+                    {type === 'hidden' ? null : (
+                      <ControlLabel htmlFor={key}>
+                        {label}
+                        {required.includes(name) && (
+                          <span className='required-star'>*</span>
+                        )}
+                      </ControlLabel>
+                    )}
+                    <FormControl
+                      componentClass={type === 'textarea' ? type : 'input'}
+                      id={key}
+                      name={name}
+                      onChange={onChange}
+                      placeholder={placeholder}
+                      required={required.includes(name)}
+                      rows={4}
+                      type={type}
+                      value={value as string}
+                      onBlur={() => markAsBlured(i)}
+                    />
+                  </FormGroup>
+                  {blured[i] &&
+                    nullOrWarning(
+                      value as string,
+                      !pristine && error,
+                      isURL,
+                      name
+                    )}
+                </Fragment>
               );
             }}
           </Field>

client/src/components/layouts/variables.css

@@ -45,6 +45,8 @@
   --tc-blue-140: #16679a;
   --tc-blue-25: #bae1f9;
   --tc-blue-10: #eaf6fd;
+  --tc-red-100: #ef476f;
+  --tc-legacy-120: #f46500;
 }
 
 .dark-palette {