Routing interface

.htaccess

@@ -1,9 +1,11 @@
 php_flag display_errors on
 Options -Indexes
 
+RedirectMatch 404 /\.idea
 RedirectMatch 404 /\.git
 RedirectMatch 404 /src
 RedirectMatch 404 /test
+RedirectMatch 404 /core
 
 RewriteEngine On
 RewriteRule ^api(/.*)?$ /index.php?api=$1 [L,QSA]

core/Api/Parameter/Parameter.class.php

@@ -16,6 +16,8 @@ class Parameter {
 
   // only internal access
   const TYPE_RAW       = 8;
+
+  // only json will work here i guess
   const TYPE_ARRAY     = 9;
 
   const names = array('Integer', 'Float', 'Boolean', 'String', 'Date', 'Time', 'DateTime', 'E-Mail', 'Raw', 'Array');

core/Api/Routes/Fetch.class.php

@@ -38,7 +38,7 @@ class Fetch extends Request {
           "request" => $row["request"],
           "action"  => $row["action"],
           "target"  => $row["target"],
-          "extra"   => $row["extra"],
+          "extra"   => $row["extra"] ?? "",
           "active"  => intval($row["active"]),
         );
       }

core/Api/Routes/Save.class.php

@@ -0,0 +1,99 @@
+<?php
+
+namespace Api\Routes;
+
+use Api\Parameter\Parameter;
+use \Api\Request;
+
+class Save extends Request {
+
+  private array $routes;
+
+  public function __construct($user, $externalCall = false) {
+    parent::__construct($user, $externalCall, array(
+      'routes' => new Parameter('routes',Parameter::TYPE_ARRAY, false)
+    ));
+
+    $this->loginRequired = true;
+    $this->csrfTokenRequired = true;
+    $this->requiredGroup = USER_GROUP_ADMIN;
+  }
+
+  public function execute($values = array()) {
+    if(!parent::execute($values)) {
+      return false;
+    }
+
+    if (!$this->validateRoutes()) {
+      return false;
+    }
+
+
+    $sql = $this->user->getSQL();
+
+    // DELETE old rules
+    $this->success = ($sql->truncate("Route")->execute() !== FALSE);
+    $this->lastError = $sql->getLastError();
+
+    // INSERT new routes
+    if ($this->success) {
+      $stmt = $sql->insert("Route", array("request", "action", "target", "extra", "active"));
+      foreach($this->routes as $route) {
+        $stmt->addRow($route["request"], $route["action"], $route["target"], $route["extra"], $route["active"]);
+      }
+      $this->success = ($stmt->execute() !== FALSE);
+      $this->lastError = $sql->getLastError();
+    }
+
+    return $this->success;
+  }
+
+  private function validateRoutes() {
+
+    $this->routes = array();
+    $keys = array(
+      "request" => Parameter::TYPE_STRING,
+      "action" => Parameter::TYPE_STRING,
+      "target" => Parameter::TYPE_STRING,
+      "extra"  => Parameter::TYPE_STRING,
+      "active" => Parameter::TYPE_BOOLEAN
+    );
+
+    $actions = array(
+      "redirect_temporary", "redirect_permanently", "static", "dynamic"
+    );
+
+    foreach($this->getParam("routes") as $index => $route) {
+      foreach($keys as $key => $expectedType) {
+        if (!array_key_exists($key, $route)) {
+          return $this->createError("Route $index missing key: $key");
+        }
+
+        $value = $route[$key];
+        $type = Parameter::parseType($value);
+        if ($type !== $expectedType && ($key !== "active" || !is_null($value))) {
+          $expectedTypeName = Parameter::names[$expectedType];
+          $gotTypeName = Parameter::names[$type];
+          return $this->createError("Route $index has invalid value for key: $key, expected: $expectedTypeName, got: $gotTypeName");
+        }
+      }
+
+      $action = $route["action"];
+      if (!in_array($action, $actions)) {
+        return $this->createError("Invalid action: $action");
+      }
+
+      if(empty($route["request"])) {
+        return $this->createError("Request cannot be empty.");
+      }
+
+      if(empty($route["target"])) {
+        return $this->createError("Target cannot be empty.");
+      }
+
+      $this->routes[] = $route;
+    }
+
+    return true;
+  }
+}

