From 5ff45cd4b44156bdaa98c866711fb793b8bddbdc Mon Sep 17 00:00:00 2001
From: Aaron Lindsay <aaron@aclindsay.com>
Date: Tue, 27 Sep 2016 11:30:39 -0400
Subject: [PATCH] Update everything for latest version of React

---
 Makefile                   |   2 +-
 js/AccountRegister.js      | 120 +++++++++++++++++++----------------
 js/AccountSettingsModal.js |  95 ++++++++++++++++------------
 js/AccountsTab.js          | 126 +++++++++++++++++++------------------
 js/NewUserForm.js          |  98 ++++++++++++++++-------------
 js/TopBar.js               |  29 +++++----
 6 files changed, 256 insertions(+), 214 deletions(-)

diff --git a/Makefile b/Makefile
index d041b28..911a49c 100644
--- a/Makefile
+++ b/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
 
diff --git a/js/AccountRegister.js b/js/AccountRegister.js
index 073183d..936c86c 100644
--- a/js/AccountRegister.js
+++ b/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"
-				value={this.state.Amount}
-				onChange={this.onChange}
-				addonBefore={symbol}
-				bsStyle={bsStyle}
-				ref="amount"/>
+			<FormGroup validationState={this.props.validationState}>
+				<InputGroup>
+					<InputGroup.Addon>{symbol}</InputGroup.Addon>
+					<FormControl type="text"
+						value={this.state.Amount}
+						onChange={this.onChange}
+						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,36 +403,39 @@ 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">
-					<DateTimePicker
-						time={false}
-						defaultValue={this.state.transaction.Date}
-						onChange={this.handleDateChange} />
-					</Input>
-					<Input type="text"
-						label="Description"
-						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">
-					<Combobox
-						data={TransactionStatusList}
-						valueField='StatusId'
-						textField='Name'
-						defaultValue={this.state.transaction.Status}
-						onSelect={this.handleStatusChange}
-						ref="status" />
-					</Input>
+				<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} />
+						</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"/>
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Status</Col>
+						<Col xs={10}>
+						<Combobox
+							data={TransactionStatusList}
+							valueField='StatusId'
+							textField='Name'
+							defaultValue={this.state.transaction.Status}
+							onSelect={this.handleStatusChange}
+							ref="status" />
+						</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}
diff --git a/js/AccountSettingsModal.js b/js/AccountSettingsModal.js
index 6330830..02443c5 100644
--- a/js/AccountSettingsModal.js
+++ b/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"
-							value={this.state.name}
-							onChange={this.handleChange}
-							ref="name"
-							labelClassName="col-xs-2"
-							wrapperClassName="col-xs-10"/>
-					<Input type="text"
-							label="Username"
+				<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"/>
+						</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>
diff --git a/js/AccountsTab.js b/js/AccountsTab.js
index af6b899..3a7478b 100644
--- a/js/AccountsTab.js
+++ b/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,52 +103,53 @@ 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"
-						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">
-					<AccountCombobox
-						accounts={this.props.accounts}
-						account_map={this.props.account_map}
-						value={this.state.parentaccountid}
-						rootName={rootName}
-						onChange={this.handleParentChange}
-						ref="parent" />
-					</Input>
-					<Input wrapperClassName="wrapper"
-						label="Security"
-						labelClassName="col-xs-2"
-						wrapperClassName="col-xs-10">
-					<Combobox
-						data={this.props.securities}
-						valueField='SecurityId'
-						textField={item => item.Name + " - " + item.Description}
-						defaultValue={this.state.security}
-						onChange={this.handleSecurityChange}
-						ref="security" />
-					</Input>
-					<Input wrapperClassName="wrapper"
-						label="Account Type"
-						labelClassName="col-xs-2"
-						wrapperClassName="col-xs-10">
-					<Combobox
-						data={AccountTypeList}
-						valueField='TypeId'
-						textField='Name'
-						defaultValue={this.state.type}
-						onChange={this.handleTypeChange}
-						ref="type" />
-					</Input>
-				</form>
+				<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"/>
+						</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}
+							value={this.state.parentaccountid}
+							rootName={rootName}
+							onChange={this.handleParentChange}
+							ref="parent" />
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Security</Col>
+						<Col xs={10}>
+						<Combobox
+							data={this.props.securities}
+							valueField='SecurityId'
+							textField={item => item.Name + " - " + item.Description}
+							defaultValue={this.state.security}
+							onChange={this.handleSecurityChange}
+							ref="security" />
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Account Type</Col>
+						<Col xs={10}>
+						<Combobox
+							data={AccountTypeList}
+							valueField='TypeId'
+							textField='Name'
+							defaultValue={this.state.type}
+							onChange={this.handleTypeChange}
+							ref="type" />
+						</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
-				type='checkbox'
-				checked={this.state.checked ? "checked" : ""}
-				onClick={this.handleCheckboxClick}
-				label={warningString}
-				wrapperClassName="col-xs-offset-2 col-xs-10"/>);
+			checkbox = (<FormGroup>
+				<FormControl
+					type='checkbox'
+					checked={this.state.checked ? "checked" : ""}
+					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">
diff --git a/js/NewUserForm.js b/js/NewUserForm.js
index 618483c..79e33a5 100644
--- a/js/NewUserForm.js
+++ b/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>
 		);
 	}
diff --git a/js/TopBar.js b/js/TopBar.js
index f763978..cf21125 100644
--- a/js/TopBar.js
+++ b/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>
 		);
 	}
 });