Update everything for latest version of React

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

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

View File

@ -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}

View File

@ -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>

View File

@ -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">

View File

@ -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>
);
}

View File

@ -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>
);
}
});