core/Configuration/CreateDatabase.class.php

@@ -129,8 +129,7 @@ class CreateDatabase {
       ->primaryKey("uid");
 
     $queries[] = $sql->insert("Route", array("request", "action", "target"))
-      ->addRow("/admin(/.*)?", "dynamic", "\\Core\\Documents\\AdminDashboard")
-      ->addRow("/api/(.*)", "dynamic", "\\Core\\Api\\$1");
+      ->addRow("/admin(/.*)?", "dynamic", "\\Documents\\AdminDashboard");
 
     return $queries;
   }

js/admin.min.js

@@ -7559,7 +7559,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return API; });\n/* harmony import */ var babel_polyfill__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babel-polyfill */ \"./node_modules/babel-polyfill/lib/index.js\");\n/* harmony import */ var babel_polyfill__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babel_polyfill__WEBPACK_IMPORTED_MODULE_0__);\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\n\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err); } _next(undefined); }); }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _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); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\n\n\nvar API = /*#__PURE__*/function () {\n  function API() {\n    _classCallCheck(this, API);\n\n    this.loggedIn = false;\n    this.user = {};\n  }\n\n  _createClass(API, [{\n    key: \"csrfToken\",\n    value: function csrfToken() {\n      return this.loggedIn ? this.user.session.csrf_token : null;\n    }\n  }, {\n    key: \"apiCall\",\n    value: function () {\n      var _apiCall = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(method, params) {\n        var response;\n        return regeneratorRuntime.wrap(function _callee$(_context) {\n          while (1) {\n            switch (_context.prev = _context.next) {\n              case 0:\n                params = params || {};\n                params.csrf_token = this.csrfToken();\n                _context.next = 4;\n                return fetch(\"/api/\" + method, {\n                  method: 'post',\n                  headers: {\n                    'Content-Type': 'application/json'\n                  },\n                  body: JSON.stringify(params)\n                });\n\n              case 4:\n                response = _context.sent;\n                _context.next = 7;\n                return response.json();\n\n              case 7:\n                return _context.abrupt(\"return\", _context.sent);\n\n              case 8:\n              case \"end\":\n                return _context.stop();\n            }\n          }\n        }, _callee, this);\n      }));\n\n      function apiCall(_x, _x2) {\n        return _apiCall.apply(this, arguments);\n      }\n\n      return apiCall;\n    }()\n  }, {\n    key: \"fetchUser\",\n    value: function () {\n      var _fetchUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {\n        var response, data;\n        return regeneratorRuntime.wrap(function _callee2$(_context2) {\n          while (1) {\n            switch (_context2.prev = _context2.next) {\n              case 0:\n                _context2.next = 2;\n                return fetch(\"/api/user/info\");\n\n              case 2:\n                response = _context2.sent;\n                _context2.next = 5;\n                return response.json();\n\n              case 5:\n                data = _context2.sent;\n                this.user = data[\"user\"];\n                this.loggedIn = data[\"loggedIn\"];\n                return _context2.abrupt(\"return\", data && data.success && data.loggedIn);\n\n              case 9:\n              case \"end\":\n                return _context2.stop();\n            }\n          }\n        }, _callee2, this);\n      }));\n\n      function fetchUser() {\n        return _fetchUser.apply(this, arguments);\n      }\n\n      return fetchUser;\n    }()\n  }, {\n    key: \"logout\",\n    value: function () {\n      var _logout = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {\n        return regeneratorRuntime.wrap(function _callee3$(_context3) {\n          while (1) {\n            switch (_context3.prev = _context3.next) {\n              case 0:\n                return _context3.abrupt(\"return\", this.apiCallLine truncated
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return API; });\n/* harmony import */ var babel_polyfill__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babel-polyfill */ \"./node_modules/babel-polyfill/lib/index.js\");\n/* harmony import */ var babel_polyfill__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babel_polyfill__WEBPACK_IMPORTED_MODULE_0__);\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\n\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err); } _next(undefined); }); }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _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); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\n\n\nvar API = /*#__PURE__*/function () {\n  function API() {\n    _classCallCheck(this, API);\n\n    this.loggedIn = false;\n    this.user = {};\n  }\n\n  _createClass(API, [{\n    key: \"csrfToken\",\n    value: function csrfToken() {\n      return this.loggedIn ? this.user.session.csrf_token : null;\n    }\n  }, {\n    key: \"apiCall\",\n    value: function () {\n      var _apiCall = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(method, params) {\n        var response;\n        return regeneratorRuntime.wrap(function _callee$(_context) {\n          while (1) {\n            switch (_context.prev = _context.next) {\n              case 0:\n                params = params || {};\n                params.csrf_token = this.csrfToken();\n                _context.next = 4;\n                return fetch(\"/api/\" + method, {\n                  method: 'post',\n                  headers: {\n                    'Content-Type': 'application/json'\n                  },\n                  body: JSON.stringify(params)\n                });\n\n              case 4:\n                response = _context.sent;\n                _context.next = 7;\n                return response.json();\n\n              case 7:\n                return _context.abrupt(\"return\", _context.sent);\n\n              case 8:\n              case \"end\":\n                return _context.stop();\n            }\n          }\n        }, _callee, this);\n      }));\n\n      function apiCall(_x, _x2) {\n        return _apiCall.apply(this, arguments);\n      }\n\n      return apiCall;\n    }()\n  }, {\n    key: \"fetchUser\",\n    value: function () {\n      var _fetchUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {\n        var response, data;\n        return regeneratorRuntime.wrap(function _callee2$(_context2) {\n          while (1) {\n            switch (_context2.prev = _context2.next) {\n              case 0:\n                _context2.next = 2;\n                return fetch(\"/api/user/info\");\n\n              case 2:\n                response = _context2.sent;\n                _context2.next = 5;\n                return response.json();\n\n              case 5:\n                data = _context2.sent;\n                this.user = data[\"user\"];\n                this.loggedIn = data[\"loggedIn\"];\n                return _context2.abrupt(\"return\", data && data.success && data.loggedIn);\n\n              case 9:\n              case \"end\":\n                return _context2.stop();\n            }\n          }\n        }, _callee2, this);\n      }));\n\n      function fetchUser() {\n        return _fetchUser.apply(this, arguments);\n      }\n\n      return fetchUser;\n    }()\n  }, {\n    key: \"logout\",\n    value: function () {\n      var _logout = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {\n        return regeneratorRuntime.wrap(function _callee3$(_context3) {\n          while (1) {\n            switch (_context3.prev = _context3.next) {\n              case 0:\n                return _context3.abrupt(\"return\", this.apiCallLine truncated
 
 /***/ }),
 
