Group Creation

core/Api/GroupsAPI.class.php

@@ -2,8 +2,21 @@
 
 namespace Api {
 
+  use Driver\SQL\Condition\Compare;
+
   class GroupsAPI extends Request {
 
+    protected function groupExists($name) {
+      $sql = $this->user->getSQL();
+      $res = $sql->select($sql->count())
+        ->from("Group")
+        ->where(new Compare("name", $name))
+        ->execute();
+
+      $this->success = ($res !== FALSE);
+      $this->lastError = $sql->getLastError();
+      return $this->success && $res[0]["count"] > 0;
+    }
   }
 
 }
@@ -12,6 +25,7 @@ namespace Api\Groups {
 
   use Api\GroupsAPI;
   use Api\Parameter\Parameter;
+  use Api\Parameter\StringType;
 
   class Fetch extends GroupsAPI {
 
@@ -96,4 +110,53 @@ namespace Api\Groups {
     }
   }
 
+  class Create extends GroupsAPI {
+    public function __construct($user, $externalCall = false) {
+      parent::__construct($user, $externalCall, array(
+        'name' => new StringType('name', 32),
+        'color' => new StringType('color', 10),
+      ));
+
+      $this->loginRequired = true;
+      $this->requiredGroup = array(USER_GROUP_ADMIN);
+    }
+
+    public function execute($values = array()) {
+      if (!parent::execute($values)) {
+        return false;
+      }
+
+      $name = $this->getParam("name");
+      if (preg_match("/^[a-zA-Z][a-zA-Z0-9_-]*$/", $name) !== 1) {
+        return $this->createError("Invalid name");
+      }
+
+      $color = $this->getParam("color");
+      if (preg_match("/^#[a-fA-F0-9]{3,6}$/", $color) !== 1) {
+        return $this->createError("Invalid color");
+      }
+
+      $exists = $this->groupExists($name);
+      if (!$this->success) {
+        return false;
+      } else if ($exists) {
+        return $this->createError("A group with this name already exists");
+      }
+
+      $sql = $this->user->getSQL();
+      $res = $sql->insert("Group", array("name", "color"))
+        ->addRow($name, $color)
+        ->returning("uid")
+        ->execute();
+
+      $this->success = ($res !== FALSE);
+      $this->lastError = $sql->getLastError();
+
+      if ($this->success) {
+        $this->result["uid"] = $sql->getLastInsertId();
+      }
+
+      return $this->success;
+    }
+  }
 }

core/Api/UserAPI.class.php

