settings.js

import first from 'lodash/first';
import get from 'lodash/get';
import React from 'react';
import { isEmail } from 'validator';

import { TEXT, CHECKBOX } from 'constants/fields';
import { SUBMIT } from 'constants/controls';
import ValidationMessages from 'messages/validation';

import styles from './styles.css';

export default {
  tabs: () => [
    {
      label: 'Login',
      url: '/login',
      active: false,
    },
    {
      label: 'Sign up',
      url: '/sign-up',
      active: true,
    },
  ],
  form: ({ intl: { formatMessage } }) => ({
    onSubmit: data => console.log('onSubmit();', data),
    onError: reasons => {
      const reason = first(reasons);
      const message = get(ValidationMessages, reason);

      return message && formatMessage(message);
    },
    fields: [
      {
        name: 'name',
        type: TEXT,
        label: 'Full name',
        value: '',
        validation: value => ({
          required: !!String(value).trim(),
          length: {
            min: String(value).length >= 5,
            max: String(value).length <= 10,
          },
        }),
      },
      {
        name: 'attraction-number',
        type: TEXT,
        label: 'Attraction number',
        value: '',
        settings: {
          maxLength: 8,
        },
        validation: value => {
          const number = String(value).trim();
          const size = number.length === 8;
          const requirements = /^\d+$/.test(number);

          return {
            required: !!number,
            'attraction-number': {
              'all-together': size && requirements,
            },
          };
        },
      },
      {
        name: 'email',
        type: TEXT,
        label: 'Email',
        value: '',
        validation: value => ({
          required: !!String(value).trim(),
          email: {
            valid: isEmail(value),
          },
        }),
      },
      {
        name: 'password',
        type: TEXT,
        label: 'Choose your password',
        value: '',
        settings: {
          type: 'password',
        },
        validation: value => {
          const password = String(value).trim();
          const size = password.length >= 8;
          const requirements = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/.test(
            password,
          );

          return {
            required: !!password,
            password: {
              'all-together': size && requirements,
            },
          };
        },
      },
      {
        name: 'password-confirmation',
        type: TEXT,
        label: 'Confirm password',
        value: '',
        settings: {
          type: 'password',
        },
        validation: value => ({
          required: !!String(value).trim(),
        }),
      },
      {
        name: 'terms-and-conditions',
        type: CHECKBOX,
        label: (
          <span>
            <span>You have to accept the </span>
            <a
              href="http://proxipedia.io/agb/"
              rel="noopener noreferrer"
              className={styles['field-link']}
              target="_blank"
            >
              terms and conditions
            </a>
            <span> and </span>
            <a
              href="http://proxipedia.io/datenschutz/"
              rel="noopener noreferrer"
              className={styles['field-link']}
              target="_blank"
            >
              privacy policy
            </a>
            <span>.</span>
          </span>
        ),
        value: false,
        validation: value => ({
          required: !!value,
        }),
      },
    ],
    controls: [
      {
        type: SUBMIT,
        label: 'Sign up',
      },
    ],
  }),
};