mirror of
https://github.com/aclindsa/moneygo.git
synced 2024-10-30 07:40:05 -04:00
Update everything for latest version of React
This commit is contained in:
parent
9be12a3c7e
commit
5ff45cd4b4
2
Makefile
2
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
|
||||
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
29
js/TopBar.js
29
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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user