Update everything for latest version of React

Makefile

@@ -1,4 +1,4 @@
-JS_SOURCES = $(wildcard js/*.js)
+JS_SOURCES = $(wildcard js/*.js) $(wildcard js/*/*.js)
 
 all: static/bundle.js static/react-widgets
 

js/AccountRegister.js

@@ -13,7 +13,12 @@ var Grid = ReactBootstrap.Grid;
 var Row = ReactBootstrap.Row;
 var Col = ReactBootstrap.Col;
 var Panel = ReactBootstrap.Panel;
-var Input = ReactBootstrap.Input;
+var Form = ReactBootstrap.Form;
+var FormGroup = ReactBootstrap.FormGroup;
+var FormControl = ReactBootstrap.FormControl;
+var InputGroup = ReactBootstrap.InputGroup;
+var ControlLabel = ReactBootstrap.ControlLabel;
+var HelpBlock = ReactBootstrap.HelpBlock;
 var Button = ReactBootstrap.Button;
 var ButtonGroup = ReactBootstrap.ButtonGroup;
 var ButtonToolbar = ReactBootstrap.ButtonToolbar;
@@ -127,7 +132,7 @@ const AmountInput = React.createClass({
 		}
 	},
 	componentDidMount: function() {
-		this.refs.amount.getInputDOMNode().onblur = this.onBlur;
+		ReactDOM.findDOMNode(this.refs.amount).onblur = this.onBlur;
 	},
 	onBlur: function() {
 		var a;
@@ -140,13 +145,13 @@ const AmountInput = React.createClass({
 		});
 	},
 	onChange: function() {
-		this.setState({Amount: this.refs.amount.getValue()});
+		this.setState({Amount: ReactDOM.findDOMNode(this.refs.amount).value});
 		if (this.props.onChange)
 			this.props.onChange();
 	},
 	getValue: function() {
 		try {
-			var value = this.refs.amount.getValue();
+			var value = ReactDOM.findDOMNode(this.refs.amount).value;
 			var ret = new Big(value);
 			this.setState({LastGoodAmount: value});
 			return ret;
@@ -158,17 +163,17 @@ const AmountInput = React.createClass({
 		var symbol = "?";
 		if (this.props.security)
 			symbol = this.props.security.Symbol;
-		var bsStyle = undefined;
-		if (this.props.bsStyle)
-			bsStyle = this.props.bsStyle;
 
 		return (
-			<Input type="text"
+			<FormGroup validationState={this.props.validationState}>
+				<InputGroup>
+					<InputGroup.Addon>{symbol}</InputGroup.Addon>
+					<FormControl type="text"
 						value={this.state.Amount}
 						onChange={this.onChange}
-				addonBefore={symbol}
-				bsStyle={bsStyle}
 						ref="amount"/>
+				</InputGroup>
+			</FormGroup>
 		);
 	}
 });
@@ -197,7 +202,7 @@ const AddEditTransactionModal = React.createClass({
 	handleDescriptionChange: function() {
 		this.setState({
 			transaction: react_update(this.state.transaction, {
-				Description: {$set: this.refs.description.getValue()}
+				Description: {$set: ReactDOM.findDOMNode(this.refs.description).value}
 			})
 		});
 	},
@@ -236,7 +241,7 @@ const AddEditTransactionModal = React.createClass({
 	handleUpdateNumber: function(split) {
 		var transaction = this.state.transaction;
 		transaction.Splits[split] = react_update(transaction.Splits[split], {
-			Number: {$set: this.refs['number-'+split].getValue()}
+			Number: {$set: ReactDOM.findDOMNode(this.refs['number-'+split]).value}
 		});
 		this.setState({
 			transaction: transaction
@@ -245,7 +250,7 @@ const AddEditTransactionModal = React.createClass({
 	handleUpdateMemo: function(split) {
 		var transaction = this.state.transaction;
 		transaction.Splits[split] = react_update(transaction.Splits[split], {
-			Memo: {$set: this.refs['memo-'+split].getValue()}
+			Memo: {$set: ReactDOM.findDOMNode(this.refs['memo-'+split]).value}
 		});
 		this.setState({
 			transaction: transaction
@@ -363,12 +368,12 @@ const AddEditTransactionModal = React.createClass({
 
 			splits.push((
 				<Row key={s.SplitId == -1 ? (i+999) : s.SplitId}>
-				<Col xs={1}><Input
+				<Col xs={1}><FormControl
 					type="text"
 					value={s.Number}
 					onChange={updateNumberFn}
 					ref={"number-"+i} /></Col>
-				<Col xs={5}><Input
+				<Col xs={5}><FormControl
 					type="text"
 					value={s.Memo}
 					onChange={updateMemoFn}
@@ -386,7 +391,7 @@ const AddEditTransactionModal = React.createClass({
 					security={security}
 					onChange={updateAmountFn}
 					ref={"amount-"+i}
-					bsStyle={amountValidation}/></Col>
+					validationState={amountValidation}/></Col>
 				{deleteSplitButton}
 				</Row>
 			));
@@ -398,28 +403,29 @@ const AddEditTransactionModal = React.createClass({
 					<Modal.Title>{headerText} Transaction</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
-				<form onSubmit={this.handleSubmit}
-						className="form-horizontal">
-					<Input wrapperClassName="wrapper"
-						label="Date"
-						labelClassName="col-xs-2"
-						wrapperClassName="col-xs-10">
+				<Form horizontal
+						onSubmit={this.handleSubmit}>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Date</Col>
+						<Col xs={10}>
 						<DateTimePicker
 							time={false}
 							defaultValue={this.state.transaction.Date}
 							onChange={this.handleDateChange} />
-					</Input>
-					<Input type="text"
-						label="Description"
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Description</Col>
+						<Col xs={10}>
+						<FormControl type="text"
 							value={this.state.transaction.Description}
 							onChange={this.handleDescriptionChange}
-						ref="description"
-						labelClassName="col-xs-2"
-						wrapperClassName="col-xs-10"/>
-					<Input wrapperClassName="wrapper"
-						label="Status"
-						labelClassName="col-xs-2"
-						wrapperClassName="col-xs-10">
+							ref="description"/>
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Status</Col>
+						<Col xs={10}>
 						<Combobox
 							data={TransactionStatusList}
 							valueField='StatusId'
@@ -427,7 +433,9 @@ const AddEditTransactionModal = React.createClass({
 							defaultValue={this.state.transaction.Status}
 							onSelect={this.handleStatusChange}
 							ref="status" />
-					</Input>
+						</Col>
+					</FormGroup>
+
 					<Grid fluid={true}><Row>
 					<span className="split-header col-xs-1">#</span>
 					<span className="split-header col-xs-5">Memo</span>
@@ -443,7 +451,7 @@ const AddEditTransactionModal = React.createClass({
 					</Row>
 					<Row>{this.state.errorAlert}</Row>
 					</Grid>
-				</form>
+				</Form>
 				</Modal.Body>
 				<Modal.Footer>
 					<ButtonGroup>
@@ -485,7 +493,7 @@ const ImportTransactionsModal = React.createClass({
 			this.props.onCancel();
 	},
 	handleImportChange: function() {
-		this.setState({importFile: this.refs.importfile.getValue()});
+		this.setState({importFile: ReactDOM.findDOMNode(this.refs.importfile).value});
 	},
 	handleTypeChange: function(type) {
 		this.setState({importType: type.TypeId});
@@ -612,13 +620,15 @@ const ImportTransactionsModal = React.createClass({
 						defaultValue={this.state.importType}
 						disabled={disabledTypes}
 						ref="importtype" />
-					<Input type="file"
+					<FormGroup>
+						<ControlLabel>{accountNameLabel}</ControlLabel>
+						<FormControl type="file"
 							ref="importfile"
 							disabled={inputDisabled}
 							value={this.state.importFile}
-							label={accountNameLabel}
-							help="Select an OFX/QFX file to upload."
 							onChange={this.handleImportChange} />
+						<HelpBlock>Select an OFX/QFX file to upload.</HelpBlock>
+					</FormGroup>
 				</form>
 				{progressBar}
 				{panel}
@@ -918,7 +928,7 @@ module.exports = React.createClass({
 					<ButtonGroup>
 					<Pagination
 						className="skinny-pagination"
-						prev next first last ellipses
+						prev next first last ellipsis
 						items={this.state.numPages}
 						maxButtons={Math.min(5, this.state.numPages)}
 						activePage={this.state.currentPage+1}

js/AccountSettingsModal.js

@@ -1,10 +1,16 @@
 var React = require('react');
 
+var ReactDOM = require('react-dom');
+
 var ReactBootstrap = require('react-bootstrap');
 var Modal = ReactBootstrap.Modal;
 var Button = ReactBootstrap.Button;
 var ButtonGroup = ReactBootstrap.ButtonGroup;
-var Input = ReactBootstrap.Input;
+var Form = ReactBootstrap.Form;
+var FormGroup = ReactBootstrap.FormGroup;
+var FormControl = ReactBootstrap.FormControl;
+var ControlLabel = ReactBootstrap.ControlLabel;
+var Col = ReactBootstrap.Col;
 
 var models = require('./models.js');
 var User = models.User;
@@ -53,14 +59,14 @@ module.exports = React.createClass({
 			this.props.onCancel();
 	},
 	handleChange: function() {
-		if (this.refs.password.getValue() != this.state.initial_password)
+		if (ReactDOM.findDOMNode(this.refs.password).value != this.state.initial_password)
 			this.setState({passwordChanged: true});
 		this.setState({
-			name: this.refs.name.getValue(),
-			username: this.refs.username.getValue(),
-			email: this.refs.email.getValue(),
-			password: this.refs.password.getValue(),
-			confirm_password: this.refs.confirm_password.getValue()
+			name: ReactDOM.findDOMNode(this.refs.name).value,
+			username: ReactDOM.findDOMNode(this.refs.username).value,
+			email: ReactDOM.findDOMNode(this.refs.email).value,
+			password: ReactDOM.findDOMNode(this.refs.password).value,
+			confirm_password: ReactDOM.findDOMNode(this.refs.confirm_password).value
 		});
 	},
 	handleSubmit: function(e) {
@@ -116,48 +122,55 @@ module.exports = React.createClass({
 				</Modal.Header>
 				<Modal.Body>
 				<span color="red">{this.state.error}</span>
-				<form onSubmit={this.handleSubmit}
-						className="form-horizontal">
-					<Input type="text"
-							label="Name"
+				<Form horizontal onSubmit={this.handleSubmit}>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Name</Col>
+						<Col xs={10}>
+						<FormControl type="text"
 								value={this.state.name}
 								onChange={this.handleChange}
-							ref="name"
-							labelClassName="col-xs-2"
-							wrapperClassName="col-xs-10"/>
-					<Input type="text"
-							label="Username"
+								ref="name"/>
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Username</Col>
+						<Col xs={10}>
+						<FormControl type="text"
 							value={this.state.username}
 							onChange={this.handleChange}
-							ref="username"
-							labelClassName="col-xs-2"
-							wrapperClassName="col-xs-10"/>
-					<Input type="email"
-							label="Email"
+							ref="username"/>
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Email</Col>
+						<Col xs={10}>
+						<FormControl type="email"
 							value={this.state.email}
 							onChange={this.handleChange}
-							ref="email"
-							labelClassName="col-xs-2"
-							wrapperClassName="col-xs-10"/>
-					<Input type="password"
-							label="Password"
+							ref="email"/>
+						</Col>
+					</FormGroup>
+					<FormGroup validationState={this.passwordValidationState()}>
+						<Col componentClass={ControlLabel} xs={2}>Password</Col>
+						<Col xs={10}>
+						<FormControl type="password"
 							value={this.state.password}
 							onChange={this.handleChange}
-							ref="password"
-							labelClassName="col-xs-2"
-							wrapperClassName="col-xs-10"
-							bsStyle={this.passwordValidationState()}
-							hasFeedback/>
-					<Input type="password"
-							label="Confirm Password"
+							ref="password"/>
+						<FormControl.Feedback/>
+						</Col>
+					</FormGroup>
+					<FormGroup validationState={this.confirmPasswordValidationState()}>
+						<Col componentClass={ControlLabel} xs={2}>Confirm Password</Col>
+						<Col xs={10}>
+						<FormControl type="password"
 							value={this.state.confirm_password}
 							onChange={this.handleChange}
-							ref="confirm_password"
-							labelClassName="col-xs-2"
-							wrapperClassName="col-xs-10"
-							bsStyle={this.confirmPasswordValidationState()}
-							hasFeedback/>
-				</form>
+							ref="confirm_password"/>
+						<FormControl.Feedback/>
+						</Col>
+					</FormGroup>
+				</Form>
 				</Modal.Body>
 				<Modal.Footer>
 					<ButtonGroup>

js/AccountsTab.js

@@ -5,7 +5,10 @@ var ReactBootstrap = require('react-bootstrap');
 var Grid = ReactBootstrap.Grid;
 var Row = ReactBootstrap.Row;
 var Col = ReactBootstrap.Col;
-var Input = ReactBootstrap.Input;
+var Form = ReactBootstrap.Form;
+var FormGroup = ReactBootstrap.FormGroup;
+var FormControl = ReactBootstrap.FormControl;
+var ControlLabel = ReactBootstrap.ControlLabel;
 var Button = ReactBootstrap.Button;
 var ButtonGroup = ReactBootstrap.ButtonGroup;
 var Glyphicon = ReactBootstrap.Glyphicon;
@@ -54,7 +57,7 @@ const AddEditAccountModal = React.createClass({
 	},
 	handleChange: function() {
 		this.setState({
-			name: this.refs.name.getValue(),
+			name: ReactDOM.findDOMNode(this.refs.name).value,
 		});
 	},
 	handleSecurityChange: function(security) {
@@ -100,19 +103,19 @@ const AddEditAccountModal = React.createClass({
 					<Modal.Title>{headerText} Account</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
-				<form onSubmit={this.handleSubmit}
-						className="form-horizontal">
-					<Input type="text"
-						label="Name"
+				<Form horizontal onSubmit={this.handleSubmit}>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Name</Col>
+						<Col xs={10}>
+						<FormControl type="text"
 							value={this.state.name}
 							onChange={this.handleChange}
-						ref="name"
-						labelClassName="col-xs-2"
-						wrapperClassName="col-xs-10"/>
-					<Input wrapperClassName="wrapper"
-						label="Parent Account"
-						labelClassName="col-xs-2"
-						wrapperClassName="col-xs-10">
+							ref="name"/>
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Parent Account</Col>
+						<Col xs={10}>
 						<AccountCombobox
 							accounts={this.props.accounts}
 							account_map={this.props.account_map}
@@ -120,11 +123,11 @@ const AddEditAccountModal = React.createClass({
 							rootName={rootName}
 							onChange={this.handleParentChange}
 							ref="parent" />
-					</Input>
-					<Input wrapperClassName="wrapper"
-						label="Security"
-						labelClassName="col-xs-2"
-						wrapperClassName="col-xs-10">
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Security</Col>
+						<Col xs={10}>
 						<Combobox
 							data={this.props.securities}
 							valueField='SecurityId'
@@ -132,11 +135,11 @@ const AddEditAccountModal = React.createClass({
 							defaultValue={this.state.security}
 							onChange={this.handleSecurityChange}
 							ref="security" />
-					</Input>
-					<Input wrapperClassName="wrapper"
-						label="Account Type"
-						labelClassName="col-xs-2"
-						wrapperClassName="col-xs-10">
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Account Type</Col>
+						<Col xs={10}>
 						<Combobox
 							data={AccountTypeList}
 							valueField='TypeId'
@@ -144,8 +147,9 @@ const AddEditAccountModal = React.createClass({
 							defaultValue={this.state.type}
 							onChange={this.handleTypeChange}
 							ref="type" />
-					</Input>
-				</form>
+						</Col>
+					</FormGroup>
+				</Form>
 				</Modal.Body>
 				<Modal.Footer>
 					<ButtonGroup className="pull-right">
@@ -208,12 +212,13 @@ const DeleteAccountModal = React.createClass({
 				parentAccount = "and any child accounts will be re-parented to: " + this.props.account_map[parentAccountId].Name;
 
 			var warningString = "I understand that deleting this account cannot be undone and that all transactions " + parentAccount;
-			checkbox = (<Input
+			checkbox = (<FormGroup>
+				<FormControl
 					type='checkbox'
 					checked={this.state.checked ? "checked" : ""}
-				onClick={this.handleCheckboxClick}
-				label={warningString}
-				wrapperClassName="col-xs-offset-2 col-xs-10"/>);
+					onClick={this.handleCheckboxClick}/>
+				<ControlLabel>{warningString}</ControlLabel>
+				</FormGroup>);
 		}
 		var warning = [];
 		if (this.state.error.length != "") {
@@ -232,21 +237,18 @@ const DeleteAccountModal = React.createClass({
 				</Modal.Header>
 				<Modal.Body>
 				{warning}
-				<form onSubmit={this.handleSubmit}
-						className="form-horizontal">
-					<Input wrapperClassName="wrapper"
-						label="Delete Account"
-						labelClassName="col-xs-2"
-						wrapperClassName="col-xs-10">
+				<Form horizontal onSubmit={this.handleSubmit}>
+					<FormGroup>
+					<ControlLabel>Delete Account</ControlLabel>
 					<AccountCombobox
 						includeRoot={false}
 						accounts={this.props.accounts}
 						account_map={this.props.account_map}
 						value={this.state.accountid}
 						onChange={this.handleChange}/>
-					</Input>
 					{checkbox}
-				</form>
+					</FormGroup>
+				</Form>
 				</Modal.Body>
 				<Modal.Footer>
 					<ButtonGroup className="pull-right">

js/NewUserForm.js

@@ -1,9 +1,15 @@
 var React = require('react');
+var ReactDOM = require('react-dom');
 
-var Panel = require('react-bootstrap').Panel;
-var Input = require('react-bootstrap').Input;
-var Button = require('react-bootstrap').Button;
-var ButtonGroup = require('react-bootstrap').ButtonGroup;
+var ReactBootstrap = require('react-bootstrap');
+var Panel = ReactBootstrap.Panel;
+var Form = ReactBootstrap.Form;
+var FormGroup = ReactBootstrap.FormGroup;
+var FormControl = ReactBootstrap.FormControl;
+var ControlLabel = ReactBootstrap.ControlLabel;
+var Col = ReactBootstrap.Col;
+var Button = ReactBootstrap.Button;
+var ButtonGroup = ReactBootstrap.ButtonGroup;
 
 var models = require('./models.js');
 var User = models.User;
@@ -43,14 +49,14 @@ module.exports = React.createClass({
 			this.props.onCancel();
 	},
 	handleChange: function() {
-		if (this.refs.password.getValue() != this.state.initial_password)
+		if (ReactDOM.findDOMNode(this.refs.password).value != this.state.initial_password)
 			this.setState({passwordChanged: true});
 		this.setState({
-			name: this.refs.name.getValue(),
-			username: this.refs.username.getValue(),
-			email: this.refs.email.getValue(),
-			password: this.refs.password.getValue(),
-			confirm_password: this.refs.confirm_password.getValue()
+			name: ReactDOM.findDOMNode(this.refs.name).value,
+			username: ReactDOM.findDOMNode(this.refs.username).value,
+			email: ReactDOM.findDOMNode(this.refs.email).value,
+			password: ReactDOM.findDOMNode(this.refs.password).value,
+			confirm_password: ReactDOM.findDOMNode(this.refs.confirm_password).value
 		});
 	},
 	handleSubmit: function(e) {
@@ -97,54 +103,62 @@ module.exports = React.createClass({
 		return (
 			<Panel header={title} bsStyle="info">
 				<span color="red">{this.state.error}</span>
-				<form onSubmit={this.handleSubmit}
-						className="form-horizontal">
-					<Input type="text"
-							label="Name"
+				<Form horizontal onSubmit={this.handleSubmit}>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Name</Col>
+						<Col xs={10}>
+						<FormControl type="text"
 							value={this.state.name}
 							onChange={this.handleChange}
-							ref="name"
-							labelClassName="col-xs-2"
-							wrapperClassName="col-xs-10"/>
-					<Input type="text"
-							label="Username"
+							ref="name"/>
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Username</Col>
+						<Col xs={10}>
+						<FormControl type="text"
 							value={this.state.username}
 							onChange={this.handleChange}
-							ref="username"
-							labelClassName="col-xs-2"
-							wrapperClassName="col-xs-10"/>
-					<Input type="email"
-							label="Email"
+							ref="username"/>
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Email</Col>
+						<Col xs={10}>
+						<FormControl type="email"
 							value={this.state.email}
 							onChange={this.handleChange}
-							ref="email"
-							labelClassName="col-xs-2"
-							wrapperClassName="col-xs-10"/>
-					<Input type="password"
-							label="Password"
+							ref="email"/>
+						</Col>
+					</FormGroup>
+					<FormGroup validationState={this.passwordValidationState()}>
+						<Col componentClass={ControlLabel} xs={2}>Password</Col>
+						<Col xs={10}>
+						<FormControl type="password"
 							value={this.state.password}
 							onChange={this.handleChange}
-							ref="password"
-							labelClassName="col-xs-2"
-							wrapperClassName="col-xs-10"
-							bsStyle={this.passwordValidationState()}
-							hasFeedback/>
-					<Input type="password"
-							label="Confirm Password"
+							ref="password"/>
+						<FormControl.Feedback/>
+						</Col>
+					</FormGroup>
+					<FormGroup validationState={this.confirmPasswordValidationState()}>
+						<Col componentClass={ControlLabel} xs={2}>Confirm Password</Col>
+						<Col xs={10}>
+						<FormControl type="password"
 							value={this.state.confirm_password}
 							onChange={this.handleChange}
-							ref="confirm_password"
-							labelClassName="col-xs-2"
-							wrapperClassName="col-xs-10"
-							bsStyle={this.confirmPasswordValidationState()}
-							hasFeedback/>
+							ref="confirm_password"/>
+						<FormControl.Feedback/>
+						</Col>
+					</FormGroup>
+
 					<ButtonGroup className="pull-right">
 						<Button onClick={this.handleCancel}
 								bsStyle="warning">Cancel</Button>
 						<Button type="submit"
 								bsStyle="success">Create New User</Button>
 					</ButtonGroup>
-				</form>
+				</Form>
 			</Panel>
 		);
 	}

js/TopBar.js

@@ -2,13 +2,16 @@ var React = require('react');
 
 var ReactBootstrap = require('react-bootstrap');
 var Alert = ReactBootstrap.Alert;
-var Input = ReactBootstrap.Input;
+var FormGroup = ReactBootstrap.FormGroup;
+var FormControl = ReactBootstrap.FormControl;
 var Button = ReactBootstrap.Button;
 var DropdownButton = ReactBootstrap.DropdownButton;
 var MenuItem = ReactBootstrap.MenuItem;
 var Row = ReactBootstrap.Row;
 var Col = ReactBootstrap.Col;
 
+var ReactDOM = require('react-dom');
+
 var User = require('./models.js').User;
 
 const LoginBar = React.createClass({
@@ -24,8 +27,8 @@ const LoginBar = React.createClass({
 	handleSubmit: function(e) {
 		var user = new User();
 		e.preventDefault();
-		user.Username = this.refs.username.getValue();
-		user.Password = this.refs.password.getValue();
+		user.Username = ReactDOM.findDOMNode(this.refs.username).value;
+		user.Password = ReactDOM.findDOMNode(this.refs.password).value;
 		this.props.onLoginSubmit(user);
 	},
 	handleNewUserSubmit: function(e) {
@@ -35,7 +38,7 @@ const LoginBar = React.createClass({
 	render: function() {
 		return (
 			<form onSubmit={this.handleSubmit}>
-			<Input wrapperClassName="wrapper">
+			<FormGroup>
 				<Row>
 					<Col xs={4}></Col>
 					<Col xs={2}>
@@ -43,28 +46,28 @@ const LoginBar = React.createClass({
 							onClick={this.handleNewUserSubmit}>Create New User</Button>
 					</Col>
 					<Col xs={2}>
-						<Input type="text"
+						<FormControl type="text"
 							placeholder="Username..."
 							ref="username"/>
 					</Col>
 					<Col xs={2}>
-						<Input type="password"
+						<FormControl type="password"
 							placeholder="Password..."
-							ref="password" block/>
+							ref="password"/>
 					</Col>
 					<Col xs={2}>
 						<Button type="submit" bsStyle="primary" block>
 							Login</Button>
 					</Col>
 				</Row>
-			</Input>
+			</FormGroup>
 			</form>
 		);
 	}
 });
 
 const LogoutBar = React.createClass({
-	handleOnSelect: function(e, key) {
+	handleOnSelect: function(key) {
 		if (key == 1) {
 			if (this.props.onAccountSettings != null)
 				this.props.onAccountSettings();
@@ -75,20 +78,20 @@ const LogoutBar = React.createClass({
 	render: function() {
 		var signedInString = "Signed in as "+this.props.user.Name;
 		return (
-			<Input wrapperClassName="wrapper">
+			<FormGroup>
 				<Row>
 					<Col xs={2}><label className="control-label pull-left">Money<i>Go</i></label></Col>
 					<Col xs={6}></Col>
 					<Col xs={4}>
 						<div className="pull-right">
 						<DropdownButton id="logout-settings-dropdown" title={signedInString} onSelect={this.handleOnSelect} bsStyle="info">
-							<MenuItem eventKey="1">Account Settings</MenuItem>
-							<MenuItem eventKey="2">Logout</MenuItem>
+							<MenuItem eventKey={1}>Account Settings</MenuItem>
+							<MenuItem eventKey={2}>Logout</MenuItem>
 						</DropdownButton>
 						</div>
 					</Col>
 				</Row>
-			</Input>
+			</FormGroup>
 		);
 	}
 });