Cacher is the code snippet organizer for pro developers

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom';
import { Row, Col, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';
import { Accounts } from 'meteor/accounts-base'

export default class Signup extends React.Component {

  handleSubmit(e) {
    e.preventDefault();
    const user = {
      username: ReactDOM.findDOMNode(this.refs.userId).value.trim(),
      password: ReactDOM.findDOMNode(this.refs.password).value.trim(),
      profile: {
        fullname: ReactDOM.findDOMNode(this.refs.fullname).value.trim(),
      }
    }
    Accounts.createUser(user, (error) => {
      if (error) {
        console.log(error.reason);
      } else {
        console.log("Account created");
      }
    })
  }

  render() {
    return (
      <div>
        <Row>
          <Col xs={12} sm={6} md={4} smOffset={3} mdOffset={4}>
            <h3 className="text-center">Sign Up</h3>
            <form ref="form" onSubmit={this.handleSubmit.bind(this)}>
              <FormGroup>
                <ControlLabel>Full Name</ControlLabel>
                <FormControl type="text" ref="fullname" name="fullname" placeholder="You Fullname"></FormControl>
              </FormGroup>
              <FormGroup>
                <ControlLabel>User ID</ControlLabel>
                <FormControl type="text" ref="userId" name="userId" placeholder="Your user id"></FormControl>
              </FormGroup>
              <FormGroup>
                <ControlLabel>Password</ControlLabel>
                <FormControl type="password" ref="password" name="password" placeholder="Your password"></FormControl>
              </FormGroup>
              <Button type="submit" bsStyle="success">Sign Up</Button>
            </form>
            <p style={{marginTop:"20px"}}>Already a member? <Link to="/login">Login</Link></p>
          </Col>
        </Row>
    </div>
  )
}
}

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom';
import { Row, Col, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';

export default class Login extends React.Component {
  
  handleSubmit(e) {
    e.preventDefault();
    const userid = ReactDOM.findDOMNode(this.refs.userId).value.trim();
    const password = ReactDOM.findDOMNode(this.refs.password).value.trim();
    Meteor.loginWithPassword(userid, password, (error) => {
      if (error) {
        console.log(error.reason);
      } else {
        console.log("Logged in!");
      }
    });
  }

  render() {
    return (
      <div className="Login">
          <Row>
            <Col xs={12} sm={6} md={4} smOffset={3} mdOffset={4}>
              <h3 className="text-center">Login</h3>
              <form ref="login-form" onSubmit={this.handleSubmit.bind(this)}>
                <FormGroup>
                  <ControlLabel>User ID</ControlLabel>
                  <FormControl type="text" ref="userId" name="userId" placeholder="User ID"></FormControl>
                </FormGroup>
                <FormGroup>
                  <ControlLabel>Password</ControlLabel>
                  <FormControl type="password" ref="password" name="password" placeholder="Password"></FormControl>
                </FormGroup>
                <Button type="submit" bsStyle="success">Login</Button>
              </form>
              <p style={{marginTop:"20px"}}>Not a member? <Link to="/signup">Sign up</Link></p>
            </Col>
          </Row>
      </div>
    )
  }
}