roiact
Version:
298 lines (246 loc) • 14.3 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _semanticUiReact = require("semantic-ui-react");
var _apisauce = require("apisauce");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
//http://172.16.0.25/list.cgi
//Filters the given array to those which when passed into matcher return true
Array.prototype.where = function (matcher) {
var result = [];
for (var i = 0; i < this.length; i++) {
if (matcher(this[i])) {
result.push(this[i]);
}
}
return result;
};
function GetElementsByAttribute(doc, tag, attr, attrValue) {
//Get elements and convert to array
var elems = Array.prototype.slice.call(doc.getElementsByTagName(tag), 0); //Matches an element by its attribute and attribute value
var matcher = function matcher(el) {
return el.getAttribute(attr) === attrValue;
};
return elems.where(matcher);
} // define the api
var api = (0, _apisauce.create)({
baseURL: '../../axis-cgi/applications/',
headers: {
'Access-Control-Allow-Origin': '*'
}
}); // define the camera api
var cameraApi = (0, _apisauce.create)({
baseURL: '../OpenVPNSetup/',
headers: {
'Access-Control-Allow-Origin': '*'
}
});
var Manage = /*#__PURE__*/function (_Component) {
_inherits(Manage, _Component);
var _super = _createSuper(Manage);
function Manage(props) {
var _this;
_classCallCheck(this, Manage);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "state", {
activeIndex: 0
});
_defineProperty(_assertThisInitialized(_this), "handleClick", function (e, titleProps) {
var index = titleProps.index;
var activeIndex = _this.state.activeIndex;
var newIndex = activeIndex === index ? -1 : index;
_this.setState({
activeIndex: newIndex
});
});
_defineProperty(_assertThisInitialized(_this), "handleStartStop", function () {
_this.setState({
loading: true
});
/*setTimeout(function () { //Start the timer
this.setState({ loading: false, ssError: true }) //After 1 second
setTimeout(function () { //Start the timer
this.setState({ ssError: false }) //After 1 second
}.bind(this), 2000)
}.bind(this), 1000)*/
api.get('control.cgi', {
action: _this.state.running ? 'stop' : 'start',
package: 'OpenVPNSetup'
}).then(function (response) {
if (response.ok) {
console.log('OK'); //this.props.handleStartStop()
_this.checkRunning(true);
} else {
console.log('ERROR');
_this.setState({
loading: false,
ssError: true
});
}
});
});
_this.state = {
loading: true,
running: props.running,
ip: 'None'
};
return _this;
}
_createClass(Manage, [{
key: "checkRunning",
value: function checkRunning(update) {
var _this2 = this;
api.get('list.cgi').then(function (response) {
if (response.ok) {
console.log('OK');
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(response.data, "text/xml");
var elem = GetElementsByAttribute(xmlDoc, 'application', 'Name', 'OpenVPNSetup')[0];
_this2.setState({
loading: false,
running: elem.getAttribute('Status') === 'Running'
});
elem.getAttribute('Status') === 'Running' ? _this2.props.handleStarted() : _this2.props.handleStopped();
console.log(elem.getAttribute('Status'));
if (update) {
_this2.setState({
loading: false,
ssSuccess: true
});
}
} else {
console.log('ERROR');
_this2.setState({
loading: false,
apiError: true
});
}
});
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var _this3 = this;
this.checkRunning(false);
cameraApi.post('info.cgi', "ip").then(function (response) {
if (response.ok) {
console.log('OK');
_this3.setState({
loading: false,
ip: response.data.ip,
apiError: false
});
} else {
console.log('ERROR');
_this3.setState({
loading: false,
apiError: true
});
}
});
}
}, {
key: "render",
value: function render() {
var activeIndex = this.state.activeIndex;
return /*#__PURE__*/_react.default.createElement(_semanticUiReact.Dimmer.Dimmable, {
as: _semanticUiReact.Container,
dimmed: this.state.loading
}, /*#__PURE__*/_react.default.createElement(_semanticUiReact.Dimmer, {
active: this.state.loading,
inverted: true
}, /*#__PURE__*/_react.default.createElement(_semanticUiReact.Loader, {
size: "massive"
}, "Loading")), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Header, {
as: "h2",
textAlign: "center"
}, " Welcome "), /*#__PURE__*/_react.default.createElement("div", {
style: {
textAlign: 'center',
margin: '5%'
}
}, /*#__PURE__*/_react.default.createElement(_semanticUiReact.Checkbox, {
toggle: true,
label: "Start/Stop Plugin",
checked: this.state.running,
onChange: this.handleStartStop
}), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Message, {
hidden: !this.state.loading && !(this.state.ip === 'None'),
icon: "warning",
warning: true,
header: "Warning!",
content: "Not Connected!"
}), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Message, {
hidden: !this.state.loading && this.state.ip === 'None',
icon: "check",
success: true,
header: "Connected!",
content: 'IP info:' + this.state.ip
})), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Message, {
hidden: !this.state.ssSuccess,
icon: "check",
success: true,
header: "OK!",
content: this.props.running ? 'Plugin successfully started!' : 'Plugin successfully stopped!'
}), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Message, {
hidden: !this.state.ssError,
icon: "warning",
error: true,
header: "Error!",
content: this.props.running ? 'Plugin NOT started!' : 'Plugin NOT stopped!'
}), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Message, {
hidden: !this.state.apiError,
icon: "warning",
error: true,
header: "Error!",
content: this.state.running ? 'Server Error! Please check Logs' : 'Server Error! Please start the Client Plugin'
}), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Accordion, {
styled: true,
fluid: true
}, /*#__PURE__*/_react.default.createElement(_semanticUiReact.Accordion.Title, {
active: activeIndex === 0,
index: 0,
onClick: this.handleClick
}, /*#__PURE__*/_react.default.createElement(_semanticUiReact.Icon, {
name: "dropdown"
}), "Start/Stop Plugin"), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Accordion.Content, {
active: activeIndex === 0
}, /*#__PURE__*/_react.default.createElement("p", null, "Start the plugin, then update the configuration and login information")), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Accordion.Title, {
active: activeIndex === 1,
index: 1,
onClick: this.handleClick
}, /*#__PURE__*/_react.default.createElement(_semanticUiReact.Icon, {
name: "dropdown"
}), "Client Configuration"), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Accordion.Content, {
active: activeIndex === 1
}, /*#__PURE__*/_react.default.createElement("p", null, "A Client configuration file should provide all necessary information for the client to connect to the server. ", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "In case the OpenVPN server requires a client username/password authentication, client configuration should include a \"auth-user-pass /usr/local/packages/OpenVPNSetup/openvpn.pass\" line as shown below. Username and Password to be stored in /usr/local/packages/OpenVPNSetup/openvpn.pass should be provided in the following \"Login\" tab. ", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Segment, null, /*#__PURE__*/_react.default.createElement("pre", null, " ", "\nclient\nremote vpn-server-ip port\ndev tun\nproto tcp\nup-restart\nnobind\npersist-key\npersist-tun\ncomp-lzo adaptive\nkeepalive 30 120\ntls-client\npull\n;auth-nocache\nremote-cert-tls server\nauth-user-pass /usr/local/packages/OpenVPNSetup/openvpn.pass \nscript-security 2\n<ca>\n-----BEGIN CERTIFICATE-----\n....\n-----END CERTIFICATE-----\n</ca>\nkey-direction 1\n<tls-auth>\n\n-----BEGIN OpenVPN Static key V1-----\n....\n-----END OpenVPN Static key V1-----\n</tls-auth>")))), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Accordion.Title, {
active: activeIndex === 2,
index: 2,
onClick: this.handleClick
}, /*#__PURE__*/_react.default.createElement(_semanticUiReact.Icon, {
name: "dropdown"
}), "Login"), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Accordion.Content, {
active: activeIndex === 2
}, /*#__PURE__*/_react.default.createElement("p", null, "Set client autentication user/password"))));
}
}]);
return Manage;
}(_react.Component);
var _default = Manage;
exports.default = _default;