@@ -118,7 +118,7 @@ namespace Api\User {
     public function __construct($user, $externalCall = false) {
       parent::__construct($user, $externalCall, array(
         'username' => new StringType('username', 32),
-        'email' => new StringType('email', 64, true),
+        'email' => new Parameter('email', Parameter::TYPE_EMAIL, true, NULL),
         'password' => new StringType('password'),
         'confirmPassword' => new StringType('confirmPassword'),
       ));
@@ -501,7 +501,7 @@ If the invitation was not intended, you can simply ignore this email.<br><br><a
     public function __construct($user, $externalCall = false) {
       parent::__construct($user, $externalCall, array(
         "username" => new StringType("username", 32),
-        "email" => new StringType("email", 64),
+        'email' => new Parameter('email', Parameter::TYPE_EMAIL),
         "password" => new StringType("password"),
         "confirmPassword" => new StringType("confirmPassword"),
       ));
@@ -608,7 +608,7 @@ If the registration was not intended, you can simply ignore this email.<br><br><
       parent::__construct($user, $externalCall, array(
         'id' => new Parameter('id', Parameter::TYPE_INT),
         'username' => new StringType('username', 32, true, NULL),
-        'email' => new StringType('email', 64, true, NULL),
+        'email' => new Parameter('email', Parameter::TYPE_EMAIL, true, NULL),
         'password' => new StringType('password', -1, true, NULL),
         'groups' => new Parameter('groups', Parameter::TYPE_ARRAY, true, NULL),
       ));

js/admin.min.js

@@ -7570,7 +7570,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, res;\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                res = _context.sent;\n\n                if (!res.success && res.msg === \"You are not logged in.\") {\n                  document.location.reload();\n                }\n\n                return _context.abrupt(\"return\", res);\n\n              case 10:\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: \"editUser\",\n    value: function () {\n      var _editUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(id, username, email, password, groups) {\n        returnLine 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, res;\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                res = _context.sent;\n\n                if (!res.success && res.msg === \"You are not logged in.\") {\n                  document.location.reload();\n                }\n\n                return _context.abrupt(\"return\", res);\n\n              case 10:\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: \"editUser\",\n    value: function () {\n      var _editUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(id, username, email, password, groups) {\n        returnLine truncated
 
 /***/ }),
 
@@ -7687,7 +7687,7 @@ eval("\nvar content = __webpack_require__(/*! !../../node_modules/css-loader/dis
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _include_adminlte_min_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./include/adminlte.min.css */ \"./src/include/adminlte.min.css\");\n/* harmony import */ var _include_adminlte_min_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_include_adminlte_min_css__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _include_index_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./include/index.css */ \"./src/include/index.css\");\n/* harmony import */ var _include_index_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_include_index_css__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _api_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./api.js */ \"./src/api.js\");\n/* harmony import */ var _header_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./header.js */ \"./src/header.js\");\n/* harmony import */ var _sidebar_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./sidebar.js */ \"./src/sidebar.js\");\n/* harmony import */ var _views_users_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./views/users.js */ \"./src/views/users.js\");\n/* harmony import */ var _views_overview_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./views/overview.js */ \"./src/views/overview.js\");\n/* harmony import */ var _views_adduser__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./views/adduser */ \"./src/views/adduser.js\");\n/* harmony import */ var _elements_icon__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./elements/icon */ \"./src/elements/icon.js\");\n/* harmony import */ var _elements_dialog__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./elements/dialog */ \"./src/elements/dialog.js\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/esm/react-router-dom.js\");\n/* harmony import */ var _404__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./404 */ \"./src/404.js\");\n/* harmony import */ var _views_logs__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./views/logs */ \"./src/views/logs.js\");\n/* harmony import */ var _views_pages__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./views/pages */ \"./src/views/pages.js\");\n/* harmony import */ var _views_help__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./views/help */ \"./src/views/help.js\");\n/* harmony import */ var _footer__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./footer */ \"./src/footer.js\");\n/* harmony import */ var _views_edituser__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./views/edituser */ \"./src/views/edituser.js\");\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 _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\nfunctiLine truncated
+eval("__webpack_require__.r(__webpack_exports__);\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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _include_adminlte_min_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./include/adminlte.min.css */ \"./src/include/adminlte.min.css\");\n/* harmony import */ var _include_adminlte_min_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_include_adminlte_min_css__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _include_index_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./include/index.css */ \"./src/include/index.css\");\n/* harmony import */ var _include_index_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_include_index_css__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _api_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./api.js */ \"./src/api.js\");\n/* harmony import */ var _header_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./header.js */ \"./src/header.js\");\n/* harmony import */ var _sidebar_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./sidebar.js */ \"./src/sidebar.js\");\n/* harmony import */ var _views_users_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./views/users.js */ \"./src/views/users.js\");\n/* harmony import */ var _views_overview_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./views/overview.js */ \"./src/views/overview.js\");\n/* harmony import */ var _views_adduser__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./views/adduser */ \"./src/views/adduser.js\");\n/* harmony import */ var _elements_icon__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./elements/icon */ \"./src/elements/icon.js\");\n/* harmony import */ var _elements_dialog__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./elements/dialog */ \"./src/elements/dialog.js\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/esm/react-router-dom.js\");\n/* harmony import */ var _404__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./404 */ \"./src/404.js\");\n/* harmony import */ var _views_logs__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./views/logs */ \"./src/views/logs.js\");\n/* harmony import */ var _views_pages__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./views/pages */ \"./src/views/pages.js\");\n/* harmony import */ var _views_help__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./views/help */ \"./src/views/help.js\");\n/* harmony import */ var _footer__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./footer */ \"./src/footer.js\");\n/* harmony import */ var _views_edituser__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./views/edituser */ \"./src/views/edituser.js\");\n/* harmony import */ var _views_addgroup__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./views/addgroup */ \"./src/views/addgroup.js\");\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 _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(soLine truncated
 
 /***/ }),
 
@@ -7703,6 +7703,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 
 /***/ }),
 
