diff --git a/js/admin.min.js b/js/admin.min.js
index 0d511e2..9a7d7db 100644
--- a/js/admin.min.js
+++ b/js/admin.min.js
@@ -7486,7 +7486,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\");\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 (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n\n\n\n\n\nvar UserOverview = /*#__PURE__*/function (_React$Component) {\n  _inherits(UserOverview, _React$Component);\n\n  var _super = _createSuper(UserOverview);\n\n  function UserOverview(props) {\n    var _this;\n\n    _classCallCheck(this, UserOverview);\n\n    _this = _super.call(this, props);\n    _this.parent = {\n      showDialog: props.showDialog || function () {},\n      api: props.api\n    };\n    _this.state = {\n      loaded: false,\n      users: {\n        data: {},\n        page: 1,\n        pageCount: 1,\n        totalCount: 0\n      },\n      groups: {\n        data: {},\n        page: 1,\n        pageCount: 1,\n        totalCount: 0\n      },\n      errors: []\n    };\n    return _this;\n  }\n\n  _createClass(UserOverview, [{\n    key: \"fetchGroups\",\n    value: function fetchGroups(page) {\n      var _this2 = this;\n\n      page = page || this.state.groups.page;\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        groups: _objectSpread(_objectSpread({}, this.state.groups), {}, {\n          data: {},\n          page: 1,\n          totalCount: 0\n        })\n      }));\n      this.parent.api.fetchGroups(page).then(function (res) {\n        if (res.success) {\n          _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {\n            groups: {\n              data: res.groups,\n              pageCount: res.pageCount,\n              page: page,\n              totalCount: res.totalCount\n            }\n          }));\n        } else {\n          var errors = _this2.state.errors.slice();\n\n          errors.push({\n            title: \"Error fetching groups\",\n            message: res.msg\n          });\n\n          _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {\n            errors: errors\n          }));\n        }\n\n        if (!_this2.state.loaded) {\n          _this2.fetchUsers(1);\n        }\n      });\n    }\n  }, {\n    key: \"fetchUsers\",\n    value: function fetchUsers(page) {\n      var _this3 = this;\n\n      page = page || this.state.users.page;\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        users: _objectSpread(_objectSpread({}, this.state.users), {}, {\n          data: {},\n          pageCount: 1,\n          totalCount: 0\n        })\n      }));\n      this.parent.api.fetchUsers(page).then(function (res) {\n        if (res.success) {\n          _this3.setState(_objectSpread(_objectSpread({}, _this3.state), {}, {\n            loaded: true,\n            users: {\n              data: res.users,\n              pageCount: res.pageCount,\n              page: page,\n              totalCount: res.totalCount\n            }\n          }));\n        } else {\n          var errors = _this3.state.errors.slice();\n\n          errors.push({\n            title: \"Error fetching users\",\n            message: res.msg\n          });\n\n          _this3.setState(_objectSpread(_objectSpread({}, _this3.state), {}, {\n            loaded: true,\n            errors: errors\n          }));\n        }\n      });\n    }\n  }, {\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        loaded: false\n      }));\n      this.fetchGroups(1);\n    }\n  }, {\n    key: \"removeError\",\n    value: function removeError(i) {\n      if (i >= 0 && i < this.state.errors.length) {\n        var errors = this.state.errors.slice();\n        errors.splice(i, 1);\n        this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n          errors: errors\n        }));\n      }\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this4 = this;\n\n      if (!this.state.loaded) {\n        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n          className: \"text-center mt-4\"\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h3\", null, \"Loading\\u2026\\xA0\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n          icon: \"spinner\"\n        })));\n      }\n\n      var errors = [];\n\n      var _loop = function _loop(i) {\n        errors.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_alert__WEBPACK_IMPORTED_MODULE_4__[\"default\"], _extends({\n          key: \"error-\" + i,\n          onClose: function onClose() {\n            return _this4.removeError(i);\n          }\n        }, _this4.state.errors[i])));\n      };\n\n      for (var i = 0; i < this.state.errors.length; i++) {\n        _loop(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react__WEBPACK_IMPORTED_MODULE_0__[\"Fragment\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"content-header\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"container-fluid\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"row mb-2\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-sm-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h1\", {\n        className: \"m-0 text-dark\"\n      }, \"Users & Groups\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-sm-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"ol\", {\n        className: \"breadcrumb float-sm-right\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"breadcrumb-item\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__[\"Link\"], {\n        to: \"/admin/dashboard\"\n      }, \"Home\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"breadcrumb-item active\"\n      }, \"Users\")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"content\"\n      }, errors, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"content-fluid\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"row\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-lg-6\"\n      }, this.createUserCard()), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-lg-6\"\n      }, this.createGroupCard())))));\n    }\n  }, {\n    key: \"createUserCard\",\n    value: function createUserCard() {\n      var _this5 = this;\n\n      var userRows = [];\n\n      for (var uid in this.state.users.data) {\n        if (!this.state.users.data.hasOwnProperty(uid)) {\n          continue;\n        }\n\n        var user = this.state.users.data[uid];\n        var groups = [];\n\n        for (var groupId in user.groups) {\n          if (user.groups.hasOwnProperty(groupId)) {\n            var groupName = user.groups[groupId];\n            var color = groupId === \"1\" ? \"danger\" : \"secondary\";\n            groups.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"span\", {\n              key: \"group-\" + groupId,\n              className: \"mr-1 badge badge-\" + color\n            }, groupName));\n          }\n        }\n\n        userRows.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", {\n          key: \"user-\" + uid\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, user.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, user.email), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, groups), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, Object(_global__WEBPACK_IMPORTED_MODULE_3__[\"getPeriodString\"])(user.registered_at))));\n      }\n\n      var pages = [];\n      var previousDisabled = this.state.users.page === 1 ? \" disabled\" : \"\";\n      var nextDisabled = this.state.users.page >= this.state.users.pageCount ? \" disabled\" : \"\";\n\n      var _loop2 = function _loop2(i) {\n        var active = _this5.state.users.page === i ? \" active\" : \"\";\n        pages.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n          key: \"page-\" + i,\n          className: \"page-item\" + active\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n          className: \"page-link\",\n          href: \"#\",\n          onClick: function onClick() {\n            return _this5.fetchUsers(i);\n          }\n        }, i)));\n      };\n\n      for (var i = 1; i <= this.state.users.pageCount; i++) {\n        _loop2(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-header border-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h3\", {\n        className: \"card-title\"\n      }, \"Users\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__[\"Link\"], {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        to: \"/admin/users/adduser\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"plus\"\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        onClick: function onClick() {\n          return _this5.fetchUsers();\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"sync\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-body table-responsive p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"table\", {\n        className: \"table table-striped table-valign-middle\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"thead\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Username\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Email\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Groups\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Registered\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tbody\", null, userRows)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"nav\", {\n        className: \"row m-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 pl-3 pt-3 pb-3 text-muted\"\n      }, \"Total: \", this.state.users.totalCount), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"ul\", {\n        className: \"pagination p-2 m-0 justify-content-end\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + previousDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this5.fetchUsers(_this5.state.users.page - 1);\n        }\n      }, \"Previous\")), pages, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + nextDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this5.fetchUsers(_this5.state.users.page + 1);\n        }\n      }, \"Next\")))))));\n    }\n  }, {\n    key: \"createGroupCard\",\n    value: function createGroupCard() {\n      var _this6 = this;\n\n      var groupRows = [];\n\n      for (var uid in this.state.groups.data) {\n        if (!this.state.groups.data.hasOwnProperty(uid)) {\n          continue;\n        }\n\n        var group = this.state.groups.data[uid];\n        groupRows.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", {\n          key: \"group-\" + uid\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, group.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, group.memberCount)));\n      }\n\n      var pages = [];\n      var previousDisabled = this.state.groups.page === 1 ? \" disabled\" : \"\";\n      var nextDisabled = this.state.groups.page >= this.state.groups.pageCount ? \" disabled\" : \"\";\n\n      var _loop3 = function _loop3(i) {\n        var active = _this6.state.groups.page === i ? \" active\" : \"\";\n        pages.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n          key: \"page-\" + i,\n          className: \"page-item\" + active\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n          className: \"page-link\",\n          href: \"#\",\n          onClick: function onClick() {\n            return _this6.fetchGroups(i);\n          }\n        }, i)));\n      };\n\n      for (var i = 1; i <= this.state.groups.pageCount; i++) {\n        _loop3(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-header border-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h3\", {\n        className: \"card-title\"\n      }, \"Groups\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__[\"Link\"], {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        to: \"/admin/users/addgroup\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"plus\"\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        onClick: function onClick() {\n          return _this6.fetchGroups();\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"sync\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-body table-responsive p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"table\", {\n        className: \"table table-striped table-valign-middle\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"thead\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Name\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Members\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tbody\", null, groupRows)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"nav\", {\n        className: \"row m-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 pl-3 pt-3 pb-3 text-muted\"\n      }, \"Total: \", this.state.groups.totalCount), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"ul\", {\n        className: \"pagination p-2 m-0 justify-content-end\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + previousDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this6.fetchGroups(_this6.state.groups.page - 1);\n        }\n      }, \"Previous\")), pages, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + nextDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this6.fetchGroups(_this6.state.groups.page + 1);\n        }\n      }, \"Next\")))))));\n    }\n  }]);\n\n  return UserOverview;\n}(react__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\n\n\n//# sourceURL=webpack:///./src/views/users.js?");
+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\");\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 (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n\n\n\n\n\nvar UserOverview = /*#__PURE__*/function (_React$Component) {\n  _inherits(UserOverview, _React$Component);\n\n  var _super = _createSuper(UserOverview);\n\n  function UserOverview(props) {\n    var _this;\n\n    _classCallCheck(this, UserOverview);\n\n    _this = _super.call(this, props);\n    _this.parent = {\n      showDialog: props.showDialog || function () {},\n      api: props.api\n    };\n    _this.state = {\n      loaded: false,\n      users: {\n        data: {},\n        page: 1,\n        pageCount: 1,\n        totalCount: 0\n      },\n      groups: {\n        data: {},\n        page: 1,\n        pageCount: 1,\n        totalCount: 0\n      },\n      errors: []\n    };\n    return _this;\n  }\n\n  _createClass(UserOverview, [{\n    key: \"fetchGroups\",\n    value: function fetchGroups(page) {\n      var _this2 = this;\n\n      page = page || this.state.groups.page;\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        groups: _objectSpread(_objectSpread({}, this.state.groups), {}, {\n          data: {},\n          page: 1,\n          totalCount: 0\n        })\n      }));\n      this.parent.api.fetchGroups(page).then(function (res) {\n        if (res.success) {\n          _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {\n            groups: {\n              data: res.groups,\n              pageCount: res.pageCount,\n              page: page,\n              totalCount: res.totalCount\n            }\n          }));\n        } else {\n          var errors = _this2.state.errors.slice();\n\n          errors.push({\n            title: \"Error fetching groups\",\n            message: res.msg\n          });\n\n          _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {\n            errors: errors\n          }));\n        }\n\n        if (!_this2.state.loaded) {\n          _this2.fetchUsers(1);\n        }\n      });\n    }\n  }, {\n    key: \"fetchUsers\",\n    value: function fetchUsers(page) {\n      var _this3 = this;\n\n      page = page || this.state.users.page;\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        users: _objectSpread(_objectSpread({}, this.state.users), {}, {\n          data: {},\n          pageCount: 1,\n          totalCount: 0\n        })\n      }));\n      this.parent.api.fetchUsers(page).then(function (res) {\n        if (res.success) {\n          _this3.setState(_objectSpread(_objectSpread({}, _this3.state), {}, {\n            loaded: true,\n            users: {\n              data: res.users,\n              pageCount: res.pageCount,\n              page: page,\n              totalCount: res.totalCount\n            }\n          }));\n        } else {\n          var errors = _this3.state.errors.slice();\n\n          errors.push({\n            title: \"Error fetching users\",\n            message: res.msg\n          });\n\n          _this3.setState(_objectSpread(_objectSpread({}, _this3.state), {}, {\n            loaded: true,\n            errors: errors\n          }));\n        }\n      });\n    }\n  }, {\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        loaded: false\n      }));\n      this.fetchGroups(1);\n    }\n  }, {\n    key: \"removeError\",\n    value: function removeError(i) {\n      if (i >= 0 && i < this.state.errors.length) {\n        var errors = this.state.errors.slice();\n        errors.splice(i, 1);\n        this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n          errors: errors\n        }));\n      }\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this4 = this;\n\n      if (!this.state.loaded) {\n        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n          className: \"text-center mt-4\"\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h3\", null, \"Loading\\u2026\\xA0\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n          icon: \"spinner\"\n        })));\n      }\n\n      var errors = [];\n\n      var _loop = function _loop(i) {\n        errors.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_alert__WEBPACK_IMPORTED_MODULE_4__[\"default\"], _extends({\n          key: \"error-\" + i,\n          onClose: function onClose() {\n            return _this4.removeError(i);\n          }\n        }, _this4.state.errors[i])));\n      };\n\n      for (var i = 0; i < this.state.errors.length; i++) {\n        _loop(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react__WEBPACK_IMPORTED_MODULE_0__[\"Fragment\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"content-header\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"container-fluid\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"row mb-2\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-sm-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h1\", {\n        className: \"m-0 text-dark\"\n      }, \"Users & Groups\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-sm-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"ol\", {\n        className: \"breadcrumb float-sm-right\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"breadcrumb-item\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__[\"Link\"], {\n        to: \"/admin/dashboard\"\n      }, \"Home\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"breadcrumb-item active\"\n      }, \"Users\")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"content\"\n      }, errors, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"content-fluid\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"row\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-lg-6\"\n      }, this.createUserCard()), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-lg-6\"\n      }, this.createGroupCard())))));\n    }\n  }, {\n    key: \"createUserCard\",\n    value: function createUserCard() {\n      var _this5 = this;\n\n      var userRows = [];\n\n      for (var uid in this.state.users.data) {\n        if (!this.state.users.data.hasOwnProperty(uid)) {\n          continue;\n        }\n\n        var user = this.state.users.data[uid];\n        var groups = [];\n\n        for (var groupId in user.groups) {\n          if (user.groups.hasOwnProperty(groupId)) {\n            var groupName = user.groups[groupId];\n            var color = groupId === \"1\" ? \"danger\" : \"secondary\";\n            groups.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"span\", {\n              key: \"group-\" + groupId,\n              className: \"mr-1 badge badge-\" + color\n            }, groupName));\n          }\n        }\n\n        userRows.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", {\n          key: \"user-\" + uid\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, user.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, user.email), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, groups), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, Object(_global__WEBPACK_IMPORTED_MODULE_3__[\"getPeriodString\"])(user.registered_at))));\n      }\n\n      var pages = [];\n      var previousDisabled = this.state.users.page === 1 ? \" disabled\" : \"\";\n      var nextDisabled = this.state.users.page >= this.state.users.pageCount ? \" disabled\" : \"\";\n\n      var _loop2 = function _loop2(i) {\n        var active = _this5.state.users.page === i ? \" active\" : \"\";\n        pages.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n          key: \"page-\" + i,\n          className: \"page-item\" + active\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n          className: \"page-link\",\n          href: \"#\",\n          onClick: function onClick() {\n            if (_this5.state.users.page !== i) _this5.fetchUsers(i);\n          }\n        }, i)));\n      };\n\n      for (var i = 1; i <= this.state.users.pageCount; i++) {\n        _loop2(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-header border-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h3\", {\n        className: \"card-title\"\n      }, \"Users\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__[\"Link\"], {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        to: \"/admin/users/adduser\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"plus\"\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        onClick: function onClick() {\n          return _this5.fetchUsers();\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"sync\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-body table-responsive p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"table\", {\n        className: \"table table-striped table-valign-middle\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"thead\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Username\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Email\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Groups\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Registered\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tbody\", null, userRows)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"nav\", {\n        className: \"row m-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 pl-3 pt-3 pb-3 text-muted\"\n      }, \"Total: \", this.state.users.totalCount), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"ul\", {\n        className: \"pagination p-2 m-0 justify-content-end\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + previousDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this5.fetchUsers(_this5.state.users.page - 1);\n        }\n      }, \"Previous\")), pages, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + nextDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this5.fetchUsers(_this5.state.users.page + 1);\n        }\n      }, \"Next\")))))));\n    }\n  }, {\n    key: \"createGroupCard\",\n    value: function createGroupCard() {\n      var _this6 = this;\n\n      var groupRows = [];\n\n      for (var uid in this.state.groups.data) {\n        if (!this.state.groups.data.hasOwnProperty(uid)) {\n          continue;\n        }\n\n        var group = this.state.groups.data[uid];\n        groupRows.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", {\n          key: \"group-\" + uid\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, group.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, group.memberCount)));\n      }\n\n      var pages = [];\n      var previousDisabled = this.state.groups.page === 1 ? \" disabled\" : \"\";\n      var nextDisabled = this.state.groups.page >= this.state.groups.pageCount ? \" disabled\" : \"\";\n\n      var _loop3 = function _loop3(i) {\n        var active = _this6.state.groups.page === i ? \" active\" : \"\";\n        pages.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n          key: \"page-\" + i,\n          className: \"page-item\" + active\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n          className: \"page-link\",\n          href: \"#\",\n          onClick: function onClick() {\n            if (_this6.state.groups.page !== i) _this6.fetchGroups(i);\n          }\n        }, i)));\n      };\n\n      for (var i = 1; i <= this.state.groups.pageCount; i++) {\n        _loop3(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-header border-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h3\", {\n        className: \"card-title\"\n      }, \"Groups\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__[\"Link\"], {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        to: \"/admin/users/addgroup\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"plus\"\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        onClick: function onClick() {\n          return _this6.fetchGroups();\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"sync\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-body table-responsive p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"table\", {\n        className: \"table table-striped table-valign-middle\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"thead\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Name\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Members\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tbody\", null, groupRows)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"nav\", {\n        className: \"row m-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 pl-3 pt-3 pb-3 text-muted\"\n      }, \"Total: \", this.state.groups.totalCount), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"ul\", {\n        className: \"pagination p-2 m-0 justify-content-end\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + previousDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this6.fetchGroups(_this6.state.groups.page - 1);\n        }\n      }, \"Previous\")), pages, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + nextDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this6.fetchGroups(_this6.state.groups.page + 1);\n        }\n      }, \"Next\")))))));\n    }\n  }]);\n\n  return UserOverview;\n}(react__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\n\n\n//# sourceURL=webpack:///./src/views/users.js?");
 
 /***/ })
 
diff --git a/src/dist/main.js b/src/dist/main.js
index 0d511e2..9a7d7db 100644
--- a/src/dist/main.js
+++ b/src/dist/main.js
@@ -7486,7 +7486,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\");\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 (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n\n\n\n\n\nvar UserOverview = /*#__PURE__*/function (_React$Component) {\n  _inherits(UserOverview, _React$Component);\n\n  var _super = _createSuper(UserOverview);\n\n  function UserOverview(props) {\n    var _this;\n\n    _classCallCheck(this, UserOverview);\n\n    _this = _super.call(this, props);\n    _this.parent = {\n      showDialog: props.showDialog || function () {},\n      api: props.api\n    };\n    _this.state = {\n      loaded: false,\n      users: {\n        data: {},\n        page: 1,\n        pageCount: 1,\n        totalCount: 0\n      },\n      groups: {\n        data: {},\n        page: 1,\n        pageCount: 1,\n        totalCount: 0\n      },\n      errors: []\n    };\n    return _this;\n  }\n\n  _createClass(UserOverview, [{\n    key: \"fetchGroups\",\n    value: function fetchGroups(page) {\n      var _this2 = this;\n\n      page = page || this.state.groups.page;\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        groups: _objectSpread(_objectSpread({}, this.state.groups), {}, {\n          data: {},\n          page: 1,\n          totalCount: 0\n        })\n      }));\n      this.parent.api.fetchGroups(page).then(function (res) {\n        if (res.success) {\n          _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {\n            groups: {\n              data: res.groups,\n              pageCount: res.pageCount,\n              page: page,\n              totalCount: res.totalCount\n            }\n          }));\n        } else {\n          var errors = _this2.state.errors.slice();\n\n          errors.push({\n            title: \"Error fetching groups\",\n            message: res.msg\n          });\n\n          _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {\n            errors: errors\n          }));\n        }\n\n        if (!_this2.state.loaded) {\n          _this2.fetchUsers(1);\n        }\n      });\n    }\n  }, {\n    key: \"fetchUsers\",\n    value: function fetchUsers(page) {\n      var _this3 = this;\n\n      page = page || this.state.users.page;\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        users: _objectSpread(_objectSpread({}, this.state.users), {}, {\n          data: {},\n          pageCount: 1,\n          totalCount: 0\n        })\n      }));\n      this.parent.api.fetchUsers(page).then(function (res) {\n        if (res.success) {\n          _this3.setState(_objectSpread(_objectSpread({}, _this3.state), {}, {\n            loaded: true,\n            users: {\n              data: res.users,\n              pageCount: res.pageCount,\n              page: page,\n              totalCount: res.totalCount\n            }\n          }));\n        } else {\n          var errors = _this3.state.errors.slice();\n\n          errors.push({\n            title: \"Error fetching users\",\n            message: res.msg\n          });\n\n          _this3.setState(_objectSpread(_objectSpread({}, _this3.state), {}, {\n            loaded: true,\n            errors: errors\n          }));\n        }\n      });\n    }\n  }, {\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        loaded: false\n      }));\n      this.fetchGroups(1);\n    }\n  }, {\n    key: \"removeError\",\n    value: function removeError(i) {\n      if (i >= 0 && i < this.state.errors.length) {\n        var errors = this.state.errors.slice();\n        errors.splice(i, 1);\n        this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n          errors: errors\n        }));\n      }\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this4 = this;\n\n      if (!this.state.loaded) {\n        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n          className: \"text-center mt-4\"\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h3\", null, \"Loading\\u2026\\xA0\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n          icon: \"spinner\"\n        })));\n      }\n\n      var errors = [];\n\n      var _loop = function _loop(i) {\n        errors.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_alert__WEBPACK_IMPORTED_MODULE_4__[\"default\"], _extends({\n          key: \"error-\" + i,\n          onClose: function onClose() {\n            return _this4.removeError(i);\n          }\n        }, _this4.state.errors[i])));\n      };\n\n      for (var i = 0; i < this.state.errors.length; i++) {\n        _loop(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react__WEBPACK_IMPORTED_MODULE_0__[\"Fragment\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"content-header\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"container-fluid\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"row mb-2\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-sm-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h1\", {\n        className: \"m-0 text-dark\"\n      }, \"Users & Groups\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-sm-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"ol\", {\n        className: \"breadcrumb float-sm-right\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"breadcrumb-item\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__[\"Link\"], {\n        to: \"/admin/dashboard\"\n      }, \"Home\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"breadcrumb-item active\"\n      }, \"Users\")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"content\"\n      }, errors, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"content-fluid\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"row\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-lg-6\"\n      }, this.createUserCard()), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-lg-6\"\n      }, this.createGroupCard())))));\n    }\n  }, {\n    key: \"createUserCard\",\n    value: function createUserCard() {\n      var _this5 = this;\n\n      var userRows = [];\n\n      for (var uid in this.state.users.data) {\n        if (!this.state.users.data.hasOwnProperty(uid)) {\n          continue;\n        }\n\n        var user = this.state.users.data[uid];\n        var groups = [];\n\n        for (var groupId in user.groups) {\n          if (user.groups.hasOwnProperty(groupId)) {\n            var groupName = user.groups[groupId];\n            var color = groupId === \"1\" ? \"danger\" : \"secondary\";\n            groups.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"span\", {\n              key: \"group-\" + groupId,\n              className: \"mr-1 badge badge-\" + color\n            }, groupName));\n          }\n        }\n\n        userRows.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", {\n          key: \"user-\" + uid\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, user.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, user.email), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, groups), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, Object(_global__WEBPACK_IMPORTED_MODULE_3__[\"getPeriodString\"])(user.registered_at))));\n      }\n\n      var pages = [];\n      var previousDisabled = this.state.users.page === 1 ? \" disabled\" : \"\";\n      var nextDisabled = this.state.users.page >= this.state.users.pageCount ? \" disabled\" : \"\";\n\n      var _loop2 = function _loop2(i) {\n        var active = _this5.state.users.page === i ? \" active\" : \"\";\n        pages.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n          key: \"page-\" + i,\n          className: \"page-item\" + active\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n          className: \"page-link\",\n          href: \"#\",\n          onClick: function onClick() {\n            return _this5.fetchUsers(i);\n          }\n        }, i)));\n      };\n\n      for (var i = 1; i <= this.state.users.pageCount; i++) {\n        _loop2(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-header border-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h3\", {\n        className: \"card-title\"\n      }, \"Users\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__[\"Link\"], {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        to: \"/admin/users/adduser\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"plus\"\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        onClick: function onClick() {\n          return _this5.fetchUsers();\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"sync\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-body table-responsive p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"table\", {\n        className: \"table table-striped table-valign-middle\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"thead\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Username\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Email\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Groups\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Registered\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tbody\", null, userRows)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"nav\", {\n        className: \"row m-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 pl-3 pt-3 pb-3 text-muted\"\n      }, \"Total: \", this.state.users.totalCount), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"ul\", {\n        className: \"pagination p-2 m-0 justify-content-end\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + previousDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this5.fetchUsers(_this5.state.users.page - 1);\n        }\n      }, \"Previous\")), pages, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + nextDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this5.fetchUsers(_this5.state.users.page + 1);\n        }\n      }, \"Next\")))))));\n    }\n  }, {\n    key: \"createGroupCard\",\n    value: function createGroupCard() {\n      var _this6 = this;\n\n      var groupRows = [];\n\n      for (var uid in this.state.groups.data) {\n        if (!this.state.groups.data.hasOwnProperty(uid)) {\n          continue;\n        }\n\n        var group = this.state.groups.data[uid];\n        groupRows.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", {\n          key: \"group-\" + uid\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, group.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, group.memberCount)));\n      }\n\n      var pages = [];\n      var previousDisabled = this.state.groups.page === 1 ? \" disabled\" : \"\";\n      var nextDisabled = this.state.groups.page >= this.state.groups.pageCount ? \" disabled\" : \"\";\n\n      var _loop3 = function _loop3(i) {\n        var active = _this6.state.groups.page === i ? \" active\" : \"\";\n        pages.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n          key: \"page-\" + i,\n          className: \"page-item\" + active\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n          className: \"page-link\",\n          href: \"#\",\n          onClick: function onClick() {\n            return _this6.fetchGroups(i);\n          }\n        }, i)));\n      };\n\n      for (var i = 1; i <= this.state.groups.pageCount; i++) {\n        _loop3(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-header border-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h3\", {\n        className: \"card-title\"\n      }, \"Groups\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__[\"Link\"], {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        to: \"/admin/users/addgroup\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"plus\"\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        onClick: function onClick() {\n          return _this6.fetchGroups();\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"sync\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-body table-responsive p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"table\", {\n        className: \"table table-striped table-valign-middle\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"thead\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Name\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Members\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tbody\", null, groupRows)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"nav\", {\n        className: \"row m-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 pl-3 pt-3 pb-3 text-muted\"\n      }, \"Total: \", this.state.groups.totalCount), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"ul\", {\n        className: \"pagination p-2 m-0 justify-content-end\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + previousDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this6.fetchGroups(_this6.state.groups.page - 1);\n        }\n      }, \"Previous\")), pages, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + nextDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this6.fetchGroups(_this6.state.groups.page + 1);\n        }\n      }, \"Next\")))))));\n    }\n  }]);\n\n  return UserOverview;\n}(react__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\n\n\n//# sourceURL=webpack:///./src/views/users.js?");
+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\");\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 (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n\n\n\n\n\nvar UserOverview = /*#__PURE__*/function (_React$Component) {\n  _inherits(UserOverview, _React$Component);\n\n  var _super = _createSuper(UserOverview);\n\n  function UserOverview(props) {\n    var _this;\n\n    _classCallCheck(this, UserOverview);\n\n    _this = _super.call(this, props);\n    _this.parent = {\n      showDialog: props.showDialog || function () {},\n      api: props.api\n    };\n    _this.state = {\n      loaded: false,\n      users: {\n        data: {},\n        page: 1,\n        pageCount: 1,\n        totalCount: 0\n      },\n      groups: {\n        data: {},\n        page: 1,\n        pageCount: 1,\n        totalCount: 0\n      },\n      errors: []\n    };\n    return _this;\n  }\n\n  _createClass(UserOverview, [{\n    key: \"fetchGroups\",\n    value: function fetchGroups(page) {\n      var _this2 = this;\n\n      page = page || this.state.groups.page;\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        groups: _objectSpread(_objectSpread({}, this.state.groups), {}, {\n          data: {},\n          page: 1,\n          totalCount: 0\n        })\n      }));\n      this.parent.api.fetchGroups(page).then(function (res) {\n        if (res.success) {\n          _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {\n            groups: {\n              data: res.groups,\n              pageCount: res.pageCount,\n              page: page,\n              totalCount: res.totalCount\n            }\n          }));\n        } else {\n          var errors = _this2.state.errors.slice();\n\n          errors.push({\n            title: \"Error fetching groups\",\n            message: res.msg\n          });\n\n          _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {\n            errors: errors\n          }));\n        }\n\n        if (!_this2.state.loaded) {\n          _this2.fetchUsers(1);\n        }\n      });\n    }\n  }, {\n    key: \"fetchUsers\",\n    value: function fetchUsers(page) {\n      var _this3 = this;\n\n      page = page || this.state.users.page;\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        users: _objectSpread(_objectSpread({}, this.state.users), {}, {\n          data: {},\n          pageCount: 1,\n          totalCount: 0\n        })\n      }));\n      this.parent.api.fetchUsers(page).then(function (res) {\n        if (res.success) {\n          _this3.setState(_objectSpread(_objectSpread({}, _this3.state), {}, {\n            loaded: true,\n            users: {\n              data: res.users,\n              pageCount: res.pageCount,\n              page: page,\n              totalCount: res.totalCount\n            }\n          }));\n        } else {\n          var errors = _this3.state.errors.slice();\n\n          errors.push({\n            title: \"Error fetching users\",\n            message: res.msg\n          });\n\n          _this3.setState(_objectSpread(_objectSpread({}, _this3.state), {}, {\n            loaded: true,\n            errors: errors\n          }));\n        }\n      });\n    }\n  }, {\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        loaded: false\n      }));\n      this.fetchGroups(1);\n    }\n  }, {\n    key: \"removeError\",\n    value: function removeError(i) {\n      if (i >= 0 && i < this.state.errors.length) {\n        var errors = this.state.errors.slice();\n        errors.splice(i, 1);\n        this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n          errors: errors\n        }));\n      }\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this4 = this;\n\n      if (!this.state.loaded) {\n        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n          className: \"text-center mt-4\"\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h3\", null, \"Loading\\u2026\\xA0\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n          icon: \"spinner\"\n        })));\n      }\n\n      var errors = [];\n\n      var _loop = function _loop(i) {\n        errors.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_alert__WEBPACK_IMPORTED_MODULE_4__[\"default\"], _extends({\n          key: \"error-\" + i,\n          onClose: function onClose() {\n            return _this4.removeError(i);\n          }\n        }, _this4.state.errors[i])));\n      };\n\n      for (var i = 0; i < this.state.errors.length; i++) {\n        _loop(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react__WEBPACK_IMPORTED_MODULE_0__[\"Fragment\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"content-header\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"container-fluid\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"row mb-2\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-sm-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h1\", {\n        className: \"m-0 text-dark\"\n      }, \"Users & Groups\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-sm-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"ol\", {\n        className: \"breadcrumb float-sm-right\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"breadcrumb-item\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__[\"Link\"], {\n        to: \"/admin/dashboard\"\n      }, \"Home\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"breadcrumb-item active\"\n      }, \"Users\")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"content\"\n      }, errors, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"content-fluid\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"row\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-lg-6\"\n      }, this.createUserCard()), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-lg-6\"\n      }, this.createGroupCard())))));\n    }\n  }, {\n    key: \"createUserCard\",\n    value: function createUserCard() {\n      var _this5 = this;\n\n      var userRows = [];\n\n      for (var uid in this.state.users.data) {\n        if (!this.state.users.data.hasOwnProperty(uid)) {\n          continue;\n        }\n\n        var user = this.state.users.data[uid];\n        var groups = [];\n\n        for (var groupId in user.groups) {\n          if (user.groups.hasOwnProperty(groupId)) {\n            var groupName = user.groups[groupId];\n            var color = groupId === \"1\" ? \"danger\" : \"secondary\";\n            groups.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"span\", {\n              key: \"group-\" + groupId,\n              className: \"mr-1 badge badge-\" + color\n            }, groupName));\n          }\n        }\n\n        userRows.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", {\n          key: \"user-\" + uid\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, user.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, user.email), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, groups), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, Object(_global__WEBPACK_IMPORTED_MODULE_3__[\"getPeriodString\"])(user.registered_at))));\n      }\n\n      var pages = [];\n      var previousDisabled = this.state.users.page === 1 ? \" disabled\" : \"\";\n      var nextDisabled = this.state.users.page >= this.state.users.pageCount ? \" disabled\" : \"\";\n\n      var _loop2 = function _loop2(i) {\n        var active = _this5.state.users.page === i ? \" active\" : \"\";\n        pages.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n          key: \"page-\" + i,\n          className: \"page-item\" + active\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n          className: \"page-link\",\n          href: \"#\",\n          onClick: function onClick() {\n            if (_this5.state.users.page !== i) _this5.fetchUsers(i);\n          }\n        }, i)));\n      };\n\n      for (var i = 1; i <= this.state.users.pageCount; i++) {\n        _loop2(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-header border-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h3\", {\n        className: \"card-title\"\n      }, \"Users\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__[\"Link\"], {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        to: \"/admin/users/adduser\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"plus\"\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        onClick: function onClick() {\n          return _this5.fetchUsers();\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"sync\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-body table-responsive p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"table\", {\n        className: \"table table-striped table-valign-middle\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"thead\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Username\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Email\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Groups\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Registered\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tbody\", null, userRows)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"nav\", {\n        className: \"row m-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 pl-3 pt-3 pb-3 text-muted\"\n      }, \"Total: \", this.state.users.totalCount), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"ul\", {\n        className: \"pagination p-2 m-0 justify-content-end\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + previousDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this5.fetchUsers(_this5.state.users.page - 1);\n        }\n      }, \"Previous\")), pages, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + nextDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this5.fetchUsers(_this5.state.users.page + 1);\n        }\n      }, \"Next\")))))));\n    }\n  }, {\n    key: \"createGroupCard\",\n    value: function createGroupCard() {\n      var _this6 = this;\n\n      var groupRows = [];\n\n      for (var uid in this.state.groups.data) {\n        if (!this.state.groups.data.hasOwnProperty(uid)) {\n          continue;\n        }\n\n        var group = this.state.groups.data[uid];\n        groupRows.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", {\n          key: \"group-\" + uid\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, group.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"td\", null, group.memberCount)));\n      }\n\n      var pages = [];\n      var previousDisabled = this.state.groups.page === 1 ? \" disabled\" : \"\";\n      var nextDisabled = this.state.groups.page >= this.state.groups.pageCount ? \" disabled\" : \"\";\n\n      var _loop3 = function _loop3(i) {\n        var active = _this6.state.groups.page === i ? \" active\" : \"\";\n        pages.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n          key: \"page-\" + i,\n          className: \"page-item\" + active\n        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n          className: \"page-link\",\n          href: \"#\",\n          onClick: function onClick() {\n            if (_this6.state.groups.page !== i) _this6.fetchGroups(i);\n          }\n        }, i)));\n      };\n\n      for (var i = 1; i <= this.state.groups.pageCount; i++) {\n        _loop3(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-header border-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"h3\", {\n        className: \"card-title\"\n      }, \"Groups\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__[\"Link\"], {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        to: \"/admin/users/addgroup\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"plus\"\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        href: \"#\",\n        className: \"btn btn-tool btn-sm\",\n        onClick: function onClick() {\n          return _this6.fetchGroups();\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](_elements_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        icon: \"sync\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"card-body table-responsive p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"table\", {\n        className: \"table table-striped table-valign-middle\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"thead\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tr\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Name\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"th\", null, \"Members\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"tbody\", null, groupRows)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"nav\", {\n        className: \"row m-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 pl-3 pt-3 pb-3 text-muted\"\n      }, \"Total: \", this.state.groups.totalCount), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"div\", {\n        className: \"col-6 p-0\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"ul\", {\n        className: \"pagination p-2 m-0 justify-content-end\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + previousDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this6.fetchGroups(_this6.state.groups.page - 1);\n        }\n      }, \"Previous\")), pages, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"li\", {\n        className: \"page-item\" + nextDisabled\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"a\", {\n        className: \"page-link\",\n        href: \"#\",\n        onClick: function onClick() {\n          return _this6.fetchGroups(_this6.state.groups.page + 1);\n        }\n      }, \"Next\")))))));\n    }\n  }]);\n\n  return UserOverview;\n}(react__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\n\n\n//# sourceURL=webpack:///./src/views/users.js?");
 
 /***/ })