aclindsa/moneygo
1
0
Fork 0
mirror of https://github.com/aclindsa/moneygo.git synced 2024-12-26 15:42:27 -05:00
Code Issues Releases Wiki Activity

Update everything for latest version of React

Browse Source
This commit is contained in:
Aaron Lindsay 2016-09-27 11:30:39 -04:00
parent 9be12a3c7e
commit 5ff45cd4b4
6 changed files with 256 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

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

120
js/AccountRegister.js
View File

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

95
js/AccountSettingsModal.js
View File

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

126
js/AccountsTab.js
View File

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

98
js/NewUserForm.js
View File

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

29
js/TopBar.js
View File

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