Form.jsx

import './Fields.jsx';
import './Buttons.jsx';
import './FormMessage.jsx';
import './PasswordOrService.jsx';
import './SocialButtons.jsx';
import './FormMessages.jsx';

import { Accounts } from 'meteor/accounts-base';
import PropTypes from 'prop-types';
import React from 'react';

export const Form = ({
  oauthServices,
  fields,
  buttons,
  error,
  messages,
  translate,
  ready = true,
  className
}) => (
    <form
      className={[className, ready ? 'ready' : null].join(' ')}
      className="accounts-ui"
      noValidate
      onSubmit={e => {
        e.preventDefault()
      }}
    >
      <Accounts.ui.Fields fields={fields} />
      <Accounts.ui.Buttons buttons={buttons} />
      <Accounts.ui.PasswordOrService
        oauthServices={oauthServices}
        translate={translate}
      />
      <Accounts.ui.SocialButtons oauthServices={oauthServices} />
      <Accounts.ui.FormMessages messages={messages} />
    </form>
  )

Form.propTypes = {
  oauthServices: PropTypes.object,
  fields: PropTypes.object.isRequired,
  buttons: PropTypes.object.isRequired,
  translate: PropTypes.func.isRequired,
  error: PropTypes.string,
  ready: PropTypes.bool
};

Accounts.ui.Form = Form;