+/***/ "./src/views/addgroup.js":
+/*!*******************************!*\
+  !*** ./src/views/addgroup.js ***!
+  \*******************************/
+/*! exports provided: default */
+/***/ (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 CreateGroup; });\n/* harmony import */ var _elements_alert__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../elements/alert */ \"./src/elements/alert.js\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/esm/react-router-dom.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\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\");\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 _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 _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) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _isNativeReflectConstruct() { if (typeoLine truncated
+
+/***/ }),
+
 /***/ "./src/views/adduser.js":
 /*!******************************!*\
   !*** ./src/views/adduser.js ***!
@@ -7783,7 +7795,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 UserOverview; });\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_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../elements/icon */ \"./src/elements/icon.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 _global__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../global */ \"./src/global.js\");\n/* harmony import */ var _elements_alert__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../elements/alert */ \"./src/elements/alert.js\");\n/* harmony import */ var react_tooltip__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-tooltip */ \"./node_modules/react-tooltip/dist/index.es.js\");\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 _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 _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) { if (self === void 0) { throw new ReferenceError(\"this 
Line truncated
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return UserOverview; });\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_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../elements/icon */ \"./src/elements/icon.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 _global__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../global */ \"./src/global.js\");\n/* harmony import */ var _elements_alert__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../elements/alert */ \"./src/elements/alert.js\");\n/* harmony import */ var react_tooltip__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-tooltip */ \"./node_modules/react-tooltip/dist/index.es.js\");\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 _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 _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) { if (self === void 0) { throw new ReferenceError(\"this 
Line truncated
 
 /***/ })
 

src/src/api.js

@@ -80,6 +80,10 @@ export default class API {
     }
 
     async saveRoutes(routes) {
-        return this.apiCall("routes/save", { "routes": routes });
+        return this.apiCall("routes/save", { routes: routes });
+    }
+
+    async createGroup(name, color) {
+        return this.apiCall("groups/create", { name: name, color: color });
     }
 };

src/src/index.js

@@ -17,6 +17,7 @@ import PageOverview from "./views/pages";
 import HelpPage from "./views/help";
 import Footer from "./footer";
 import EditUser from "./views/edituser";
+import CreateGroup from "./views/addgroup";
 
 class AdminDashboard extends React.Component {
 
@@ -89,6 +90,7 @@ class AdminDashboard extends React.Component {
                 let newProps = {...props, ...this.controlObj};
                 return <EditUser {...newProps} />
               }}/>
+              <Route path={"/admin/group/add"}><CreateGroup {...this.controlObj} /></Route>
               <Route path={"/admin/logs"}><Logs {...this.controlObj} /></Route>
               <Route path={"/admin/pages"}><PageOverview {...this.controlObj} /></Route>
               <Route path={"/admin/help"}><HelpPage {...this.controlObj} /></Route>

src/src/views/addgroup.js