@@ -7713,7 +7713,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return PageOverview; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _elements_alert__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../elements/alert */ \"./src/elements/alert.js\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/esm/react-router-dom.js\");\n/* harmony import */ var _elements_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../elements/icon */ \"./src/elements/icon.js\");\n/* harmony import */ var react_tooltip__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-tooltip */ \"./node_modules/react-tooltip/dist/index.es.js\");\n/* harmony import */ var react_select__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-select */ \"./node_modules/react-select/dist/react-select.browser.esm.js\");\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _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; }\n\nfunction _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); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _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); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _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); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _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); }; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { ifLine truncated
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return PageOverview; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _elements_alert__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../elements/alert */ \"./src/elements/alert.js\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/esm/react-router-dom.js\");\n/* harmony import */ var _elements_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../elements/icon */ \"./src/elements/icon.js\");\n/* harmony import */ var react_tooltip__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-tooltip */ \"./node_modules/react-tooltip/dist/index.es.js\");\n/* harmony import */ var react_select__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-select */ \"./node_modules/react-select/dist/react-select.browser.esm.js\");\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _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; }\n\nfunction _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); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _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); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _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); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _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); }; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { ifLine truncated
 
 /***/ }),
 

src/src/api.js

@@ -61,4 +61,8 @@ export default class API {
     async getRoutes() {
         return this.apiCall("routes/fetch");
     }
+
+    async saveRoutes(routes) {
+        return this.apiCall("routes/save", { "routes": routes });
+    }
 };

