catreact
Version:
Catavolt Core React Components
78 lines (77 loc) • 5.52 kB
JavaScript
/**
* Created by rburson on 3/14/16.
*/
"use strict";
var React = require('react');
var catreact_core_1 = require('./../core/catreact-core');
/*
***************************************************
* Render a LoginPanel
***************************************************
*/
exports.CvLoginPanel = React.createClass({
mixins: [catreact_core_1.CvBaseMixin],
getChildContext: function () {
return this.getDefaultChildContext();
},
getDefaultProps: function () {
return {
loginListeners: [],
defaultClientType: 'RICH_CLIENT',
defaultGatewayUrl: 'www.catavolt.net',
defaultPassword: '',
defaultTenantId: '',
defaultUserId: '',
showClientType: true,
showGatewayUrl: true,
showTenantId: true
};
},
getInitialState: function () {
return {
tenantId: this.props.defaultTenantId,
gatewayUrl: this.props.defaultGatewayUrl,
userId: this.props.defaultUserId,
password: this.props.defaultPassword,
clientType: this.props.defaultClientType,
loggedIn: false
};
},
render: function () {
var _this = this;
return (React.createElement(catreact_core_1.CvLogin, {loginListeners: this.props.loginListeners, renderer: function (cvContext, callback) {
if (!callback.isLoggedIn()) {
return (React.createElement("div", {className: "well cv-login-form-container animated fadeIn"}, React.createElement("form", {className: "form-horizontal cv-login-form", onSubmit: _this.handleSubmit.bind(_this, callback)}, (function () {
if (_this.props.showTenantId) {
return (React.createElement("div", {className: "form-group"}, React.createElement("label", {htmlFor: "tenantId", className: "col-sm-2 control-label"}, "Tenant Id:"), React.createElement("div", {className: "col-sm-10"}, React.createElement("input", {id: "tenantId", type: "text", className: "form-control", value: _this.state.tenantId, onChange: _this.handleChange.bind(_this, 'tenantId'), required: true}))));
}
})(), (function () {
if (_this.props.showGatewayUrl) {
return (React.createElement("div", {className: "form-group"}, React.createElement("label", {htmlFor: "gatewayUrl", className: "col-sm-2 control-label"}, "Gateway URL:"), React.createElement("div", {className: "col-sm-10"}, React.createElement("div", {className: "input-group"}, React.createElement("input", {id: "gatewayUrl", type: "text", className: "form-control", value: _this.state.gatewayUrl, onChange: _this.handleChange.bind(_this, 'gatewayUrl'), "aria-describedby": "http-addon", required: true})))));
}
})(), React.createElement("div", {className: "form-group"}, React.createElement("label", {htmlFor: "userId", className: "col-sm-2 control-label"}, "User Id:"), React.createElement("div", {className: "col-sm-10"}, React.createElement("input", {id: "userId", type: "text", className: "form-control", value: _this.state.userId, onChange: _this.handleChange.bind(_this, 'userId'), required: true}))), React.createElement("div", {className: "form-group"}, React.createElement("label", {htmlFor: "password", className: "col-sm-2 control-label"}, "Password:"), React.createElement("div", {className: "col-sm-10"}, React.createElement("input", {id: "password", type: "password", className: "form-control", value: _this.state.password, onChange: _this.handleChange.bind(_this, 'password'), required: true}))), (function () {
if (_this.props.showClientType) {
return (React.createElement("div", {className: "form-group"}, React.createElement("label", {htmlFor: "clientType", className: "col-sm-2 control-label"}, "Client Type:"), React.createElement("div", {className: "col-sm-10"}, React.createElement("label", {className: "radio-inline"}, React.createElement("input", {id: "clientType", type: "radio", onChange: _this.handleRadioChange.bind(_this, 'clientType', 'LIMITED_ACCESS'), checked: _this.state.clientType === 'LIMITED_ACCESS'}), "Limited"), React.createElement("label", {className: "radio-inline"}, React.createElement("input", {id: "clientType", type: "radio", onChange: _this.handleRadioChange.bind(_this, 'clientType', 'RICH_CLIENT'), checked: _this.state.clientType === 'RICH_CLIENT'}), "Rich"))));
}
})(), React.createElement("div", {className: "form-group"}, React.createElement("div", {className: "col-sm-10 col-sm-offset-2"}, React.createElement("button", {type: "submit", className: "btn btn-default btn-primary btn-block", value: "Login"}, "Login", React.createElement("span", {className: "glyphicon glyphicon-log-in", "aria-hidden": "true"})))))));
}
else {
return null;
}
}}));
},
handleChange: function (field, e) {
var nextState = {};
nextState[field] = e.target.value;
this.setState(nextState);
},
handleRadioChange: function (field, value, e) {
var nextState = {};
nextState[field] = value;
this.setState(nextState);
},
handleSubmit: function (callback, e) {
e.preventDefault();
callback.login(this.state.gatewayUrl, this.state.tenantId, this.state.clientType, this.state.userId, this.state.password);
},
});