@@ -0,0 +1,115 @@
+import Alert from "../elements/alert";
+import {Link} from "react-router-dom";
+import * as React from "react";
+import Icon from "../elements/icon";
+import ReactTooltip from "react-tooltip";
+
+export default class CreateGroup extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            alerts: [],
+            isSubmitting: false,
+            name: "",
+            color: "#123456"
+        };
+
+        this.parent = {
+            api: props.api,
+        };
+    }
+
+    removeAlert(i) {
+        if (i >= 0 && i < this.state.alerts.length) {
+            let alerts = this.state.alerts.slice();
+            alerts.splice(i, 1);
+            this.setState({...this.state, alerts: alerts});
+        }
+    }
+
+    render() {
+
+        let alerts = [];
+        for (let i = 0; i < this.state.alerts.length; i++) {
+            alerts.push(<Alert key={"error-" + i} onClose={() => this.removeAlert(i)} {...this.state.alerts[i]}/>)
+        }
+
+        return <>
+            <div className="content-header">
+                <div className="container-fluid">
+                    <div className="row mb-2">
+                        <div className="col-sm-6">
+                            <h1 className="m-0 text-dark">Create a new user</h1>
+                        </div>
+                        <div className="col-sm-6">
+                            <ol className="breadcrumb float-sm-right">
+                                <li className="breadcrumb-item"><Link to={"/admin/dashboard"}>Home</Link></li>
+                                <li className="breadcrumb-item"><Link to={"/admin/users"}>Users</Link></li>
+                                <li className="breadcrumb-item active">Add User</li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className={"content"}>
+                <div className={"row"}>
+                    <div className={"col-lg-6 pl-5 pr-5"}>
+                        {alerts}
+                        <form role={"form"} onSubmit={(e) => this.submitForm(e)}>
+                            <div className={"form-group"}>
+                                <label htmlFor={"name"}>Group Name</label>
+                                <input type={"text"} className={"form-control"} placeholder={"Name"}
+                                       name={"name"} id={"name"} maxLength={32} value={this.state.name}
+                                       onChange={this.onChangeInput.bind(this)}/>
+                            </div>
+
+                            {/* TODO: add color picker */}
+                            <div className={"form-group"}>
+                                <label htmlFor={"color"}>Color</label>
+                                <input type={"text"} className={"form-control"} placeholder={"Color"}
+                                       id={"color"} name={"color"} maxLength={64} value={this.state.color}
+                                       onChange={this.onChangeInput.bind(this)}/>
+                            </div>
+
+                            <Link to={"/admin/users"} className={"btn btn-info mt-2 mr-2"}>
+                                <Icon icon={"arrow-left"}/>
+                                &nbsp;Back
+                            </Link>
+                            { this.state.isSubmitting
+                                ? <button type={"submit"} className={"btn btn-primary mt-2"} disabled>Loading…&nbsp;<Icon icon={"circle-notch"} /></button>
+                                : <button type={"submit"} className={"btn btn-primary mt-2"}>Submit</button>
+                            }
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <ReactTooltip/>
+        </>;
+    }
+
+    onChangeInput(event) {
+        const target = event.target;
+        const value = target.value;
+        const name = target.name;
+        this.setState({ ...this.state, [name]: value });
+    }
+
+    submitForm(e) {
+        e.preventDefault();
+        const name = this.state.name;
+        const color = this.state.color;
+        this.setState({ ...this.state, isSubmitting: true });
+        this.parent.api.createGroup(name, color).then((res) => {
+            let alerts = this.state.alerts.slice();
+            if (res.success) {
+                alerts.push({message: "Group was successfully created", title: "Success!", type: "success"});
+                this.setState({ ...this.state, name: "", color: "", alerts: alerts, isSubmitting: false });
+            } else {
+                alerts.push({message: res.msg, title: "Error creating Group", type: "danger"});
+                this.setState({ ...this.state, name: "", color: "", alerts: alerts, isSubmitting: false });
+            }
+        });
+    }
+}

src/src/views/users.js

@@ -327,7 +327,7 @@ export default class UserOverview extends React.Component {
             <div className={"card-header border-0"}>
                 <h3 className={"card-title"}>Groups</h3>
                 <div className={"card-tools"}>
-                    <Link href={"#"} className={"btn btn-tool btn-sm"} to={"/admin/users/addgroup"} >
+                    <Link href={"#"} className={"btn btn-tool btn-sm"} to={"/admin/group/add"} >
                         <Icon icon={"plus"}/>
                     </Link>
                     <a href={"#"} className={"btn btn-tool btn-sm"} onClick={() => this.fetchGroups()}>