src/src/views/pages.js

@@ -15,22 +15,31 @@ export default class PageOverview extends React.Component {
 
         this.state = {
             routes: [],
-            errors: []
+            errors: [],
+            isResetting: false,
+            isSaving: false
         };
 
-        this.options = {
+        this.optionMap = {
             "redirect_temporary": "Redirect Temporary",
             "redirect_permanently": "Redirect Permanently",
             "static": "Serve Static",
             "dynamic": "Load Dynamic",
         };
+
+        this.options = [];
+        for (let key in this.optionMap) {
+            this.options.push(this.buildOption(key));
+        }
     }
 
     buildOption(key) {
         if (typeof key === 'object' && key.hasOwnProperty("key") && key.hasOwnProperty("label")) {
             return key;
+        } else if (typeof key === 'string') {
+            return { value: key, label: this.optionMap[key] };
         } else {
-            return { value: key, label: this.options[key] };
+            return this.options[key];
         }
     }
 
@@ -43,15 +52,7 @@ export default class PageOverview extends React.Component {
     }
 
     componentDidMount() {
-        this.parent.api.getRoutes().then((res) => {
-            if (res.success) {
-                this.setState({...this.state, routes: res.routes});
-            } else {
-                let errors = this.state.errors.slice();
-                errors.push({ title: "Error fetching routes", message: res.msg });
-                this.setState({...this.state, errors: errors});
-            }
-        });
+        this.fetchRoutes()
     }
 
     render() {
@@ -63,27 +64,41 @@ export default class PageOverview extends React.Component {
             errors.push(<Alert key={"error-" + i} onClose={() => this.removeError(i)} {...this.state.errors[i]}/>)
         }
 
-        let options = [];
-        for (let key in Object.keys(this.options)) {
-            options.push(this.buildOption(key));
-        }
+        const inputStyle = { fontFamily: "Courier", paddingTop: "14px" };
 
         for (let i = 0; i <  this.state.routes.length; i++) {
             let route = this.state.routes[i];
             rows.push(
                 <tr key={"route-" + i}>
-                    <td className={"align-middle"}>{route.request}</td>
-                    <td className={"text-center"}>
-                        <Select options={options} value={this.buildOption(route.action)} onChange={(selectedOption) => this.changeAction(i, selectedOption)} />
+                    <td className={"align-middle"}>
+                        <input type={"text"} maxLength={128} style={inputStyle} className={"form-control"}
+                               value={route.request} onChange={(e) => this.changeRequest(i, e)} />
+                    </td>
+                    <td className={"text-center"}>
+                        <Select options={this.options} value={this.buildOption(route.action)} onChange={(selectedOption) => this.changeAction(i, selectedOption)} />
+                    </td>
+                    <td className={"align-middle"}>
+                        <input type={"text"} maxLength={128} style={inputStyle} className={"form-control"}
+                               value={route.target} onChange={(e) => this.changeTarget(i, e)} />
+                    </td>
+                    <td className={"align-middle"}>
+                        <input type={"text"} maxLength={64} style={inputStyle} className={"form-control"}
+                               value={route.extra} onChange={(e) => this.changeExtra(i, e)} />
                     </td>
-                    <td className={"align-middle"}>{route.target}</td>
-                    <td className={"align-middle"}>{route.extra}</td>
                     <td className={"text-center"}>
                         <input
                             type={"checkbox"}
                             checked={route.active === 1}
                             onChange={(e) => this.changeActive(i, e)} />
                     </td>
+                    <td>
+                        <ReactTooltip id={"delete-" + i} />
+                        <Icon icon={"trash"} style={{color: "red", cursor: "pointer"}}
+                              data-tip={"Click to delete this route"}
+                              data-type={"warning"} data-place={"right"}
+                              data-for={"delete-" + i} data-effect={"solid"}
+                              onClick={() => this.removeRoute(i)}/>
+                    </td>
                 </tr>
             );
         }
@@ -108,76 +123,152 @@ export default class PageOverview extends React.Component {
                 {errors}
                 <div className={"content-fluid"}>
                     <div className={"row"}>
-                        <div className={"col-lg-8 col-12"}>
+                        <div className={"col-lg-10 col-12"}>
                             <table className={"table"}>
                                 <thead className={"thead-dark"}>
                                     <tr>
-                                        <td>
+                                        <th>
                                             Request&nbsp;
-                                            <Icon icon={"question-circle"} style={{"color": "#0069d9"}}
+                                            <Icon icon={"question-circle"} style={{"color": "#17a2b8"}}
                                                   data-tip={"The request, the user is making. Can also be interpreted as a regular expression."}
-                                                  data-type={"info"} data-place={"bottom"} data-effect={"solid"}/>
-                                        </td>
-                                        <td style={{minWidth: "250px"}}>
+                                                  data-type={"info"} data-place={"bottom"}/>
+                                        </th>
+                                        <th style={{minWidth: "250px"}}>
                                             Action&nbsp;
-                                            <Icon icon={"question-circle"} style={{"color": "#0069d9"}}
+                                            <Icon icon={"question-circle"} style={{"color": "#17a2b8"}}
                                                   data-tip={"The action to be taken"}
-                                                  data-type={"info"} data-place={"bottom"} data-effect={"solid"}/>
-                                        </td>
-                                        <td>
+                                                  data-type={"info"} data-place={"bottom"}/>
+                                        </th>
+                                        <th>
                                             Target&nbsp;
-                                            <Icon icon={"question-circle"} style={{"color": "#0069d9"}}
+                                            <Icon icon={"question-circle"} style={{"color": "#17a2b8"}}
                                                   data-tip={"Any URL if action is redirect or static. Path to a class inheriting from Document, " +
                                                   "if dynamic is chosen"}
-                                                  data-type={"info"} data-place={"bottom"} data-effect={"solid"}/>
-                                        </td>
-                                        <td>
+                                                  data-type={"info"} data-place={"bottom"}/>
+                                        </th>
+                                        <th>
                                             Extra&nbsp;
-                                            <Icon icon={"question-circle"} style={{"color": "#0069d9"}}
+                                            <Icon icon={"question-circle"} style={{"color": "#17a2b8"}}
                                                   data-tip={"If action is dynamic, a view name can be entered here, otherwise leave empty."}
-                                                  data-type={"info"} data-place={"bottom"} data-effect={"solid"}/>
-                                        </td>
-                                        <td className={"text-center"}>
+                                                  data-type={"info"} data-place={"bottom"}/>
+                                        </th>
+                                        <th className={"text-center"}>
                                             Active&nbsp;
-                                            <Icon icon={"question-circle"} style={{"color": "#0069d9"}}
+                                            <Icon icon={"question-circle"} style={{"color": "#17a2b8"}}
                                                   data-tip={"True, if the route is currently active."}
-                                                  data-type={"info"} data-place={"bottom"} data-effect={"solid"}/>
-                                        </td>
+                                                  data-type={"info"} data-place={"bottom"}/>
+                                        </th>
+                                        <th/>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     {rows}
                                 </tbody>
                             </table>
+                            <div>
+                                <button className={"btn btn-info"} onClick={() => this.onAddRoute()} disabled={this.state.isResetting || this.state.isSaving}>
+                                    <Icon icon={"plus"}/>&nbsp;Add new Route
+                                </button>
+                                <button className={"btn btn-secondary ml-2"} onClick={() => this.onResetRoutes()} disabled={this.state.isResetting || this.state.isSaving}>
+                                    { this.state.isResetting ? <span>Resetting&nbsp;<Icon icon={"circle-notch"}/></span> : "Reset" }
+                                </button>
+                                <button className={"btn btn-success ml-2"} onClick={() => this.onSaveRoutes()} disabled={this.state.isResetting || this.state.isSaving}>
+                                    { this.state.isSaving ? <span>Saving&nbsp;<Icon icon={"circle-notch"}/></span> : "Save" }
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <ReactTooltip/>
+            <ReactTooltip data-effect={"solid"}/>
         </>
     }
 
-    changeAction(index, selectedOption) {
+    onResetRoutes() {
+        this.setState({ ...this.state, isResetting: true });
+        this.fetchRoutes();
+    }
+
+    onSaveRoutes() {
+        this.setState({ ...this.state, isSaving: true });
+
+        let routes = [];
+        for (let i = 0; i < this.state.routes.length; i++) {
+            let route = this.state.routes[i];
+            routes.push({
+                request: route.request,
+                action: typeof route.action === 'object' ? route.action.value : route.action,
+                target: route.target,
+                extra: route.extra ?? "",
+                active: route.active === 1
+            });
+        }
+
+        this.parent.api.saveRoutes(routes).then((res) => {
+            if (res.success) {
+                this.setState({...this.state, isSaving: false});
+            } else {
+                let errors = this.state.errors.slice();
+                errors.push({ title: "Error saving routes", message: res.msg });
+                this.setState({...this.state, errors: errors, isSaving: false});
+            }
+        });
+    }
+
+    changeRoute(index, key, value) {
         if (index < 0 || index >= this.state.routes.length)
             return;
 
         let routes = this.state.routes.slice();
-        routes[index].action = selectedOption;
-        this.setState({
-            ...this.state,
-            routes: routes
-        });
+        routes[index][key] = value;
+        this.setState({ ...this.state, routes: routes });
+    }
+
+    removeRoute(index) {
+        if (index < 0 || index >= this.state.routes.length)
+            return;
+        let routes = this.state.routes.slice();
+        routes.splice(index, 1);
+        this.setState({ ...this.state, routes: routes });
+    }
+
+
+    onAddRoute() {
+        let routes = this.state.routes.slice();
+        routes.push({ request: "", action: "dynamic", target: "", extra: "", active: 1 });
+        this.setState({ ...this.state, routes: routes });
+    }
+
+    changeAction(index, selectedOption) {
+        this.changeRoute(index, "action", selectedOption);
     }
 
     changeActive(index, e) {
-        if (index < 0 || index >= this.state.routes.length)
-            return;
+        this.changeRoute(index, "active", e.target.checked ? 1 : 0);
+    }
 
-        let routes = this.state.routes.slice();
-        routes[index].active = e.target.checked ? 1 : 0;
-        this.setState({
-            ...this.state,
-            routes: routes
+    changeRequest(index, e) {
+        this.changeRoute(index, "request", e.target.value);
+    }
+
+    changeTarget(index, e) {
+        this.changeRoute(index, "target", e.target.value);
+    }
+
+    changeExtra(index, e) {
+        this.changeRoute(index, "extra", e.target.value);
+    }
+
+    fetchRoutes() {
+        this.parent.api.getRoutes().then((res) => {
+            if (res.success) {
+                this.setState({...this.state, routes: res.routes, isResetting: false});
+                ReactTooltip.rebuild();
+            } else {
+                let errors = this.state.errors.slice();
+                errors.push({ title: "Error fetching routes", message: res.msg });
+                this.setState({...this.state, errors: errors, isResetting: false});
+            }
         });
     }
 }