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

Move account settings to Modal

Browse Source
This commit is contained in:
Aaron Lindsay 2015-09-01 06:23:56 -04:00
parent 841df05022
commit 48b28ffbf2
1 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
static/ui.js
View File

@ -4,6 +4,7 @@ var TabbedArea = ReactBootstrap.TabbedArea;
var TabPane = ReactBootstrap.TabPane; var TabPane = ReactBootstrap.TabPane;
var Panel = ReactBootstrap.Panel; var Panel = ReactBootstrap.Panel;
var ButtonGroup = ReactBootstrap.ButtonGroup; var ButtonGroup = ReactBootstrap.ButtonGroup;
var Modal = ReactBootstrap.Modal;
const NewUserForm = React.createClass({ const NewUserForm = React.createClass({
getInitialState: function() { getInitialState: function() {
@ -146,17 +147,25 @@ const NewUserForm = React.createClass({
} }
}); });
const AccountSettings = React.createClass({ const AccountSettingsModal = React.createClass({
getInitialState: function() { _getInitialState: function(props) {
return {error: "", return {error: "",
name: this.props.user.Name, name: props.user.Name,
username: this.props.user.Username, username: props.user.Username,
email: this.props.user.Email, email: props.user.Email,
password: BogusPassword, password: BogusPassword,
confirm_password: BogusPassword, confirm_password: BogusPassword,
passwordChanged: false, passwordChanged: false,
initial_password: BogusPassword}; initial_password: BogusPassword};
}, },
getInitialState: function() {
return this._getInitialState(this.props);
},
componentWillReceiveProps: function(nextProps) {
if (nextProps.show && !this.props.show) {
this.setState(this._getInitialState(nextProps));
}
},
passwordValidationState: function() { passwordValidationState: function() {
if (this.state.passwordChanged) { if (this.state.passwordChanged) {
if (this.state.password.length >= 10) if (this.state.password.length >= 10)
@ -224,7 +233,7 @@ const AccountSettings = React.createClass({
this.setState({error: e}); this.setState({error: e});
} else { } else {
user.Password = ""; user.Password = "";
this.props.onSettingsSubmitted(user); this.props.onSubmit(user);
} }
}.bind(this), }.bind(this),
error: function(jqXHR, status, error) { error: function(jqXHR, status, error) {
@ -236,9 +245,12 @@ const AccountSettings = React.createClass({
}); });
}, },
render: function() { render: function() {
var title = <h3>Edit Account Settings</h3>;
return ( return (
<Panel header={title} bsStyle="info"> <Modal show={this.props.show} onHide={this.handleCancel} bsSize="large">
<Modal.Header closeButton>
<Modal.Title>Edit Account Settings</Modal.Title>
</Modal.Header>
<Modal.Body>
<span color="red">{this.state.error}</span> <span color="red">{this.state.error}</span>
<form onSubmit={this.handleSubmit} <form onSubmit={this.handleSubmit}
className="form-horizontal"> className="form-horizontal">
@ -281,14 +293,15 @@ const AccountSettings = React.createClass({
wrapperClassName="col-xs-10" wrapperClassName="col-xs-10"
bsStyle={this.confirmPasswordValidationState()} bsStyle={this.confirmPasswordValidationState()}
hasFeedback/> hasFeedback/>
<ButtonGroup className="pull-right">
<Button onClick={this.handleCancel}
bsStyle="warning">Cancel</Button>
<Button type="submit"
bsStyle="success">Save Settings</Button>
</ButtonGroup>
</form> </form>
</Panel> </Modal.Body>
<Modal.Footer>
<ButtonGroup>
<Button onClick={this.handleCancel} bsStyle="warning">Cancel</Button>
<Button onClick={this.handleSubmit} bsStyle="success">Save Settings</Button>
</ButtonGroup>
</Modal.Footer>
</Modal>
); );
} }
}); });
@ -303,7 +316,8 @@ const MoneyGoApp = React.createClass({
account_map: {}, account_map: {},
securities: [], securities: [],
security_map: {}, security_map: {},
error: new Error() error: new Error(),
showAccountSettingsModal: false
}; };
}, },
componentDidMount: function() { componentDidMount: function() {
@ -479,11 +493,16 @@ const MoneyGoApp = React.createClass({
}); });
}, },
handleAccountSettings: function() { handleAccountSettings: function() {
this.setHash("account"); this.setState({showAccountSettingsModal: true});
}, },
handleSettingsSubmitted: function(user) { handleSettingsSubmitted: function(user) {
this.setState({user: user}); this.setState({
this.setHash("home"); user: user,
showAccountSettingsModal: false
});
},
handleSettingsCanceled: function(user) {
this.setState({showAccountSettingsModal: false});
}, },
handleCreateNewUser: function() { handleCreateNewUser: function() {
this.setHash("new_user"); this.setHash("new_user");
@ -548,8 +567,6 @@ const MoneyGoApp = React.createClass({
var mainContent; var mainContent;
if (this.state.hash == "new_user") { if (this.state.hash == "new_user") {
mainContent = <NewUserForm onNewUser={this.handleGoHome} onCancel={this.handleGoHome}/> mainContent = <NewUserForm onNewUser={this.handleGoHome} onCancel={this.handleGoHome}/>
} else if (this.state.hash == "account" && this.state.user.isUser()) {
mainContent = <AccountSettings user={this.state.user} onSettingsSubmitted={this.handleSettingsSubmitted} onCancel={this.handleGoHome}/>
} else { } else {
if (this.state.user.isUser()) if (this.state.user.isUser())
mainContent = mainContent =
@ -590,6 +607,11 @@ const MoneyGoApp = React.createClass({
onAccountSettings={this.handleAccountSettings} onAccountSettings={this.handleAccountSettings}
onLogoutSubmit={this.handleLogoutSubmit} /> onLogoutSubmit={this.handleLogoutSubmit} />
{mainContent} {mainContent}
<AccountSettingsModal
show={this.state.showAccountSettingsModal}
user={this.state.user}
onSubmit={this.handleSettingsSubmitted}
onCancel={this.handleSettingsCanceled}/>
</div> </div>
); );
} }