// Import all the objects we want to use from ReactBootstrap var Jumbotron = ReactBootstrap.Jumbotron; var TabbedArea = ReactBootstrap.TabbedArea; var TabPane = ReactBootstrap.TabPane; var Panel = ReactBootstrap.Panel; var ButtonGroup = ReactBootstrap.ButtonGroup; var Modal = ReactBootstrap.Modal; const NewUserForm = React.createClass({ getInitialState: function() { return {error: "", name: "", username: "", email: "", password: "", confirm_password: "", passwordChanged: false, initial_password: ""}; }, passwordValidationState: function() { if (this.state.passwordChanged) { if (this.state.password.length >= 10) return "success"; else if (this.state.password.length >= 6) return "warning"; else return "error"; } }, confirmPasswordValidationState: function() { if (this.state.confirm_password.length > 0) { if (this.state.confirm_password == this.state.password) return "success"; else return "error"; } }, handleCancel: function() { if (this.props.onCancel != null) this.props.onCancel(); }, handleChange: function() { if (this.refs.password.getValue() != 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() }); }, handleSubmit: function(e) { var u = new User(); var error = ""; e.preventDefault(); u.Name = this.state.name; u.Username = this.state.username; u.Email = this.state.email; u.Password = this.state.password; if (u.Password != this.state.confirm_password) { this.setState({error: "Error: password do not match"}); return; } this.handleCreateNewUser(u); }, handleCreateNewUser: function(user) { $.ajax({ type: "POST", dataType: "json", url: "user/", data: {user: user.toJSON()}, success: function(data, status, jqXHR) { var e = new Error(); e.fromJSON(data); if (e.isError()) { this.setState({error: e}); } else { this.props.onNewUser(); } }.bind(this), error: function(jqXHR, status, error) { var e = new Error(); e.ErrorId = 5; e.ErrorString = "Request Failed: " + status + error; this.setState({error: e}); }.bind(this), }); }, render: function() { var title =

Create New User

