1
0
mirror of https://github.com/aclindsa/moneygo.git synced 2024-11-01 08:20:05 -04:00
moneygo/js/components/TopBar.js

132 lines
3.3 KiB
JavaScript

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;
class LoginBar extends React.Component {
constructor() {
super();
this.state = {username: '', password: ''};
this.onSubmit = this.handleSubmit.bind(this);
this.onNewUserSubmit = this.handleNewUserSubmit.bind(this);
}
onUsernameChange(e) {
this.setState({username: e.target.value});
}
onPasswordChange(e) {
this.setState({password: e.target.value});
}
handleSubmit(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(e) {
e.preventDefault();
this.props.onCreateNewUser();
}
render() {
return (
<form onSubmit={this.onSubmit}>
<FormGroup>
<Row>
<Col xs={4}></Col>
<Col xs={2}>
<Button bsStyle="link"
onClick={this.onNewUserSubmit}>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>
);
}
}
class LogoutBar extends React.Component {
constructor() {
super();
this.onSelect = this.handleOnSelect.bind(this);
}
handleOnSelect(key) {
if (key == 1) {
if (this.props.onAccountSettings != null)
this.props.onAccountSettings();
} else if (key == 2) {
this.props.onLogout();
}
}
render() {
var signedInString = "Signed in as "+this.props.user.Name;
return (
<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.onSelect} bsStyle="info">
<MenuItem eventKey={1}>Account Settings</MenuItem>
<MenuItem eventKey={2}>Logout</MenuItem>
</DropdownButton>
</div>
</Col>
</Row>
</FormGroup>
);
}
}
class TopBar extends React.Component {
render() {
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>
);
}
}
module.exports = TopBar;