import React, { PropTypes } from "react";
|
|
import { connect } from "react-redux";
|
|
|
|
import ControlRequest from "../utils/ControlRequest";
|
|
import propTypeSymbol from "../utils/propTypeSymbol";
|
|
import {
|
|
LOGIN_STATUS_UNKNOWN,
|
|
LOGIN_STATUS_PENDING,
|
|
LOGIN_STATUS_SUCCESS,
|
|
LOGIN_STATUS_FAILURE
|
|
} from "../constants/login";
|
|
|
|
const ID = "login-status-pane";
|
|
|
|
class LoginStatusPane extends React.Component
|
|
{
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.props.socketSend(ControlRequest.loginStatus());
|
|
}
|
|
|
|
render_unknown() {
|
|
return (
|
|
<div id={ID}>
|
|
Fetching login status...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
render_pending() {
|
|
return (
|
|
<div id={ID}>
|
|
Logging in as {this.props.username}...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
render_success() {
|
|
let motd_element;
|
|
if (this.props.motd) {
|
|
motd_element = (
|
|
<span id="login-motd">
|
|
MOTD: {this.props.motd}
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<div id={ID}>
|
|
Logged in as {this.props.username}
|
|
{motd_element}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
render_failure() {
|
|
return (
|
|
<div id={ID}>
|
|
Failed to log in as {this.props.username}
|
|
<span id="login-reason">
|
|
Reason: {this.props.reason}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
switch (this.props.status) {
|
|
case LOGIN_STATUS_UNKNOWN:
|
|
return this.render_unknown();
|
|
case LOGIN_STATUS_PENDING:
|
|
return this.render_pending();
|
|
case LOGIN_STATUS_SUCCESS:
|
|
return this.render_success();
|
|
case LOGIN_STATUS_FAILURE:
|
|
return this.render_failure();
|
|
}
|
|
}
|
|
}
|
|
|
|
LoginStatusPane.propTypes = {
|
|
status: propTypeSymbol.isRequired,
|
|
username: PropTypes.string,
|
|
motd: PropTypes.string,
|
|
reason: PropTypes.string,
|
|
socketSend: PropTypes.func.isRequired
|
|
};
|
|
|
|
export default LoginStatusPane;
|