accounts-ui/imports/ui/components/Field.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Accounts } from 'meteor/accounts-base';

export class Field extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mount: true
    };
  }

  componentDidMount() {
    // Trigger an onChange on inital load, to support browser prefilled values.
    const { onChange } = this.props;
    let node = ReactDOM.findDOMNode(this);
    if (node) {
      let value = node.getElementsByTagName('input')[0].value;
      // Match the data format of a typical onChange event.
      onChange({ target: { value: value } });
    }
  }

  componentDidUpdate(prevProps) {
    // Re-mount component so that we don't expose browser prefilled passwords if the component was
    // a password before and now something else.
    if (prevProps.type !== this.props.type) {
      this.setState({mount: false});
    }
    else if (!this.state.mount) {
      this.setState({mount: true});
    }
  }

  render() {
    const { id, hint, label, type = 'text', onChange, className = "field", defaultValue = "" } = this.props;
    const { mount = true } = this.state;
    return mount ? (
      <div className={ className }>
        <label htmlFor={ id }>{ label }</label>
        <input id={ id } type={ type } onChange={ onChange } placeholder={ hint } defaultValue={ defaultValue } />
      </div>
    ) : null;
  }
}
Field.propTypes = {
  onChange: React.PropTypes.func
};

Accounts.ui.Field = Field;