; return ( {this.state.error}
); } }); const AccountSettingsModal = React.createClass({ _getInitialState: function(props) { return {error: "", name: props.user.Name, username: props.user.Username, email: props.user.Email, password: BogusPassword, confirm_password: BogusPassword, passwordChanged: false, 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() { if (this.state.passwordChanged) { if (this.state.password.length >= 10) return "success"; else if (this.state.password.length >= 6) return "warning"; else return "error"; } }, confirmPasswordValidationState: function() { if (this.state.confirm_password.length > 0) { if (this.state.confirm_password == this.state.password) return "success"; else return "error"; } }, handleCancel: function() { if (this.props.onCancel != null) this.props.onCancel(); }, handleChange: function() { if (this.refs.password.getValue() != 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() }); }, handleSubmit: function(e) { var u = new User(); var error = ""; e.preventDefault(); u.UserId = this.props.user.UserId; u.Name = this.state.name; u.Username = this.state.username; u.Email = this.state.email; if (this.state.passwordChanged) { u.Password = this.state.password; if (u.Password != this.state.confirm_password) { this.setState({error: "Error: password do not match"}); return; } } else { u.Password = BogusPassword; } this.handleSaveSettings(u); }, handleSaveSettings: function(user) { $.ajax({ type: "PUT", dataType: "json", url: "user/"+user.UserId+"/", data: {user: user.toJSON()}, success: function(data, status, jqXHR) { var e = new Error(); e.fromJSON(data); if (e.isError()) { this.setState({error: e}); } else { user.Password = ""; this.props.onSubmit(user); } }.bind(this), error: function(jqXHR, status, error) { var e = new Error(); e.ErrorId = 5; e.ErrorString = "Request Failed: " + status + error; this.setState({error: e}); }.bind(this), }); }, render: function() { return ( Edit Account Settings {this.state.error}
); } }); const MoneyGoApp = React.createClass({ getInitialState: function() { return { hash: "home", session: new Session(), user: new User(), accounts: [], account_map: {}, securities: [], security_map: {}, error: new Error(), showAccountSettingsModal: false }; }, componentDidMount: function() { this.getSession(); this.handleHashChange(); if ("onhashchange" in window) { window.onhashchange = this.handleHashChange; } }, handleHashChange: function() { var hash = location.hash.replace(/^#/, ''); if (hash.length == 0) hash = "home"; if (hash != this.state.hash) this.setHash(hash); }, setHash: function(hash) { location.hash = hash; if (this.state.hash != hash) this.setState({hash: hash}); }, ajaxError: function(jqXHR, status, error) { var e = new Error(); e.ErrorId = 5; e.ErrorString = "Request Failed: " + status + error; this.setState({error: e}); }, getSession: function() { $.ajax({ type: "GET", dataType: "json", url: "session/", success: function(data, status, jqXHR) { var e = new Error(); var s = new Session(); e.fromJSON(data); if (e.isError()) { if (e.ErrorId != 1 /* Not Signed In*/) this.setState({error: e}); } else { s.fromJSON(data); } this.setState({session: s}); this.getUser(); this.getAccounts(); this.getSecurities(); }.bind(this), error: this.ajaxError }); }, getUser: function() { if (!this.state.session.isSession()) return; $.ajax({ type: "GET", dataType: "json", url: "user/"+this.state.session.UserId+"/", success: function(data, status, jqXHR) { var e = new Error(); var u = new User(); e.fromJSON(data); if (e.isError()) { this.setState({error: e}); } else { u.fromJSON(data); } this.setState({user: u}); }.bind(this), error: this.ajaxError }); }, getSecurities: function() { if (!this.state.session.isSession()) { this.setState({securities: [], security_map: {}}); return; } $.ajax({ type: "GET", dataType: "json", url: "security/", success: function(data, status, jqXHR) { var e = new Error(); var securities = []; var security_map = {}; e.fromJSON(data); if (e.isError()) { this.setState({error: e}); } else { for (var i = 0; i < data.securities.length; i++) { var s = new Security(); s.fromJSON(data.securities[i]); securities.push(s); security_map[s.SecurityId] = s; } } this.setState({securities: securities, security_map: security_map}); }.bind(this), error: this.ajaxError }); }, getAccounts: function() { if (!this.state.session.isSession()) { this.setState({accounts: [], account_map: {}}); return; } $.ajax({ type: "GET", dataType: "json", url: "account/", success: function(data, status, jqXHR) { var e = new Error(); var accounts = []; var account_map = {}; e.fromJSON(data); if (e.isError()) { this.setState({error: e}); } else { for (var i = 0; i < data.accounts.length; i++) { var a = new Account(); a.fromJSON(data.accounts[i]); accounts.push(a); account_map[a.AccountId] = a; } //Populate Children arrays in account objects for (var i = 0; i < accounts.length; i++) { var a = accounts[i]; if (!a.isRootAccount()) account_map[a.ParentAccountId].Children.push(a); } } this.setState({accounts: accounts, account_map: account_map}); }.bind(this), error: this.ajaxError }); }, handleErrorClear: function() { this.setState({error: new Error()}); }, handleLoginSubmit: function(user) { $.ajax({ type: "POST", dataType: "json", url: "session/", data: {user: user.toJSON()}, success: function(data, status, jqXHR) { var e = new Error(); e.fromJSON(data); if (e.isError()) { this.setState({error: e}); } else { this.getSession(); this.setHash("home"); } }.bind(this), error: this.ajaxError }); }, handleLogoutSubmit: function() { this.setState({accounts: [], account_map: {}}); $.ajax({ type: "DELETE", dataType: "json", url: "session/", success: function(data, status, jqXHR) { var e = new Error(); e.fromJSON(data); if (e.isError()) { this.setState({error: e}); } this.setState({session: new Session(), user: new User()}); }.bind(this), error: this.ajaxError }); }, handleAccountSettings: function() { this.setState({showAccountSettingsModal: true}); }, handleSettingsSubmitted: function(user) { this.setState({ user: user, showAccountSettingsModal: false }); }, handleSettingsCanceled: function(user) { this.setState({showAccountSettingsModal: false}); }, handleCreateNewUser: function() { this.setHash("new_user"); }, handleGoHome: function(user) { this.setHash("home"); }, handleCreateAccount: function(account) { $.ajax({ type: "POST", dataType: "json", url: "account/", data: {account: account.toJSON()}, success: function(data, status, jqXHR) { var e = new Error(); e.fromJSON(data); if (e.isError()) { this.setState({error: e}); } else { this.getAccounts(); } }.bind(this), error: this.ajaxError }); }, handleUpdateAccount: function(account) { $.ajax({ type: "PUT", dataType: "json", url: "account/"+account.AccountId+"/", data: {account: account.toJSON()}, success: function(data, status, jqXHR) { var e = new Error(); e.fromJSON(data); if (e.isError()) { this.setState({error: e}); } else { this.getAccounts(); } }.bind(this), error: this.ajaxError }); }, handleDeleteAccount: function(account) { $.ajax({ type: "DELETE", dataType: "json", url: "account/"+account.AccountId+"/", success: function(data, status, jqXHR) { var e = new Error(); e.fromJSON(data); if (e.isError()) { this.setState({error: e}); } else { this.getAccounts(); } }.bind(this), error: this.ajaxError }); }, render: function() { var mainContent; if (this.state.hash == "new_user") { mainContent = } else { if (this.state.user.isUser()) mainContent = Scheduled transactions go here... Budgets go here... Reports go here... else mainContent =

MoneyGo

Go manage your money.

} return (
{mainContent}
); } }); React.render(, document.getElementById("content"));