Initial commit
This commit is contained in:
158
js/components/AccountSettingsModal.js
Normal file
158
js/components/AccountSettingsModal.js
Normal file
@ -0,0 +1,158 @@
|
||||
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 Form = ReactBootstrap.Form;
|
||||
var FormGroup = ReactBootstrap.FormGroup;
|
||||
var FormControl = ReactBootstrap.FormControl;
|
||||
var ControlLabel = ReactBootstrap.ControlLabel;
|
||||
var Col = ReactBootstrap.Col;
|
||||
|
||||
var User = require('../models').User;
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: "AccountSettingsModal",
|
||||
_getInitialState: function(props) {
|
||||
return {error: "",
|
||||
name: props.user.Name,
|
||||
username: props.user.Username,
|
||||
email: props.user.Email,
|
||||
password: models.BogusPassword,
|
||||
confirm_password: models.BogusPassword,
|
||||
passwordChanged: false,
|
||||
initial_password: models.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 (ReactDOM.findDOMNode(this.refs.password).value != this.state.initial_password)
|
||||
this.setState({passwordChanged: true});
|
||||
this.setState({
|
||||
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) {
|
||||
var u = new User();
|
||||
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 = models.BogusPassword;
|
||||
}
|
||||
|
||||
this.props.onUpdateUser(u);
|
||||
this.props.onSubmit();
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<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>
|
||||
<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"/>
|
||||
</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"/>
|
||||
</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"/>
|
||||
<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"/>
|
||||
<FormControl.Feedback/>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
});
|
||||
95
js/components/LunchApp.js
Normal file
95
js/components/LunchApp.js
Normal file
@ -0,0 +1,95 @@
|
||||
var React = require('react');
|
||||
|
||||
var ReactBootstrap = require('react-bootstrap');
|
||||
var Jumbotron = ReactBootstrap.Jumbotron;
|
||||
var Tabs = ReactBootstrap.Tabs;
|
||||
var Tab = ReactBootstrap.Tab;
|
||||
var Modal = ReactBootstrap.Modal;
|
||||
|
||||
var TopBarContainer = require('../containers/TopBarContainer');
|
||||
var NewUserForm = require('./NewUserForm');
|
||||
var AccountSettingsModalContainer = require('../containers/AccountSettingsModalContainer');
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: "LunchApp",
|
||||
getInitialState: function() {
|
||||
return {
|
||||
hash: "home",
|
||||
showAccountSettingsModal: false
|
||||
};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this.props.tryResumingSession();
|
||||
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});
|
||||
},
|
||||
handleAccountSettings: function() {
|
||||
this.setState({showAccountSettingsModal: true});
|
||||
},
|
||||
handleSettingsSubmitted: function(user) {
|
||||
this.setState({
|
||||
showAccountSettingsModal: false
|
||||
});
|
||||
},
|
||||
handleSettingsCanceled: function() {
|
||||
this.setState({showAccountSettingsModal: false});
|
||||
},
|
||||
handleCreateNewUser: function() {
|
||||
this.setHash("new_user");
|
||||
},
|
||||
handleGoHome: function() {
|
||||
this.setHash("home");
|
||||
},
|
||||
render: function() {
|
||||
var mainContent;
|
||||
if (this.state.hash == "new_user") {
|
||||
mainContent = <NewUserForm onNewUser={this.handleGoHome} onCancel={this.handleGoHome}/>
|
||||
} else {
|
||||
if (this.props.user.isUser())
|
||||
mainContent = (
|
||||
<Tabs defaultActiveKey={1} id='mainNavigationTabs'>
|
||||
<Tab title="Accounts" eventKey={1} >accounts
|
||||
</Tab>
|
||||
<Tab title="Securities" eventKey={2} >securities
|
||||
</Tab>
|
||||
<Tab title="Scheduled Transactions" eventKey={3} >Scheduled transactions go here...</Tab>
|
||||
<Tab title="Budgets" eventKey={4} >Budgets go here...</Tab>
|
||||
<Tab title="Reports" eventKey={5} >Reports go here...</Tab>
|
||||
</Tabs>);
|
||||
else
|
||||
mainContent = (
|
||||
<Jumbotron>
|
||||
<center>
|
||||
<h1>Lunch App</h1>
|
||||
</center>
|
||||
</Jumbotron>);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fullheight ui">
|
||||
<TopBarContainer
|
||||
onCreateNewUser={this.handleCreateNewUser}
|
||||
onAccountSettings={this.handleAccountSettings} />
|
||||
{mainContent}
|
||||
<AccountSettingsModalContainer
|
||||
show={this.state.showAccountSettingsModal}
|
||||
onSubmit={this.handleSettingsSubmitted}
|
||||
onCancel={this.handleSettingsCanceled}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
165
js/components/NewUserForm.js
Normal file
165
js/components/NewUserForm.js
Normal file
@ -0,0 +1,165 @@
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
|
||||
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');
|
||||
var User = models.User;
|
||||
var Error = models.Error;
|
||||
|
||||
module.exports = 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 (ReactDOM.findDOMNode(this.refs.password).value != this.state.initial_password)
|
||||
this.setState({passwordChanged: true});
|
||||
this.setState({
|
||||
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) {
|
||||
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 = <h3>Create New User</h3>;
|
||||
return (
|
||||
<Panel header={title} bsStyle="info">
|
||||
<span color="red">{this.state.error}</span>
|
||||
<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"/>
|
||||
</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"/>
|
||||
</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"/>
|
||||
<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"/>
|
||||
<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>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
});
|
||||
123
js/components/TopBar.js
Normal file
123
js/components/TopBar.js
Normal file
@ -0,0 +1,123 @@
|
||||
var React = require('react');
|
||||
|
||||
var ReactBootstrap = require('react-bootstrap');
|
||||
var Alert = ReactBootstrap.Alert;
|
||||
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').User;
|
||||
|
||||
const LoginBar = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {username: '', password: ''};
|
||||
},
|
||||
onUsernameChange: function(e) {
|
||||
this.setState({username: e.target.value});
|
||||
},
|
||||
onPasswordChange: function(e) {
|
||||
this.setState({password: e.target.value});
|
||||
},
|
||||
handleSubmit: function(e) {
|
||||
var user = new User();
|
||||
e.preventDefault();
|
||||
user.Username = ReactDOM.findDOMNode(this.refs.username).value;
|
||||
user.Password = ReactDOM.findDOMNode(this.refs.password).value;
|
||||
this.props.onLogin(user);
|
||||
},
|
||||
handleNewUserSubmit: function(e) {
|
||||
e.preventDefault();
|
||||
this.props.onCreateNewUser();
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<FormGroup>
|
||||
<Row>
|
||||
<Col xs={4}></Col>
|
||||
<Col xs={2}>
|
||||
<Button bsStyle="link"
|
||||
onClick={this.handleNewUserSubmit}>Create New User</Button>
|
||||
</Col>
|
||||
<Col xs={2}>
|
||||
<FormControl type="text"
|
||||
placeholder="Username..."
|
||||
ref="username"/>
|
||||
</Col>
|
||||
<Col xs={2}>
|
||||
<FormControl type="password"
|
||||
placeholder="Password..."
|
||||
ref="password"/>
|
||||
</Col>
|
||||
<Col xs={2}>
|
||||
<Button type="submit" bsStyle="primary" block>
|
||||
Login</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormGroup>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const LogoutBar = React.createClass({
|
||||
handleOnSelect: function(key) {
|
||||
if (key == 1) {
|
||||
if (this.props.onAccountSettings != null)
|
||||
this.props.onAccountSettings();
|
||||
} else if (key == 2) {
|
||||
this.props.onLogout();
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
var signedInString = "Signed in as "+this.props.user.Name;
|
||||
return (
|
||||
<FormGroup>
|
||||
<Row>
|
||||
<Col xs={2}><label className="control-label pull-left">Lunch App</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>
|
||||
</DropdownButton>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormGroup>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: "TopBar",
|
||||
render: function() {
|
||||
var barContents;
|
||||
var errorAlert;
|
||||
if (!this.props.user.isUser())
|
||||
barContents = <LoginBar onLogin={this.props.onLogin} onCreateNewUser={this.props.onCreateNewUser} />;
|
||||
else
|
||||
barContents = <LogoutBar user={this.props.user} onLogout={this.props.onLogout} onAccountSettings={this.props.onAccountSettings}/>;
|
||||
if (this.props.error.isError())
|
||||
errorAlert =
|
||||
<Alert bsStyle="danger" onDismiss={this.props.onClearError}>
|
||||
<h4>Error!</h4>
|
||||
<p>Error {this.props.error.ErrorId}: {this.props.error.ErrorString}</p>
|
||||
<Button onClick={this.props.onClearError}>Clear</Button>
|
||||
</Alert>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{barContents}
|
||||
{errorAlert}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user