diff --git a/core/Api/SendMail.class.php b/core/Api/SendMail.class.php
index 6603460..0a6f37c 100644
--- a/core/Api/SendMail.class.php
+++ b/core/Api/SendMail.class.php
@@ -11,12 +11,9 @@ class SendMail extends Request {
 
   public function __construct($user, $externalCall = false) {
     parent::__construct($user, $externalCall, array(
-      'from' => new Parameter('from', Parameter::TYPE_EMAIL),
       'to' => new Parameter('to', Parameter::TYPE_EMAIL),
       'subject'  => new StringType('subject', -1),
       'body' => new StringType('body', -1),
-      'fromName' => new StringType('fromName', -1, true, ''),
-      'replyTo' => new Parameter('to', Parameter::TYPE_EMAIL, true, ''),
     ));
     $this->isPublic = false;
   }
@@ -28,6 +25,7 @@ class SendMail extends Request {
 
     if ($this->success) {
       $settings = $req->getResult()["settings"];
+
       if (!isset($settings["mail_enabled"]) || $settings["mail_enabled"] !== "1") {
         $this->createError("Mail is not configured yet.");
         return null;
@@ -37,7 +35,9 @@ class SendMail extends Request {
       $port = intval($settings["mail_port"] ?? "25");
       $login = $settings["mail_username"] ?? "";
       $password = $settings["mail_password"] ?? "";
-      return new ConnectionData($host, $port, $login, $password);
+      $connectionData = new ConnectionData($host, $port, $login, $password);
+      $connectionData->setProperty("from", $settings["mail_from"] ?? "");
+      return $connectionData;
     }
 
     return null;
@@ -56,7 +56,7 @@ class SendMail extends Request {
     try {
       $mail = new PHPMailer;
       $mail->IsSMTP();
-      $mail->setFrom($this->getParam('from'), $this->getParam('fromName'));
+      $mail->setFrom($mailConfig->getProperty("from"));
       $mail->addAddress($this->getParam('to'));
       $mail->Subject = $this->getParam('subject');
       $mail->SMTPDebug = 0;
@@ -70,11 +70,6 @@ class SendMail extends Request {
       $mail->CharSet = 'UTF-8';
       $mail->Body = $this->getParam('body');
 
-      $replyTo = $this->getParam('replyTo');
-      if(!is_null($replyTo) && !empty($replyTo)) {
-        $mail->AddReplyTo($replyTo, $this->getParam('fromName'));
-      }
-
       $this->success = @$mail->Send();
       if (!$this->success) {
         $this->lastError = "Error sending Mail: $mail->ErrorInfo";
diff --git a/core/Api/SendTestMail.class.php b/core/Api/SendTestMail.class.php
new file mode 100644
index 0000000..3276d7d
--- /dev/null
+++ b/core/Api/SendTestMail.class.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Api;
+
+use Api\Parameter\Parameter;
+use Objects\User;
+
+class SendTestMail extends Request {
+
+  public function __construct(User $user, bool $externalCall = false) {
+    parent::__construct($user, $externalCall, array(
+      "receiver" => new Parameter("receiver", Parameter::TYPE_EMAIL)
+    ));
+  }
+
+  public function execute($values = array()) {
+    if (!parent::execute($values)) {
+      return false;
+    }
+
+    $receiver = $this->getParam("receiver");
+    $req = new SendMail($this->user);
+    $this->success = $req->execute(array(
+      "to" => $receiver,
+      "subject" => "Test E-Mail",
+      "body" => "Hey! If you receive this e-mail, your mail configuration seems to be working."
+    ));
+
+    $this->lastError = $req->getLastError();
+    return $this->success;
+  }
+
+}
\ No newline at end of file
diff --git a/core/Api/SettingsAPI.class.php b/core/Api/SettingsAPI.class.php
index d767ddc..23983a6 100644
--- a/core/Api/SettingsAPI.class.php
+++ b/core/Api/SettingsAPI.class.php
@@ -16,6 +16,7 @@ namespace Api\Settings {
   use Driver\SQL\Column\Column;
   use Driver\SQL\Condition\Compare;
   use Driver\SQL\Condition\CondLike;
+  use Driver\SQL\Condition\CondNot;
   use Driver\SQL\Condition\CondRegex;
   use Driver\SQL\Strategy\UpdateStrategy;
   use Objects\User;
@@ -42,11 +43,12 @@ namespace Api\Settings {
        $query = $sql->select("name", "value") ->from("Settings");
 
        if (!is_null($key) && !empty($key)) {
-         $query->where(new CondRegex($key, new Column("name")));
+         $query->where(new CondRegex(new Column("name"), $key));
        }
 
+       // filter sensitive values, if called from outside
        if ($this->isExternalCall()) {
-         $query->where(new Compare("name", "jwt_secret", "!="));
+         $query->where(new CondNot("private"));
        }
 
        $res = $query->execute();
diff --git a/core/Api/UserAPI.class.php b/core/Api/UserAPI.class.php
index 5237897..5ac6193 100644
--- a/core/Api/UserAPI.class.php
+++ b/core/Api/UserAPI.class.php
@@ -461,7 +461,8 @@ If the invitation was not intended, you can simply ignore this email.<br><br><a
               return $this->createError("Error creating Session: " . $sql->getLastError());
             } else {
               $this->result["loggedIn"] = true;
-              $this->result['logoutIn'] = $this->user->getSession()->getExpiresSeconds();
+              $this->result["logoutIn"] = $this->user->getSession()->getExpiresSeconds();
+              $this->result["csrf_token"] = $this->user->getSession()->getCsrfToken();
               $this->success = true;
             }
           } else {
diff --git a/core/Configuration/CreateDatabase.class.php b/core/Configuration/CreateDatabase.class.php
index d6236dc..28a81b9 100755
--- a/core/Configuration/CreateDatabase.class.php
+++ b/core/Configuration/CreateDatabase.class.php
@@ -138,24 +138,64 @@ class CreateDatabase {
       ->addRow("^/register(/)?$", "dynamic", "\\Documents\\Account", "\\Views\\Account\\Register")
       ->addRow("^/confirmEmail(/)?$", "dynamic", "\\Documents\\Account", "\\Views\\Account\\ConfirmEmail")
       ->addRow("^/acceptInvite(/)?$", "dynamic", "\\Documents\\Account", "\\Views\\Account\\AcceptInvite")
+      ->addRow("^/resetPassword(/)?$", "dynamic", "\\Documents\\Account", "\\Views\\Account\\ResetPassword")
       ->addRow("^/$", "static", "/static/welcome.html", NULL);
 
     $queries[] = $sql->createTable("Settings")
       ->addString("name", 32)
       ->addString("value", 1024, true)
+      ->addBool("private", false)
       ->primaryKey("name");
 
-    $settingsQuery = $sql->insert("Settings", array("name", "value"))
+    $settingsQuery = $sql->insert("Settings", array("name", "value", "private"))
       // ->addRow("mail_enabled", "0") # this key will be set during installation
-      ->addRow("mail_host", "")
-      ->addRow("mail_port", "")
-      ->addRow("mail_username", "")
-      ->addRow("mail_password", "")
-      ->addRow("mail_from", "");
+      ->addRow("mail_host", "", false)
+      ->addRow("mail_port", "", false)
+      ->addRow("mail_username", "", false)
+      ->addRow("mail_password", "", true)
+      ->addRow("mail_from", "", false)
+      ->addRow("message_confirm_email", self::MessageConfirmEmail(), false)
+      ->addRow("message_accept_invite", self::MessageAcceptInvite(), false)
+      ->addRow("message_reset_password", self::MessageResetPassword(), false);
 
     (Settings::loadDefaults())->addRows($settingsQuery);
     $queries[] = $settingsQuery;
 
     return $queries;
   }
+
+  private static function MessageConfirmEmail() : string {
+    return str_replace("\n", "", intendCode(
+      "Hello {{username}},<br>
+            You recently created an account on {{site_name}}. Please click on the following link to 
+            confirm your email address and complete your registration. If you haven't registered an
+            account, you can simply ignore this email. The link is valid for the next 48 hours:<br><br>
+            <a href=\"{{link}}\">{{confirm_link}}</a><br><br>
+            Best Regards<br>
+            {{site_name}} Administration", false
+    ));
+  }
+
+  private static function MessageAcceptInvite() : string {
+    return str_replace("\n", "", intendCode(
+      "Hello {{username}},<br>
+            You were invited to create an account on {{site_name}}. Please click on the following link to 
+            confirm your email address and complete your registration by choosing a new password. 
+            If you want to decline the invitation, you can simply ignore this email. The link is valid for the next 48 hours:<br><br>
+            <a href=\"{{link}}\">{{link}}</a><br><br>
+            Best Regards<br>
+            {{site_name}} Administration", false
+    ));
+  }
+
+  private static function MessageResetPassword() : string {
+    return str_replace("\n", "", intendCode(
+      "Hello {{username}},<br>
+            you requested a password reset on {{sitename}}. Please click on the following link to 
+            choose a new password. If this request was not intended, you can simply ignore the email. The Link is valid for one hour:<br><br>
+            <a href=\"{{link}}\">{{link}}</a><br><br>
+            Best Regards<br>
+            {{site_name}} Administration", false
+    ));
+  }
 }
diff --git a/core/Configuration/Settings.class.php b/core/Configuration/Settings.class.php
index 2a83734..8020e16 100644
--- a/core/Configuration/Settings.class.php
+++ b/core/Configuration/Settings.class.php
@@ -62,10 +62,10 @@ class Settings {
   }
 
   public function addRows(Insert $query) {
-    $query->addRow("site_name", $this->siteName)
-      ->addRow("base_url", $this->baseUrl)
-      ->addRow("user_registration_enabled", $this->registrationAllowed ? "1" : "0")
-      ->addRow("installation_completed", $this->installationComplete ? "1" : "0")
-      ->addRow("jwt_secret", $this->jwtSecret);
+    $query->addRow("site_name", $this->siteName, false)
+      ->addRow("base_url", $this->baseUrl, false)
+      ->addRow("user_registration_enabled", $this->registrationAllowed ? "1" : "0", false)
+      ->addRow("installation_completed", $this->installationComplete ? "1" : "0", true)
+      ->addRow("jwt_secret", $this->jwtSecret, true);
   }
 }
\ No newline at end of file
diff --git a/core/Driver/SQL/Condition/CondNot.class.php b/core/Driver/SQL/Condition/CondNot.class.php
new file mode 100644
index 0000000..f978570
--- /dev/null
+++ b/core/Driver/SQL/Condition/CondNot.class.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace Driver\SQL\Condition;
+
+class CondNot extends Condition {
+
+  private $expression; // string or condition
+
+  public function __construct($expression) {
+    $this->expression = $expression;
+  }
+
+  public function getExpression() {
+    return $this->expression;
+  }
+}
\ No newline at end of file
diff --git a/core/Driver/SQL/SQL.class.php b/core/Driver/SQL/SQL.class.php
index c22c187..99a7da9 100644
--- a/core/Driver/SQL/SQL.class.php
+++ b/core/Driver/SQL/SQL.class.php
@@ -6,7 +6,9 @@ use Driver\SQL\Column\Column;
 use Driver\SQL\Condition\Compare;
 use Driver\SQL\Condition\CondBool;
 use Driver\SQL\Condition\CondIn;
+use Driver\SQL\Condition\Condition;
 use Driver\SQL\Condition\CondKeyword;
+use Driver\SQL\Condition\CondNot;
 use Driver\SQL\Condition\CondOr;
 use Driver\SQL\Condition\CondRegex;
 use Driver\SQL\Constraint\Constraint;
@@ -339,6 +341,9 @@ abstract class SQL {
         return implode(" AND ", $conditions);
       }
     } else if($condition instanceof CondIn) {
+
+      $value = $condition->getValues();
+
       $values = array();
       foreach ($condition->getValues() as $value) {
         $values[] = $this->addValue($value, $params);
@@ -353,6 +358,15 @@ abstract class SQL {
       $left = ($left instanceof Column) ? $this->columnName($left->getName()) : $this->addValue($left, $params);
       $right = ($right instanceof Column) ? $this->columnName($right->getName()) : $this->addValue($right, $params);
       return "$left $keyword $right ";
+    } else if($condition instanceof CondNot) {
+      $expression = $condition->getExpression();
+      if ($expression instanceof Condition) {
+        $expression = $this->buildCondition($expression, $params);
+      } else {
+        $expression = $this->columnName($expression);
+      }
+
+      return "NOT $expression";
     } else {
       $this->lastError = "Unsupported condition type: " . get_class($condition);
       return false;
diff --git a/js/admin.min.js b/js/admin.min.js
index 873da34..2b96b9d 100644
--- a/js/admin.min.js
+++ b/js/admin.min.js
@@ -9110,7 +9110,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return API; });\n/* harmony import */ var babel_polyfill__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babel-polyfill */ \"./node_modules/babel-polyfill/lib/index.js\");\n/* harmony import */ var babel_polyfill__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babel_polyfill__WEBPACK_IMPORTED_MODULE_0__);\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\n\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err); } _next(undefined); }); }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\n\n\nvar API = /*#__PURE__*/function () {\n  function API() {\n    _classCallCheck(this, API);\n\n    this.loggedIn = false;\n    this.user = {};\n  }\n\n  _createClass(API, [{\n    key: \"csrfToken\",\n    value: function csrfToken() {\n      return this.loggedIn ? this.user.session.csrf_token : null;\n    }\n  }, {\n    key: \"apiCall\",\n    value: function () {\n      var _apiCall = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(method, params) {\n        var response, res;\n        return regeneratorRuntime.wrap(function _callee$(_context) {\n          while (1) {\n            switch (_context.prev = _context.next) {\n              case 0:\n                params = params || {};\n                params.csrf_token = this.csrfToken();\n                _context.next = 4;\n                return fetch(\"/api/\" + method, {\n                  method: 'post',\n                  headers: {\n                    'Content-Type': 'application/json'\n                  },\n                  body: JSON.stringify(params)\n                });\n\n              case 4:\n                response = _context.sent;\n                _context.next = 7;\n                return response.json();\n\n              case 7:\n                res = _context.sent;\n\n                if (!res.success && res.msg === \"You are not logged in.\") {\n                  document.location.reload();\n                }\n\n                return _context.abrupt(\"return\", res);\n\n              case 10:\n              case \"end\":\n                return _context.stop();\n            }\n          }\n        }, _callee, this);\n      }));\n\n      function apiCall(_x, _x2) {\n        return _apiCall.apply(this, arguments);\n      }\n\n      return apiCall;\n    }()\n  }, {\n    key: \"fetchUser\",\n    value: function () {\n      var _fetchUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {\n        var response, data;\n        return regeneratorRuntime.wrap(function _callee2$(_context2) {\n          while (1) {\n            switch (_context2.prev = _context2.next) {\n              case 0:\n                _context2.next = 2;\n                return fetch(\"/api/user/info\");\n\n              case 2:\n                response = _context2.sent;\n                _context2.next = 5;\n                return response.json();\n\n              case 5:\n                data = _context2.sent;\n                this.user = data[\"user\"];\n                this.loggedIn = data[\"loggedIn\"];\n                return _context2.abrupt(\"return\", data && data.success && data.loggedIn);\n\n              case 9:\n              case \"end\":\n                return _context2.stop();\n            }\n          }\n        }, _callee2, this);\n      }));\n\n      function fetchUser() {\n        return _fetchUser.apply(this, arguments);\n      }\n\n      return fetchUser;\n    }()\n  }, {\n    key: \"editUser\",\n    value: function () {\n      var _editUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(id, username, email, password, groups) {\n        return regeneratorRuntime.wrap(function _callee3$(_context3) {\n          while (1) {\n            switch (_context3.prev = _context3.next) {\n              case 0:\n                return _context3.abrupt(\"return\", this.apiCall(\"user/edit\", {\n                  \"id\": id,\n                  \"username\": username,\n                  \"email\": email,\n                  \"password\": password,\n                  \"groups\": groups\n                }));\n\n              case 1:\n              case \"end\":\n                return _context3.stop();\n            }\n          }\n        }, _callee3, this);\n      }));\n\n      function editUser(_x3, _x4, _x5, _x6, _x7) {\n        return _editUser.apply(this, arguments);\n      }\n\n      return editUser;\n    }()\n  }, {\n    key: \"logout\",\n    value: function () {\n      var _logout = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {\n        return regeneratorRuntime.wrap(function _callee4$(_context4) {\n          while (1) {\n            switch (_context4.prev = _context4.next) {\n              case 0:\n                return _context4.abrupt(\"return\", this.apiCall(\"user/logout\"));\n\n              case 1:\n              case \"end\":\n                return _context4.stop();\n            }\n          }\n        }, _callee4, this);\n      }));\n\n      function logout() {\n        return _logout.apply(this, arguments);\n      }\n\n      return logout;\n    }()\n  }, {\n    key: \"getNotifications\",\n    value: function () {\n      var _getNotifications = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {\n        return regeneratorRuntime.wrap(function _callee5$(_context5) {\n          while (1) {\n            switch (_context5.prev = _context5.next) {\n              case 0:\n                return _context5.abrupt(\"return\", this.apiCall(\"notifications/fetch\"));\n\n              case 1:\n              case \"end\":\n                return _context5.stop();\n            }\n          }\n        }, _callee5, this);\n      }));\n\n      function getNotifications() {\n        return _getNotifications.apply(this, arguments);\n      }\n\n      return getNotifications;\n    }()\n  }, {\n    key: \"getUser\",\n    value: function () {\n      var _getUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(id) {\n        return regeneratorRuntime.wrap(function _callee6$(_context6) {\n          while (1) {\n            switch (_context6.prev = _context6.next) {\n              case 0:\n                return _context6.abrupt(\"return\", this.apiCall(\"user/get\", {\n                  id: id\n                }));\n\n              case 1:\n              case \"end\":\n                return _context6.stop();\n            }\n          }\n        }, _callee6, this);\n      }));\n\n      function getUser(_x8) {\n        return _getUser.apply(this, arguments);\n      }\n\n      return getUser;\n    }()\n  }, {\n    key: \"deleteUser\",\n    value: function () {\n      var _deleteUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(id) {\n        return regeneratorRuntime.wrap(function _callee7$(_context7) {\n          while (1) {\n            switch (_context7.prev = _context7.next) {\n              case 0:\n                return _context7.abrupt(\"return\", this.apiCall(\"user/delete\", {\n                  id: id\n                }));\n\n              case 1:\n              case \"end\":\n                return _context7.stop();\n            }\n          }\n        }, _callee7, this);\n      }));\n\n      function deleteUser(_x9) {\n        return _deleteUser.apply(this, arguments);\n      }\n\n      return deleteUser;\n    }()\n  }, {\n    key: \"fetchUsers\",\n    value: function () {\n      var _fetchUsers = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {\n        var pageNum,\n            count,\n            _args8 = arguments;\n        return regeneratorRuntime.wrap(function _callee8$(_context8) {\n          while (1) {\n            switch (_context8.prev = _context8.next) {\n              case 0:\n                pageNum = _args8.length > 0 && _args8[0] !== undefined ? _args8[0] : 1;\n                count = _args8.length > 1 && _args8[1] !== undefined ? _args8[1] : 20;\n                return _context8.abrupt(\"return\", this.apiCall(\"user/fetch\", {\n                  page: pageNum,\n                  count: count\n                }));\n\n              case 3:\n              case \"end\":\n                return _context8.stop();\n            }\n          }\n        }, _callee8, this);\n      }));\n\n      function fetchUsers() {\n        return _fetchUsers.apply(this, arguments);\n      }\n\n      return fetchUsers;\n    }()\n  }, {\n    key: \"fetchGroups\",\n    value: function () {\n      var _fetchGroups = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {\n        var pageNum,\n            count,\n            _args9 = arguments;\n        return regeneratorRuntime.wrap(function _callee9$(_context9) {\n          while (1) {\n            switch (_context9.prev = _context9.next) {\n              case 0:\n                pageNum = _args9.length > 0 && _args9[0] !== undefined ? _args9[0] : 1;\n                count = _args9.length > 1 && _args9[1] !== undefined ? _args9[1] : 20;\n                return _context9.abrupt(\"return\", this.apiCall(\"groups/fetch\", {\n                  page: pageNum,\n                  count: count\n                }));\n\n              case 3:\n              case \"end\":\n                return _context9.stop();\n            }\n          }\n        }, _callee9, this);\n      }));\n\n      function fetchGroups() {\n        return _fetchGroups.apply(this, arguments);\n      }\n\n      return fetchGroups;\n    }()\n  }, {\n    key: \"inviteUser\",\n    value: function () {\n      var _inviteUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(username, email) {\n        return regeneratorRuntime.wrap(function _callee10$(_context10) {\n          while (1) {\n            switch (_context10.prev = _context10.next) {\n              case 0:\n                return _context10.abrupt(\"return\", this.apiCall(\"user/invite\", {\n                  username: username,\n                  email: email\n                }));\n\n              case 1:\n              case \"end\":\n                return _context10.stop();\n            }\n          }\n        }, _callee10, this);\n      }));\n\n      function inviteUser(_x10, _x11) {\n        return _inviteUser.apply(this, arguments);\n      }\n\n      return inviteUser;\n    }()\n  }, {\n    key: \"createUser\",\n    value: function () {\n      var _createUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(username, email, password, confirmPassword) {\n        return regeneratorRuntime.wrap(function _callee11$(_context11) {\n          while (1) {\n            switch (_context11.prev = _context11.next) {\n              case 0:\n                return _context11.abrupt(\"return\", this.apiCall(\"user/create\", {\n                  username: username,\n                  email: email,\n                  password: password,\n                  confirmPassword: confirmPassword\n                }));\n\n              case 1:\n              case \"end\":\n                return _context11.stop();\n            }\n          }\n        }, _callee11, this);\n      }));\n\n      function createUser(_x12, _x13, _x14, _x15) {\n        return _createUser.apply(this, arguments);\n      }\n\n      return createUser;\n    }()\n  }, {\n    key: \"getStats\",\n    value: function () {\n      var _getStats = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {\n        return regeneratorRuntime.wrap(function _callee12$(_context12) {\n          while (1) {\n            switch (_context12.prev = _context12.next) {\n              case 0:\n                return _context12.abrupt(\"return\", this.apiCall(\"stats\"));\n\n              case 1:\n              case \"end\":\n                return _context12.stop();\n            }\n          }\n        }, _callee12, this);\n      }));\n\n      function getStats() {\n        return _getStats.apply(this, arguments);\n      }\n\n      return getStats;\n    }()\n  }, {\n    key: \"getRoutes\",\n    value: function () {\n      var _getRoutes = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {\n        return regeneratorRuntime.wrap(function _callee13$(_context13) {\n          while (1) {\n            switch (_context13.prev = _context13.next) {\n              case 0:\n                return _context13.abrupt(\"return\", this.apiCall(\"routes/fetch\"));\n\n              case 1:\n              case \"end\":\n                return _context13.stop();\n            }\n          }\n        }, _callee13, this);\n      }));\n\n      function getRoutes() {\n        return _getRoutes.apply(this, arguments);\n      }\n\n      return getRoutes;\n    }()\n  }, {\n    key: \"saveRoutes\",\n    value: function () {\n      var _saveRoutes = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14(routes) {\n        return regeneratorRuntime.wrap(function _callee14$(_context14) {\n          while (1) {\n            switch (_context14.prev = _context14.next) {\n              case 0:\n                return _context14.abrupt(\"return\", this.apiCall(\"routes/save\", {\n                  routes: routes\n                }));\n\n              case 1:\n              case \"end\":\n                return _context14.stop();\n            }\n          }\n        }, _callee14, this);\n      }));\n\n      function saveRoutes(_x16) {\n        return _saveRoutes.apply(this, arguments);\n      }\n\n      return saveRoutes;\n    }()\n  }, {\n    key: \"createGroup\",\n    value: function () {\n      var _createGroup = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15(name, color) {\n        return regeneratorRuntime.wrap(function _callee15$(_context15) {\n          while (1) {\n            switch (_context15.prev = _context15.next) {\n              case 0:\n                return _context15.abrupt(\"return\", this.apiCall(\"groups/create\", {\n                  name: name,\n                  color: color\n                }));\n\n              case 1:\n              case \"end\":\n                return _context15.stop();\n            }\n          }\n        }, _callee15, this);\n      }));\n\n      function createGroup(_x17, _x18) {\n        return _createGroup.apply(this, arguments);\n      }\n\n      return createGroup;\n    }()\n  }, {\n    key: \"deleteGroup\",\n    value: function () {\n      var _deleteGroup = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16(id) {\n        return regeneratorRuntime.wrap(function _callee16$(_context16) {\n          while (1) {\n            switch (_context16.prev = _context16.next) {\n              case 0:\n                return _context16.abrupt(\"return\", this.apiCall(\"groups/delete\", {\n                  uid: id\n                }));\n\n              case 1:\n              case \"end\":\n                return _context16.stop();\n            }\n          }\n        }, _callee16, this);\n      }));\n\n      function deleteGroup(_x19) {\n        return _deleteGroup.apply(this, arguments);\n      }\n\n      return deleteGroup;\n    }()\n  }, {\n    key: \"getSettings\",\n    value: function () {\n      var _getSettings = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {\n        var key,\n            _args17 = arguments;\n        return regeneratorRuntime.wrap(function _callee17$(_context17) {\n          while (1) {\n            switch (_context17.prev = _context17.next) {\n              case 0:\n                key = _args17.length > 0 && _args17[0] !== undefined ? _args17[0] : \"\";\n                return _context17.abrupt(\"return\", this.apiCall(\"settings/get\", {\n                  key: key\n                }));\n\n              case 2:\n              case \"end\":\n                return _context17.stop();\n            }\n          }\n        }, _callee17, this);\n      }));\n\n      function getSettings() {\n        return _getSettings.apply(this, arguments);\n      }\n\n      return getSettings;\n    }()\n  }]);\n\n  return API;\n}();\n\n\n;\n\n//# sourceURL=webpack:///./src/api.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return API; });\n/* harmony import */ var babel_polyfill__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babel-polyfill */ \"./node_modules/babel-polyfill/lib/index.js\");\n/* harmony import */ var babel_polyfill__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babel_polyfill__WEBPACK_IMPORTED_MODULE_0__);\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\n\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err); } _next(undefined); }); }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\n\n\nvar API = /*#__PURE__*/function () {\n  function API() {\n    _classCallCheck(this, API);\n\n    this.loggedIn = false;\n    this.user = {};\n  }\n\n  _createClass(API, [{\n    key: \"csrfToken\",\n    value: function csrfToken() {\n      return this.loggedIn ? this.user.session.csrf_token : null;\n    }\n  }, {\n    key: \"apiCall\",\n    value: function () {\n      var _apiCall = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(method, params) {\n        var response, res;\n        return regeneratorRuntime.wrap(function _callee$(_context) {\n          while (1) {\n            switch (_context.prev = _context.next) {\n              case 0:\n                params = params || {};\n                params.csrf_token = this.csrfToken();\n                _context.next = 4;\n                return fetch(\"/api/\" + method, {\n                  method: 'post',\n                  headers: {\n                    'Content-Type': 'application/json'\n                  },\n                  body: JSON.stringify(params)\n                });\n\n              case 4:\n                response = _context.sent;\n                _context.next = 7;\n                return response.json();\n\n              case 7:\n                res = _context.sent;\n\n                if (!res.success && res.msg === \"You are not logged in.\") {\n                  document.location.reload();\n                }\n\n                return _context.abrupt(\"return\", res);\n\n              case 10:\n              case \"end\":\n                return _context.stop();\n            }\n          }\n        }, _callee, this);\n      }));\n\n      function apiCall(_x, _x2) {\n        return _apiCall.apply(this, arguments);\n      }\n\n      return apiCall;\n    }()\n  }, {\n    key: \"fetchUser\",\n    value: function () {\n      var _fetchUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {\n        var response, data;\n        return regeneratorRuntime.wrap(function _callee2$(_context2) {\n          while (1) {\n            switch (_context2.prev = _context2.next) {\n              case 0:\n                _context2.next = 2;\n                return fetch(\"/api/user/info\");\n\n              case 2:\n                response = _context2.sent;\n                _context2.next = 5;\n                return response.json();\n\n              case 5:\n                data = _context2.sent;\n                this.user = data[\"user\"];\n                this.loggedIn = data[\"loggedIn\"];\n                return _context2.abrupt(\"return\", data && data.success && data.loggedIn);\n\n              case 9:\n              case \"end\":\n                return _context2.stop();\n            }\n          }\n        }, _callee2, this);\n      }));\n\n      function fetchUser() {\n        return _fetchUser.apply(this, arguments);\n      }\n\n      return fetchUser;\n    }()\n  }, {\n    key: \"editUser\",\n    value: function () {\n      var _editUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(id, username, email, password, groups) {\n        return regeneratorRuntime.wrap(function _callee3$(_context3) {\n          while (1) {\n            switch (_context3.prev = _context3.next) {\n              case 0:\n                return _context3.abrupt(\"return\", this.apiCall(\"user/edit\", {\n                  \"id\": id,\n                  \"username\": username,\n                  \"email\": email,\n                  \"password\": password,\n                  \"groups\": groups\n                }));\n\n              case 1:\n              case \"end\":\n                return _context3.stop();\n            }\n          }\n        }, _callee3, this);\n      }));\n\n      function editUser(_x3, _x4, _x5, _x6, _x7) {\n        return _editUser.apply(this, arguments);\n      }\n\n      return editUser;\n    }()\n  }, {\n    key: \"logout\",\n    value: function () {\n      var _logout = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {\n        return regeneratorRuntime.wrap(function _callee4$(_context4) {\n          while (1) {\n            switch (_context4.prev = _context4.next) {\n              case 0:\n                return _context4.abrupt(\"return\", this.apiCall(\"user/logout\"));\n\n              case 1:\n              case \"end\":\n                return _context4.stop();\n            }\n          }\n        }, _callee4, this);\n      }));\n\n      function logout() {\n        return _logout.apply(this, arguments);\n      }\n\n      return logout;\n    }()\n  }, {\n    key: \"getNotifications\",\n    value: function () {\n      var _getNotifications = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {\n        return regeneratorRuntime.wrap(function _callee5$(_context5) {\n          while (1) {\n            switch (_context5.prev = _context5.next) {\n              case 0:\n                return _context5.abrupt(\"return\", this.apiCall(\"notifications/fetch\"));\n\n              case 1:\n              case \"end\":\n                return _context5.stop();\n            }\n          }\n        }, _callee5, this);\n      }));\n\n      function getNotifications() {\n        return _getNotifications.apply(this, arguments);\n      }\n\n      return getNotifications;\n    }()\n  }, {\n    key: \"getUser\",\n    value: function () {\n      var _getUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(id) {\n        return regeneratorRuntime.wrap(function _callee6$(_context6) {\n          while (1) {\n            switch (_context6.prev = _context6.next) {\n              case 0:\n                return _context6.abrupt(\"return\", this.apiCall(\"user/get\", {\n                  id: id\n                }));\n\n              case 1:\n              case \"end\":\n                return _context6.stop();\n            }\n          }\n        }, _callee6, this);\n      }));\n\n      function getUser(_x8) {\n        return _getUser.apply(this, arguments);\n      }\n\n      return getUser;\n    }()\n  }, {\n    key: \"deleteUser\",\n    value: function () {\n      var _deleteUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(id) {\n        return regeneratorRuntime.wrap(function _callee7$(_context7) {\n          while (1) {\n            switch (_context7.prev = _context7.next) {\n              case 0:\n                return _context7.abrupt(\"return\", this.apiCall(\"user/delete\", {\n                  id: id\n                }));\n\n              case 1:\n              case \"end\":\n                return _context7.stop();\n            }\n          }\n        }, _callee7, this);\n      }));\n\n      function deleteUser(_x9) {\n        return _deleteUser.apply(this, arguments);\n      }\n\n      return deleteUser;\n    }()\n  }, {\n    key: \"fetchUsers\",\n    value: function () {\n      var _fetchUsers = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {\n        var pageNum,\n            count,\n            _args8 = arguments;\n        return regeneratorRuntime.wrap(function _callee8$(_context8) {\n          while (1) {\n            switch (_context8.prev = _context8.next) {\n              case 0:\n                pageNum = _args8.length > 0 && _args8[0] !== undefined ? _args8[0] : 1;\n                count = _args8.length > 1 && _args8[1] !== undefined ? _args8[1] : 20;\n                return _context8.abrupt(\"return\", this.apiCall(\"user/fetch\", {\n                  page: pageNum,\n                  count: count\n                }));\n\n              case 3:\n              case \"end\":\n                return _context8.stop();\n            }\n          }\n        }, _callee8, this);\n      }));\n\n      function fetchUsers() {\n        return _fetchUsers.apply(this, arguments);\n      }\n\n      return fetchUsers;\n    }()\n  }, {\n    key: \"fetchGroups\",\n    value: function () {\n      var _fetchGroups = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {\n        var pageNum,\n            count,\n            _args9 = arguments;\n        return regeneratorRuntime.wrap(function _callee9$(_context9) {\n          while (1) {\n            switch (_context9.prev = _context9.next) {\n              case 0:\n                pageNum = _args9.length > 0 && _args9[0] !== undefined ? _args9[0] : 1;\n                count = _args9.length > 1 && _args9[1] !== undefined ? _args9[1] : 20;\n                return _context9.abrupt(\"return\", this.apiCall(\"groups/fetch\", {\n                  page: pageNum,\n                  count: count\n                }));\n\n              case 3:\n              case \"end\":\n                return _context9.stop();\n            }\n          }\n        }, _callee9, this);\n      }));\n\n      function fetchGroups() {\n        return _fetchGroups.apply(this, arguments);\n      }\n\n      return fetchGroups;\n    }()\n  }, {\n    key: \"inviteUser\",\n    value: function () {\n      var _inviteUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(username, email) {\n        return regeneratorRuntime.wrap(function _callee10$(_context10) {\n          while (1) {\n            switch (_context10.prev = _context10.next) {\n              case 0:\n                return _context10.abrupt(\"return\", this.apiCall(\"user/invite\", {\n                  username: username,\n                  email: email\n                }));\n\n              case 1:\n              case \"end\":\n                return _context10.stop();\n            }\n          }\n        }, _callee10, this);\n      }));\n\n      function inviteUser(_x10, _x11) {\n        return _inviteUser.apply(this, arguments);\n      }\n\n      return inviteUser;\n    }()\n  }, {\n    key: \"createUser\",\n    value: function () {\n      var _createUser = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(username, email, password, confirmPassword) {\n        return regeneratorRuntime.wrap(function _callee11$(_context11) {\n          while (1) {\n            switch (_context11.prev = _context11.next) {\n              case 0:\n                return _context11.abrupt(\"return\", this.apiCall(\"user/create\", {\n                  username: username,\n                  email: email,\n                  password: password,\n                  confirmPassword: confirmPassword\n                }));\n\n              case 1:\n              case \"end\":\n                return _context11.stop();\n            }\n          }\n        }, _callee11, this);\n      }));\n\n      function createUser(_x12, _x13, _x14, _x15) {\n        return _createUser.apply(this, arguments);\n      }\n\n      return createUser;\n    }()\n  }, {\n    key: \"getStats\",\n    value: function () {\n      var _getStats = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {\n        return regeneratorRuntime.wrap(function _callee12$(_context12) {\n          while (1) {\n            switch (_context12.prev = _context12.next) {\n              case 0:\n                return _context12.abrupt(\"return\", this.apiCall(\"stats\"));\n\n              case 1:\n              case \"end\":\n                return _context12.stop();\n            }\n          }\n        }, _callee12, this);\n      }));\n\n      function getStats() {\n        return _getStats.apply(this, arguments);\n      }\n\n      return getStats;\n    }()\n  }, {\n    key: \"getRoutes\",\n    value: function () {\n      var _getRoutes = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {\n        return regeneratorRuntime.wrap(function _callee13$(_context13) {\n          while (1) {\n            switch (_context13.prev = _context13.next) {\n              case 0:\n                return _context13.abrupt(\"return\", this.apiCall(\"routes/fetch\"));\n\n              case 1:\n              case \"end\":\n                return _context13.stop();\n            }\n          }\n        }, _callee13, this);\n      }));\n\n      function getRoutes() {\n        return _getRoutes.apply(this, arguments);\n      }\n\n      return getRoutes;\n    }()\n  }, {\n    key: \"saveRoutes\",\n    value: function () {\n      var _saveRoutes = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14(routes) {\n        return regeneratorRuntime.wrap(function _callee14$(_context14) {\n          while (1) {\n            switch (_context14.prev = _context14.next) {\n              case 0:\n                return _context14.abrupt(\"return\", this.apiCall(\"routes/save\", {\n                  routes: routes\n                }));\n\n              case 1:\n              case \"end\":\n                return _context14.stop();\n            }\n          }\n        }, _callee14, this);\n      }));\n\n      function saveRoutes(_x16) {\n        return _saveRoutes.apply(this, arguments);\n      }\n\n      return saveRoutes;\n    }()\n  }, {\n    key: \"createGroup\",\n    value: function () {\n      var _createGroup = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15(name, color) {\n        return regeneratorRuntime.wrap(function _callee15$(_context15) {\n          while (1) {\n            switch (_context15.prev = _context15.next) {\n              case 0:\n                return _context15.abrupt(\"return\", this.apiCall(\"groups/create\", {\n                  name: name,\n                  color: color\n                }));\n\n              case 1:\n              case \"end\":\n                return _context15.stop();\n            }\n          }\n        }, _callee15, this);\n      }));\n\n      function createGroup(_x17, _x18) {\n        return _createGroup.apply(this, arguments);\n      }\n\n      return createGroup;\n    }()\n  }, {\n    key: \"deleteGroup\",\n    value: function () {\n      var _deleteGroup = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16(id) {\n        return regeneratorRuntime.wrap(function _callee16$(_context16) {\n          while (1) {\n            switch (_context16.prev = _context16.next) {\n              case 0:\n                return _context16.abrupt(\"return\", this.apiCall(\"groups/delete\", {\n                  uid: id\n                }));\n\n              case 1:\n              case \"end\":\n                return _context16.stop();\n            }\n          }\n        }, _callee16, this);\n      }));\n\n      function deleteGroup(_x19) {\n        return _deleteGroup.apply(this, arguments);\n      }\n\n      return deleteGroup;\n    }()\n  }, {\n    key: \"getSettings\",\n    value: function () {\n      var _getSettings = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {\n        var key,\n            _args17 = arguments;\n        return regeneratorRuntime.wrap(function _callee17$(_context17) {\n          while (1) {\n            switch (_context17.prev = _context17.next) {\n              case 0:\n                key = _args17.length > 0 && _args17[0] !== undefined ? _args17[0] : \"\";\n                return _context17.abrupt(\"return\", this.apiCall(\"settings/get\", {\n                  key: key\n                }));\n\n              case 2:\n              case \"end\":\n                return _context17.stop();\n            }\n          }\n        }, _callee17, this);\n      }));\n\n      function getSettings() {\n        return _getSettings.apply(this, arguments);\n      }\n\n      return getSettings;\n    }()\n  }, {\n    key: \"saveSettings\",\n    value: function () {\n      var _saveSettings = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18(settings) {\n        return regeneratorRuntime.wrap(function _callee18$(_context18) {\n          while (1) {\n            switch (_context18.prev = _context18.next) {\n              case 0:\n                return _context18.abrupt(\"return\", this.apiCall(\"settings/set\", {\n                  settings: settings\n                }));\n\n              case 1:\n              case \"end\":\n                return _context18.stop();\n            }\n          }\n        }, _callee18, this);\n      }));\n\n      function saveSettings(_x20) {\n        return _saveSettings.apply(this, arguments);\n      }\n\n      return saveSettings;\n    }()\n  }, {\n    key: \"sendTestMail\",\n    value: function () {\n      var _sendTestMail = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19(receiver) {\n        return regeneratorRuntime.wrap(function _callee19$(_context19) {\n          while (1) {\n            switch (_context19.prev = _context19.next) {\n              case 0:\n                return _context19.abrupt(\"return\", this.apiCall(\"sendTestMail\", {\n                  receiver: receiver\n                }));\n\n              case 1:\n              case \"end\":\n                return _context19.stop();\n            }\n          }\n        }, _callee19, this);\n      }));\n\n      function sendTestMail(_x21) {\n        return _sendTestMail.apply(this, arguments);\n      }\n\n      return sendTestMail;\n    }()\n  }]);\n\n  return API;\n}();\n\n\n;\n\n//# sourceURL=webpack:///./src/api.js?");
 
 /***/ }),
 
@@ -9335,7 +9335,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 Settings; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/esm/react-router-dom.js\");\n/* harmony import */ var _elements_alert__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../elements/alert */ \"./src/elements/alert.js\");\n/* harmony import */ var react_collapse_lib_Collapse__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-collapse/lib/Collapse */ \"./node_modules/react-collapse/lib/Collapse.js\");\n/* harmony import */ var react_collapse_lib_Collapse__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_collapse_lib_Collapse__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _elements_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../elements/icon */ \"./src/elements/icon.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 Settings = /*#__PURE__*/function (_React$Component) {\n  _inherits(Settings, _React$Component);\n\n  var _super = _createSuper(Settings);\n\n  function Settings(props) {\n    var _this;\n\n    _classCallCheck(this, Settings);\n\n    _this = _super.call(this, props);\n    _this.state = {\n      errors: [],\n      settings: {},\n      generalOpened: true,\n      mailOpened: true,\n      etcOpened: true\n    };\n    _this.parent = {\n      api: props.api\n    };\n    return _this;\n  }\n\n  _createClass(Settings, [{\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      var _this2 = this;\n\n      this.parent.api.getSettings().then(function (res) {\n        if (res.success) {\n          _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {\n            settings: res.settings\n          }));\n        } else {\n          var errors = _this2.state.errors.slice();\n\n          errors.push({\n            title: \"Error fetching settings\",\n            message: res.msg\n          });\n\n          _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {\n            errors: errors\n          }));\n        }\n      });\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: \"toggleCollapse\",\n    value: function toggleCollapse(key) {\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, _defineProperty({}, key, !this.state[key])));\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this3 = this,\n          _this$state$settings$,\n          _this$state$settings$2,\n          _this$state$settings$3;\n\n      var errors = [];\n\n      var _loop = function _loop(i) {\n        errors.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_alert__WEBPACK_IMPORTED_MODULE_2__[\"default\"], _extends({\n          key: \"error-\" + i,\n          onClose: function onClose() {\n            return _this3.removeError(i);\n          }\n        }, _this3.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___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"content-header\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"container-fluid\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"row mb-2\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"col-sm-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"h1\", {\n        className: \"m-0 text-dark\"\n      }, \"Settings\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"col-sm-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"ol\", {\n        className: \"breadcrumb float-sm-right\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"li\", {\n        className: \"breadcrumb-item\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__[\"Link\"], {\n        to: \"/admin/dashboard\"\n      }, \"Home\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"li\", {\n        className: \"breadcrumb-item active\"\n      }, \"Settings\")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"content\"\n      }, errors, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card card-primary\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-header\",\n        style: {\n          cursor: \"pointer\"\n        },\n        onClick: function onClick() {\n          return _this3.toggleCollapse(\"generalOpened\");\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"h4\", {\n        className: \"card-title\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        className: \"mr-2\",\n        icon: \"cogs\"\n      }), \"General Settings\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n        className: \"btn btn-tool btn-sm\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: this.state.generalOpened ? \"angle-up\" : \"angle-down\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_collapse_lib_Collapse__WEBPACK_IMPORTED_MODULE_3__[\"Collapse\"], {\n        isOpened: this.state.generalOpened\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-body\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"row\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"col-12 col-lg-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"form-group\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        htmlFor: \"site_name\"\n      }, \"Site Name\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n        type: \"text\",\n        className: \"form-control\",\n        value: (_this$state$settings$ = this.state.settings[\"site_name\"]) !== null && _this$state$settings$ !== void 0 ? _this$state$settings$ : \"\",\n        placeholder: \"Enter a title\",\n        name: \"site_name\",\n        id: \"site_name\",\n        onChange: this.onChangeValue.bind(this)\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"form-group\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        htmlFor: \"base_url\"\n      }, \"Base URL\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n        type: \"text\",\n        className: \"form-control\",\n        value: (_this$state$settings$2 = this.state.settings[\"base_url\"]) !== null && _this$state$settings$2 !== void 0 ? _this$state$settings$2 : \"\",\n        placeholder: \"Enter a url\",\n        name: \"base_url\",\n        id: \"base_url\",\n        onChange: this.onChangeValue.bind(this)\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"form-group\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        htmlFor: \"user_registration_enabled\"\n      }, \"User Registration\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"form-check\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n        type: \"checkbox\",\n        className: \"form-check-input\",\n        name: \"user_registration_enabled\",\n        id: \"user_registration_enabled\",\n        defaultChecked: ((_this$state$settings$3 = this.state.settings[\"user_registration_enabled\"]) !== null && _this$state$settings$3 !== void 0 ? _this$state$settings$3 : \"0\") === \"1\",\n        onChange: this.onChangeValue.bind(this)\n      }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        className: \"form-check-label\",\n        htmlFor: \"user_registration_enabled\"\n      }, \"Allow anyone to register an account\")))))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card card-warning\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-header\",\n        style: {\n          cursor: \"pointer\"\n        },\n        onClick: function onClick() {\n          return _this3.toggleCollapse(\"mailOpened\");\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"h4\", {\n        className: \"card-title\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        className: \"mr-2\",\n        icon: \"envelope\"\n      }), \"Mail Settings\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n        className: \"btn btn-tool btn-sm\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: this.state.generalOpened ? \"angle-up\" : \"angle-down\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_collapse_lib_Collapse__WEBPACK_IMPORTED_MODULE_3__[\"Collapse\"], {\n        isOpened: this.state.mailOpened\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-body\"\n      }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card card-secondary\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-header\",\n        style: {\n          cursor: \"pointer\"\n        },\n        onClick: function onClick() {\n          return _this3.toggleCollapse(\"etcOpened\");\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"h4\", {\n        className: \"card-title\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        className: \"mr-2\",\n        icon: \"stream\"\n      }), \"Uncategorised\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n        className: \"btn btn-tool btn-sm\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: this.state.generalOpened ? \"angle-up\" : \"angle-down\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_collapse_lib_Collapse__WEBPACK_IMPORTED_MODULE_3__[\"Collapse\"], {\n        isOpened: this.state.etcOpened\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-body\"\n      }))))));\n    }\n  }, {\n    key: \"onChangeValue\",\n    value: function onChangeValue(event) {\n      var target = event.target;\n      var name = target.name;\n      var type = target.type;\n      var value = target.value;\n\n      if (type === \"checkbox\") {\n        value = event.target.checked ? \"1\" : \"0\";\n      }\n\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        user: _objectSpread(_objectSpread({}, this.state.user), {}, {\n          settings: _objectSpread(_objectSpread({}, this.state.settings), {}, _defineProperty({}, name, value))\n        })\n      }));\n    }\n  }]);\n\n  return Settings;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component);\n\n\n\n//# sourceURL=webpack:///./src/views/settings.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return Settings; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/esm/react-router-dom.js\");\n/* harmony import */ var _elements_alert__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../elements/alert */ \"./src/elements/alert.js\");\n/* harmony import */ var react_collapse_lib_Collapse__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-collapse/lib/Collapse */ \"./node_modules/react-collapse/lib/Collapse.js\");\n/* harmony import */ var react_collapse_lib_Collapse__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_collapse_lib_Collapse__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _elements_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../elements/icon */ \"./src/elements/icon.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 _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === \"undefined\" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\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 Settings = /*#__PURE__*/function (_React$Component) {\n  _inherits(Settings, _React$Component);\n\n  var _super = _createSuper(Settings);\n\n  function Settings(props) {\n    var _this;\n\n    _classCallCheck(this, Settings);\n\n    _this = _super.call(this, props);\n    _this.state = {\n      errors: [],\n      mailErrors: [],\n      generalErrors: [],\n      etcErrors: [],\n      settings: {},\n      generalOpened: true,\n      mailOpened: true,\n      etcOpened: true,\n      isResetting: false,\n      isSaving: false,\n      isSending: false,\n      test_email: \"\",\n      unsavedMailSettings: false\n    };\n    _this.parent = {\n      api: props.api\n    };\n    _this.mailKeys = [\"mail_enabled\", \"mail_host\", \"mail_port\", \"mail_username\", \"mail_password\", \"mail_from\"];\n    _this.generalKeys = [\"site_name\", \"base_url\", \"user_registration_enabled\"];\n    return _this;\n  }\n\n  _createClass(Settings, [{\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      var _this2 = this;\n\n      this.parent.api.getSettings().then(function (res) {\n        if (res.success) {\n          _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {\n            settings: res.settings\n          }));\n        } else {\n          var errors = _this2.state.errors.slice();\n\n          errors.push({\n            title: \"Error fetching settings\",\n            message: res.msg\n          });\n\n          _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {\n            errors: errors\n          }));\n        }\n      });\n    }\n  }, {\n    key: \"removeError\",\n    value: function removeError(key, i) {\n      if (i >= 0 && i < this.state[key].length) {\n        var errors = this.state[key].slice();\n        errors.splice(i, 1);\n        this.setState(_objectSpread(_objectSpread({}, this.state), {}, _defineProperty({}, key, errors)));\n      }\n    }\n  }, {\n    key: \"toggleCollapse\",\n    value: function toggleCollapse(key) {\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, _defineProperty({}, key, !this.state[key])));\n    }\n  }, {\n    key: \"getGeneralCard\",\n    value: function getGeneralCard() {\n      var _this3 = this,\n          _this$state$settings$,\n          _this$state$settings$2,\n          _this$state$settings$3;\n\n      var errors = [];\n\n      var _loop = function _loop(i) {\n        errors.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_alert__WEBPACK_IMPORTED_MODULE_2__[\"default\"], _extends({\n          key: \"error-\" + i,\n          onClose: function onClose() {\n            return _this3.removeError(\"generalErrors\", i);\n          }\n        }, _this3.state.generalErrors[i])));\n      };\n\n      for (var i = 0; i < this.state.generalErrors.length; i++) {\n        _loop(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-header\",\n        style: {\n          cursor: \"pointer\"\n        },\n        onClick: function onClick() {\n          return _this3.toggleCollapse(\"generalOpened\");\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"h4\", {\n        className: \"card-title\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        className: \"mr-2\",\n        icon: \"cogs\"\n      }), \"General Settings\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n        className: \"btn btn-tool btn-sm\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: this.state.generalOpened ? \"angle-up\" : \"angle-down\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_collapse_lib_Collapse__WEBPACK_IMPORTED_MODULE_3__[\"Collapse\"], {\n        isOpened: this.state.generalOpened\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-body\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"row\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"col-12 col-lg-6\"\n      }, errors, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"form-group\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        htmlFor: \"site_name\"\n      }, \"Site Name\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n        type: \"text\",\n        className: \"form-control\",\n        value: (_this$state$settings$ = this.state.settings[\"site_name\"]) !== null && _this$state$settings$ !== void 0 ? _this$state$settings$ : \"\",\n        placeholder: \"Enter a title\",\n        name: \"site_name\",\n        id: \"site_name\",\n        onChange: this.onChangeValue.bind(this)\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"form-group\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        htmlFor: \"base_url\"\n      }, \"Base URL\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n        type: \"text\",\n        className: \"form-control\",\n        value: (_this$state$settings$2 = this.state.settings[\"base_url\"]) !== null && _this$state$settings$2 !== void 0 ? _this$state$settings$2 : \"\",\n        placeholder: \"Enter a url\",\n        name: \"base_url\",\n        id: \"base_url\",\n        onChange: this.onChangeValue.bind(this)\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"form-group\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        htmlFor: \"user_registration_enabled\"\n      }, \"User Registration\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"form-check\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n        type: \"checkbox\",\n        className: \"form-check-input\",\n        name: \"user_registration_enabled\",\n        id: \"user_registration_enabled\",\n        defaultChecked: ((_this$state$settings$3 = this.state.settings[\"user_registration_enabled\"]) !== null && _this$state$settings$3 !== void 0 ? _this$state$settings$3 : \"0\") === \"1\",\n        onChange: this.onChangeValue.bind(this)\n      }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        className: \"form-check-label\",\n        htmlFor: \"user_registration_enabled\"\n      }, \"Allow anyone to register an account\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", {\n        className: \"btn btn-secondary ml-2\",\n        onClick: function onClick() {\n          return _this3.onReset(\"generalErrors\", _this3.generalKeys);\n        },\n        disabled: this.state.isResetting || this.state.isSaving\n      }, this.state.isResetting ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", null, \"Resetting\\xA0\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: \"circle-notch\"\n      })) : \"Reset\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", {\n        className: \"btn btn-success ml-2\",\n        onClick: function onClick() {\n          return _this3.onSave(\"generalErrors\", _this3.generalKeys);\n        },\n        disabled: this.state.isResetting || this.state.isSaving\n      }, this.state.isSaving ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", null, \"Saving\\xA0\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: \"circle-notch\"\n      })) : \"Save\")))))));\n    }\n  }, {\n    key: \"getEmailCard\",\n    value: function getEmailCard() {\n      var _this4 = this,\n          _this$state$settings$4,\n          _this$state$settings$5,\n          _this$state$settings$6,\n          _this$state$settings$7,\n          _this$state$settings$8,\n          _this$state$settings$9,\n          _this$state$settings$10,\n          _this$state$settings$11,\n          _this$state$settings$12,\n          _this$state$settings$13,\n          _this$state$settings$14,\n          _this$state$settings$15,\n          _this$state$settings$16;\n\n      var errors = [];\n\n      var _loop2 = function _loop2(i) {\n        errors.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_alert__WEBPACK_IMPORTED_MODULE_2__[\"default\"], _extends({\n          key: \"error-\" + i,\n          onClose: function onClose() {\n            return _this4.removeError(\"mailErrors\", i);\n          }\n        }, _this4.state.mailErrors[i])));\n      };\n\n      for (var i = 0; i < this.state.mailErrors.length; i++) {\n        _loop2(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-header\",\n        style: {\n          cursor: \"pointer\"\n        },\n        onClick: function onClick() {\n          return _this4.toggleCollapse(\"mailOpened\");\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"h4\", {\n        className: \"card-title\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        className: \"mr-2\",\n        icon: \"envelope\"\n      }), \"Mail Settings\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n        className: \"btn btn-tool btn-sm\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: this.state.mailOpened ? \"angle-up\" : \"angle-down\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_collapse_lib_Collapse__WEBPACK_IMPORTED_MODULE_3__[\"Collapse\"], {\n        isOpened: this.state.mailOpened\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-body\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"row\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"col-12 col-lg-6\"\n      }, errors, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"form-group mt-2\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"form-check\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n        type: \"checkbox\",\n        className: \"form-check-input\",\n        name: \"mail_enabled\",\n        id: \"mail_enabled\",\n        checked: ((_this$state$settings$4 = this.state.settings[\"mail_enabled\"]) !== null && _this$state$settings$4 !== void 0 ? _this$state$settings$4 : \"0\") === \"1\",\n        onChange: this.onChangeValue.bind(this)\n      }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        className: \"form-check-label\",\n        htmlFor: \"mail_enabled\"\n      }, \"Enable E-Mail service\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"hr\", {\n        className: \"m-3\"\n      }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        htmlFor: \"mail_username\"\n      }, \"Username\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"input-group\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"input-group-prepend\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n        className: \"input-group-text\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: \"hashtag\"\n      }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n        type: \"text\",\n        className: \"form-control\",\n        value: (_this$state$settings$5 = this.state.settings[\"mail_username\"]) !== null && _this$state$settings$5 !== void 0 ? _this$state$settings$5 : \"\",\n        placeholder: \"Enter a username\",\n        name: \"mail_username\",\n        id: \"mail_username\",\n        onChange: this.onChangeValue.bind(this),\n        disabled: ((_this$state$settings$6 = this.state.settings[\"mail_enabled\"]) !== null && _this$state$settings$6 !== void 0 ? _this$state$settings$6 : \"0\") !== \"1\"\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        htmlFor: \"mail_password\",\n        className: \"mt-2\"\n      }, \"Password\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"input-group\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"input-group-prepend\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n        className: \"input-group-text\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: \"key\"\n      }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n        type: \"password\",\n        className: \"form-control\",\n        value: (_this$state$settings$7 = this.state.settings[\"mail_password\"]) !== null && _this$state$settings$7 !== void 0 ? _this$state$settings$7 : \"\",\n        placeholder: \"(unchanged)\",\n        name: \"mail_password\",\n        id: \"mail_password\",\n        onChange: this.onChangeValue.bind(this),\n        disabled: ((_this$state$settings$8 = this.state.settings[\"mail_enabled\"]) !== null && _this$state$settings$8 !== void 0 ? _this$state$settings$8 : \"0\") !== \"1\"\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        htmlFor: \"mail_from\",\n        className: \"mt-2\"\n      }, \"Sender Email Address\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"input-group\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"input-group-prepend\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n        className: \"input-group-text\"\n      }, \"@\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n        type: \"email\",\n        className: \"form-control\",\n        value: (_this$state$settings$9 = this.state.settings[\"mail_from\"]) !== null && _this$state$settings$9 !== void 0 ? _this$state$settings$9 : \"\",\n        placeholder: \"Enter a email address\",\n        name: \"mail_from\",\n        id: \"mail_from\",\n        onChange: this.onChangeValue.bind(this),\n        disabled: ((_this$state$settings$10 = this.state.settings[\"mail_enabled\"]) !== null && _this$state$settings$10 !== void 0 ? _this$state$settings$10 : \"0\") !== \"1\"\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"row\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"col-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        htmlFor: \"mail_host\",\n        className: \"mt-2\"\n      }, \"SMTP Host\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"input-group\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"input-group-prepend\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n        className: \"input-group-text\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: \"project-diagram\"\n      }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n        type: \"text\",\n        className: \"form-control\",\n        value: (_this$state$settings$11 = this.state.settings[\"mail_host\"]) !== null && _this$state$settings$11 !== void 0 ? _this$state$settings$11 : \"\",\n        placeholder: \"e.g. smtp.example.com\",\n        name: \"mail_host\",\n        id: \"mail_host\",\n        onChange: this.onChangeValue.bind(this),\n        disabled: ((_this$state$settings$12 = this.state.settings[\"mail_enabled\"]) !== null && _this$state$settings$12 !== void 0 ? _this$state$settings$12 : \"0\") !== \"1\"\n      }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"col-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        htmlFor: \"mail_port\",\n        className: \"mt-2\"\n      }, \"SMTP Port\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"input-group\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"input-group-prepend\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n        className: \"input-group-text\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: \"project-diagram\"\n      }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n        type: \"number\",\n        className: \"form-control\",\n        value: parseInt((_this$state$settings$13 = this.state.settings[\"mail_port\"]) !== null && _this$state$settings$13 !== void 0 ? _this$state$settings$13 : \"25\"),\n        placeholder: \"smtp port\",\n        name: \"mail_port\",\n        id: \"mail_port\",\n        onChange: this.onChangeValue.bind(this),\n        disabled: ((_this$state$settings$14 = this.state.settings[\"mail_enabled\"]) !== null && _this$state$settings$14 !== void 0 ? _this$state$settings$14 : \"0\") !== \"1\"\n      }))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", {\n        className: \"btn btn-secondary ml-2\",\n        onClick: function onClick() {\n          return _this4.onReset(\"mailErrors\", _this4.mailKeys);\n        },\n        disabled: this.state.isResetting || this.state.isSaving\n      }, this.state.isResetting ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", null, \"Resetting\\xA0\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: \"circle-notch\"\n      })) : \"Reset\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", {\n        className: \"btn btn-success ml-2\",\n        onClick: function onClick() {\n          return _this4.onSave(\"mailErrors\", _this4.mailKeys);\n        },\n        disabled: this.state.isResetting || this.state.isSaving\n      }, this.state.isSaving ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", null, \"Saving\\xA0\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: \"circle-notch\"\n      })) : \"Save\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"mt-3\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", {\n        htmlFor: \"mail_from\",\n        className: \"mt-2\"\n      }, \"Send Test E-Mail\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"input-group\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"input-group-prepend\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n        className: \"input-group-text\"\n      }, \"@\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", {\n        type: \"email\",\n        className: \"form-control\",\n        value: this.state.test_email,\n        placeholder: \"Enter a email address\",\n        onChange: function onChange(e) {\n          return _this4.setState(_objectSpread(_objectSpread({}, _this4.state), {}, {\n            test_email: e.target.value\n          }));\n        },\n        disabled: ((_this$state$settings$15 = this.state.settings[\"mail_enabled\"]) !== null && _this$state$settings$15 !== void 0 ? _this$state$settings$15 : \"0\") !== \"1\"\n      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"form-group form-inline mt-3\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", {\n        className: \"btn btn-info col-2\",\n        onClick: function onClick() {\n          return _this4.onSendTestMail();\n        },\n        disabled: ((_this$state$settings$16 = this.state.settings[\"mail_enabled\"]) !== null && _this$state$settings$16 !== void 0 ? _this$state$settings$16 : \"0\") !== \"1\" || this.state.isSending\n      }, this.state.isSending ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", null, \"Sending\\xA0\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: \"circle-notch\"\n      })) : \"Send Mail\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"col-10\"\n      }, this.state.unsavedMailSettings ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n        className: \"text-red\"\n      }, \"You need to save your mail settings first.\") : null))))))));\n    }\n  }, {\n    key: \"getUncategorisedCard\",\n    value: function getUncategorisedCard() {\n      var _this5 = this;\n\n      var keys = [];\n      var tr = [];\n\n      for (var key in this.state.settings) {\n        if (this.state.settings.hasOwnProperty(key)) {\n          if (!this.generalKeys.includes(key) && !this.mailKeys.includes(key)) {\n            keys.push(key);\n            tr.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"tr\", {\n              key: \"tr-\" + key\n            }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"td\", null, key), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"td\", null, this.state.settings[key])));\n          }\n        }\n      }\n\n      var errors = [];\n\n      var _loop3 = function _loop3(i) {\n        errors.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_alert__WEBPACK_IMPORTED_MODULE_2__[\"default\"], _extends({\n          key: \"error-\" + i,\n          onClose: function onClose() {\n            return _this5.removeError(\"etcErrors\", i);\n          }\n        }, _this5.state.etcErrors[i])));\n      };\n\n      for (var i = 0; i < this.state.etcErrors.length; i++) {\n        _loop3(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-header\",\n        style: {\n          cursor: \"pointer\"\n        },\n        onClick: function onClick() {\n          return _this5.toggleCollapse(\"etcOpened\");\n        }\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"h4\", {\n        className: \"card-title\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        className: \"mr-2\",\n        icon: \"cogs\"\n      }), \"General Settings\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-tools\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n        className: \"btn btn-tool btn-sm\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: this.state.etcOpened ? \"angle-up\" : \"angle-down\"\n      })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_collapse_lib_Collapse__WEBPACK_IMPORTED_MODULE_3__[\"Collapse\"], {\n        isOpened: this.state.etcOpened\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card-body\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"row\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"col-12 col-lg-6\"\n      }, errors, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"table\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"thead\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"tr\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"th\", null, \"Key\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"th\", null, \"Value\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"tbody\", null, tr)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", {\n        className: \"btn btn-secondary ml-2\",\n        onClick: function onClick() {\n          return _this5.onReset(\"etcErrors\", keys);\n        },\n        disabled: this.state.isResetting || this.state.isSaving\n      }, this.state.isResetting ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", null, \"Resetting\\xA0\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: \"circle-notch\"\n      })) : \"Reset\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", {\n        className: \"btn btn-success ml-2\",\n        onClick: function onClick() {\n          return _this5.onSave(\"etcErrors\", keys);\n        },\n        disabled: this.state.isResetting || this.state.isSaving\n      }, this.state.isSaving ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", null, \"Saving\\xA0\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        icon: \"circle-notch\"\n      })) : \"Save\")))))));\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this6 = this;\n\n      var errors = [];\n\n      var _loop4 = function _loop4(i) {\n        errors.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements_alert__WEBPACK_IMPORTED_MODULE_2__[\"default\"], _extends({\n          key: \"error-\" + i,\n          onClose: function onClose() {\n            return _this6.removeError(\"errors\", i);\n          }\n        }, _this6.state.errors[i])));\n      };\n\n      for (var i = 0; i < this.state.errors.length; i++) {\n        _loop4(i);\n      }\n\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"content-header\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"container-fluid\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"row mb-2\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"col-sm-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"h1\", {\n        className: \"m-0 text-dark\"\n      }, \"Settings\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"col-sm-6\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"ol\", {\n        className: \"breadcrumb float-sm-right\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"li\", {\n        className: \"breadcrumb-item\"\n      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__[\"Link\"], {\n        to: \"/admin/dashboard\"\n      }, \"Home\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"li\", {\n        className: \"breadcrumb-item active\"\n      }, \"Settings\")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"content\"\n      }, errors, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card card-primary\"\n      }, this.getGeneralCard()), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card card-warning\"\n      }, this.getEmailCard()), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n        className: \"card card-secondary\"\n      }, this.getUncategorisedCard()))));\n    }\n  }, {\n    key: \"onChangeValue\",\n    value: function onChangeValue(event) {\n      var target = event.target;\n      var name = target.name;\n      var type = target.type;\n      var value = target.value;\n\n      if (type === \"checkbox\") {\n        value = event.target.checked ? \"1\" : \"0\";\n      }\n\n      var changedMailSettings = false;\n\n      if (name.startsWith(\"mail_\")) {\n        changedMailSettings = true;\n      }\n\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        settings: _objectSpread(_objectSpread({}, this.state.settings), {}, _defineProperty({}, name, value)),\n        unsavedMailSettings: changedMailSettings ? true : this.state.unsavedMailSettings\n      }));\n    }\n  }, {\n    key: \"onReset\",\n    value: function onReset(errorKey, keys) {\n      var _this7 = this;\n\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        isResetting: true\n      }));\n      var values = {};\n\n      var _iterator = _createForOfIteratorHelper(keys),\n          _step;\n\n      try {\n        for (_iterator.s(); !(_step = _iterator.n()).done;) {\n          var key = _step.value;\n          values[key] = this.state.settings[key];\n        }\n      } catch (err) {\n        _iterator.e(err);\n      } finally {\n        _iterator.f();\n      }\n\n      var mailSettingsSaved = errorKey === \"mailErrors\";\n      this.parent.api.getSettings().then(function (res) {\n        if (!res.success) {\n          var _objectSpread5;\n\n          var errors = _this7.state[errorKey].slice();\n\n          errors.push({\n            title: \"Error fetching settings\",\n            message: res.msg\n          });\n\n          _this7.setState(_objectSpread(_objectSpread({}, _this7.state), {}, (_objectSpread5 = {}, _defineProperty(_objectSpread5, errorKey, errors), _defineProperty(_objectSpread5, \"isResetting\", false), _objectSpread5)));\n        } else {\n          var newSettings = _objectSpread({}, _this7.state.settings);\n\n          var _iterator2 = _createForOfIteratorHelper(keys),\n              _step2;\n\n          try {\n            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {\n              var _res$settings$key;\n\n              var key = _step2.value;\n              newSettings[key] = (_res$settings$key = res.settings[key]) !== null && _res$settings$key !== void 0 ? _res$settings$key : \"\";\n            }\n          } catch (err) {\n            _iterator2.e(err);\n          } finally {\n            _iterator2.f();\n          }\n\n          _this7.setState(_objectSpread(_objectSpread({}, _this7.state), {}, {\n            settings: newSettings,\n            isResetting: false,\n            unsavedMailSettings: mailSettingsSaved ? false : _this7.state.unsavedMailSettings\n          }));\n        }\n      });\n    }\n  }, {\n    key: \"onSave\",\n    value: function onSave(errorKey, keys) {\n      var _this8 = this;\n\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        isSaving: true\n      }));\n      var values = {};\n\n      var _iterator3 = _createForOfIteratorHelper(keys),\n          _step3;\n\n      try {\n        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {\n          var key = _step3.value;\n\n          if (key === \"mail_password\" && !this.state.settings[key]) {\n            continue;\n          }\n\n          values[key] = this.state.settings[key];\n        }\n      } catch (err) {\n        _iterator3.e(err);\n      } finally {\n        _iterator3.f();\n      }\n\n      var mailSettingsSaved = errorKey === \"mailErrors\";\n      this.parent.api.saveSettings(values).then(function (res) {\n        if (!res.success) {\n          var _objectSpread6;\n\n          var errors = _this8.state[errorKey].slice();\n\n          errors.push({\n            title: \"Error fetching settings\",\n            message: res.msg\n          });\n\n          _this8.setState(_objectSpread(_objectSpread({}, _this8.state), {}, (_objectSpread6 = {}, _defineProperty(_objectSpread6, errorKey, errors), _defineProperty(_objectSpread6, \"isSaving\", false), _objectSpread6)));\n        } else {\n          _this8.setState(_objectSpread(_objectSpread({}, _this8.state), {}, {\n            isSaving: false,\n            unsavedMailSettings: mailSettingsSaved ? false : _this8.state.unsavedMailSettings\n          }));\n        }\n      });\n    }\n  }, {\n    key: \"onSendTestMail\",\n    value: function onSendTestMail() {\n      var _this9 = this;\n\n      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {\n        isSending: true\n      }));\n      this.parent.api.sendTestMail(this.state.test_email).then(function (res) {\n        var errors = _this9.state.mailErrors.slice();\n\n        if (!res.success) {\n          errors.push({\n            title: \"Error sending email\",\n            message: res.msg\n          });\n\n          _this9.setState(_objectSpread(_objectSpread({}, _this9.state), {}, {\n            mailErrors: errors,\n            isSending: false\n          }));\n        } else {\n          errors.push({\n            title: \"Success!\",\n            message: \"E-Mail was successfully sent, check your inbox.\",\n            type: \"success\"\n          });\n\n          _this9.setState(_objectSpread(_objectSpread({}, _this9.state), {}, {\n            mailErrors: errors,\n            isSending: false,\n            test_email: \"\"\n          }));\n        }\n      });\n    }\n  }]);\n\n  return Settings;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component);\n\n\n\n//# sourceURL=webpack:///./src/views/settings.js?");
 
 /***/ }),
 
diff --git a/src/src/api.js b/src/src/api.js
index 73dc8e5..b12c8ab 100644
--- a/src/src/api.js
+++ b/src/src/api.js
@@ -94,4 +94,13 @@ export default class API {
     async getSettings(key = "") {
         return this.apiCall("settings/get", { key: key });
     }
+
+    async saveSettings(settings) {
+        return this.apiCall("settings/set", { settings: settings });
+    }
+
+    async sendTestMail(receiver) {
+        return this.apiCall("sendTestMail", { receiver: receiver });
+
+    }
 };
\ No newline at end of file
diff --git a/src/src/views/settings.js b/src/src/views/settings.js
index ad6853f..7cc4444 100644
--- a/src/src/views/settings.js
+++ b/src/src/views/settings.js
@@ -11,46 +11,352 @@ export default class Settings extends React.Component {
 
         this.state = {
             errors: [],
+            mailErrors: [],
+            generalErrors: [],
+            etcErrors: [],
             settings: {},
             generalOpened: true,
             mailOpened: true,
-            etcOpened : true
+            etcOpened: true,
+            isResetting: false,
+            isSaving: false,
+            isSending: false,
+            test_email: "",
+            unsavedMailSettings: false
         };
 
         this.parent = {
             api: props.api
-        }
+        };
+
+        this.mailKeys = ["mail_enabled", "mail_host", "mail_port", "mail_username", "mail_password", "mail_from"];
+        this.generalKeys = ["site_name", "base_url", "user_registration_enabled"];
     }
 
     componentDidMount() {
         this.parent.api.getSettings().then((res) => {
             if (res.success) {
-                this.setState({...this.state, settings: res.settings });
+                this.setState({...this.state, settings: res.settings});
             } else {
                 let errors = this.state.errors.slice();
-                errors.push({ title: "Error fetching settings", message: res.msg });
+                errors.push({title: "Error fetching settings", message: res.msg});
                 this.setState({...this.state, errors: errors});
             }
         });
     }
 
-    removeError(i) {
-        if (i >= 0 && i < this.state.errors.length) {
-            let errors = this.state.errors.slice();
+    removeError(key, i) {
+        if (i >= 0 && i < this.state[key].length) {
+            let errors = this.state[key].slice();
             errors.splice(i, 1);
-            this.setState({...this.state, errors: errors});
+            this.setState({...this.state, [key]: errors});
         }
     }
 
     toggleCollapse(key) {
-        this.setState({ ...this.state, [key]: !this.state[key] });
+        this.setState({...this.state, [key]: !this.state[key]});
+    }
+
+    getGeneralCard() {
+
+        let errors = [];
+        for (let i = 0; i < this.state.generalErrors.length; i++) {
+            errors.push(<Alert key={"error-" + i} onClose={() => this.removeError("generalErrors", i)} {...this.state.generalErrors[i]}/>)
+        }
+
+        return <>
+            <div className={"card-header"} style={{cursor: "pointer"}}
+                 onClick={() => this.toggleCollapse("generalOpened")}>
+                <h4 className={"card-title"}>
+                    <Icon className={"mr-2"} icon={"cogs"}/>
+                    General Settings
+                </h4>
+                <div className={"card-tools"}>
+                    <span className={"btn btn-tool btn-sm"}>
+                        <Icon icon={this.state.generalOpened ? "angle-up" : "angle-down"}/>
+                    </span>
+                </div>
+            </div>
+            <Collapse isOpened={this.state.generalOpened}>
+                <div className={"card-body"}>
+                    <div className={"row"}>
+                        <div className={"col-12 col-lg-6"}>
+                            {errors}
+                            <div className={"form-group"}>
+                                <label htmlFor={"site_name"}>Site Name</label>
+                                <input type={"text"} className={"form-control"}
+                                       value={this.state.settings["site_name"] ?? ""}
+                                       placeholder={"Enter a title"} name={"site_name"} id={"site_name"}
+                                       onChange={this.onChangeValue.bind(this)}/>
+                            </div>
+                            <div className={"form-group"}>
+                                <label htmlFor={"base_url"}>Base URL</label>
+                                <input type={"text"} className={"form-control"}
+                                       value={this.state.settings["base_url"] ?? ""}
+                                       placeholder={"Enter a url"} name={"base_url"} id={"base_url"}
+                                       onChange={this.onChangeValue.bind(this)}/>
+                            </div>
+                            <div className={"form-group"}>
+                                <label htmlFor={"user_registration_enabled"}>User Registration</label>
+                                <div className={"form-check"}>
+                                    <input type={"checkbox"} className={"form-check-input"}
+                                           name={"user_registration_enabled"}
+                                           id={"user_registration_enabled"}
+                                           defaultChecked={(this.state.settings["user_registration_enabled"] ?? "0") === "1"}
+                                           onChange={this.onChangeValue.bind(this)}/>
+                                    <label className={"form-check-label"}
+                                           htmlFor={"user_registration_enabled"}>
+                                        Allow anyone to register an account
+                                    </label>
+                                </div>
+                            </div>
+                            <div>
+                                <button className={"btn btn-secondary ml-2"} onClick={() => this.onReset("generalErrors", this.generalKeys)}
+                                        disabled={this.state.isResetting || this.state.isSaving}>
+                                    {this.state.isResetting ?
+                                        <span>Resetting&nbsp;<Icon icon={"circle-notch"}/></span> : "Reset"}
+                                </button>
+                                <button className={"btn btn-success ml-2"} onClick={() => this.onSave("generalErrors", this.generalKeys)}
+                                        disabled={this.state.isResetting || this.state.isSaving}>
+                                    {this.state.isSaving ?
+                                        <span>Saving&nbsp;<Icon icon={"circle-notch"}/></span> : "Save"}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Collapse>
+        </>
+    }
+
+    getEmailCard() {
+
+        let errors = [];
+        for (let i = 0; i < this.state.mailErrors.length; i++) {
+            errors.push(<Alert key={"error-" + i} onClose={() => this.removeError("mailErrors", i)} {...this.state.mailErrors[i]}/>)
+        }
+
+        return <>
+            <div className={"card-header"} style={{cursor: "pointer"}}
+                 onClick={() => this.toggleCollapse("mailOpened")}>
+                <h4 className={"card-title"}>
+                    <Icon className={"mr-2"} icon={"envelope"}/>
+                    Mail Settings
+                </h4>
+                <div className={"card-tools"}>
+                    <span className={"btn btn-tool btn-sm"}>
+                        <Icon icon={this.state.mailOpened ? "angle-up" : "angle-down"}/>
+                    </span>
+                </div>
+            </div>
+            <Collapse isOpened={this.state.mailOpened}>
+                <div className={"card-body"}>
+                    <div className={"row"}>
+                        <div className={"col-12 col-lg-6"}>
+                            {errors}
+                            <div className={"form-group mt-2"}>
+                                <div className={"form-check"}>
+                                    <input type={"checkbox"} className={"form-check-input"}
+                                           name={"mail_enabled"} id={"mail_enabled"}
+                                           checked={(this.state.settings["mail_enabled"] ?? "0") === "1"}
+                                           onChange={this.onChangeValue.bind(this)}/>
+                                    <label className={"form-check-label"} htmlFor={"mail_enabled"}>
+                                        Enable E-Mail service
+                                    </label>
+                                </div>
+                                <hr className={"m-3"}/>
+                                <label htmlFor={"mail_username"}>Username</label>
+                                <div className={"input-group"}>
+                                    <div className={"input-group-prepend"}>
+                                        <span className={"input-group-text"}>
+                                            <Icon icon={"hashtag"}/>
+                                        </span>
+                                    </div>
+                                    <input type={"text"} className={"form-control"}
+                                           value={this.state.settings["mail_username"] ?? ""}
+                                           placeholder={"Enter a username"} name={"mail_username"}
+                                           id={"mail_username"} onChange={this.onChangeValue.bind(this)}
+                                           disabled={(this.state.settings["mail_enabled"] ?? "0") !== "1"}/>
+                                </div>
+                                <label htmlFor={"mail_password"} className={"mt-2"}>Password</label>
+                                <div className={"input-group"}>
+                                    <div className={"input-group-prepend"}>
+                                                    <span className={"input-group-text"}>
+                                                        <Icon icon={"key"}/>
+                                                    </span>
+                                    </div>
+                                    <input type={"password"} className={"form-control"}
+                                           value={this.state.settings["mail_password"] ?? ""}
+                                           placeholder={"(unchanged)"} name={"mail_password"}
+                                           id={"mail_password"} onChange={this.onChangeValue.bind(this)}
+                                           disabled={(this.state.settings["mail_enabled"] ?? "0") !== "1"}/>
+                                </div>
+                                <label htmlFor={"mail_from"} className={"mt-2"}>Sender Email Address</label>
+                                <div className={"input-group"}>
+                                    <div className={"input-group-prepend"}>
+                                        <span className={"input-group-text"}>@</span>
+                                    </div>
+                                    <input type={"email"} className={"form-control"}
+                                           value={this.state.settings["mail_from"] ?? ""}
+                                           placeholder={"Enter a email address"} name={"mail_from"}
+                                           id={"mail_from"} onChange={this.onChangeValue.bind(this)}
+                                           disabled={(this.state.settings["mail_enabled"] ?? "0") !== "1"}/>
+                                </div>
+                                <div className={"row"}>
+                                    <div className={"col-6"}>
+                                        <label htmlFor={"mail_host"} className={"mt-2"}>SMTP Host</label>
+                                        <div className={"input-group"}>
+                                            <div className={"input-group-prepend"}>
+                                                            <span className={"input-group-text"}>
+                                                                <Icon icon={"project-diagram"}/>
+                                                            </span>
+                                            </div>
+                                            <input type={"text"} className={"form-control"}
+                                                   value={this.state.settings["mail_host"] ?? ""}
+                                                   placeholder={"e.g. smtp.example.com"} name={"mail_host"}
+                                                   id={"mail_host"} onChange={this.onChangeValue.bind(this)}
+                                                   disabled={(this.state.settings["mail_enabled"] ?? "0") !== "1"}/>
+                                        </div>
+                                    </div>
+                                    <div className={"col-6"}>
+                                        <label htmlFor={"mail_port"} className={"mt-2"}>SMTP Port</label>
+                                        <div className={"input-group"}>
+                                            <div className={"input-group-prepend"}>
+                                                            <span className={"input-group-text"}>
+                                                                <Icon icon={"project-diagram"}/>
+                                                            </span>
+                                            </div>
+                                            <input type={"number"} className={"form-control"}
+                                                   value={parseInt(this.state.settings["mail_port"] ?? "25")}
+                                                   placeholder={"smtp port"} name={"mail_port"}
+                                                   id={"mail_port"} onChange={this.onChangeValue.bind(this)}
+                                                   disabled={(this.state.settings["mail_enabled"] ?? "0") !== "1"}/>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div>
+                                <button className={"btn btn-secondary ml-2"}
+                                        onClick={() => this.onReset("mailErrors", this.mailKeys)}
+                                        disabled={this.state.isResetting || this.state.isSaving}>
+                                    {this.state.isResetting ?
+                                        <span>Resetting&nbsp;<Icon icon={"circle-notch"}/></span> : "Reset"}
+                                </button>
+                                <button className={"btn btn-success ml-2"}
+                                        onClick={() => this.onSave("mailErrors", this.mailKeys)}
+                                        disabled={this.state.isResetting || this.state.isSaving}>
+                                    {this.state.isSaving ?
+                                        <span>Saving&nbsp;<Icon icon={"circle-notch"}/></span> : "Save"}
+                                </button>
+                            </div>
+                            <div className={"mt-3"}>
+                                <label htmlFor={"mail_from"} className={"mt-2"}>Send Test E-Mail</label>
+                                <div className={"input-group"}>
+                                    <div className={"input-group-prepend"}>
+                                        <span className={"input-group-text"}>@</span>
+                                    </div>
+                                    <input type={"email"} className={"form-control"}
+                                           value={this.state.test_email}
+                                           placeholder={"Enter a email address"}
+                                           onChange={(e) => this.setState({
+                                               ...this.state,
+                                               test_email: e.target.value
+                                           })}
+                                           disabled={(this.state.settings["mail_enabled"] ?? "0") !== "1"}/>
+                                </div>
+                                <div className={"form-group form-inline mt-3"}>
+                                    <button className={"btn btn-info col-2"}
+                                            onClick={() => this.onSendTestMail()}
+                                            disabled={(this.state.settings["mail_enabled"] ?? "0") !== "1" || this.state.isSending}>
+                                        {this.state.isSending ?
+                                            <span>Sending&nbsp;<Icon icon={"circle-notch"}/></span> : "Send Mail"}
+                                    </button>
+                                    <div className={"col-10"}>
+                                        { this.state.unsavedMailSettings ? <span className={"text-red"}>You need to save your mail settings first.</span> : null }
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Collapse>
+        </>
+    }
+
+    getUncategorisedCard() {
+
+        let keys = [];
+        let tr = [];
+        for (let key in this.state.settings) {
+            if (this.state.settings.hasOwnProperty(key)) {
+                if (!this.generalKeys.includes(key) && !this.mailKeys.includes(key)) {
+                    keys.push(key);
+                    tr.push(<tr key={"tr-" + key}>
+                        <td>{key}</td>
+                        <td>{this.state.settings[key]}</td>
+                    </tr>);
+                }
+            }
+        }
+
+        let errors = [];
+        for (let i = 0; i < this.state.etcErrors.length; i++) {
+            errors.push(<Alert key={"error-" + i} onClose={() => this.removeError("etcErrors", i)} {...this.state.etcErrors[i]}/>)
+        }
+
+        return <>
+            <div className={"card-header"} style={{cursor: "pointer"}}
+                 onClick={() => this.toggleCollapse("etcOpened")}>
+                <h4 className={"card-title"}>
+                    <Icon className={"mr-2"} icon={"cogs"}/>
+                    General Settings
+                </h4>
+                <div className={"card-tools"}>
+                    <span className={"btn btn-tool btn-sm"}>
+                        <Icon icon={this.state.etcOpened ? "angle-up" : "angle-down"}/>
+                    </span>
+                </div>
+            </div>
+            <Collapse isOpened={this.state.etcOpened}>
+                <div className={"card-body"}>
+                    <div className={"row"}>
+                        <div className={"col-12 col-lg-6"}>
+                            {errors}
+                            <table>
+                                <thead>
+                                    <tr>
+                                        <th>Key</th>
+                                        <th>Value</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {tr}
+                                </tbody>
+                            </table>
+                            <div>
+                                <button className={"btn btn-secondary ml-2"} onClick={() => this.onReset("etcErrors", keys)}
+                                        disabled={this.state.isResetting || this.state.isSaving}>
+                                    {this.state.isResetting ?
+                                        <span>Resetting&nbsp;<Icon icon={"circle-notch"}/></span> : "Reset"}
+                                </button>
+                                <button className={"btn btn-success ml-2"} onClick={() => this.onSave("etcErrors", keys)}
+                                        disabled={this.state.isResetting || this.state.isSaving}>
+                                    {this.state.isSaving ?
+                                        <span>Saving&nbsp;<Icon icon={"circle-notch"}/></span> : "Save"}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Collapse>
+        </>
     }
 
     render() {
 
         let errors = [];
         for (let i = 0; i < this.state.errors.length; i++) {
-            errors.push(<Alert key={"error-" + i} onClose={() => this.removeError(i)} {...this.state.errors[i]}/>)
+            errors.push(<Alert key={"error-" + i} onClose={() => this.removeError("errors", i)} {...this.state.errors[i]}/>)
         }
 
         return <>
@@ -73,80 +379,13 @@ export default class Settings extends React.Component {
                 {errors}
                 <div>
                     <div className={"card card-primary"}>
-                        <div className={"card-header"} style={{cursor: "pointer"}} onClick={() => this.toggleCollapse("generalOpened")}>
-                            <h4 className={"card-title"}>
-                                <Icon className={"mr-2"} icon={"cogs"} />
-                                General Settings
-                            </h4>
-                            <div className={"card-tools"}>
-                                <span className={"btn btn-tool btn-sm"}>
-                                    <Icon icon={ this.state.generalOpened ? "angle-up" : "angle-down" }/>
-                                </span>
-                            </div>
-                        </div>
-                        <Collapse isOpened={this.state.generalOpened}>
-                            <div className={"card-body"}>
-                                <div className={"row"}>
-                                    <div className={"col-12 col-lg-6"}>
-                                        <div className={"form-group"}>
-                                            <label htmlFor={"site_name"}>Site Name</label>
-                                            <input type={"text"} className={"form-control"} value={this.state.settings["site_name"] ?? ""}
-                                                   placeholder={"Enter a title"} name={"site_name"} id={"site_name"} onChange={this.onChangeValue.bind(this)} />
-                                        </div>
-                                        <div className={"form-group"}>
-                                            <label htmlFor={"base_url"}>Base URL</label>
-                                            <input type={"text"} className={"form-control"} value={this.state.settings["base_url"] ?? ""}
-                                                   placeholder={"Enter a url"} name={"base_url"} id={"base_url"} onChange={this.onChangeValue.bind(this)} />
-                                        </div>
-                                        <div className={"form-group"}>
-                                            <label htmlFor={"user_registration_enabled"}>User Registration</label>
-                                            <div className={"form-check"}>
-                                                <input type={"checkbox"} className={"form-check-input"} name={"user_registration_enabled"} id={"user_registration_enabled"}
-                                                       defaultChecked={(this.state.settings["user_registration_enabled"] ?? "0") === "1"}
-                                                       onChange={this.onChangeValue.bind(this)} />
-                                                <label className={"form-check-label"} htmlFor={"user_registration_enabled"}>Allow anyone to register an account</label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </Collapse>
+                        {this.getGeneralCard()}
                     </div>
                     <div className={"card card-warning"}>
-                        <div className={"card-header"} style={{cursor: "pointer"}} onClick={() => this.toggleCollapse("mailOpened")}>
-                            <h4 className={"card-title"}>
-                                <Icon className={"mr-2"} icon={"envelope"} />
-                                Mail Settings
-                            </h4>
-                            <div className={"card-tools"}>
-                                <span className={"btn btn-tool btn-sm"}>
-                                    <Icon icon={ this.state.generalOpened ? "angle-up" : "angle-down" }/>
-                                </span>
-                            </div>
-                        </div>
-                        <Collapse isOpened={this.state.mailOpened}>
-                            <div className={"card-body"}>
-
-                            </div>
-                        </Collapse>
+                        {this.getEmailCard()}
                     </div>
                     <div className={"card card-secondary"}>
-                        <div className={"card-header"} style={{cursor: "pointer"}} onClick={() => this.toggleCollapse("etcOpened")}>
-                            <h4 className={"card-title"}>
-                                <Icon className={"mr-2"} icon={"stream"} />
-                                Uncategorised
-                            </h4>
-                            <div className={"card-tools"}>
-                                <span className={"btn btn-tool btn-sm"}>
-                                    <Icon icon={ this.state.generalOpened ? "angle-up" : "angle-down" }/>
-                                </span>
-                            </div>
-                        </div>
-                        <Collapse isOpened={this.state.etcOpened}>
-                            <div className={"card-body"}>
-
-                            </div>
-                        </Collapse>
+                        {this.getUncategorisedCard()}
                     </div>
                 </div>
             </div>
@@ -156,13 +395,88 @@ export default class Settings extends React.Component {
     onChangeValue(event) {
         const target = event.target;
         const name = target.name;
-        const type  = target.type;
+        const type = target.type;
         let value = target.value;
 
         if (type === "checkbox") {
             value = event.target.checked ? "1" : "0";
         }
 
-        this.setState({ ...this.state, user: { ...this.state.user, settings: { ...this.state.settings, [name]: value} } });
+        let changedMailSettings = false;
+        if (name.startsWith("mail_")) {
+            changedMailSettings = true;
+        }
+
+        this.setState({...this.state, settings: {...this.state.settings, [name]: value},
+            unsavedMailSettings: changedMailSettings ? true : this.state.unsavedMailSettings
+        });
+    }
+
+    onReset(errorKey, keys) {
+        this.setState({...this.state, isResetting: true});
+
+        let values = {};
+        for (let key of keys) {
+            values[key] = this.state.settings[key];
+        }
+
+        let mailSettingsSaved = errorKey === "mailErrors";
+        this.parent.api.getSettings().then((res) => {
+            if (!res.success) {
+                let errors = this.state[errorKey].slice();
+                errors.push({title: "Error fetching settings", message: res.msg});
+                this.setState({...this.state, [errorKey]: errors, isResetting: false});
+            } else {
+                let newSettings = {...this.state.settings};
+                for (let key of keys) {
+                    newSettings[key] = res.settings[key] ?? "";
+                }
+                this.setState({...this.state, settings: newSettings, isResetting: false,
+                    unsavedMailSettings: mailSettingsSaved ? false : this.state.unsavedMailSettings});
+            }
+        });
+    }
+
+    onSave(errorKey, keys) {
+        this.setState({...this.state, isSaving: true});
+
+        let values = {};
+        for (let key of keys) {
+            if (key === "mail_password" && !this.state.settings[key]) {
+                continue;
+            }
+
+            values[key] = this.state.settings[key];
+        }
+
+        let mailSettingsSaved = errorKey === "mailErrors";
+        this.parent.api.saveSettings(values).then((res) => {
+            if (!res.success) {
+                let errors = this.state[errorKey].slice();
+                errors.push({title: "Error fetching settings", message: res.msg});
+                this.setState({...this.state, [errorKey]: errors, isSaving: false});
+            } else {
+                this.setState({...this.state, isSaving: false, unsavedMailSettings: mailSettingsSaved ? false : this.state.unsavedMailSettings });
+            }
+        });
+    }
+
+    onSendTestMail() {
+        this.setState({...this.state, isSending: true});
+
+        this.parent.api.sendTestMail(this.state.test_email).then((res) => {
+            let errors = this.state.mailErrors.slice();
+            if (!res.success) {
+                errors.push({title: "Error sending email", message: res.msg});
+                this.setState({...this.state, mailErrors: errors, isSending: false});
+            } else {
+                errors.push({
+                    title: "Success!",
+                    message: "E-Mail was successfully sent, check your inbox.",
+                    type: "success"
+                });
+                this.setState({...this.state, mailErrors: errors, isSending: false, test_email: ""});
+            }
+        });
     }
 }
\ No newline at end of file