at the end of the day, it was inevitable

frontend/app/components/common/FormControls/Checkbox.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, Label, CustomInput } from 'reactstrap';
+import { Interpolate, translate } from 'react-i18next';
+
+// need changes: err cannot be removed once triggered
+function Checkbox({
+  t,
+  title,
+  hideTitle,
+  name,
+  formGroupClass,
+  required,
+  trueValue,
+  value,
+  disabled,
+  error,
+  description,
+  handleChange
+}) {
+  function onChange(e) {
+    const { name, checked } = e.target;
+    let oppValue = null;
+    if (typeof trueValue === 'boolean') oppValue = false;
+    else if (typeof trueValue === 'number') oppValue = 0;
+    handleChange(name, checked ? trueValue : oppValue);
+  }
+
+  return (
+    <FormGroup className={formGroupClass}>
+      {!hideTitle && (
+        <Label>
+          {title}
+          {required ? <span className="text-danger">*</span> : null}
+        </Label>
+      )}
+      <CustomInput
+        id={name}
+        type="checkbox"
+        checked={trueValue === value}
+        title={title}
+        name={name}
+        value={value}
+        disabled={disabled}
+        label={description}
+        invalid={error}
+        onChange={onChange}
+      />
+      {error === true ? (
+        <span className="text-danger">
+          <Interpolate t={t} i18nKey="messages.selectMsg" title={title} />
+        </span>
+      ) : (
+        <span className="text-danger">{error}</span>
+      )}
+    </FormGroup>
+  );
+}
+
+Checkbox.defaultProps = {
+  handleChange: () => {},
+  trueValue: true,
+  disabled: false,
+  hideTitle: false,
+  formGroupClass: ''
+};
+
+Checkbox.propTypes = {
+  t: PropTypes.func,
+  title: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string,
+  formGroupClass: PropTypes.string,
+  value: PropTypes.bool,
+  hideTitle: PropTypes.bool,
+  trueValue: PropTypes.any,
+  description: PropTypes.any,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  handleChange: PropTypes.func.isRequired
+};
+
+export default React.memo(translate(['common'], { wait: true })(Checkbox));

frontend/app/components/common/FormControls/Input.js

@@ -0,0 +1,140 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Input as ReactInput,
+  FormGroup,
+  Label,
+  FormText,
+  InputGroup
+} from 'reactstrap';
+import { translate } from 'react-i18next';
+
+function Input({
+  t,
+  title,
+  name,
+  required,
+  disabled,
+  value,
+  type,
+  options,
+  placeholder,
+  error,
+  description,
+  regex,
+  handleChange,
+  handleValidation,
+  validationMessage,
+  inputGroupAddon
+}) {
+  function onChange(e) {
+    handleChange(e.target.name.trim(''), e.target.value);
+  }
+
+  function onValidate(e) {
+    if (!handleValidation) return;
+    const { value, name } = e.target;
+    let errorMsg = required ? null : undefined;
+    if (!value.replace(/\s/g, '').length && required) {
+      errorMsg = true;
+    } else if (value && regex && !regex.test(value)) {
+      errorMsg = validationMessage || t('messages.invalidMsg', { title });
+    }
+
+    handleValidation(name, errorMsg);
+  }
+
+  let optionsJSX;
+  if (type === 'select' && Array.isArray(options)) {
+    optionsJSX = [
+      <option key="empty" value="">
+        {t('messages.dropdownValue0', { title })}
+      </option>
+    ];
+    options.map((option) =>
+      optionsJSX.push(
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      )
+    );
+  }
+
+  return (
+    <FormGroup>
+      <Label>
+        {title}
+        {required ? <span className="text-danger">*</span> : null}
+      </Label>
+      {inputGroupAddon ? (
+        <Fragment>
+          <InputGroup>
+            <ReactInput
+              title={title}
+              type={type}
+              name={name}
+              value={value}
+              placeholder={placeholder}
+              invalid={!!error}
+              onChange={onChange}
+              onBlur={onValidate}
+              disabled={disabled}
+              children={optionsJSX}
+            />
+            {inputGroupAddon}
+          </InputGroup>
+        </Fragment>
+      ) : (
+        <ReactInput
+          title={title}
+          type={type}
+          name={name}
+          value={value}
+          placeholder={placeholder}
+          invalid={!!error}
+          onChange={onChange}
+          onBlur={onValidate}
+          disabled={disabled}
+          children={optionsJSX}
+        />
+      )}
+      {error === true ? (
+        <span className="text-danger">{t('messages.inputMsg', { title })}</span>
+      ) : (
+        <span className="text-danger">{error}</span>
+      )}
+      {description && <FormText>{description}</FormText>}
+    </FormGroup>
+  );
+}
+
+Input.defaultProps = {
+  handleChange: () => {},
+  handleValidation: () => {},
+  disabled: false
+};
+
+Input.propTypes = {
+  t: PropTypes.func,
+  title: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  validationMessage: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  error: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  regex: PropTypes.object,
+  options: PropTypes.any,
+  description: PropTypes.any,
+  inputGroupAddon: PropTypes.any,
+  handleChange: PropTypes.func,
+  handleValidation: PropTypes.func
+};
+
+export default React.memo(translate(['common'], { wait: true })(Input));

frontend/app/components/common/FormControls/RadioButton.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, Label, CustomInput } from 'reactstrap';
+import { translate } from 'react-i18next';
+
+function RadioButton({
+  t,
+  title,
+  name,
+  required,
+  value,
+  disabled,
+  error,
+  inline,
+  options,
+  valueKey,
+  labelKey,
+  formClass,
+  handleChange
+}) {
+  function onChange(e, value) {
+    let errorMsg = required ? null : undefined;
+    if (!value && required) {
+      errorMsg = t('messages.selectMsg', { title: name });
+    } else {
+      errorMsg = false;
+    }
+    handleChange(name, value, errorMsg);
+  }
+
+  return (
+    <FormGroup className={formClass}>
+      <Label className={inline ? 'mr-4' : ''}>
+        {title}
+        {inline ? ':' : null}
+        {required ? <span className="text-danger">*</span> : null}
+      </Label>
+      {options.map((o, i) => (
+        <CustomInput
+          key={`${name}${i}`}
+          id={`${name}${i}`}
+          type="radio"
+          inline={inline}
+          checked={o[valueKey] === value}
+          title={title}
+          name={name}
+          disabled={disabled}
+          label={o[labelKey]}
+          invalid={error}
+          onChange={function (e) {
+            onChange(e, o[valueKey]);
+          }}
+        />
+      ))}
+      {error === true ? (
+        <span className="text-danger">{t('messages.inputMsg', { title })}</span>
+      ) : (
+        <span className="text-danger">{error}</span>
+      )}
+    </FormGroup>
+  );
+}
+
+RadioButton.defaultProps = {
+  options: [],
+  valueKey: 'value',
+  labelKey: 'label',
+  value: null,
+  handleChange: () => {},
+  handleValidation: () => {},
+  disabled: false
+};
+
+RadioButton.propTypes = {
+  t: PropTypes.func,
+  title: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  formClass: PropTypes.string,
+  options: PropTypes.array,
+  labelKey: PropTypes.string,
+  valueKey: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  inline: PropTypes.bool,
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  handleChange: PropTypes.func.isRequired
+};
+
+export default React.memo(
+  translate(['tabsContent'], { wait: true })(RadioButton)
+);

frontend/app/components/common/FormControls/index.js

@@ -0,0 +1,5 @@
+import Input from './Input'
+import Checkbox from './Checkbox'
+import RadioButton from './RadioButton'
+
+export { Input, Checkbox, RadioButton }